@helsenorge/designsystem-react 2.15.0 → 2.16.0

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+## [2.15.0](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/branchCompare?baseVersion=GTv2.14.0&targetVersion=GTv2.15.0) (2023-02-09)
+
+
+### Features
+
+*  avatar har størrelse small og xsmall ([86a7dd4](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/86a7dd41d42588bc962137914bcb3f9e74863f3b))
+*  button ariaLabel mangel kaster bare error i dev ([89596fa](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/89596faeda26e45a32e759013edbda522c8ac4d9)), closes [#289312](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/289312)
+*  input har støtte for å telle antall tegn ([65eef57](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/65eef57f5dfddd4c5054a83cd821f477958c6df1)), closes [#291991](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/291991)
+*  legger til errorwrapper class ([5ca3378](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/5ca3378be19533b753db41a20f17243c4e231b52)), closes [#292556](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/292556)
+*  statusdot har attachment-variant ([dd27e68](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/dd27e68d6c888e8e2c65b8001c513d5e906319f2))
+*  SupportingPerson xs ikon ([138b3b5](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/138b3b5d0d264d6c6cc2f659e63fc09bc3f67669)), closes [#293547](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/293547)
+
+
+### Bug Fixes
+
+*  date-time eksempel colon fiks ([02f0331](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/02f03310626bf74878aba5889884c681bdde4fcd))
+*  linklist-item har ikke class=undefined når type=fill ([b54ca6a](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/b54ca6a454c80ee331e608a3a163c3eaebabdb2f)), closes [#294599](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/294599)
+*  listheader med avatar er default størrelse xsmall ([e67d447](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/e67d447ee7cc05a3d61263765556a34c8ef28d6b))
+*  login icon fill-rule fikset ([62dcd0f](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/62dcd0fc158d3699f51446c3304907a6ca4aa976))
+*  oppdatert geometri i ikonene til arrowleft og arrowright ([20ab9c5](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/20ab9c5cc60e11860dd2c046be6e2cdbf20060fb)), closes [#293341](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/293341)
+
 ## [2.14.0](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/branchCompare?baseVersion=GTv2.13.0&targetVersion=GTv2.14.0) (2023-02-01)
 
 
@@ -305,7 +326,7 @@
 
 ## 2.0.0-beta.1 (2022-09-15)
 
-## 2.0.0-beta.0 (2022-09-12)
+## 2.0.0-beta.0 (2022-09-15)
 
 
 ### Features
@@ -407,8 +428,8 @@
 
 ### Bug Fixes
 
-*  økt kontrast på understreking av lenker ([50b7fa4](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/50b7fa47fb44cb7d75fb877bd53e2309b35e1e21)), closes [#229049](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/229049)
 *  panel har avstand fra tittel til badge ([09034c4](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/09034c4844408c7cfe8f65d7a1a0d82a7828c2ef)), closes [#282359](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/282359)
+*  økt kontrast på understreking av lenker ([50b7fa4](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/commit/50b7fa47fb44cb7d75fb877bd53e2309b35e1e21)), closes [#229049](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/issues/229049)
 
 ## [1.2.2](https://dev.azure.com/nhnfelles/Helsenorge/_git/HN-Designsystem/branchCompare?baseVersion=GTv1.2.1&targetVersion=GTv1.2.2) (2022-08-31)
 

package/HorizontalScroll.js

@@ -1,2 +1,2 @@
-import t,{useRef as l}from"react";import e from"classnames";import{useIsVisible as n}from"./hooks/useIsVisible.js";import{useSize as v}from"./hooks/useSize.js";import o from"./components/HorizontalScroll/styles.module.scss";const c="3px",b=({children:a,childWidth:m})=>{const r=l(null),i=l(null),s=l(null),_=n(i,1,{root:r==null?void 0:r.current,rootMargin:c},!0),d=n(s,1,{root:r==null?void 0:r.current,rootMargin:c},!0),{width:h=0}=v(r)||{},f=m>h,u=e(o.horizontalscroll__viewport,f&&o["horizontalscroll__viewport--overflow"]);return t.createElement("div",{className:o.horizontalscroll},t.createElement("div",{className:u,ref:r},t.createElement("div",{className:e(o.horizontalscroll__indicator,o["horizontalscroll__indicator--left"],!_&&o["horizontalscroll__indicator--visible"])}),t.createElement("div",{className:e(o.horizontalscroll__indicator,o["horizontalscroll__indicator--right"],!d&&o["horizontalscroll__indicator--visible"])}),t.createElement("div",{ref:i}),a,t.createElement("div",{ref:s})))};export{b as H};
+import r,{useRef as l}from"react";import e from"classnames";import{useIsVisible as n}from"./hooks/useIsVisible.js";import{useSize as z}from"./hooks/useSize.js";import o from"./components/HorizontalScroll/styles.module.scss";const a="3px",I=({children:c,childWidth:m,testId:_})=>{const t=l(null),i=l(null),s=l(null),d=n(i,1,{root:t==null?void 0:t.current,rootMargin:a},!0),h=n(s,1,{root:t==null?void 0:t.current,rootMargin:a},!0),{width:f=0}=z(t)||{},u=m>f,v=e(o.horizontalscroll__viewport,u&&o["horizontalscroll__viewport--overflow"]);return r.createElement("div",{className:o.horizontalscroll,"data-testid":_},r.createElement("div",{className:v,ref:t,tabIndex:0},r.createElement("div",{className:e(o.horizontalscroll__indicator,o["horizontalscroll__indicator--left"],!d&&o["horizontalscroll__indicator--visible"])}),r.createElement("div",{className:e(o.horizontalscroll__indicator,o["horizontalscroll__indicator--right"],!h&&o["horizontalscroll__indicator--visible"])}),r.createElement("div",{ref:i}),c,r.createElement("div",{ref:s})))};export{I as H};
 //# sourceMappingURL=HorizontalScroll.js.map

package/HorizontalScroll.js.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalScroll.js","sources":["../src/components/HorizontalScroll/HorizontalScroll.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport classNames from 'classnames';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useSize } from '../../hooks/useSize';\nimport styles from './styles.module.scss';\n\n// Scrolle-indikator vises/skjules når det er x px igjen til venstre eller høyre side\nconst ROOT_MARGIN_OFFSET = '3px';\n\ninterface HorizontalScrollProps {\n  /**\n   * Bredden på elementet som potensielt vil scrolle horisontalt i px\n   */\n  childWidth: number;\n}\n\nexport const HorizontalScroll: React.FC<HorizontalScrollProps> = ({ children, childWidth }) => {\n  const viewportRef = useRef<HTMLDivElement>(null);\n  const leftRef = useRef<HTMLDivElement>(null);\n  const rightRef = useRef<HTMLDivElement>(null);\n  const leftIsVisible = useIsVisible(leftRef, 1, { root: viewportRef?.current, rootMargin: ROOT_MARGIN_OFFSET }, true);\n  const rightIsVisible = useIsVisible(rightRef, 1, { root: viewportRef?.current, rootMargin: ROOT_MARGIN_OFFSET }, true);\n  const { width: viewPortWidth = 0 } = useSize(viewportRef) || {};\n\n  const isOverflowing = childWidth > viewPortWidth;\n  const viewportClasses = classNames(styles.horizontalscroll__viewport, isOverflowing && styles['horizontalscroll__viewport--overflow']);\n\n  return (\n    <div className={styles.horizontalscroll}>\n      <div className={viewportClasses} ref={viewportRef}>\n        <div\n          className={classNames(\n            styles.horizontalscroll__indicator,\n            styles['horizontalscroll__indicator--left'],\n            !leftIsVisible && styles['horizontalscroll__indicator--visible']\n          )}\n        />\n        <div\n          className={classNames(\n            styles.horizontalscroll__indicator,\n            styles['horizontalscroll__indicator--right'],\n            !rightIsVisible && styles['horizontalscroll__indicator--visible']\n          )}\n        />\n        <div ref={leftRef} />\n        {children}\n        <div ref={rightRef} />\n      </div>\n    </div>\n  );\n};\n\nexport default HorizontalScroll;\n"],"names":["ROOT_MARGIN_OFFSET","HorizontalScroll","children","childWidth","viewportRef","useRef","leftRef","rightRef","leftIsVisible","useIsVisible","rightIsVisible","viewPortWidth","useSize","isOverflowing","viewportClasses","classNames","styles","React"],"mappings":"gOAOA,MAAMA,EAAqB,MASdC,EAAoD,CAAC,CAAE,SAAAC,EAAU,WAAAC,KAAiB,CACvF,MAAAC,EAAcC,EAAuB,IAAI,EACzCC,EAAUD,EAAuB,IAAI,EACrCE,EAAWF,EAAuB,IAAI,EACtCG,EAAgBC,EAAaH,EAAS,EAAG,CAAE,KAAMF,GAAA,YAAAA,EAAa,QAAS,WAAYJ,CAAmB,EAAG,EAAI,EAC7GU,EAAiBD,EAAaF,EAAU,EAAG,CAAE,KAAMH,GAAA,YAAAA,EAAa,QAAS,WAAYJ,CAAmB,EAAG,EAAI,EAC/G,CAAE,MAAOW,EAAgB,GAAMC,EAAQR,CAAW,GAAK,GAEvDS,EAAgBV,EAAaQ,EAC7BG,EAAkBC,EAAWC,EAAO,2BAA4BH,GAAiBG,EAAO,uCAAuC,EAErI,OACGC,EAAA,cAAA,MAAA,CAAI,UAAWD,EAAO,gBAAA,EACpBC,EAAA,cAAA,MAAA,CAAI,UAAWH,EAAiB,IAAKV,CAAA,EACnCa,EAAA,cAAA,MAAA,CACC,UAAWF,EACTC,EAAO,4BACPA,EAAO,qCACP,CAACR,GAAiBQ,EAAO,uCAC3B,CAAA,CACF,EACCC,EAAA,cAAA,MAAA,CACC,UAAWF,EACTC,EAAO,4BACPA,EAAO,sCACP,CAACN,GAAkBM,EAAO,uCAC5B,CAAA,CACF,EACCC,EAAA,cAAA,MAAA,CAAI,IAAKX,CAAS,CAAA,EAClBJ,EACAe,EAAA,cAAA,MAAA,CAAI,IAAKV,CAAU,CAAA,CACtB,CACF,CAEJ"}
+{"version":3,"file":"HorizontalScroll.js","sources":["../src/components/HorizontalScroll/HorizontalScroll.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport classNames from 'classnames';\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useSize } from '../../hooks/useSize';\nimport styles from './styles.module.scss';\n\n// Scrolle-indikator vises/skjules når det er x px igjen til venstre eller høyre side\nconst ROOT_MARGIN_OFFSET = '3px';\n\ninterface HorizontalScrollProps {\n  /**\n   * Bredden på elementet som potensielt vil scrolle horisontalt i px\n   */\n  childWidth: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const HorizontalScroll: React.FC<HorizontalScrollProps> = ({ children, childWidth, testId }) => {\n  const viewportRef = useRef<HTMLDivElement>(null);\n  const leftRef = useRef<HTMLDivElement>(null);\n  const rightRef = useRef<HTMLDivElement>(null);\n  const leftIsVisible = useIsVisible(leftRef, 1, { root: viewportRef?.current, rootMargin: ROOT_MARGIN_OFFSET }, true);\n  const rightIsVisible = useIsVisible(rightRef, 1, { root: viewportRef?.current, rootMargin: ROOT_MARGIN_OFFSET }, true);\n  const { width: viewPortWidth = 0 } = useSize(viewportRef) || {};\n\n  const isOverflowing = childWidth > viewPortWidth;\n  const viewportClasses = classNames(styles.horizontalscroll__viewport, isOverflowing && styles['horizontalscroll__viewport--overflow']);\n\n  return (\n    <div className={styles.horizontalscroll} data-testid={testId}>\n      <div className={viewportClasses} ref={viewportRef} tabIndex={0}>\n        <div\n          className={classNames(\n            styles.horizontalscroll__indicator,\n            styles['horizontalscroll__indicator--left'],\n            !leftIsVisible && styles['horizontalscroll__indicator--visible']\n          )}\n        />\n        <div\n          className={classNames(\n            styles.horizontalscroll__indicator,\n            styles['horizontalscroll__indicator--right'],\n            !rightIsVisible && styles['horizontalscroll__indicator--visible']\n          )}\n        />\n        <div ref={leftRef} />\n        {children}\n        <div ref={rightRef} />\n      </div>\n    </div>\n  );\n};\n\nexport default HorizontalScroll;\n"],"names":["ROOT_MARGIN_OFFSET","HorizontalScroll","children","childWidth","testId","viewportRef","useRef","leftRef","rightRef","leftIsVisible","useIsVisible","rightIsVisible","viewPortWidth","useSize","isOverflowing","viewportClasses","classNames","styles","React"],"mappings":"gOAOA,MAAMA,EAAqB,MAWdC,EAAoD,CAAC,CAAE,SAAAC,EAAU,WAAAC,EAAY,OAAAC,KAAa,CAC/F,MAAAC,EAAcC,EAAuB,IAAI,EACzCC,EAAUD,EAAuB,IAAI,EACrCE,EAAWF,EAAuB,IAAI,EACtCG,EAAgBC,EAAaH,EAAS,EAAG,CAAE,KAAMF,GAAA,YAAAA,EAAa,QAAS,WAAYL,CAAmB,EAAG,EAAI,EAC7GW,EAAiBD,EAAaF,EAAU,EAAG,CAAE,KAAMH,GAAA,YAAAA,EAAa,QAAS,WAAYL,CAAmB,EAAG,EAAI,EAC/G,CAAE,MAAOY,EAAgB,GAAMC,EAAQR,CAAW,GAAK,GAEvDS,EAAgBX,EAAaS,EAC7BG,EAAkBC,EAAWC,EAAO,2BAA4BH,GAAiBG,EAAO,uCAAuC,EAErI,OACGC,EAAA,cAAA,MAAA,CAAI,UAAWD,EAAO,iBAAkB,cAAab,CAAA,EACnDc,EAAA,cAAA,MAAA,CAAI,UAAWH,EAAiB,IAAKV,EAAa,SAAU,CAAA,EAC1Da,EAAA,cAAA,MAAA,CACC,UAAWF,EACTC,EAAO,4BACPA,EAAO,qCACP,CAACR,GAAiBQ,EAAO,uCAC3B,CAAA,CACF,EACCC,EAAA,cAAA,MAAA,CACC,UAAWF,EACTC,EAAO,4BACPA,EAAO,sCACP,CAACN,GAAkBM,EAAO,uCAC5B,CAAA,CACF,EACCC,EAAA,cAAA,MAAA,CAAI,IAAKX,CAAS,CAAA,EAClBL,EACAgB,EAAA,cAAA,MAAA,CAAI,IAAKV,CAAU,CAAA,CACtB,CACF,CAEJ"}

package/ListHeader.js

@@ -1,2 +1,2 @@
-import a from"react";import h from"classnames";import{a as y,A as z}from"./Avatar.js";import{B as A}from"./Badge.js";import{L as k}from"./ListHeaderText.js";import t from"./components/ListHeader/styles.module.scss";import{useBreakpoint as B,Breakpoint as R}from"./hooks/useBreakpoint.js";import{Icon as w}from"./components/Icons/Icon.js";import{IconSize as v}from"./constants.js";import{isComponent as C}from"./utils/component.js";const P=(o,_,d,c,s,l)=>{if(C(o,u))return a.cloneElement(o,{chevronIcon:d,icon:l,isHovered:c,size:s});if(o)return a.createElement(u,{titleHtmlMarkup:_,chevronIcon:d,icon:l,isHovered:c,size:s},o)},E=(o,_=!1)=>{var p,f,m,n;let d,c;const s=[],l=[],i=[];a.Children.forEach(o,e=>{e===null||typeof e>"u"||(C(e,z)?d=e:C(e,k)?s.push(e):C(e,A)?c=e:typeof e=="string"?l.push(e):i.push(e))});const g=d!==void 0||s.length>0||c!==void 0&&l.length>0,r=i.length===0||typeof((f=(p=i[0])==null?void 0:p.props)==null?void 0:f.children)>"u";return _||g||r?{avatarChild:d,listHeaderTextChildren:s,badgeChild:c,stringChildren:l,remainingChildren:i}:E((n=(m=i[0])==null?void 0:m.props)==null?void 0:n.children,!0)},u=a.forwardRef((o,_)=>{const{className:d="",titleHtmlMarkup:c="h2",chevronIcon:s,children:l,icon:i,isHovered:g,size:r,testId:p}=o,f=B(),m=r!=="small"&&!!(s||i),n=typeof l=="string",e=E(l),b=e.avatarChild||e.listHeaderTextChildren&&e.listHeaderTextChildren.length>0||e.remainingChildren&&e.remainingChildren.length>0,N=h(t["list-header"],{[t["list-header--for-element-content"]]:!n,[t["list-header--top-align-content"]]:b},d),x=h(t["list-header__badge"],{[t["list-header__badge--for-string-content"]]:n,[t["list-header__badge--right"]]:!n,[t["list-header__badge--"+r]]:!n&&r}),H=h(t["list-header__chevron"],{[t["list-header__chevron--for-string-content"]]:n,[t["list-header__chevron--right"]]:!e.badgeChild,[t["list-header__chevron--"+r]]:!n&&r}),S=h(t["list-header__content"],{[t["list-header__content--string"]]:n,[t["list-header__content--element"]]:!n,[t["list-header__content--spacing"]]:!e.avatarChild&&!i}),I=h(t["list-header__icon"],{[t["list-header__icon--for-string-content"]]:n,[t["list-header__icon--for-element-content"]]:!n,[t["list-header__icon--for-element-content--"+r]]:!n&&r}),L=h(t["list-header__avatar"],{[t["list-header__avatar--for-string-content"]]:n,[t["list-header__avatar--for-element-content"]]:!n,[t["list-header__avatar--for-element-content--"+r]]:!n&&r}),T=c;return a.createElement("div",{"data-testid":p,className:N},m&&i&&a.createElement("span",{className:I},a.cloneElement(i,{size:f===R.xs?v.XSmall:v.Small,isHovered:g})),r!=="small"&&e.avatarChild&&a.createElement("span",{className:L},a.cloneElement(e.avatarChild,{size:y.xsmall})),a.createElement("div",{className:S},e.listHeaderTextChildren,!!e.stringChildren.length&&a.createElement(T,{className:t["list-header__title"]},e.stringChildren),e.remainingChildren),e.badgeChild&&a.createElement("span",{className:x},e.badgeChild),m&&s&&a.createElement("span",{className:H},a.createElement(w,{svgIcon:s,isHovered:g,size:v.XSmall})))});export{u as L,E as m,P as r};
+import a from"react";import m from"classnames";import{a as y,A as z}from"./Avatar.js";import{B as A}from"./Badge.js";import{L as k}from"./ListHeaderText.js";import t from"./components/ListHeader/styles.module.scss";import{useBreakpoint as B,Breakpoint as R}from"./hooks/useBreakpoint.js";import{Icon as w}from"./components/Icons/Icon.js";import{IconSize as v}from"./constants.js";import{isComponent as C}from"./utils/component.js";const P=(o,_,d,c,s,l)=>{if(C(o,u))return a.cloneElement(o,{chevronIcon:d,icon:l,isHovered:c,size:s});if(o)return a.createElement(u,{titleHtmlMarkup:_,chevronIcon:d,icon:l,isHovered:c,size:s},o)},E=(o,_=!1)=>{var f,g,h,n;let d,c;const s=[],l=[],i=[];a.Children.forEach(o,e=>{e===null||typeof e>"u"||(C(e,z)?d=e:C(e,k)?s.push(e):C(e,A)?c=e:typeof e=="string"?l.push(e):i.push(e))});const p=d!==void 0||s.length>0||c!==void 0&&l.length>0,r=i.length===0||typeof((g=(f=i[0])==null?void 0:f.props)==null?void 0:g.children)>"u";return _||p||r?{avatarChild:d,listHeaderTextChildren:s,badgeChild:c,stringChildren:l,remainingChildren:i}:E((n=(h=i[0])==null?void 0:h.props)==null?void 0:n.children,!0)},u=a.forwardRef((o,_)=>{const{className:d="",titleHtmlMarkup:c="h2",chevronIcon:s,children:l,icon:i,isHovered:p,size:r,testId:f}=o,g=B(),h=r!=="small"&&!!(s||i),n=typeof l=="string",e=E(l),b=e.avatarChild||e.listHeaderTextChildren&&e.listHeaderTextChildren.length>0||e.remainingChildren&&e.remainingChildren.length>0,N=m(t["list-header"],{[t["list-header--for-element-content"]]:!n,[t["list-header--top-align-content"]]:b},d),x=m(t["list-header__badge"],{[t["list-header__badge--for-string-content"]]:n,[t["list-header__badge--right"]]:!n,[t["list-header__badge--"+r]]:!n&&r}),H=m(t["list-header__chevron"],{[t["list-header__chevron--for-string-content"]]:n,[t["list-header__chevron--"+r]]:!n&&r}),S=m(t["list-header__content"],{[t["list-header__content--string"]]:n,[t["list-header__content--element"]]:!n,[t["list-header__content--spacing"]]:!e.avatarChild&&!i}),I=m(t["list-header__icon"],{[t["list-header__icon--for-string-content"]]:n,[t["list-header__icon--for-element-content"]]:!n,[t["list-header__icon--for-element-content--"+r]]:!n&&r}),L=m(t["list-header__avatar"],{[t["list-header__avatar--for-string-content"]]:n,[t["list-header__avatar--for-element-content"]]:!n,[t["list-header__avatar--for-element-content--"+r]]:!n&&r}),T=c;return a.createElement("div",{"data-testid":f,className:N},h&&i&&a.createElement("span",{className:I},a.cloneElement(i,{size:g===R.xs?v.XSmall:v.Small,isHovered:p})),r!=="small"&&e.avatarChild&&a.createElement("span",{className:L},a.cloneElement(e.avatarChild,{size:y.xsmall})),a.createElement("div",{className:S},e.listHeaderTextChildren,!!e.stringChildren.length&&a.createElement(T,{className:t["list-header__title"]},e.stringChildren),e.remainingChildren),e.badgeChild&&a.createElement("span",{className:x},e.badgeChild),h&&s&&a.createElement("span",{className:H},a.createElement(w,{svgIcon:s,isHovered:p,size:v.XSmall})))});export{u as L,E as m,P as r};
 //# sourceMappingURL=ListHeader.js.map

package/ListHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListHeader.js","sources":["../src/components/ListHeader/ListHeader.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nimport Avatar, { AvatarProps, AvatarSize, AvatarType } from '../Avatar';\nimport Badge, { BadgeProps, BadgeType } from '../Badge';\nimport ListHeaderText, { ListHeaderTextProps, ListHeaderTextType } from './ListHeaderText/ListHeaderText';\n\nimport styles from './styles.module.scss';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport Icon, { IconSize, SvgIcon } from '../Icons';\nimport { isComponent } from '../../utils/component';\nimport { TitleTags } from '../Title';\n\nexport type ListHeaderSize = 'small' | 'medium' | 'large';\n\nexport interface ListHeaderType extends React.ForwardRefExoticComponent<ListHeaderProps & React.RefAttributes<HTMLLIElement>> {\n  Avatar?: AvatarType;\n  Badge?: BadgeType;\n  ListHeaderText?: ListHeaderTextType;\n}\n\nexport const renderListHeader = (\n  element: React.ReactNode,\n  titleHtmlMarkup: TitleTags,\n  chevronIcon: SvgIcon,\n  isHovered: boolean,\n  size: ListHeaderSize,\n  icon?: React.ReactElement\n): JSX.Element | undefined => {\n  if (isComponent<ListHeaderProps>(element, ListHeader)) {\n    return React.cloneElement(element, {\n      chevronIcon,\n      icon,\n      isHovered,\n      size,\n    });\n  }\n  if (element) {\n    return (\n      <ListHeader titleHtmlMarkup={titleHtmlMarkup} chevronIcon={chevronIcon} icon={icon} isHovered={isHovered} size={size}>\n        {element}\n      </ListHeader>\n    );\n  }\n};\n\nexport interface ListHeaderProps {\n  /** Adds custom classes to the ListHeader element. */\n  className?: string;\n  /** Chevron to render inside of the ListHeader */\n  chevronIcon?: SvgIcon;\n  /** Children to be rendered inside of ListHeader */\n  children: React.ReactNode;\n  /** Changes the underlying element of the title. Default: h2*/\n  titleHtmlMarkup?: TitleTags;\n  /** icon to be rendered inside of ListHeader */\n  icon?: React.ReactElement;\n  /** whether or not the parent is hovered */\n  isHovered?: boolean;\n  /** Changes size of the ListHeader. */\n  size?: ListHeaderSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const mapChildren = (\n  children: React.ReactNode,\n  isJsxChild = false\n): {\n  avatarChild?: React.ReactElement<AvatarProps>;\n  listHeaderTextChildren: Array<React.ReactElement<ListHeaderTextProps>>;\n  badgeChild?: React.ReactElement<BadgeProps>;\n  stringChildren: Array<string>;\n  remainingChildren: Array<any>;\n} => {\n  let avatarChild: React.ReactElement<AvatarProps> | undefined;\n  let badgeChild: React.ReactElement<BadgeProps> | undefined;\n  const listHeaderTextChildren: Array<React.ReactElement<ListHeaderTextProps>> = [];\n  const stringChildren: Array<string> = [];\n  const remainingChildren: Array<any> = [];\n\n  React.Children.forEach(children, child => {\n    if (child === null || typeof child === 'undefined') return;\n    if (isComponent<AvatarProps>(child, Avatar)) {\n      avatarChild = child;\n    } else if (isComponent<ListHeaderTextProps>(child, ListHeaderText)) {\n      listHeaderTextChildren.push(child);\n    } else if (isComponent<BadgeProps>(child, Badge)) {\n      badgeChild = child;\n    } else if (typeof child === 'string') {\n      stringChildren.push(child);\n    } else {\n      remainingChildren.push(child);\n    }\n  });\n\n  // Dette og recursive mapChildren under(gjøres en gang) er for å passe på at jsx children også sjekkes for Avatar og liknende innhold.\n  // Slik opprettholder vi stylingen i tilfeller hvor vertikaler har wrappet elementer i en parent span eller div.\n  const hasSpecialChildren =\n    avatarChild !== undefined || listHeaderTextChildren.length > 0 || (badgeChild !== undefined && stringChildren.length > 0);\n  const noRemainingRecursiveChildren = remainingChildren.length === 0 || typeof remainingChildren[0]?.props?.children === 'undefined';\n\n  return isJsxChild || hasSpecialChildren || noRemainingRecursiveChildren\n    ? { avatarChild, listHeaderTextChildren, badgeChild, stringChildren, remainingChildren }\n    : mapChildren(remainingChildren[0]?.props?.children, true);\n};\n\nexport const ListHeader: ListHeaderType = React.forwardRef((props: ListHeaderProps, ref: React.Ref<HTMLLIElement>) => {\n  const { className = '', titleHtmlMarkup = 'h2', chevronIcon, children, icon, isHovered, size, testId } = props;\n  const breakpoint = useBreakpoint();\n  const showChevronAndIcon = size !== 'small' && !!(chevronIcon || icon);\n  const contentIsString = typeof children === 'string';\n  const mappedChildren = mapChildren(children);\n  const topAlignContent =\n    mappedChildren.avatarChild ||\n    (mappedChildren.listHeaderTextChildren && mappedChildren.listHeaderTextChildren.length > 0) ||\n    (mappedChildren.remainingChildren && mappedChildren.remainingChildren.length > 0);\n\n  const listLabelClasses = cn(\n    styles['list-header'],\n    {\n      [styles['list-header--for-element-content']]: !contentIsString,\n      [styles['list-header--top-align-content']]: topAlignContent,\n    },\n    className\n  );\n  const badgeClasses = cn(styles['list-header__badge'], {\n    [styles['list-header__badge--for-string-content']]: contentIsString,\n    [styles['list-header__badge--right']]: !contentIsString,\n    [styles['list-header__badge--' + size]]: !contentIsString && size,\n  });\n  const chevronClasses = cn(styles['list-header__chevron'], {\n    [styles['list-header__chevron--for-string-content']]: contentIsString,\n    [styles['list-header__chevron--right']]: !mappedChildren.badgeChild,\n    [styles['list-header__chevron--' + size]]: !contentIsString && size,\n  });\n  const contentClasses = cn(styles['list-header__content'], {\n    [styles['list-header__content--string']]: contentIsString,\n    [styles['list-header__content--element']]: !contentIsString,\n    [styles['list-header__content--spacing']]: !mappedChildren.avatarChild && !icon,\n  });\n  const iconClasses = cn(styles['list-header__icon'], {\n    [styles['list-header__icon--for-string-content']]: contentIsString,\n    [styles['list-header__icon--for-element-content']]: !contentIsString,\n    [styles['list-header__icon--for-element-content--' + size]]: !contentIsString && size,\n  });\n  const avatarClasses = cn(styles['list-header__avatar'], {\n    [styles['list-header__avatar--for-string-content']]: contentIsString,\n    [styles['list-header__avatar--for-element-content']]: !contentIsString,\n    [styles['list-header__avatar--for-element-content--' + size]]: !contentIsString && size,\n  });\n  const CustomTag = titleHtmlMarkup;\n  return (\n    <div data-testid={testId} className={listLabelClasses}>\n      {showChevronAndIcon && icon && (\n        <span className={iconClasses}>\n          {React.cloneElement(icon, {\n            size: breakpoint === Breakpoint.xs ? IconSize.XSmall : IconSize.Small,\n            isHovered,\n          })}\n        </span>\n      )}\n      {size !== 'small' && mappedChildren.avatarChild && (\n        <span className={avatarClasses}>{React.cloneElement(mappedChildren.avatarChild, { size: AvatarSize.xsmall })}</span>\n      )}\n      <div className={contentClasses}>\n        {mappedChildren.listHeaderTextChildren}\n        {!!mappedChildren.stringChildren.length && (\n          <CustomTag className={styles['list-header__title']}>{mappedChildren.stringChildren}</CustomTag>\n        )}\n        {mappedChildren.remainingChildren}\n      </div>\n\n      {mappedChildren.badgeChild && <span className={badgeClasses}>{mappedChildren.badgeChild}</span>}\n      {showChevronAndIcon && chevronIcon && (\n        <span className={chevronClasses}>\n          <Icon svgIcon={chevronIcon} isHovered={isHovered} size={IconSize.XSmall} />\n        </span>\n      )}\n    </div>\n  );\n});\n\nexport default ListHeader;\n"],"names":["renderListHeader","element","titleHtmlMarkup","chevronIcon","isHovered","size","icon","isComponent","ListHeader","React","mapChildren","children","isJsxChild","avatarChild","badgeChild","listHeaderTextChildren","stringChildren","remainingChildren","child","Avatar","ListHeaderText","Badge","hasSpecialChildren","noRemainingRecursiveChildren","_b","_a","_d","_c","props","ref","className","testId","breakpoint","useBreakpoint","showChevronAndIcon","contentIsString","mappedChildren","topAlignContent","listLabelClasses","cn","styles","badgeClasses","chevronClasses","contentClasses","iconClasses","avatarClasses","CustomTag","Breakpoint","IconSize","AvatarSize","Icon"],"mappings":"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"}
+{"version":3,"file":"ListHeader.js","sources":["../src/components/ListHeader/ListHeader.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nimport Avatar, { AvatarProps, AvatarSize, AvatarType } from '../Avatar';\nimport Badge, { BadgeProps, BadgeType } from '../Badge';\nimport ListHeaderText, { ListHeaderTextProps, ListHeaderTextType } from './ListHeaderText/ListHeaderText';\n\nimport styles from './styles.module.scss';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport Icon, { IconSize, SvgIcon } from '../Icons';\nimport { isComponent } from '../../utils/component';\nimport { TitleTags } from '../Title';\n\nexport type ListHeaderSize = 'small' | 'medium' | 'large';\n\nexport interface ListHeaderType extends React.ForwardRefExoticComponent<ListHeaderProps & React.RefAttributes<HTMLLIElement>> {\n  Avatar?: AvatarType;\n  Badge?: BadgeType;\n  ListHeaderText?: ListHeaderTextType;\n}\n\nexport const renderListHeader = (\n  element: React.ReactNode,\n  titleHtmlMarkup: TitleTags,\n  chevronIcon: SvgIcon,\n  isHovered: boolean,\n  size: ListHeaderSize,\n  icon?: React.ReactElement\n): JSX.Element | undefined => {\n  if (isComponent<ListHeaderProps>(element, ListHeader)) {\n    return React.cloneElement(element, {\n      chevronIcon,\n      icon,\n      isHovered,\n      size,\n    });\n  }\n  if (element) {\n    return (\n      <ListHeader titleHtmlMarkup={titleHtmlMarkup} chevronIcon={chevronIcon} icon={icon} isHovered={isHovered} size={size}>\n        {element}\n      </ListHeader>\n    );\n  }\n};\n\nexport interface ListHeaderProps {\n  /** Adds custom classes to the ListHeader element. */\n  className?: string;\n  /** Chevron to render inside of the ListHeader */\n  chevronIcon?: SvgIcon;\n  /** Children to be rendered inside of ListHeader */\n  children: React.ReactNode;\n  /** Changes the underlying element of the title. Default: h2*/\n  titleHtmlMarkup?: TitleTags;\n  /** icon to be rendered inside of ListHeader */\n  icon?: React.ReactElement;\n  /** whether or not the parent is hovered */\n  isHovered?: boolean;\n  /** Changes size of the ListHeader. */\n  size?: ListHeaderSize;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const mapChildren = (\n  children: React.ReactNode,\n  isJsxChild = false\n): {\n  avatarChild?: React.ReactElement<AvatarProps>;\n  listHeaderTextChildren: Array<React.ReactElement<ListHeaderTextProps>>;\n  badgeChild?: React.ReactElement<BadgeProps>;\n  stringChildren: Array<string>;\n  remainingChildren: Array<any>;\n} => {\n  let avatarChild: React.ReactElement<AvatarProps> | undefined;\n  let badgeChild: React.ReactElement<BadgeProps> | undefined;\n  const listHeaderTextChildren: Array<React.ReactElement<ListHeaderTextProps>> = [];\n  const stringChildren: Array<string> = [];\n  const remainingChildren: Array<any> = [];\n\n  React.Children.forEach(children, child => {\n    if (child === null || typeof child === 'undefined') return;\n    if (isComponent<AvatarProps>(child, Avatar)) {\n      avatarChild = child;\n    } else if (isComponent<ListHeaderTextProps>(child, ListHeaderText)) {\n      listHeaderTextChildren.push(child);\n    } else if (isComponent<BadgeProps>(child, Badge)) {\n      badgeChild = child;\n    } else if (typeof child === 'string') {\n      stringChildren.push(child);\n    } else {\n      remainingChildren.push(child);\n    }\n  });\n\n  // Dette og recursive mapChildren under(gjøres en gang) er for å passe på at jsx children også sjekkes for Avatar og liknende innhold.\n  // Slik opprettholder vi stylingen i tilfeller hvor vertikaler har wrappet elementer i en parent span eller div.\n  const hasSpecialChildren =\n    avatarChild !== undefined || listHeaderTextChildren.length > 0 || (badgeChild !== undefined && stringChildren.length > 0);\n  const noRemainingRecursiveChildren = remainingChildren.length === 0 || typeof remainingChildren[0]?.props?.children === 'undefined';\n\n  return isJsxChild || hasSpecialChildren || noRemainingRecursiveChildren\n    ? { avatarChild, listHeaderTextChildren, badgeChild, stringChildren, remainingChildren }\n    : mapChildren(remainingChildren[0]?.props?.children, true);\n};\n\nexport const ListHeader: ListHeaderType = React.forwardRef((props: ListHeaderProps, ref: React.Ref<HTMLLIElement>) => {\n  const { className = '', titleHtmlMarkup = 'h2', chevronIcon, children, icon, isHovered, size, testId } = props;\n  const breakpoint = useBreakpoint();\n  const showChevronAndIcon = size !== 'small' && !!(chevronIcon || icon);\n  const contentIsString = typeof children === 'string';\n  const mappedChildren = mapChildren(children);\n  const topAlignContent =\n    mappedChildren.avatarChild ||\n    (mappedChildren.listHeaderTextChildren && mappedChildren.listHeaderTextChildren.length > 0) ||\n    (mappedChildren.remainingChildren && mappedChildren.remainingChildren.length > 0);\n\n  const listLabelClasses = cn(\n    styles['list-header'],\n    {\n      [styles['list-header--for-element-content']]: !contentIsString,\n      [styles['list-header--top-align-content']]: topAlignContent,\n    },\n    className\n  );\n  const badgeClasses = cn(styles['list-header__badge'], {\n    [styles['list-header__badge--for-string-content']]: contentIsString,\n    [styles['list-header__badge--right']]: !contentIsString,\n    [styles['list-header__badge--' + size]]: !contentIsString && size,\n  });\n  const chevronClasses = cn(styles['list-header__chevron'], {\n    [styles['list-header__chevron--for-string-content']]: contentIsString,\n    [styles['list-header__chevron--' + size]]: !contentIsString && size,\n  });\n  const contentClasses = cn(styles['list-header__content'], {\n    [styles['list-header__content--string']]: contentIsString,\n    [styles['list-header__content--element']]: !contentIsString,\n    [styles['list-header__content--spacing']]: !mappedChildren.avatarChild && !icon,\n  });\n  const iconClasses = cn(styles['list-header__icon'], {\n    [styles['list-header__icon--for-string-content']]: contentIsString,\n    [styles['list-header__icon--for-element-content']]: !contentIsString,\n    [styles['list-header__icon--for-element-content--' + size]]: !contentIsString && size,\n  });\n  const avatarClasses = cn(styles['list-header__avatar'], {\n    [styles['list-header__avatar--for-string-content']]: contentIsString,\n    [styles['list-header__avatar--for-element-content']]: !contentIsString,\n    [styles['list-header__avatar--for-element-content--' + size]]: !contentIsString && size,\n  });\n  const CustomTag = titleHtmlMarkup;\n  return (\n    <div data-testid={testId} className={listLabelClasses}>\n      {showChevronAndIcon && icon && (\n        <span className={iconClasses}>\n          {React.cloneElement(icon, {\n            size: breakpoint === Breakpoint.xs ? IconSize.XSmall : IconSize.Small,\n            isHovered,\n          })}\n        </span>\n      )}\n      {size !== 'small' && mappedChildren.avatarChild && (\n        <span className={avatarClasses}>{React.cloneElement(mappedChildren.avatarChild, { size: AvatarSize.xsmall })}</span>\n      )}\n      <div className={contentClasses}>\n        {mappedChildren.listHeaderTextChildren}\n        {!!mappedChildren.stringChildren.length && (\n          <CustomTag className={styles['list-header__title']}>{mappedChildren.stringChildren}</CustomTag>\n        )}\n        {mappedChildren.remainingChildren}\n      </div>\n\n      {mappedChildren.badgeChild && <span className={badgeClasses}>{mappedChildren.badgeChild}</span>}\n      {showChevronAndIcon && chevronIcon && (\n        <span className={chevronClasses}>\n          <Icon svgIcon={chevronIcon} isHovered={isHovered} size={IconSize.XSmall} />\n        </span>\n      )}\n    </div>\n  );\n});\n\nexport default ListHeader;\n"],"names":["renderListHeader","element","titleHtmlMarkup","chevronIcon","isHovered","size","icon","isComponent","ListHeader","React","mapChildren","children","isJsxChild","avatarChild","badgeChild","listHeaderTextChildren","stringChildren","remainingChildren","child","Avatar","ListHeaderText","Badge","hasSpecialChildren","noRemainingRecursiveChildren","_b","_a","_d","_c","props","ref","className","testId","breakpoint","useBreakpoint","showChevronAndIcon","contentIsString","mappedChildren","topAlignContent","listLabelClasses","cn","styles","badgeClasses","chevronClasses","contentClasses","iconClasses","avatarClasses","CustomTag","Breakpoint","IconSize","AvatarSize","Icon"],"mappings":"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"}

package/Panel.js

@@ -1,2 +1,2 @@
-import t,{useState as ce,useEffect as D}from"react";import o from"classnames";import e from"./components/Panel/styles.module.scss";import{T as pe}from"./Title.js";import{B as $}from"./Button.js";import{AnalyticsId as me,IconSize as B}from"./constants.js";import{Icon as u}from"./components/Icons/Icon.js";import de from"./components/Icons/ChevronDown.js";import ue from"./components/Icons/ChevronUp.js";import fe from"./components/Icons/ArrowRight.js";import _e from"./components/Icons/AlertSignFill.js";import{palette as j}from"./theme/palette.js";import ye from"./components/Icons/Pencil.js";import be from"./components/Icons/Calendar.js";import Ee from"./components/Icons/Watch.js";import{useBreakpoint as ge,Breakpoint as W}from"./hooks/useBreakpoint.js";import{useUuid as X}from"./hooks/useUuid.js";import{usePrevious as ve}from"./hooks/usePrevious.js";import{getAriaLabelAttributes as he}from"./utils/accessibility.js";import{B as Ce}from"./Badge.js";var we=(a=>(a.normal="normal",a.new="new",a.error="error",a.draft="draft",a))(we||{}),Ne=(a=>(a.fill="fill",a.white="white",a.stroke="stroke",a.line="line",a))(Ne||{}),Ie=(a=>(a.layout1="layout1",a.layout2="layout2",a.layout3a="layout3a",a.layout3b="layout3b",a.layout3c="layout3c",a))(Ie||{});const ke=({status:a,statusMessage:s})=>{const g=()=>a==="error"?{color:j.cherry500,svgIcon:_e}:{color:j.black,svgIcon:ye},i=o(e["status-message"],{[e["status-message--new"]]:a==="new"});return(a==="error"||a==="draft")&&s?t.createElement("div",{className:i,"data-testid":"display-status"},t.createElement(u,{...g(),size:B.XSmall})," ",t.createElement("span",null,s)):null},F=({date:a,time:s})=>a||s?t.createElement("div",{className:e["datetime-container"],"data-testid":"datetime"},a&&t.createElement("div",{className:e["datetime-container__icon"]},t.createElement(u,{svgIcon:be,size:B.XSmall}),t.createElement("span",null,a)),s&&t.createElement("div",{className:e["datetime-container__icon"]},t.createElement(u,{svgIcon:Ee,size:B.XSmall}),t.createElement("span",null,s))):null,Je=t.forwardRef(function(s,g){const{children:i,contentA:H,contentB:r,className:U,testId:L,title:v,titleHtmlMarkup:O="h2",url:f,target:q="_self",icon:c,iconRight:x=!1,variant:p="fill",status:m="normal",statusMessage:h,buttonText:A="Se detaljer",buttonTextClose:G="Skjul detaljer",buttonAriaLabelledById:S,buttonAriaLabel:J,layout:n="layout2",containerAsButton:C=!1,date:w,time:N,noTopBorder:K,buttonOnClick:d,buttonHtmlMarkup:Q="a",expanded:_=!1,onExpand:y,renderChildrenWhenClosed:Y=!1}=s,[l,T]=ce(_),Z=ve(l),I=X(),b=X(),R=ge(),M=h&&m==="new";D(()=>{_!==l&&T(_)},[_]),D(()=>{y&&l!==!!Z&&y(l)},[l,y]);const E=["layout3a".toString(),"layout3b".toString(),"layout3c".toString()].includes(n),P=o(e["panel-wrapper"],U),V=o(e.panel,{[e["panel--fill"]]:p==="fill",[e["panel--stroke"]]:p==="stroke",[e["panel--white"]]:p==="white",[e["panel--line"]]:p==="line",[e["panel--no-top-border"]]:p==="line"&&K,[e["panel--selected"]]:l,[e["panel--new"]]:m==="new",[e["panel--draft"]]:m==="draft",[e["panel--error"]]:m==="error",[e["panel--status"]]:m&&m!=="normal",[e["panel--with-icon"]]:c,[e["panel--button"]]:C,[e["panel--clickable"]]:i||f||y||d||C}),ee=o({[e.panel__container]:n==="layout2"&&r,[e["panel__container--layout3"]]:E&&r,[e["panel__container--grow"]]:c}),te=o({[e["panel-content-a"]]:n==="layout2",[e["panel-content-a--layout3a"]]:n==="layout3a",[e["panel-content-a--layout3b"]]:n==="layout3b",[e["panel-content-a--layout3c"]]:n==="layout3c"}),ae=o({[e["panel__content-right--layout1"]]:r&&n==="layout1",[e["panel__content-right--layout2"]]:r&&n==="layout2",[e["panel__content-right--layout3"]]:r&&E,[e["panel__content-right--layout3a"]]:r&&n==="layout3a",[e["panel__content-right--layout3b"]]:r&&n==="layout3b",[e["panel__content-right--layout3c"]]:r&&n==="layout3c"}),ne=o(e["panel-content-b"],{[e["panel-content-b--layout1"]]:n==="layout1",[e["panel-content-b--layout3"]]:E}),le=o(e["panel__details-btn"]),re=o(e["panel-content-a__title"],{[e["panel-content-a__title--badge"]]:M}),oe=()=>{const k=he({label:J,id:S&&`${b} ${S}`||v&&I&&`${b} ${I}`,prefer:"label"}),z={onClick:d||(()=>T(!l)),className:C?e.panel__expand:void 0,variant:"borderless",ellipsis:!0,...k};return i?t.createElement($,{testId:"expand","aria-expanded":l,...z},t.createElement("span",{id:b},l?G:A),t.createElement(u,{svgIcon:l?ue:de})):t.createElement($,{testId:"url",htmlMarkup:Q,href:f,target:q,...z},t.createElement("span",{id:b},A),t.createElement(u,{svgIcon:fe}))},se=o(e["panel__btn-container"],{[e["panel__btn-container--layout3"]]:E,[e["panel__btn-container--padding-top"]]:r}),ie=()=>{if(!i||!Y&&!l)return null;const k=o(e["panel-details"],{[e["panel-details--open"]]:l,[e["panel-details--line"]]:p==="line",[e["panel-details--white"]]:p==="white",[e["panel-details--with-icon"]]:c});return t.createElement("div",{className:k,"data-testid":"panel-details"},t.createElement("div",null,i))};return t.createElement("div",{ref:g,"data-testid":L,className:P,"data-analyticsid":me.Panel},t.createElement("div",{className:V},c&&!x&&t.createElement("div",{className:e.panel__icon},c),t.createElement("div",{className:ee},t.createElement("div",{className:te},t.createElement(ke,{status:m,statusMessage:h}),v&&t.createElement("div",{className:e["panel-content-a__title-container"]},t.createElement(pe,{appearance:"title3",htmlMarkup:O,id:I,className:re},v),M&&t.createElement("div",{className:e.panel__badge},t.createElement(Ce,{color:"blueberry",testId:"badge-status"},h))),H,R>=W.lg&&t.createElement(F,{date:w,time:N})),t.createElement("div",{className:ae},r&&t.createElement("div",{className:ne},r),(i||f||w||N||d)&&t.createElement("div",{className:se},R<W.lg&&t.createElement(F,{date:w,time:N}),(i||f||d)&&t.createElement("div",{className:le},oe())))),c&&x&&t.createElement("div",{className:e["panel__icon--right"]},c)),ie())});export{Je as P,we as a,Ne as b,Ie as c};
+import t,{useState as oe,useEffect as z}from"react";import o from"classnames";import e from"./components/Panel/styles.module.scss";import{T as se}from"./Title.js";import{B as D}from"./Button.js";import{AnalyticsId as ie,IconSize as I}from"./constants.js";import{Icon as u}from"./components/Icons/Icon.js";import ce from"./components/Icons/ChevronDown.js";import me from"./components/Icons/ChevronUp.js";import pe from"./components/Icons/ArrowRight.js";import de from"./components/Icons/AlertSignFill.js";import{palette as $}from"./theme/palette.js";import ue from"./components/Icons/Pencil.js";import fe from"./components/Icons/Calendar.js";import _e from"./components/Icons/Watch.js";import{useUuid as j}from"./hooks/useUuid.js";import{usePrevious as ye}from"./hooks/usePrevious.js";import{getAriaLabelAttributes as be}from"./utils/accessibility.js";import{B as Ee}from"./Badge.js";var ve=(a=>(a.normal="normal",a.new="new",a.error="error",a.draft="draft",a))(ve||{}),ge=(a=>(a.fill="fill",a.white="white",a.stroke="stroke",a.line="line",a))(ge||{}),he=(a=>(a.layout1="layout1",a.layout2="layout2",a.layout3a="layout3a",a.layout3b="layout3b",a.layout3c="layout3c",a))(he||{});const Ce=({status:a,statusMessage:s})=>{const v=()=>a==="error"?{color:$.cherry500,svgIcon:de}:{color:$.black,svgIcon:ue},i=o(e["status-message"],{[e["status-message--new"]]:a==="new"});return(a==="error"||a==="draft")&&s?t.createElement("div",{className:i,"data-testid":"display-status"},t.createElement(u,{...v(),size:I.XSmall})," ",t.createElement("span",null,s)):null},we=({date:a,time:s})=>a||s?t.createElement("div",{className:e["datetime-container"],"data-testid":"datetime"},a&&t.createElement("div",{className:e["datetime-container__icon"]},t.createElement(u,{svgIcon:fe,size:I.XSmall}),t.createElement("span",null,a)),s&&t.createElement("div",{className:e["datetime-container__icon"]},t.createElement(u,{svgIcon:_e,size:I.XSmall}),t.createElement("span",null,s))):null,Le=t.forwardRef(function(s,v){const{children:i,contentA:W,contentB:r,className:X,testId:F,title:g,titleHtmlMarkup:H="h2",url:f,target:U="_self",icon:c,iconRight:k=!1,variant:m="fill",status:p="normal",statusMessage:h,buttonText:x="Se detaljer",buttonTextClose:L="Skjul detaljer",buttonAriaLabelledById:B,buttonAriaLabel:O,layout:n="layout2",containerAsButton:C=!1,date:A,time:S,noTopBorder:q,buttonOnClick:d,buttonHtmlMarkup:G="a",expanded:_=!1,onExpand:y,renderChildrenWhenClosed:J=!1}=s,[l,T]=oe(_),K=ye(l),w=j(),b=j(),R=h&&p==="new";z(()=>{_!==l&&T(_)},[_]),z(()=>{y&&l!==!!K&&y(l)},[l,y]);const E=["layout3a".toString(),"layout3b".toString(),"layout3c".toString()].includes(n),Q=o(e["panel-wrapper"],X),Y=o(e.panel,{[e["panel--fill"]]:m==="fill",[e["panel--stroke"]]:m==="stroke",[e["panel--white"]]:m==="white",[e["panel--line"]]:m==="line",[e["panel--no-top-border"]]:m==="line"&&q,[e["panel--selected"]]:l,[e["panel--new"]]:p==="new",[e["panel--draft"]]:p==="draft",[e["panel--error"]]:p==="error",[e["panel--status"]]:p&&p!=="normal",[e["panel--with-icon"]]:c,[e["panel--button"]]:C,[e["panel--clickable"]]:i||f||y||d||C}),Z=o({[e.panel__container]:n==="layout2"&&r,[e["panel__container--layout3"]]:E&&r,[e["panel__container--grow"]]:c}),P=o({[e["panel-content-a"]]:n==="layout2",[e["panel-content-a--layout3a"]]:n==="layout3a",[e["panel-content-a--layout3b"]]:n==="layout3b",[e["panel-content-a--layout3c"]]:n==="layout3c"}),V=o({[e["panel__content-right--layout1"]]:r&&n==="layout1",[e["panel__content-right--layout2"]]:r&&n==="layout2",[e["panel__content-right--layout3"]]:r&&E,[e["panel__content-right--layout3a"]]:r&&n==="layout3a",[e["panel__content-right--layout3b"]]:r&&n==="layout3b",[e["panel__content-right--layout3c"]]:r&&n==="layout3c"}),ee=o(e["panel-content-b"],{[e["panel-content-b--layout1"]]:n==="layout1",[e["panel-content-b--layout3"]]:E}),te=o(e["panel__details-btn"]),ae=o(e["panel-content-a__title"],{[e["panel-content-a__title--badge"]]:R}),ne=()=>{const N=be({label:O,id:B&&`${b} ${B}`||g&&w&&`${b} ${w}`,prefer:"label"}),M={onClick:d||(()=>T(!l)),className:C?e.panel__expand:void 0,variant:"borderless",ellipsis:!0,...N};return i?t.createElement(D,{testId:"expand","aria-expanded":l,...M},t.createElement("span",{id:b},l?L:x),t.createElement(u,{svgIcon:l?me:ce})):t.createElement(D,{testId:"url",htmlMarkup:G,href:f,target:U,...M},t.createElement("span",{id:b},x),t.createElement(u,{svgIcon:pe}))},le=o(e["panel__btn-container"],{[e["panel__btn-container--layout3"]]:E,[e["panel__btn-container--padding-top"]]:r}),re=()=>{if(!i||!J&&!l)return null;const N=o(e["panel-details"],{[e["panel-details--open"]]:l,[e["panel-details--line"]]:m==="line",[e["panel-details--white"]]:m==="white",[e["panel-details--with-icon"]]:c});return t.createElement("div",{className:N,"data-testid":"panel-details"},t.createElement("div",null,i))};return t.createElement("div",{ref:v,"data-testid":F,className:Q,"data-analyticsid":ie.Panel},t.createElement("div",{className:Y},c&&!k&&t.createElement("div",{className:e.panel__icon},c),t.createElement("div",{className:Z},t.createElement("div",{className:P},t.createElement(Ce,{status:p,statusMessage:h}),g&&t.createElement("div",{className:e["panel-content-a__title-container"]},t.createElement(se,{appearance:"title3",htmlMarkup:H,id:w,className:ae},g),R&&t.createElement("div",{className:e.panel__badge},t.createElement(Ee,{color:"blueberry",testId:"badge-status"},h))),W),t.createElement("div",{className:V},r&&t.createElement("div",{className:ee},r),(i||f||A||S||d)&&t.createElement("div",{className:le},t.createElement(we,{date:A,time:S}),(i||f||d)&&t.createElement("div",{className:te},ne())))),c&&k&&t.createElement("div",{className:e["panel__icon--right"]},c)),re())});export{Le as P,ve as a,ge as b,he as c};
 //# sourceMappingURL=Panel.js.map

package/Panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.js","sources":["../src/components/Panel/Panel.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport classNames from 'classnames';\n\nimport panelStyles from './styles.module.scss';\nimport Title, { TitleTags } from '../Title';\nimport Button, { ButtonProps, ButtonTags } from '../Button';\nimport { AnchorTarget, AnalyticsId } from '../../constants';\n\nimport Icon, { IconSize, SvgPathProps } from '../Icons';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport ArrowRight from '../Icons/ArrowRight';\nimport AlertSignFill from '../Icons/AlertSignFill';\nimport { palette } from '../../theme/palette';\nimport Pencil from '../Icons/Pencil';\nimport Calendar from '../Icons/Calendar';\nimport Watch from '../Icons/Watch';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useUuid } from '../../hooks/useUuid';\nimport { usePrevious } from '../../hooks/usePrevious';\nimport { AriaLabelAttributes, getAriaLabelAttributes } from '../../utils/accessibility';\nimport Badge from '../Badge';\n\nexport enum PanelStatus {\n  normal = 'normal',\n  new = 'new',\n  error = 'error',\n  draft = 'draft',\n}\n\nexport enum PanelVariant {\n  fill = 'fill',\n  white = 'white',\n  stroke = 'stroke',\n  line = 'line',\n}\n\nexport enum PanelLayout {\n  layout1 = 'layout1',\n  layout2 = 'layout2',\n  layout3a = 'layout3a',\n  layout3b = 'layout3b',\n  layout3c = 'layout3c',\n}\n\nexport interface PanelProps {\n  children?: React.ReactNode;\n  /** Title of the panel */\n  title?: string;\n  /** Changes the underlying element of the title. Default: h2*/\n  titleHtmlMarkup?: TitleTags;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Displays a status on the left side: defualt normal */\n  status?: keyof typeof PanelStatus;\n  /** Displayed on top of the panel with a status icon */\n  statusMessage?: string;\n  /** Changes the visual representation of the panel. */\n  variant?: keyof typeof PanelVariant;\n  /** Url to details, renders as a button with anchor tag */\n  url?: string;\n  /** target used in the button: default is _self */\n  target?: AnchorTarget;\n  /** Icon displayed in title */\n  icon?: React.ReactNode;\n  /** Display icon on right */\n  iconRight?: boolean;\n  /** Panel section A content */\n  contentA?: React.ReactNode | string;\n  /** Panel section B content*/\n  contentB?: React.ReactNode | string;\n  /** Panel button text */\n  buttonText?: string;\n  /** Panel button close text */\n  buttonTextClose?: string;\n  /** HTML markup for panel button. Default: a */\n  buttonHtmlMarkup?: ButtonTags;\n  /** Callback when panel button is clicked  */\n  buttonOnClick?: ButtonProps['onClick'];\n  /** Panel button is aria-labelledby the text in the button itself + the element set in buttonAriaLabelledById. Default: auto-generated id for title (if title is set). */\n  buttonAriaLabelledById?: string;\n  /** Panel button aria label */\n  buttonAriaLabel?: string;\n  /** Show close button in bottom of Panel Expand */\n  /** @deprecated Has no effect anymore due to accessbility reasons. No close button is shown in expanded content. Will be removed in 2.0.0 */\n  showCloseButtonInExpand?: boolean;\n  /** Layout (see description) */\n  layout?: keyof typeof PanelLayout;\n  /** Clicking anywhere on the container will trigger a click on the panel's button */\n  containerAsButton?: boolean;\n  /** Displays time with icon */\n  time?: string;\n  /** Displays date with icon */\n  date?: string;\n  /** Removes top border when variant is \"line\" */\n  noTopBorder?: boolean;\n  /** Opens or closes the panel */\n  expanded?: boolean;\n  /** Called when panel is open/closed. */\n  onExpand?: (isExpanded: boolean) => void;\n  /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */\n  renderChildrenWhenClosed?: boolean;\n}\n\nconst StatusText: React.FC<{ status?: keyof typeof PanelStatus; statusMessage?: string }> = ({ status, statusMessage }) => {\n  const statusIcon = (): { color: string; svgIcon: React.FC<SvgPathProps> } => {\n    if (status === PanelStatus.error) {\n      return { color: palette.cherry500, svgIcon: AlertSignFill };\n    }\n\n    return { color: palette.black, svgIcon: Pencil };\n  };\n\n  const statusMessageClass = classNames(panelStyles['status-message'], {\n    [panelStyles['status-message--new']]: status === PanelStatus.new,\n  });\n\n  if ((status === PanelStatus.error || status === PanelStatus.draft) && statusMessage) {\n    return (\n      <div className={statusMessageClass} data-testid=\"display-status\">\n        {<Icon {...statusIcon()} size={IconSize.XSmall} />} <span>{statusMessage}</span>\n      </div>\n    );\n  }\n\n  return null;\n};\n\nconst DateTime: React.FC<{ date?: string; time?: string }> = ({ date, time }) => {\n  if (date || time) {\n    return (\n      <div className={panelStyles['datetime-container']} data-testid=\"datetime\">\n        {date && (\n          <div className={panelStyles['datetime-container__icon']}>\n            <Icon svgIcon={Calendar} size={IconSize.XSmall} />\n            <span>{date}</span>\n          </div>\n        )}\n        {time && (\n          <div className={panelStyles['datetime-container__icon']}>\n            <Icon svgIcon={Watch} size={IconSize.XSmall} />\n            <span>{time}</span>\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  return null;\n};\n\nconst Panel = React.forwardRef(function PanelForwardedRef(props: PanelProps, ref: React.ForwardedRef<HTMLHeadingElement>) {\n  const {\n    children,\n    contentA,\n    contentB,\n    className,\n    testId,\n    title,\n    titleHtmlMarkup = 'h2',\n    url,\n    target = '_self',\n    icon,\n    iconRight = false,\n    variant = PanelVariant.fill,\n    status = PanelStatus.normal,\n    statusMessage,\n    buttonText = 'Se detaljer',\n    buttonTextClose = 'Skjul detaljer',\n    buttonAriaLabelledById,\n    buttonAriaLabel,\n    layout = PanelLayout.layout2,\n    containerAsButton = false,\n    date,\n    time,\n    noTopBorder,\n    buttonOnClick,\n    buttonHtmlMarkup = 'a',\n    expanded = false,\n    onExpand,\n    renderChildrenWhenClosed = false,\n  } = props;\n\n  const [isExpanded, setIsExpanded] = useState<boolean>(expanded);\n  const previousIsExpanded = usePrevious(isExpanded);\n  const titleId = useUuid();\n  const buttonTextId = useUuid();\n  const breakpoint = useBreakpoint();\n  const hasBadge = statusMessage && status === PanelStatus.new;\n\n  useEffect(() => {\n    if (expanded !== isExpanded) {\n      setIsExpanded(expanded);\n    }\n  }, [expanded]);\n\n  useEffect(() => {\n    if (onExpand && isExpanded !== !!previousIsExpanded) {\n      onExpand(isExpanded);\n    }\n  }, [isExpanded, onExpand]);\n\n  const layout3 = [PanelLayout.layout3a.toString(), PanelLayout.layout3b.toString(), PanelLayout.layout3c.toString()].includes(layout);\n\n  const panelWrapperClass = classNames(panelStyles['panel-wrapper'], className);\n\n  const panelClasses = classNames(panelStyles.panel, {\n    [panelStyles['panel--fill']]: variant === PanelVariant.fill,\n    [panelStyles['panel--stroke']]: variant === PanelVariant.stroke,\n    [panelStyles['panel--white']]: variant === PanelVariant.white,\n    [panelStyles['panel--line']]: variant === PanelVariant.line,\n    [panelStyles['panel--no-top-border']]: variant === PanelVariant.line && noTopBorder,\n    [panelStyles['panel--selected']]: isExpanded,\n    [panelStyles['panel--new']]: status === PanelStatus.new,\n    [panelStyles['panel--draft']]: status === PanelStatus.draft,\n    [panelStyles['panel--error']]: status === PanelStatus.error,\n    [panelStyles['panel--status']]: status && status !== PanelStatus.normal,\n    [panelStyles['panel--with-icon']]: icon,\n    [panelStyles['panel--button']]: containerAsButton,\n    [panelStyles['panel--clickable']]: children || url || onExpand || buttonOnClick || containerAsButton,\n  });\n\n  const panelContainer = classNames({\n    [panelStyles['panel__container']]: layout === PanelLayout.layout2 && contentB,\n    [panelStyles['panel__container--layout3']]: layout3 && contentB,\n    [panelStyles['panel__container--grow']]: icon,\n  });\n\n  const panelContentLeftClass = classNames({\n    [panelStyles['panel-content-a']]: layout === PanelLayout.layout2,\n    [panelStyles['panel-content-a--layout3a']]: layout === PanelLayout.layout3a,\n    [panelStyles['panel-content-a--layout3b']]: layout === PanelLayout.layout3b,\n    [panelStyles['panel-content-a--layout3c']]: layout === PanelLayout.layout3c,\n  });\n\n  const panelContentRightClass = classNames({\n    [panelStyles['panel__content-right--layout1']]: contentB && layout === PanelLayout.layout1,\n    [panelStyles['panel__content-right--layout2']]: contentB && layout === PanelLayout.layout2,\n    [panelStyles['panel__content-right--layout3']]: contentB && layout3,\n    [panelStyles['panel__content-right--layout3a']]: contentB && layout === PanelLayout.layout3a,\n    [panelStyles['panel__content-right--layout3b']]: contentB && layout === PanelLayout.layout3b,\n    [panelStyles['panel__content-right--layout3c']]: contentB && layout === PanelLayout.layout3c,\n  });\n\n  const panelContentBClass = classNames(panelStyles['panel-content-b'], {\n    [panelStyles['panel-content-b--layout1']]: layout === PanelLayout.layout1,\n    [panelStyles['panel-content-b--layout3']]: layout3,\n  });\n\n  const panelActionBtnClass = classNames(panelStyles['panel__details-btn']);\n  const titleClasses = classNames(panelStyles['panel-content-a__title'], { [panelStyles['panel-content-a__title--badge']]: hasBadge });\n\n  const renderDetailsButton = (): JSX.Element => {\n    const ariaLabelAttributes = getAriaLabelAttributes({\n      label: buttonAriaLabel,\n      id: (buttonAriaLabelledById && `${buttonTextId} ${buttonAriaLabelledById}`) || (title && titleId && `${buttonTextId} ${titleId}`),\n      prefer: 'label',\n    });\n\n    const commonProps: Partial<ButtonProps> & AriaLabelAttributes = {\n      onClick: buttonOnClick ? buttonOnClick : () => setIsExpanded(!isExpanded),\n      className: containerAsButton ? panelStyles['panel__expand'] : undefined,\n      variant: 'borderless',\n      ellipsis: true,\n      ...ariaLabelAttributes,\n    };\n\n    if (!!children) {\n      return (\n        <Button testId=\"expand\" aria-expanded={isExpanded} {...commonProps}>\n          <span id={buttonTextId}>{isExpanded ? buttonTextClose : buttonText}</span>\n          <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} />\n        </Button>\n      );\n    }\n\n    return (\n      <Button testId=\"url\" htmlMarkup={buttonHtmlMarkup} href={url} target={target} {...commonProps}>\n        <span id={buttonTextId}>{buttonText}</span>\n        <Icon svgIcon={ArrowRight} />\n      </Button>\n    );\n  };\n\n  const btnContainerClass = classNames(panelStyles['panel__btn-container'], {\n    [panelStyles['panel__btn-container--layout3']]: layout3,\n    [panelStyles['panel__btn-container--padding-top']]: contentB,\n  });\n\n  const renderContent = () => {\n    if (!children) {\n      return null;\n    }\n    if (!renderChildrenWhenClosed && !isExpanded) {\n      return null;\n    }\n\n    const panelDetailsClasses = classNames(panelStyles['panel-details'], {\n      [panelStyles['panel-details--open']]: isExpanded,\n      [panelStyles['panel-details--line']]: variant === PanelVariant.line,\n      [panelStyles['panel-details--white']]: variant === PanelVariant.white,\n      [panelStyles['panel-details--with-icon']]: icon,\n    });\n\n    return (\n      <div className={panelDetailsClasses} data-testid=\"panel-details\">\n        <div>{children}</div>\n      </div>\n    );\n  };\n\n  return (\n    <div ref={ref} data-testid={testId} className={panelWrapperClass} data-analyticsid={AnalyticsId.Panel}>\n      <div className={panelClasses}>\n        {icon && !iconRight && <div className={panelStyles.panel__icon}>{icon}</div>}\n        <div className={panelContainer}>\n          <div className={panelContentLeftClass}>\n            <StatusText status={status} statusMessage={statusMessage} />\n            {title && (\n              <div className={panelStyles['panel-content-a__title-container']}>\n                <Title appearance=\"title3\" htmlMarkup={titleHtmlMarkup} id={titleId} className={titleClasses}>\n                  {title}\n                </Title>\n                {hasBadge && (\n                  <div className={panelStyles.panel__badge}>\n                    <Badge color=\"blueberry\" testId=\"badge-status\">\n                      {statusMessage}\n                    </Badge>\n                  </div>\n                )}\n              </div>\n            )}\n            {contentA}\n            {breakpoint >= Breakpoint.lg && <DateTime date={date} time={time} />}\n          </div>\n          <div className={panelContentRightClass}>\n            {contentB && <div className={panelContentBClass}>{contentB}</div>}\n            {(children || url || date || time || buttonOnClick) && (\n              <div className={btnContainerClass}>\n                {breakpoint < Breakpoint.lg && <DateTime date={date} time={time} />}\n                {(children || url || buttonOnClick) && <div className={panelActionBtnClass}>{renderDetailsButton()}</div>}\n              </div>\n            )}\n          </div>\n        </div>\n        {icon && iconRight && <div className={panelStyles['panel__icon--right']}>{icon}</div>}\n      </div>\n      {renderContent()}\n    </div>\n  );\n});\n\nexport default Panel;\n"],"names":["PanelStatus","PanelVariant","PanelLayout","StatusText","status","statusMessage","statusIcon","palette","AlertSignFill","Pencil","statusMessageClass","classNames","panelStyles","React","Icon","IconSize","DateTime","date","time","Calendar","Watch","Panel","props","ref","children","contentA","contentB","className","testId","title","titleHtmlMarkup","url","target","icon","iconRight","variant","buttonText","buttonTextClose","buttonAriaLabelledById","buttonAriaLabel","layout","containerAsButton","noTopBorder","buttonOnClick","buttonHtmlMarkup","expanded","onExpand","renderChildrenWhenClosed","isExpanded","setIsExpanded","useState","previousIsExpanded","usePrevious","titleId","useUuid","buttonTextId","breakpoint","useBreakpoint","hasBadge","useEffect","layout3","panelWrapperClass","panelClasses","panelContainer","panelContentLeftClass","panelContentRightClass","panelContentBClass","panelActionBtnClass","titleClasses","renderDetailsButton","ariaLabelAttributes","getAriaLabelAttributes","commonProps","Button","ChevronUp","ChevronDown","ArrowRight","btnContainerClass","renderContent","panelDetailsClasses","AnalyticsId","Title","Badge","Breakpoint"],"mappings":"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"}
+{"version":3,"file":"Panel.js","sources":["../src/components/Panel/Panel.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport classNames from 'classnames';\n\nimport panelStyles from './styles.module.scss';\nimport Title, { TitleTags } from '../Title';\nimport Button, { ButtonProps, ButtonTags } from '../Button';\nimport { AnchorTarget, AnalyticsId } from '../../constants';\n\nimport Icon, { IconSize, SvgPathProps } from '../Icons';\nimport ChevronDown from '../Icons/ChevronDown';\nimport ChevronUp from '../Icons/ChevronUp';\nimport ArrowRight from '../Icons/ArrowRight';\nimport AlertSignFill from '../Icons/AlertSignFill';\nimport { palette } from '../../theme/palette';\nimport Pencil from '../Icons/Pencil';\nimport Calendar from '../Icons/Calendar';\nimport Watch from '../Icons/Watch';\nimport { useUuid } from '../../hooks/useUuid';\nimport { usePrevious } from '../../hooks/usePrevious';\nimport { AriaLabelAttributes, getAriaLabelAttributes } from '../../utils/accessibility';\nimport Badge from '../Badge';\n\nexport enum PanelStatus {\n  normal = 'normal',\n  new = 'new',\n  error = 'error',\n  draft = 'draft',\n}\n\nexport enum PanelVariant {\n  fill = 'fill',\n  white = 'white',\n  stroke = 'stroke',\n  line = 'line',\n}\n\nexport enum PanelLayout {\n  layout1 = 'layout1',\n  layout2 = 'layout2',\n  layout3a = 'layout3a',\n  layout3b = 'layout3b',\n  layout3c = 'layout3c',\n}\n\nexport interface PanelProps {\n  children?: React.ReactNode;\n  /** Title of the panel */\n  title?: string;\n  /** Changes the underlying element of the title. Default: h2*/\n  titleHtmlMarkup?: TitleTags;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Displays a status on the left side: defualt normal */\n  status?: keyof typeof PanelStatus;\n  /** Displayed on top of the panel with a status icon */\n  statusMessage?: string;\n  /** Changes the visual representation of the panel. */\n  variant?: keyof typeof PanelVariant;\n  /** Url to details, renders as a button with anchor tag */\n  url?: string;\n  /** target used in the button: default is _self */\n  target?: AnchorTarget;\n  /** Icon displayed in title */\n  icon?: React.ReactNode;\n  /** Display icon on right */\n  iconRight?: boolean;\n  /** Panel section A content */\n  contentA?: React.ReactNode | string;\n  /** Panel section B content*/\n  contentB?: React.ReactNode | string;\n  /** Panel button text */\n  buttonText?: string;\n  /** Panel button close text */\n  buttonTextClose?: string;\n  /** HTML markup for panel button. Default: a */\n  buttonHtmlMarkup?: ButtonTags;\n  /** Callback when panel button is clicked  */\n  buttonOnClick?: ButtonProps['onClick'];\n  /** Panel button is aria-labelledby the text in the button itself + the element set in buttonAriaLabelledById. Default: auto-generated id for title (if title is set). */\n  buttonAriaLabelledById?: string;\n  /** Panel button aria label */\n  buttonAriaLabel?: string;\n  /** Show close button in bottom of Panel Expand */\n  /** @deprecated Has no effect anymore due to accessbility reasons. No close button is shown in expanded content. Will be removed in 2.0.0 */\n  showCloseButtonInExpand?: boolean;\n  /** Layout (see description) */\n  layout?: keyof typeof PanelLayout;\n  /** Clicking anywhere on the container will trigger a click on the panel's button */\n  containerAsButton?: boolean;\n  /** Displays time with icon */\n  time?: string;\n  /** Displays date with icon */\n  date?: string;\n  /** Removes top border when variant is \"line\" */\n  noTopBorder?: boolean;\n  /** Opens or closes the panel */\n  expanded?: boolean;\n  /** Called when panel is open/closed. */\n  onExpand?: (isExpanded: boolean) => void;\n  /** Whether to render children when closed (in which case they are hidden with CSS). Default: false */\n  renderChildrenWhenClosed?: boolean;\n}\n\nconst StatusText: React.FC<{ status?: keyof typeof PanelStatus; statusMessage?: string }> = ({ status, statusMessage }) => {\n  const statusIcon = (): { color: string; svgIcon: React.FC<SvgPathProps> } => {\n    if (status === PanelStatus.error) {\n      return { color: palette.cherry500, svgIcon: AlertSignFill };\n    }\n\n    return { color: palette.black, svgIcon: Pencil };\n  };\n\n  const statusMessageClass = classNames(panelStyles['status-message'], {\n    [panelStyles['status-message--new']]: status === PanelStatus.new,\n  });\n\n  if ((status === PanelStatus.error || status === PanelStatus.draft) && statusMessage) {\n    return (\n      <div className={statusMessageClass} data-testid=\"display-status\">\n        {<Icon {...statusIcon()} size={IconSize.XSmall} />} <span>{statusMessage}</span>\n      </div>\n    );\n  }\n\n  return null;\n};\n\nconst DateTime: React.FC<{ date?: string; time?: string }> = ({ date, time }) => {\n  if (date || time) {\n    return (\n      <div className={panelStyles['datetime-container']} data-testid=\"datetime\">\n        {date && (\n          <div className={panelStyles['datetime-container__icon']}>\n            <Icon svgIcon={Calendar} size={IconSize.XSmall} />\n            <span>{date}</span>\n          </div>\n        )}\n        {time && (\n          <div className={panelStyles['datetime-container__icon']}>\n            <Icon svgIcon={Watch} size={IconSize.XSmall} />\n            <span>{time}</span>\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  return null;\n};\n\nconst Panel = React.forwardRef(function PanelForwardedRef(props: PanelProps, ref: React.ForwardedRef<HTMLHeadingElement>) {\n  const {\n    children,\n    contentA,\n    contentB,\n    className,\n    testId,\n    title,\n    titleHtmlMarkup = 'h2',\n    url,\n    target = '_self',\n    icon,\n    iconRight = false,\n    variant = PanelVariant.fill,\n    status = PanelStatus.normal,\n    statusMessage,\n    buttonText = 'Se detaljer',\n    buttonTextClose = 'Skjul detaljer',\n    buttonAriaLabelledById,\n    buttonAriaLabel,\n    layout = PanelLayout.layout2,\n    containerAsButton = false,\n    date,\n    time,\n    noTopBorder,\n    buttonOnClick,\n    buttonHtmlMarkup = 'a',\n    expanded = false,\n    onExpand,\n    renderChildrenWhenClosed = false,\n  } = props;\n\n  const [isExpanded, setIsExpanded] = useState<boolean>(expanded);\n  const previousIsExpanded = usePrevious(isExpanded);\n  const titleId = useUuid();\n  const buttonTextId = useUuid();\n  const hasBadge = statusMessage && status === PanelStatus.new;\n\n  useEffect(() => {\n    if (expanded !== isExpanded) {\n      setIsExpanded(expanded);\n    }\n  }, [expanded]);\n\n  useEffect(() => {\n    if (onExpand && isExpanded !== !!previousIsExpanded) {\n      onExpand(isExpanded);\n    }\n  }, [isExpanded, onExpand]);\n\n  const layout3 = [PanelLayout.layout3a.toString(), PanelLayout.layout3b.toString(), PanelLayout.layout3c.toString()].includes(layout);\n\n  const panelWrapperClass = classNames(panelStyles['panel-wrapper'], className);\n\n  const panelClasses = classNames(panelStyles.panel, {\n    [panelStyles['panel--fill']]: variant === PanelVariant.fill,\n    [panelStyles['panel--stroke']]: variant === PanelVariant.stroke,\n    [panelStyles['panel--white']]: variant === PanelVariant.white,\n    [panelStyles['panel--line']]: variant === PanelVariant.line,\n    [panelStyles['panel--no-top-border']]: variant === PanelVariant.line && noTopBorder,\n    [panelStyles['panel--selected']]: isExpanded,\n    [panelStyles['panel--new']]: status === PanelStatus.new,\n    [panelStyles['panel--draft']]: status === PanelStatus.draft,\n    [panelStyles['panel--error']]: status === PanelStatus.error,\n    [panelStyles['panel--status']]: status && status !== PanelStatus.normal,\n    [panelStyles['panel--with-icon']]: icon,\n    [panelStyles['panel--button']]: containerAsButton,\n    [panelStyles['panel--clickable']]: children || url || onExpand || buttonOnClick || containerAsButton,\n  });\n\n  const panelContainer = classNames({\n    [panelStyles['panel__container']]: layout === PanelLayout.layout2 && contentB,\n    [panelStyles['panel__container--layout3']]: layout3 && contentB,\n    [panelStyles['panel__container--grow']]: icon,\n  });\n\n  const panelContentLeftClass = classNames({\n    [panelStyles['panel-content-a']]: layout === PanelLayout.layout2,\n    [panelStyles['panel-content-a--layout3a']]: layout === PanelLayout.layout3a,\n    [panelStyles['panel-content-a--layout3b']]: layout === PanelLayout.layout3b,\n    [panelStyles['panel-content-a--layout3c']]: layout === PanelLayout.layout3c,\n  });\n\n  const panelContentRightClass = classNames({\n    [panelStyles['panel__content-right--layout1']]: contentB && layout === PanelLayout.layout1,\n    [panelStyles['panel__content-right--layout2']]: contentB && layout === PanelLayout.layout2,\n    [panelStyles['panel__content-right--layout3']]: contentB && layout3,\n    [panelStyles['panel__content-right--layout3a']]: contentB && layout === PanelLayout.layout3a,\n    [panelStyles['panel__content-right--layout3b']]: contentB && layout === PanelLayout.layout3b,\n    [panelStyles['panel__content-right--layout3c']]: contentB && layout === PanelLayout.layout3c,\n  });\n\n  const panelContentBClass = classNames(panelStyles['panel-content-b'], {\n    [panelStyles['panel-content-b--layout1']]: layout === PanelLayout.layout1,\n    [panelStyles['panel-content-b--layout3']]: layout3,\n  });\n\n  const panelActionBtnClass = classNames(panelStyles['panel__details-btn']);\n  const titleClasses = classNames(panelStyles['panel-content-a__title'], { [panelStyles['panel-content-a__title--badge']]: hasBadge });\n\n  const renderDetailsButton = (): JSX.Element => {\n    const ariaLabelAttributes = getAriaLabelAttributes({\n      label: buttonAriaLabel,\n      id: (buttonAriaLabelledById && `${buttonTextId} ${buttonAriaLabelledById}`) || (title && titleId && `${buttonTextId} ${titleId}`),\n      prefer: 'label',\n    });\n\n    const commonProps: Partial<ButtonProps> & AriaLabelAttributes = {\n      onClick: buttonOnClick ? buttonOnClick : () => setIsExpanded(!isExpanded),\n      className: containerAsButton ? panelStyles['panel__expand'] : undefined,\n      variant: 'borderless',\n      ellipsis: true,\n      ...ariaLabelAttributes,\n    };\n\n    if (!!children) {\n      return (\n        <Button testId=\"expand\" aria-expanded={isExpanded} {...commonProps}>\n          <span id={buttonTextId}>{isExpanded ? buttonTextClose : buttonText}</span>\n          <Icon svgIcon={isExpanded ? ChevronUp : ChevronDown} />\n        </Button>\n      );\n    }\n\n    return (\n      <Button testId=\"url\" htmlMarkup={buttonHtmlMarkup} href={url} target={target} {...commonProps}>\n        <span id={buttonTextId}>{buttonText}</span>\n        <Icon svgIcon={ArrowRight} />\n      </Button>\n    );\n  };\n\n  const btnContainerClass = classNames(panelStyles['panel__btn-container'], {\n    [panelStyles['panel__btn-container--layout3']]: layout3,\n    [panelStyles['panel__btn-container--padding-top']]: contentB,\n  });\n\n  const renderContent = () => {\n    if (!children) {\n      return null;\n    }\n    if (!renderChildrenWhenClosed && !isExpanded) {\n      return null;\n    }\n\n    const panelDetailsClasses = classNames(panelStyles['panel-details'], {\n      [panelStyles['panel-details--open']]: isExpanded,\n      [panelStyles['panel-details--line']]: variant === PanelVariant.line,\n      [panelStyles['panel-details--white']]: variant === PanelVariant.white,\n      [panelStyles['panel-details--with-icon']]: icon,\n    });\n\n    return (\n      <div className={panelDetailsClasses} data-testid=\"panel-details\">\n        <div>{children}</div>\n      </div>\n    );\n  };\n\n  return (\n    <div ref={ref} data-testid={testId} className={panelWrapperClass} data-analyticsid={AnalyticsId.Panel}>\n      <div className={panelClasses}>\n        {icon && !iconRight && <div className={panelStyles.panel__icon}>{icon}</div>}\n        <div className={panelContainer}>\n          <div className={panelContentLeftClass}>\n            <StatusText status={status} statusMessage={statusMessage} />\n            {title && (\n              <div className={panelStyles['panel-content-a__title-container']}>\n                <Title appearance=\"title3\" htmlMarkup={titleHtmlMarkup} id={titleId} className={titleClasses}>\n                  {title}\n                </Title>\n                {hasBadge && (\n                  <div className={panelStyles.panel__badge}>\n                    <Badge color=\"blueberry\" testId=\"badge-status\">\n                      {statusMessage}\n                    </Badge>\n                  </div>\n                )}\n              </div>\n            )}\n            {contentA}\n          </div>\n          <div className={panelContentRightClass}>\n            {contentB && <div className={panelContentBClass}>{contentB}</div>}\n            {(children || url || date || time || buttonOnClick) && (\n              <div className={btnContainerClass}>\n                {<DateTime date={date} time={time} />}\n                {(children || url || buttonOnClick) && <div className={panelActionBtnClass}>{renderDetailsButton()}</div>}\n              </div>\n            )}\n          </div>\n        </div>\n        {icon && iconRight && <div className={panelStyles['panel__icon--right']}>{icon}</div>}\n      </div>\n      {renderContent()}\n    </div>\n  );\n});\n\nexport default Panel;\n"],"names":["PanelStatus","PanelVariant","PanelLayout","StatusText","status","statusMessage","statusIcon","palette","AlertSignFill","Pencil","statusMessageClass","classNames","panelStyles","React","Icon","IconSize","DateTime","date","time","Calendar","Watch","Panel","props","ref","children","contentA","contentB","className","testId","title","titleHtmlMarkup","url","target","icon","iconRight","variant","buttonText","buttonTextClose","buttonAriaLabelledById","buttonAriaLabel","layout","containerAsButton","noTopBorder","buttonOnClick","buttonHtmlMarkup","expanded","onExpand","renderChildrenWhenClosed","isExpanded","setIsExpanded","useState","previousIsExpanded","usePrevious","titleId","useUuid","buttonTextId","hasBadge","useEffect","layout3","panelWrapperClass","panelClasses","panelContainer","panelContentLeftClass","panelContentRightClass","panelContentBClass","panelActionBtnClass","titleClasses","renderDetailsButton","ariaLabelAttributes","getAriaLabelAttributes","commonProps","Button","ChevronUp","ChevronDown","ArrowRight","btnContainerClass","renderContent","panelDetailsClasses","AnalyticsId","Title","Badge"],"mappings":"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"}

package/TableExpandedRow.js

@@ -1,2 +1,2 @@
-import t from"react";import o from"classnames";import e from"./components/Table/styles.module.scss";import{B as b}from"./Button.js";import{Icon as i}from"./components/Icons/Icon.js";import _ from"./components/Icons/ChevronUp.js";const N=function({numberOfColumns:r,expanded:a,hideDetailsText:l,toggleClick:s,children:c,className:n}){const m=o(e["table__expanded-row"],{[e["table__expanded-row--expanded"]]:a},n),d=o(e.table__cell,n),p=o(e["table__expanded-row-container"],{[e["table__expanded-row-container--expanded"]]:a});return t.createElement("tr",{className:m},t.createElement("td",{colSpan:r,className:d},t.createElement("div",{className:p},c,t.createElement(b,{className:e["table__expanded-row-button"],variant:"borderless",onClick:s,tabIndex:a?0:-1},l,t.createElement(i,{svgIcon:_})))))};export{N as T};
+import e from"react";import o from"classnames";import a from"./components/Table/styles.module.scss";import{B as i}from"./Button.js";import{Icon as b}from"./components/Icons/Icon.js";import _ from"./components/Icons/ChevronUp.js";const u=function({numberOfColumns:n,expanded:t,hideDetailsText:l,toggleClick:s,children:c,className:r}){const m=o(a["table__expanded-row"],{[a["table__expanded-row--expanded"]]:t},r),d=o(a.table__cell,r),p=o(a["table__expanded-row-container"],{[a["table__expanded-row-container--expanded"]]:t});return e.createElement("tr",{className:m},e.createElement("td",{colSpan:n,className:d},e.createElement("div",{className:p},c,e.createElement(i,{variant:"borderless",onClick:s,"aria-expanded":t,tabIndex:t?0:-1},l,e.createElement(b,{svgIcon:_})))))};export{u as T};
 //# sourceMappingURL=TableExpandedRow.js.map

package/TableExpandedRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableExpandedRow.js","sources":["../src/components/Table/TableExpandedRow/TableExpandedRow.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport tableStyles from '../styles.module.scss';\nimport Button from '../../Button';\nimport Icon from '../../Icons';\nimport ChevronUp from '../../Icons/ChevronUp';\n\nexport interface Props {\n  /** Row is expanded. */\n  expanded: boolean;\n  /** Number of columns in table. */\n  numberOfColumns: number;\n  /** Text for hide button. */\n  hideDetailsText: string;\n  /** When hide button inside expanded row is clicked. */\n  toggleClick: () => void;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the expanded row.  */\n  children: React.ReactNode;\n}\n\nexport const TableExpandedRow = function TableExpandedRow({\n  numberOfColumns,\n  expanded,\n  hideDetailsText,\n  toggleClick,\n  children,\n  className,\n}: Props) {\n  const tableRowClass = classNames(\n    tableStyles['table__expanded-row'],\n    { [tableStyles['table__expanded-row--expanded']]: expanded },\n    className\n  );\n  const tableCellClass = classNames(tableStyles['table__cell'], className);\n\n  const containerClass = classNames(tableStyles['table__expanded-row-container'], {\n    [tableStyles['table__expanded-row-container--expanded']]: expanded,\n  });\n\n  return (\n    <tr className={tableRowClass}>\n      <td colSpan={numberOfColumns} className={tableCellClass}>\n        <div className={containerClass}>\n          {children}\n          <Button\n            className={tableStyles['table__expanded-row-button']}\n            variant={'borderless'}\n            onClick={toggleClick}\n            tabIndex={expanded ? 0 : -1}\n          >\n            {hideDetailsText}\n            <Icon svgIcon={ChevronUp} />\n          </Button>\n        </div>\n      </td>\n    </tr>\n  );\n};\n\nexport default TableExpandedRow;\n"],"names":["TableExpandedRow","numberOfColumns","expanded","hideDetailsText","toggleClick","children","className","tableRowClass","classNames","tableStyles","tableCellClass","containerClass","React","Button","Icon","ChevronUp"],"mappings":"qOAsBa,MAAAA,EAAmB,SAA0B,CACxD,gBAAAC,EACA,SAAAC,EACA,gBAAAC,EACA,YAAAC,EACA,SAAAC,EACA,UAAAC,CACF,EAAU,CACR,MAAMC,EAAgBC,EACpBC,EAAY,uBACZ,CAAE,CAACA,EAAY,kCAAmCP,CAAS,EAC3DI,CAAA,EAEII,EAAiBF,EAAWC,EAAY,YAAgBH,CAAS,EAEjEK,EAAiBH,EAAWC,EAAY,iCAAkC,CAC9E,CAACA,EAAY,4CAA6CP,CAAA,CAC3D,EAED,OACGU,EAAA,cAAA,KAAA,CAAG,UAAWL,CAAA,EACZK,EAAA,cAAA,KAAA,CAAG,QAASX,EAAiB,UAAWS,CAAA,EACtCE,EAAA,cAAA,MAAA,CAAI,UAAWD,CAAA,EACbN,EACAO,EAAA,cAAAC,EAAA,CACC,UAAWJ,EAAY,8BACvB,QAAS,aACT,QAASL,EACT,SAAUF,EAAW,EAAI,EAAA,EAExBC,EACAS,EAAA,cAAAE,EAAA,CAAK,QAASC,CAAA,CAAW,CAC5B,CACF,CACF,CACF,CAEJ"}
+{"version":3,"file":"TableExpandedRow.js","sources":["../src/components/Table/TableExpandedRow/TableExpandedRow.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport tableStyles from '../styles.module.scss';\nimport Button from '../../Button';\nimport Icon from '../../Icons';\nimport ChevronUp from '../../Icons/ChevronUp';\n\nexport interface Props {\n  /** Row is expanded. */\n  expanded: boolean;\n  /** Number of columns in table. */\n  numberOfColumns: number;\n  /** Text for hide button. */\n  hideDetailsText: string;\n  /** When hide button inside expanded row is clicked. */\n  toggleClick: () => void;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the expanded row.  */\n  children: React.ReactNode;\n}\n\nexport const TableExpandedRow = function TableExpandedRow({\n  numberOfColumns,\n  expanded,\n  hideDetailsText,\n  toggleClick,\n  children,\n  className,\n}: Props) {\n  const tableRowClass = classNames(\n    tableStyles['table__expanded-row'],\n    { [tableStyles['table__expanded-row--expanded']]: expanded },\n    className\n  );\n  const tableCellClass = classNames(tableStyles['table__cell'], className);\n\n  const containerClass = classNames(tableStyles['table__expanded-row-container'], {\n    [tableStyles['table__expanded-row-container--expanded']]: expanded,\n  });\n\n  return (\n    <tr className={tableRowClass}>\n      <td colSpan={numberOfColumns} className={tableCellClass}>\n        <div className={containerClass}>\n          {children}\n          <Button variant={'borderless'} onClick={toggleClick} aria-expanded={expanded} tabIndex={expanded ? 0 : -1}>\n            {hideDetailsText}\n            <Icon svgIcon={ChevronUp} />\n          </Button>\n        </div>\n      </td>\n    </tr>\n  );\n};\n\nexport default TableExpandedRow;\n"],"names":["TableExpandedRow","numberOfColumns","expanded","hideDetailsText","toggleClick","children","className","tableRowClass","classNames","tableStyles","tableCellClass","containerClass","React","Button","Icon","ChevronUp"],"mappings":"qOAsBa,MAAAA,EAAmB,SAA0B,CACxD,gBAAAC,EACA,SAAAC,EACA,gBAAAC,EACA,YAAAC,EACA,SAAAC,EACA,UAAAC,CACF,EAAU,CACR,MAAMC,EAAgBC,EACpBC,EAAY,uBACZ,CAAE,CAACA,EAAY,kCAAmCP,CAAS,EAC3DI,CAAA,EAEII,EAAiBF,EAAWC,EAAY,YAAgBH,CAAS,EAEjEK,EAAiBH,EAAWC,EAAY,iCAAkC,CAC9E,CAACA,EAAY,4CAA6CP,CAAA,CAC3D,EAED,OACGU,EAAA,cAAA,KAAA,CAAG,UAAWL,CAAA,EACZK,EAAA,cAAA,KAAA,CAAG,QAASX,EAAiB,UAAWS,CAAA,EACtCE,EAAA,cAAA,MAAA,CAAI,UAAWD,CAAA,EACbN,EACAO,EAAA,cAAAC,EAAA,CAAO,QAAS,aAAc,QAAST,EAAa,gBAAeF,EAAU,SAAUA,EAAW,EAAI,EAAA,EACpGC,EACAS,EAAA,cAAAE,EAAA,CAAK,QAASC,CAAA,CAAW,CAC5B,CACF,CACF,CACF,CAEJ"}

package/TableExpanderCell.js

@@ -1,2 +1,2 @@
-import o from"react";import s from"classnames";import l from"./components/Table/styles.module.scss";import{Icon as i}from"./components/Icons/Icon.js";import{B as p}from"./Button.js";import b from"./components/Icons/ChevronDown.js";import f from"./components/Icons/ChevronUp.js";import{palette as C}from"./theme/palette.js";const L=function({expandableRowId:e,hideDetailsText:t,showDetailsText:a,expanded:r,className:m}){const n=s(l.table__cell,l["table__cell-expander"],m),c=r?f:b;return o.createElement("td",{className:n,"aria-controls":e,"aria-label":r?t:a},o.createElement(p,{variant:"borderless","aria-expanded":r,"aria-controls":e,ariaLabel:r?t:a},o.createElement(i,{svgIcon:c,color:C.blueberry500})))};export{L as T};
+import r from"react";import c from"classnames";import t from"./components/Table/styles.module.scss";import{Icon as i}from"./components/Icons/Icon.js";import{B as p}from"./Button.js";import b from"./components/Icons/ChevronDown.js";import f from"./components/Icons/ChevronUp.js";const h=function({expandableRowId:o,hideDetailsText:a,showDetailsText:l,expanded:e,className:n}){const m=c(t.table__cell,t["table__cell-expander"],n),s=e?f:b;return r.createElement("td",{className:m},r.createElement(p,{variant:"borderless","aria-expanded":e,"aria-controls":o,ariaLabel:e?a:l},r.createElement(i,{svgIcon:s})))};export{h as T};
 //# sourceMappingURL=TableExpanderCell.js.map

package/TableExpanderCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableExpanderCell.js","sources":["../src/components/Table/TableExpanderCell/TableExpanderCell.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport tableStyles from '../styles.module.scss';\nimport Icon from '../../Icons';\nimport Button from '../../Button';\nimport ChevronDown from '../../Icons/ChevronDown';\nimport ChevronUp from '../../Icons/ChevronUp';\nimport { palette } from '../../../theme/palette';\n\nexport interface Props {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Row is expanded. */\n  expanded: boolean;\n  /** Id for expanded row. */\n  expandableRowId: string;\n  /** Text for hide button used for aria label. */\n  hideDetailsText: string;\n  /** Text for show button used for aria label. */\n  showDetailsText: string;\n}\n\nexport const TableExpanderCell = function TableExpanderCell({\n  expandableRowId,\n  hideDetailsText,\n  showDetailsText,\n  expanded,\n  className,\n}: Props) {\n  const tableCellClass = classNames(tableStyles['table__cell'], tableStyles['table__cell-expander'], className);\n  const icon = expanded ? ChevronUp : ChevronDown;\n\n  return (\n    <td className={tableCellClass} aria-controls={expandableRowId} aria-label={expanded ? hideDetailsText : showDetailsText}>\n      <Button\n        variant=\"borderless\"\n        aria-expanded={expanded}\n        aria-controls={expandableRowId}\n        ariaLabel={expanded ? hideDetailsText : showDetailsText}\n      >\n        <Icon svgIcon={icon} color={palette.blueberry500}></Icon>\n      </Button>\n    </td>\n  );\n};\n\nexport default TableExpanderCell;\n"],"names":["TableExpanderCell","expandableRowId","hideDetailsText","showDetailsText","expanded","className","tableCellClass","classNames","tableStyles","icon","ChevronUp","ChevronDown","React","Button","Icon","palette"],"mappings":"mUAsBa,MAAAA,EAAoB,SAA2B,CAC1D,gBAAAC,EACA,gBAAAC,EACA,gBAAAC,EACA,SAAAC,EACA,UAAAC,CACF,EAAU,CACR,MAAMC,EAAiBC,EAAWC,EAAY,YAAgBA,EAAY,wBAAyBH,CAAS,EACtGI,EAAOL,EAAWM,EAAYC,EAEpC,OACGC,EAAA,cAAA,KAAA,CAAG,UAAWN,EAAgB,gBAAeL,EAAiB,aAAYG,EAAWF,EAAkBC,CAAA,EACrGS,EAAA,cAAAC,EAAA,CACC,QAAQ,aACR,gBAAeT,EACf,gBAAeH,EACf,UAAWG,EAAWF,EAAkBC,CAAA,EAEvCS,EAAA,cAAAE,EAAA,CAAK,QAASL,EAAM,MAAOM,EAAQ,YAAc,CAAA,CACpD,CACF,CAEJ"}
+{"version":3,"file":"TableExpanderCell.js","sources":["../src/components/Table/TableExpanderCell/TableExpanderCell.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport tableStyles from '../styles.module.scss';\nimport Icon from '../../Icons';\nimport Button from '../../Button';\nimport ChevronDown from '../../Icons/ChevronDown';\nimport ChevronUp from '../../Icons/ChevronUp';\n\nexport interface Props {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Row is expanded. */\n  expanded: boolean;\n  /** Id for expanded row. */\n  expandableRowId: string;\n  /** Text for hide button used for aria label. */\n  hideDetailsText: string;\n  /** Text for show button used for aria label. */\n  showDetailsText: string;\n}\n\nexport const TableExpanderCell = function TableExpanderCell({\n  expandableRowId,\n  hideDetailsText,\n  showDetailsText,\n  expanded,\n  className,\n}: Props) {\n  const tableCellClass = classNames(tableStyles['table__cell'], tableStyles['table__cell-expander'], className);\n  const icon = expanded ? ChevronUp : ChevronDown;\n\n  return (\n    <td className={tableCellClass}>\n      <Button\n        variant=\"borderless\"\n        aria-expanded={expanded}\n        aria-controls={expandableRowId}\n        ariaLabel={expanded ? hideDetailsText : showDetailsText}\n      >\n        <Icon svgIcon={icon} />\n      </Button>\n    </td>\n  );\n};\n\nexport default TableExpanderCell;\n"],"names":["TableExpanderCell","expandableRowId","hideDetailsText","showDetailsText","expanded","className","tableCellClass","classNames","tableStyles","icon","ChevronUp","ChevronDown","React","Button","Icon"],"mappings":"sRAqBa,MAAAA,EAAoB,SAA2B,CAC1D,gBAAAC,EACA,gBAAAC,EACA,gBAAAC,EACA,SAAAC,EACA,UAAAC,CACF,EAAU,CACR,MAAMC,EAAiBC,EAAWC,EAAY,YAAgBA,EAAY,wBAAyBH,CAAS,EACtGI,EAAOL,EAAWM,EAAYC,EAEpC,OACGC,EAAA,cAAA,KAAA,CAAG,UAAWN,CAAA,EACZM,EAAA,cAAAC,EAAA,CACC,QAAQ,aACR,gBAAeT,EACf,gBAAeH,EACf,UAAWG,EAAWF,EAAkBC,CAAA,EAEvCS,EAAA,cAAAE,EAAA,CAAK,QAASL,CAAM,CAAA,CACvB,CACF,CAEJ"}

package/TableRow.js

@@ -1,2 +1,2 @@
-import l from"react";import a from"classnames";import e from"./components/Table/styles.module.scss";import{B as x}from"./Button.js";import{Icon as u}from"./components/Icons/Icon.js";import w from"./components/Icons/ChevronUp.js";import C from"./components/Icons/ChevronDown.js";const h=function({rowKey:b,hideDetailsText:m,showDetailsText:s,expandable:r,expanded:t,onClick:o,className:c,children:i}){const p=a(e["table-row"],{[e["table__row--expandable"]]:r,[e["table__row--expanded"]]:t},c);let n=null;if(r){const _="expandableMobile",d=a(e.table__cell,e["table__expander-cell-mobile"],{[e["table__expander-cell-mobile--expanded"]]:t}),f=a(e["table__expander-button-mobile"],{[e["table__expander-button-mobile--expanded"]]:t});n=l.createElement("td",{key:_,className:d},l.createElement(x,{"aria-expanded":t,variant:"borderless",className:f,onClick:()=>{o&&o()}},l.createElement(u,{svgIcon:t?w:C})," ",t?m:s))}return l.createElement("tr",{className:p,onClick:o,key:b},i,n)};export{h as T};
+import r from"react";import n from"classnames";import t from"./components/Table/styles.module.scss";import{B as p}from"./Button.js";import{Icon as _}from"./components/Icons/Icon.js";import f from"./components/Icons/ChevronUp.js";import w from"./components/Icons/ChevronDown.js";const E=({expanded:e,onClick:a,hideDetailsText:m,showDetailsText:l})=>{const o=n(t.table__cell,t["table__expander-cell-mobile"],{[t["table__expander-cell-mobile--expanded"]]:e});return r.createElement("td",{className:o},r.createElement(p,{"aria-expanded":e,variant:"borderless",onClick:a},r.createElement(_,{svgIcon:e?f:w})," ",e?m:l))},T=({rowKey:e,hideDetailsText:a,showDetailsText:m,expandable:l,expanded:o,onClick:s,className:c,children:b})=>{const i=n(t["table-row"],{[t["table__row--expandable"]]:l,[t["table__row--expanded"]]:o},c);return r.createElement("tr",{className:i,onClick:s,key:e},b,l&&r.createElement(E,{expanded:o,onClick:s,hideDetailsText:a,showDetailsText:m}))};export{T};
 //# sourceMappingURL=TableRow.js.map

package/TableRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableRow.js","sources":["../src/components/Table/TableRow/TableRow.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport tableStyles from '../styles.module.scss';\n\nimport Button from '../../Button';\nimport Icon from '../../Icons';\nimport ChevronUp from '../../Icons/ChevronUp';\nimport ChevronDown from '../../Icons/ChevronDown';\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}\n\nexport const TableRow = function TableRow({\n  rowKey,\n  hideDetailsText,\n  showDetailsText,\n  expandable,\n  expanded,\n  onClick,\n  className,\n  children,\n}: Props) {\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  let expandablerButtonMobile: JSX.Element | null = null;\n  if (expandable) {\n    const expandableKeyMobile = `expandableMobile`;\n    // Extra column to appear on smaller screens\n    const expanderCellMobileClass = classNames(tableStyles['table__cell'], tableStyles['table__expander-cell-mobile'], {\n      [tableStyles['table__expander-cell-mobile--expanded']]: expanded,\n    });\n\n    const expanderButtonMobileClass = classNames(tableStyles['table__expander-button-mobile'], {\n      [tableStyles['table__expander-button-mobile--expanded']]: expanded,\n    });\n    expandablerButtonMobile = (\n      <td key={expandableKeyMobile} className={expanderCellMobileClass}>\n        <Button\n          aria-expanded={expanded}\n          variant=\"borderless\"\n          className={expanderButtonMobileClass}\n          onClick={() => {\n            onClick && onClick();\n          }}\n        >\n          <Icon svgIcon={expanded ? ChevronUp : ChevronDown} /> {expanded ? hideDetailsText : showDetailsText}\n        </Button>\n      </td>\n    );\n  }\n\n  return (\n    <tr className={tableRowClass} onClick={onClick} key={rowKey}>\n      {children}\n      {expandablerButtonMobile}\n    </tr>\n  );\n};\n\nexport default TableRow;\n"],"names":["TableRow","rowKey","hideDetailsText","showDetailsText","expandable","expanded","onClick","className","children","tableRowClass","classNames","tableStyles","expandablerButtonMobile","expandableKeyMobile","expanderCellMobileClass","expanderButtonMobileClass","React","Button","Icon","ChevronUp","ChevronDown"],"mappings":"sRA4Ba,MAAAA,EAAW,SAAkB,CACxC,OAAAC,EACA,gBAAAC,EACA,gBAAAC,EACA,WAAAC,EACA,SAAAC,EACA,QAAAC,EACA,UAAAC,EACA,SAAAC,CACF,EAAU,CACR,MAAMC,EAAgBC,EACpBC,EAAY,aACZ,CACE,CAACA,EAAY,2BAA4BP,EACzC,CAACO,EAAY,yBAA0BN,CACzC,EACAE,CAAA,EAEF,IAAIK,EAA8C,KAClD,GAAIR,EAAY,CACd,MAAMS,EAAsB,mBAEtBC,EAA0BJ,EAAWC,EAAY,YAAgBA,EAAY,+BAAgC,CACjH,CAACA,EAAY,0CAA2CN,CAAA,CACzD,EAEKU,EAA4BL,EAAWC,EAAY,iCAAkC,CACzF,CAACA,EAAY,4CAA6CN,CAAA,CAC3D,EACDO,EACGI,EAAA,cAAA,KAAA,CAAG,IAAKH,EAAqB,UAAWC,CAAA,EACtCE,EAAA,cAAAC,EAAA,CACC,gBAAeZ,EACf,QAAQ,aACR,UAAWU,EACX,QAAS,IAAM,CACbT,GAAWA,EAAQ,CACrB,CAAA,EAECU,EAAA,cAAAE,EAAA,CAAK,QAASb,EAAWc,EAAYC,CAAa,CAAA,EAAE,IAAEf,EAAWH,EAAkBC,CACtF,CACF,CAEJ,CAEA,OACGa,EAAA,cAAA,KAAA,CAAG,UAAWP,EAAe,QAAAH,EAAkB,IAAKL,CAAA,EAClDO,EACAI,CACH,CAEJ"}
+{"version":3,"file":"TableRow.js","sources":["../src/components/Table/TableExpanderCell/TableExpanderCellMobile.tsx","../src/components/Table/TableRow/TableRow.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\n\nimport Button from '../../Button';\nimport Icon from '../../Icons';\nimport ChevronUp from '../../Icons/ChevronUp';\nimport ChevronDown from '../../Icons/ChevronDown';\nimport { Props } from '../TableRow/TableRow';\n\nimport tableStyles from '../styles.module.scss';\n\ntype TableExpanderCellMobile = Pick<Props, 'expanded' | 'onClick' | 'hideDetailsText' | 'showDetailsText'>;\n\nconst TableExpanderCellMobile: React.FC<TableExpanderCellMobile> = ({ expanded, onClick, hideDetailsText, showDetailsText }) => {\n  const cellClass = classNames(tableStyles.table__cell, tableStyles['table__expander-cell-mobile'], {\n    [tableStyles['table__expander-cell-mobile--expanded']]: expanded,\n  });\n\n  return (\n    <td className={cellClass}>\n      <Button aria-expanded={expanded} variant=\"borderless\" onClick={onClick}>\n        <Icon svgIcon={expanded ? ChevronUp : ChevronDown} /> {expanded ? hideDetailsText : showDetailsText}\n      </Button>\n    </td>\n  );\n};\n\nexport default TableExpanderCellMobile;\n","import React from 'react';\nimport classNames from 'classnames';\nimport tableStyles from '../styles.module.scss';\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}\n\nexport const TableRow: React.FC<Props> = ({\n  rowKey,\n  hideDetailsText,\n  showDetailsText,\n  expandable,\n  expanded,\n  onClick,\n  className,\n  children,\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      {children}\n      {expandable && (\n        <TableExpanderCellMobile\n          expanded={expanded}\n          onClick={onClick}\n          hideDetailsText={hideDetailsText}\n          showDetailsText={showDetailsText}\n        />\n      )}\n    </tr>\n  );\n};\n\nexport default TableRow;\n"],"names":["TableExpanderCellMobile","expanded","onClick","hideDetailsText","showDetailsText","cellClass","classNames","tableStyles","React","Button","Icon","ChevronUp","ChevronDown","TableRow","rowKey","expandable","className","children","tableRowClass"],"mappings":"sRAaA,MAAMA,EAA6D,CAAC,CAAE,SAAAC,EAAU,QAAAC,EAAS,gBAAAC,EAAiB,gBAAAC,KAAsB,CAC9H,MAAMC,EAAYC,EAAWC,EAAY,YAAaA,EAAY,+BAAgC,CAChG,CAACA,EAAY,0CAA2CN,CAAA,CACzD,EAED,OACGO,EAAA,cAAA,KAAA,CAAG,UAAWH,CAAA,EACZG,EAAA,cAAAC,EAAA,CAAO,gBAAeR,EAAU,QAAQ,aAAa,QAAAC,CAAA,EACnDM,EAAA,cAAAE,EAAA,CAAK,QAAST,EAAWU,EAAYC,CAAa,CAAA,EAAE,IAAEX,EAAWE,EAAkBC,CACtF,CACF,CAEJ,ECDaS,EAA4B,CAAC,CACxC,OAAAC,EACA,gBAAAX,EACA,gBAAAC,EACA,WAAAW,EACA,SAAAd,EACA,QAAAC,EACA,UAAAc,EACA,SAAAC,CACF,IAAM,CACJ,MAAMC,EAAgBZ,EACpBC,EAAY,aACZ,CACE,CAACA,EAAY,2BAA4BQ,EACzC,CAACR,EAAY,yBAA0BN,CACzC,EACAe,CAAA,EAGF,OACGR,EAAA,cAAA,KAAA,CAAG,UAAWU,EAAe,QAAAhB,EAAkB,IAAKY,CAClD,EAAAG,EACAF,GACEP,EAAA,cAAAR,EAAA,CACC,SAAAC,EACA,QAAAC,EACA,gBAAAC,EACA,gBAAAC,CACF,CAAA,CAEJ,CAEJ"}

package/components/HorizontalScroll/HorizontalScroll.d.ts

@@ -4,6 +4,8 @@ interface HorizontalScrollProps {
      * Bredden på elementet som potensielt vil scrolle horisontalt i px
      */
     childWidth: number;
+    /** Sets the data-testid attribute. */
+    testId?: string;
 }
 export declare const HorizontalScroll: React.FC<HorizontalScrollProps>;
 export default HorizontalScroll;

package/components/HorizontalScroll/HorizontalScroll.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalScroll.d.ts","sourceRoot":"","sources":["../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAStC,UAAU,qBAAqB;IAC7B;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAkC5D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"HorizontalScroll.d.ts","sourceRoot":"","sources":["../../../src/components/HorizontalScroll/HorizontalScroll.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAStC,UAAU,qBAAqB;IAC7B;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAkC5D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/components/HorizontalScroll/componentdata.json

@@ -1 +1 @@
-{"props":{"childWidth":{"defaultValue":null,"description":"Bredden på elementet som potensielt vil scrolle horisontalt i px","name":"childWidth","parent":{"fileName":"src/components/HorizontalScroll/HorizontalScroll.tsx","name":"HorizontalScrollProps"},"declarations":[{"fileName":"src/components/HorizontalScroll/HorizontalScroll.tsx","name":"HorizontalScrollProps"}],"required":true,"type":{"name":"number"}}}}
+{"props":{"childWidth":{"defaultValue":null,"description":"Bredden på elementet som potensielt vil scrolle horisontalt i px","name":"childWidth","parent":{"fileName":"src/components/HorizontalScroll/HorizontalScroll.tsx","name":"HorizontalScrollProps"},"declarations":[{"fileName":"src/components/HorizontalScroll/HorizontalScroll.tsx","name":"HorizontalScrollProps"}],"required":true,"type":{"name":"number"}},"testId":{"defaultValue":null,"description":"Sets the data-testid attribute.","name":"testId","parent":{"fileName":"src/components/HorizontalScroll/HorizontalScroll.tsx","name":"HorizontalScrollProps"},"declarations":[{"fileName":"src/components/HorizontalScroll/HorizontalScroll.tsx","name":"HorizontalScrollProps"}],"required":false,"type":{"name":"string"}}}}

package/components/HorizontalScroll/styles.module.scss

@@ -1,4 +1,5 @@
 @import '../../scss/_breakpoints.scss';
+@import '../../scss/_palette.scss';
 
 $gradient: rgba(0, 0, 0, 0.27), rgba(0, 0, 0, 0.27) 18%, transparent;
 
@@ -6,6 +7,10 @@ $gradient: rgba(0, 0, 0, 0.27), rgba(0, 0, 0, 0.27) 18%, transparent;
   position: relative;
   &__viewport {
     display: flex;
+    &:focus-visible {
+      outline: getSpacer(4xs) solid $black;
+      outline-offset: -1px;
+    }
     &--overflow {
       overflow-x: auto;
       overflow-y: hidden;

package/components/ListHeader/ListHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListHeader.d.ts","sourceRoot":"","sources":["../../../src/components/ListHeader/ListHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAe,EAAE,WAAW,EAAc,UAAU,EAAE,MAAM,WAAW,CAAC;AACxE,OAAc,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AACxD,OAAuB,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAI1G,OAAa,EAAY,OAAO,EAAE,MAAM,UAAU,CAAC;AAEnD,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAErC,oBAAY,cAAc,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE1D,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,yBAAyB,CAAC,eAAe,GAAG,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;IAC3H,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,cAAc,CAAC,EAAE,kBAAkB,CAAC;CACrC;AAED,eAAO,MAAM,gBAAgB,YAClB,MAAM,SAAS,mBACP,SAAS,eACb,OAAO,aACT,OAAO,QACZ,cAAc,SACb,MAAM,YAAY,KACxB,WAAW,GAAG,SAgBhB,CAAC;AAEF,MAAM,WAAW,eAAe;IAC9B,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iDAAiD;IACjD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mDAAmD;IACnD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,8DAA8D;IAC9D,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,+CAA+C;IAC/C,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,2CAA2C;IAC3C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sCAAsC;IACtC,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,WAAW,aACZ,MAAM,SAAS;;4BAID,MAAM,MAAM,YAAY,CAAC,mBAAmB,CAAC,CAAC;;oBAEtD,MAAM,MAAM,CAAC;uBACV,MAAM,GAAG,CAAC;CAgC9B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,cA0EvB,CAAC;AAEH,eAAe,UAAU,CAAC"}
+{"version":3,"file":"ListHeader.d.ts","sourceRoot":"","sources":["../../../src/components/ListHeader/ListHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAe,EAAE,WAAW,EAAc,UAAU,EAAE,MAAM,WAAW,CAAC;AACxE,OAAc,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AACxD,OAAuB,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AAI1G,OAAa,EAAY,OAAO,EAAE,MAAM,UAAU,CAAC;AAEnD,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAErC,oBAAY,cAAc,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE1D,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,yBAAyB,CAAC,eAAe,GAAG,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;IAC3H,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,cAAc,CAAC,EAAE,kBAAkB,CAAC;CACrC;AAED,eAAO,MAAM,gBAAgB,YAClB,MAAM,SAAS,mBACP,SAAS,eACb,OAAO,aACT,OAAO,QACZ,cAAc,SACb,MAAM,YAAY,KACxB,WAAW,GAAG,SAgBhB,CAAC;AAEF,MAAM,WAAW,eAAe;IAC9B,qDAAqD;IACrD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iDAAiD;IACjD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mDAAmD;IACnD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,8DAA8D;IAC9D,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,+CAA+C;IAC/C,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,2CAA2C;IAC3C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sCAAsC;IACtC,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,WAAW,aACZ,MAAM,SAAS;;4BAID,MAAM,MAAM,YAAY,CAAC,mBAAmB,CAAC,CAAC;;oBAEtD,MAAM,MAAM,CAAC;uBACV,MAAM,GAAG,CAAC;CAgC9B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,cAyEvB,CAAC;AAEH,eAAe,UAAU,CAAC"}

package/components/Panel/Panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/Panel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,OAAc,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAe,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAe,MAAM,iBAAiB,CAAC;AAiB5D,oBAAY,WAAW;IACrB,MAAM,WAAW;IACjB,GAAG,QAAQ;IACX,KAAK,UAAU;IACf,KAAK,UAAU;CAChB;AAED,oBAAY,YAAY;IACtB,IAAI,SAAS;IACb,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,IAAI,SAAS;CACd;AAED,oBAAY,WAAW;IACrB,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,QAAQ,aAAa;IACrB,QAAQ,aAAa;IACrB,QAAQ,aAAa;CACtB;AAED,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yDAAyD;IACzD,MAAM,CAAC,EAAE,MAAM,OAAO,WAAW,CAAC;IAClC,uDAAuD;IACvD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,sDAAsD;IACtD,OAAO,CAAC,EAAE,MAAM,OAAO,YAAY,CAAC;IACpC,0DAA0D;IAC1D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kDAAkD;IAClD,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,8BAA8B;IAC9B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IACpC,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IACpC,wBAAwB;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,8BAA8B;IAC9B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,+CAA+C;IAC/C,gBAAgB,CAAC,EAAE,UAAU,CAAC;IAC9B,6CAA6C;IAC7C,aAAa,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACvC,yKAAyK;IACzK,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,8BAA8B;IAC9B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kDAAkD;IAClD,4IAA4I;IAC5I,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,+BAA+B;IAC/B,MAAM,CAAC,EAAE,MAAM,OAAO,WAAW,CAAC;IAClC,oFAAoF;IACpF,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,8BAA8B;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8BAA8B;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,sGAAsG;IACtG,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC;AAiDD,QAAA,MAAM,KAAK,uFAuMT,CAAC;AAEH,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/Panel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,OAAc,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAe,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAe,MAAM,iBAAiB,CAAC;AAgB5D,oBAAY,WAAW;IACrB,MAAM,WAAW;IACjB,GAAG,QAAQ;IACX,KAAK,UAAU;IACf,KAAK,UAAU;CAChB;AAED,oBAAY,YAAY;IACtB,IAAI,SAAS;IACb,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,IAAI,SAAS;CACd;AAED,oBAAY,WAAW;IACrB,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,QAAQ,aAAa;IACrB,QAAQ,aAAa;IACrB,QAAQ,aAAa;CACtB;AAED,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yDAAyD;IACzD,MAAM,CAAC,EAAE,MAAM,OAAO,WAAW,CAAC;IAClC,uDAAuD;IACvD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,sDAAsD;IACtD,OAAO,CAAC,EAAE,MAAM,OAAO,YAAY,CAAC;IACpC,0DAA0D;IAC1D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,kDAAkD;IAClD,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,8BAA8B;IAC9B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,4BAA4B;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IACpC,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IACpC,wBAAwB;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,8BAA8B;IAC9B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,+CAA+C;IAC/C,gBAAgB,CAAC,EAAE,UAAU,CAAC;IAC9B,6CAA6C;IAC7C,aAAa,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACvC,yKAAyK;IACzK,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,8BAA8B;IAC9B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kDAAkD;IAClD,4IAA4I;IAC5I,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,+BAA+B;IAC/B,MAAM,CAAC,EAAE,MAAM,OAAO,WAAW,CAAC;IAClC,oFAAoF;IACpF,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,8BAA8B;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8BAA8B;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,gDAAgD;IAChD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,sGAAsG;IACtG,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC;AAiDD,QAAA,MAAM,KAAK,uFAqMT,CAAC;AAEH,eAAe,KAAK,CAAC"}

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.0",
   "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"}