@helsenorge/designsystem-react 5.5.0 → 5.7.0

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+## [5.6.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv5.5.0&targetVersion=GTv5.6.0) (2023-12-07)
+
+
+### Features
+
+*  legg til default tekst på sharingstatus ([8c8385d](https://github.com/helsenorge/designsystem/commit/8c8385da218e2c0213b95cab7cf97075d0207393)), closes [#315571](https://github.com/helsenorge/designsystem/issues/315571)
+
+
+### Bug Fixes
+
+*  defaultValue i input og textarea oppdaterer antall tegn ([5799a7d](https://github.com/helsenorge/designsystem/commit/5799a7d0ee39c789f0eb22b9569c962faa595ebb)), closes [#309847](https://github.com/helsenorge/designsystem/issues/309847)
+*  tom tabell-celle i head er td, ikke th ([548f1bb](https://github.com/helsenorge/designsystem/commit/548f1bb5e28138fda3be750a2e3a00aab7ddba0a)), closes [#313691](https://github.com/helsenorge/designsystem/issues/313691)
+
+## [5.5.0](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv5.4.1&targetVersion=GTv5.5.0) (2023-12-05)
+
+
+### Features
+
+*  datetimepickerwrapper får legend prop ([739df6c](https://github.com/helsenorge/designsystem/commit/739df6c35a31c2ad8cb2ee259cb0701540b68d7e))
+*  opprett ny komponent sharingstatus ([bd8fc70](https://github.com/helsenorge/designsystem/commit/bd8fc70397f2b58825f50f7bb391746faa5c59ee)), closes [#312652](https://github.com/helsenorge/designsystem/issues/312652)
+*  slider ny funksjonalitet ([2e7a269](https://github.com/helsenorge/designsystem/commit/2e7a269af5422a710224504a418720b40c534840)), closes [#310765](https://github.com/helsenorge/designsystem/issues/310765)
+
 ## [5.4.1](https://github.com/helsenorge/designsystem/branchCompare?baseVersion=GTv5.4.0&targetVersion=GTv5.4.1) (2023-11-24)
 
 

package/HorizontalScroll.js

@@ -1,2 +1,2 @@
-import r,{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 a="3px",p=({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}=v(t)||{},z=m>f,u=e(o.horizontalscroll__viewport,z&&o["horizontalscroll__viewport--overflow"]);return r.createElement("div",{className:o.horizontalscroll,"data-testid":_},r.createElement("div",{className:u,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})))},w=p;export{w as H,p as a};
+import t,{useRef as i}from"react";import e from"classnames";import{useIsVisible as c}from"./hooks/useIsVisible.js";import{useSize as g}from"./hooks/useSize.js";import o from"./components/HorizontalScroll/styles.module.scss";const m="3px",p=({children:d,childWidth:_,testId:h,...l})=>{const r=i(null),s=i(null),a=i(null),f=c(s,1,{root:r==null?void 0:r.current,rootMargin:m},!0),v=c(a,1,{root:r==null?void 0:r.current,rootMargin:m},!0),{width:u=0}=g(r)||{},z=_>u,b=e(o.horizontalscroll__viewport,z&&o["horizontalscroll__viewport--overflow"]),n=l["aria-label"]||l["aria-labelledby"];return t.createElement("div",{className:o.horizontalscroll,"data-testid":h},t.createElement("div",{className:b,ref:r,tabIndex:n?0:void 0,role:n?"region":void 0,...l},t.createElement("div",{className:e(o.horizontalscroll__indicator,o["horizontalscroll__indicator--left"],!f&&o["horizontalscroll__indicator--visible"])}),t.createElement("div",{className:e(o.horizontalscroll__indicator,o["horizontalscroll__indicator--right"],!v&&o["horizontalscroll__indicator--visible"])}),t.createElement("div",{ref:s}),d,t.createElement("div",{ref:a})))},S=p;export{S as H,p as a};
 //# 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';\n\nimport classNames from 'classnames';\n\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useSize } from '../../hooks/useSize';\n\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      {/* viewport-diven må ta tabIndex for å løse et annet UU-problem, at div med overflow: scroll må kunne navigeres med keyboard. */}\n      {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}\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","HorizontalScroll$1"],"mappings":"gOAUA,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,sCAAsC,CAAC,EAErI,OACGC,EAAA,cAAA,MAAA,CAAI,UAAWD,EAAO,iBAAkB,cAAab,GAGnDc,EAAA,cAAA,MAAA,CAAI,UAAWH,EAAiB,IAAKV,EAAa,SAAU,GAC3Da,EAAA,cAAC,MAAA,CACC,UAAWF,EACTC,EAAO,4BACPA,EAAO,mCAAmC,EAC1C,CAACR,GAAiBQ,EAAO,sCAAsC,CACjE,CAAA,CAEF,EAAAC,EAAA,cAAC,MAAA,CACC,UAAWF,EACTC,EAAO,4BACPA,EAAO,oCAAoC,EAC3C,CAACN,GAAkBM,EAAO,sCAAsC,CAClE,CAAA,CAAA,EAEFC,EAAA,cAAC,MAAI,CAAA,IAAKX,CAAS,CAAA,EAClBL,EACDgB,EAAA,cAAC,MAAI,CAAA,IAAKV,CAAU,CAAA,CACtB,CACF,CAEJ,EAEAW,EAAelB"}
+{"version":3,"file":"HorizontalScroll.js","sources":["../src/components/HorizontalScroll/HorizontalScroll.tsx"],"sourcesContent":["import React, { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { useIsVisible } from '../../hooks/useIsVisible';\nimport { useSize } from '../../hooks/useSize';\nimport { AriaLabelAttributes } from '../../utils/accessibility';\n\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 & AriaLabelAttributes> = ({ children, childWidth, testId, ...rest }) => {\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  const hasAriaAttributes = rest['aria-label'] || rest['aria-labelledby'];\n\n  return (\n    <div className={styles.horizontalscroll} data-testid={testId}>\n      {/* viewport-diven må ta tabIndex for å løse et annet UU-problem, at div med overflow: scroll må kunne navigeres med keyboard. */}\n      {/* Enten aria-label eller aria-labelledbyid må settes */}\n      <div\n        className={viewportClasses}\n        ref={viewportRef}\n        tabIndex={hasAriaAttributes ? 0 : undefined}\n        role={hasAriaAttributes ? 'region' : undefined}\n        {...rest}\n      >\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","rest","viewportRef","useRef","leftRef","rightRef","leftIsVisible","useIsVisible","rightIsVisible","viewPortWidth","useSize","isOverflowing","viewportClasses","classNames","styles","hasAriaAttributes","React","HorizontalScroll$1"],"mappings":"gOAWA,MAAMA,EAAqB,MAWdC,EAA0E,CAAC,CAAE,SAAAC,EAAU,WAAAC,EAAY,OAAAC,EAAQ,GAAGC,KAAW,CAC9H,MAAAC,EAAcC,EAAuB,IAAI,EACzCC,EAAUD,EAAuB,IAAI,EACrCE,EAAWF,EAAuB,IAAI,EACtCG,EAAgBC,EAAaH,EAAS,EAAG,CAAE,KAAMF,GAAA,YAAAA,EAAa,QAAS,WAAYN,CAAmB,EAAG,EAAI,EAC7GY,EAAiBD,EAAaF,EAAU,EAAG,CAAE,KAAMH,GAAA,YAAAA,EAAa,QAAS,WAAYN,CAAmB,EAAG,EAAI,EAC/G,CAAE,MAAOa,EAAgB,GAAMC,EAAQR,CAAW,GAAK,GAEvDS,EAAgBZ,EAAaU,EAC7BG,EAAkBC,EAAWC,EAAO,2BAA4BH,GAAiBG,EAAO,sCAAsC,CAAC,EAC/HC,EAAoBd,EAAK,YAAY,GAAKA,EAAK,iBAAiB,EAEtE,uBACG,MAAI,CAAA,UAAWa,EAAO,iBAAkB,cAAad,CAGpD,EAAAgB,EAAA,cAAC,MAAA,CACC,UAAWJ,EACX,IAAKV,EACL,SAAUa,EAAoB,EAAI,OAClC,KAAMA,EAAoB,SAAW,OACpC,GAAGd,CAAA,EAEJe,EAAA,cAAC,MAAA,CACC,UAAWH,EACTC,EAAO,4BACPA,EAAO,mCAAmC,EAC1C,CAACR,GAAiBQ,EAAO,sCAAsC,CACjE,CAAA,CACF,EACAE,EAAA,cAAC,MAAA,CACC,UAAWH,EACTC,EAAO,4BACPA,EAAO,oCAAoC,EAC3C,CAACN,GAAkBM,EAAO,sCAAsC,CAClE,CAAA,CACF,EACAE,EAAA,cAAC,MAAI,CAAA,IAAKZ,CAAS,CAAA,EAClBN,EACDkB,EAAA,cAAC,MAAI,CAAA,IAAKX,CAAU,CAAA,CAAA,CAExB,CAEJ,EAEAY,EAAepB"}

package/Input.js

@@ -1,2 +1,2 @@
-import r,{useRef as $,useState as A}from"react";import x from"classnames";import{FormMode as s,FormVariant as he,IconSize as K,AnalyticsId as ge,AVERAGE_CHARACTER_WIDTH_PX as ve}from"./constants.js";import{useBreakpoint as Ce,Breakpoint as xe}from"./hooks/useBreakpoint.js";import{useUuid as ye}from"./hooks/useUuid.js";import{getColor as D}from"./theme/currys/color.js";import{E as Ee}from"./ErrorWrapper.js";import{Icon as _e}from"./components/Icons/Icon.js";import{a as ke}from"./Label.js";import{M as we}from"./MaxCharacters.js";import t from"./components/Input/styles.module.scss";var Ie=(e=>(e.text="text",e.number="number",e.email="email",e.password="password",e.search="search",e.tel="tel",e.url="url",e.date="date",e.time="time",e))(Ie||{});const Ne=(e,l,f)=>{const u=l?"1.5rem":"2rem",b=l?`${f}px`:"0px",d="4px";return`calc(${e*ve}px + ${u} + ${b} + ${d})`},F=r.forwardRef((e,l)=>{const{className:f,defaultValue:u,placeholder:b,type:d="text",name:M,transparent:z=!1,icon:i,iconRight:h,inputId:B,inputWrapperRef:P,mode:o=s.onwhite,baseIncrementValue:y,variant:U,label:H,error:O,errorText:E,testId:X,disabled:c,readOnly:q,autoComplete:G,afterInputChildren:L,rightOfInput:j,width:_,required:J,onChange:k,onKeyDown:w,autoFocus:Q,maxCharacters:m,maxText:Y,...Z}=e,T=Ce(),p=$(null),I=ye(B),[N,ee]=A(u||""),[te,ne]=A(void 0),g=$(!1),R=/^[0-9]$/,re=o===s.ondark,ae=o===s.onblueberry,oe=!!m&&N.toString().length>m,v=o===s.oninvalid||!!E||!!O||oe,C=U===he.bigform,ie=z&&o!==s.ondark&&!v,ce=x(t["input-wrapper"],f),se=x(t["input-container"],{[t["input-container--transparent"]]:ie,[t["input-container--on-blueberry"]]:ae,[t["input-container--on-dark"]]:re,[t["input-container--invalid"]]:v,[t["input-container--bigform"]]:C,[t["input-container--disabled"]]:c,[t["input-container--with-icon"]]:i}),le=x(t["input-container__input"],{[t["input-container__input--bigform"]]:C,[t["input-container__input--disabled"]]:c}),ue=c?D("neutral",500):D("black"),W=T===xe.xs||!C?K.XSmall:K.Small,S=()=>i!==void 0?r.createElement(_e,{className:t["input-container__input__icon"],color:ue,size:W,svgIcon:i}):null,de=n=>{if(p&&p.current&&i){const a=h?0:1;p.current.children[a].focus(),e.onClick&&e.onClick(n)}},me=n=>{const a=pe(n);k&&k(n),ee(a),ne(a)},pe=n=>{if(typeof y>"u"||d!=="number")return n.target.value;const a=Number(n.target.value);return!te&&!g.current&&(a===1||a===-1)&&(n.target.value=y+""),n.target.value},fe=n=>{R.test(n.key)&&(g.current=!0),w&&w(n)},be=n=>{R.test(n.key)&&(g.current=!1)},V=_?Ne(_,!!i,W):void 0;return r.createElement(Ee,{errorText:E},r.createElement("div",{"data-testid":X,"data-analyticsid":ge.Input,className:ce,ref:P},ke(H,I,o,c),r.createElement("div",{className:t["content-wrapper"]},r.createElement("div",{onClick:de,ref:p,className:se,style:{maxWidth:V}},!h&&S(),r.createElement("input",{onChange:me,onKeyDown:fe,onKeyUp:be,name:M,type:d,defaultValue:u,id:I,className:le,ref:l,"aria-labelledby":e["aria-labelledby"]??void 0,"aria-describedby":e["aria-describedby"]??void 0,"aria-invalid":!!v,disabled:c,placeholder:b,readOnly:q,autoComplete:G||"off",required:J,autoFocus:Q,...Z}),h&&S()),r.createElement("div",{className:t["content-wrapper__right-of-input"]},j)),m&&r.createElement(we,{maxCharacters:m,length:N.toString().length,maxText:Y,mode:o,maxWidth:V}),L))});F.displayName="Input";const Pe=F;export{Pe as I,Ie as a};
+import r,{useRef as A,useState as K,useEffect as he}from"react";import x from"classnames";import{FormMode as l,FormVariant as ge,IconSize as D,AnalyticsId as ve,AVERAGE_CHARACTER_WIDTH_PX as Ce}from"./constants.js";import{useBreakpoint as xe,Breakpoint as Ee}from"./hooks/useBreakpoint.js";import{useUuid as ye}from"./hooks/useUuid.js";import{getColor as F}from"./theme/currys/color.js";import{E as _e}from"./ErrorWrapper.js";import{Icon as ke}from"./components/Icons/Icon.js";import{a as we}from"./Label.js";import{M as Ie}from"./MaxCharacters.js";import t from"./components/Input/styles.module.scss";var Ne=(e=>(e.text="text",e.number="number",e.email="email",e.password="password",e.search="search",e.tel="tel",e.url="url",e.date="date",e.time="time",e))(Ne||{});const Re=(e,u,f)=>{const o=u?"1.5rem":"2rem",b=u?`${f}px`:"0px",d="4px";return`calc(${e*Ce}px + ${o} + ${b} + ${d})`},M=r.forwardRef((e,u)=>{const{className:f,defaultValue:o="",placeholder:b,type:d="text",name:z,transparent:B=!1,icon:c,iconRight:h,inputId:P,inputWrapperRef:U,mode:i=l.onwhite,baseIncrementValue:E,variant:H,label:O,error:X,errorText:y,testId:q,disabled:s,readOnly:G,autoComplete:L,afterInputChildren:j,rightOfInput:J,width:_,required:Q,onChange:k,onKeyDown:w,autoFocus:Y,maxCharacters:m,maxText:Z,...T}=e,ee=xe(),p=A(null),I=ye(P),[N,R]=K(o),[te,ne]=K(void 0),g=A(!1),W=/^[0-9]$/;he(()=>{R(o)},[o]);const re=i===l.ondark,ae=i===l.onblueberry,oe=!!m&&N.toString().length>m,v=i===l.oninvalid||!!y||!!X||oe,C=H===ge.bigform,ie=B&&i!==l.ondark&&!v,ce=x(t["input-wrapper"],f),se=x(t["input-container"],{[t["input-container--transparent"]]:ie,[t["input-container--on-blueberry"]]:ae,[t["input-container--on-dark"]]:re,[t["input-container--invalid"]]:v,[t["input-container--bigform"]]:C,[t["input-container--disabled"]]:s,[t["input-container--with-icon"]]:c}),le=x(t["input-container__input"],{[t["input-container__input--bigform"]]:C,[t["input-container__input--disabled"]]:s}),ue=s?F("neutral",500):F("black"),S=ee===Ee.xs||!C?D.XSmall:D.Small,V=()=>c!==void 0?r.createElement(ke,{className:t["input-container__input__icon"],color:ue,size:S,svgIcon:c}):null,de=n=>{if(p&&p.current&&c){const a=h?0:1;p.current.children[a].focus(),e.onClick&&e.onClick(n)}},me=n=>{const a=pe(n);k&&k(n),R(a),ne(a)},pe=n=>{if(typeof E>"u"||d!=="number")return n.target.value;const a=Number(n.target.value);return!te&&!g.current&&(a===1||a===-1)&&(n.target.value=E+""),n.target.value},fe=n=>{W.test(n.key)&&(g.current=!0),w&&w(n)},be=n=>{W.test(n.key)&&(g.current=!1)},$=_?Re(_,!!c,S):void 0;return r.createElement(_e,{errorText:y},r.createElement("div",{"data-testid":q,"data-analyticsid":ve.Input,className:ce,ref:U},we(O,I,i,s),r.createElement("div",{className:t["content-wrapper"]},r.createElement("div",{onClick:de,ref:p,className:se,style:{maxWidth:$}},!h&&V(),r.createElement("input",{onChange:me,onKeyDown:fe,onKeyUp:be,name:z,type:d,defaultValue:o,id:I,className:le,ref:u,"aria-labelledby":e["aria-labelledby"]??void 0,"aria-describedby":e["aria-describedby"]??void 0,"aria-invalid":!!v,disabled:s,placeholder:b,readOnly:G,autoComplete:L||"off",required:Q,autoFocus:Y,...T}),h&&V()),r.createElement("div",{className:t["content-wrapper__right-of-input"]},J)),m&&r.createElement(Ie,{maxCharacters:m,length:N.toString().length,maxText:Z,mode:i,maxWidth:$}),j))});M.displayName="Input";const Ue=M;export{Ue as I,Ne as a};
 //# sourceMappingURL=Input.js.map

package/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../src/components/Input/Input.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\n\nimport cn from 'classnames';\n\nimport { FormMode, FormVariant, AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Icon, { IconSize, SvgIcon } from '../Icons';\nimport { renderLabel } from '../Label';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\nexport interface InputProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    | 'disabled'\n    | 'readOnly'\n    | 'autoComplete'\n    | 'name'\n    | 'placeholder'\n    | 'defaultValue'\n    | 'required'\n    | 'value'\n    | 'min'\n    | 'max'\n    | 'aria-describedby'\n    | 'aria-labelledby'\n    | 'onBlur'\n    | 'onClick'\n    | 'onChange'\n    | 'onFocus'\n    | 'onKeyDown'\n    | 'autoFocus'\n  > {\n  /** The number at which the input field starts when you increment or decrement it */\n  baseIncrementValue?: number;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**  HMTL Input type */\n  type?: keyof typeof InputTypes;\n  /** input id */\n  inputId?: string;\n  /** Width of input field in characters (approximate) */\n  width?: number;\n  /** If true, the component will be transparent. */\n  transparent?: boolean;\n  /** Icon to be displayed next to the input field */\n  icon?: SvgIcon;\n  /** Places the icon to the right */\n  iconRight?: boolean;\n  /** Ref that is placed on the inputWrapper */\n  inputWrapperRef?: React.RefObject<HTMLDivElement>;\n  /** Changes the color profile of the input */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the input */\n  variant?: keyof typeof FormVariant;\n  /** Label of the input */\n  label?: React.ReactNode;\n  /** Activates Error style for the input */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Component shown after input */\n  afterInputChildren?: React.ReactNode;\n  /** Component shown to the right of input */\n  rightOfInput?: React.ReactNode;\n  /** max character limit in input  */\n  maxCharacters?: number;\n  /** The text is displayed in the end of the text-counter */\n  maxText?: string;\n}\n\nexport enum InputTypes {\n  text = 'text',\n  number = 'number',\n  email = 'email',\n  password = 'password',\n  search = 'search',\n  tel = 'tel',\n  url = 'url',\n  date = 'date',\n  time = 'time',\n}\n\nconst getInputMaxWidth = (characters: number, hasIcon: boolean, iconSize: number): string => {\n  const paddingWidth = hasIcon ? '1.5rem' : '2rem';\n  const iconWidth = hasIcon ? `${iconSize}px` : '0px';\n  const borderWidth = '4px';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${iconWidth} + ${borderWidth})`;\n};\n\nconst Input = React.forwardRef((props: InputProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    defaultValue,\n    placeholder,\n    type = InputTypes.text,\n    name,\n    transparent = false,\n    icon,\n    iconRight,\n    inputId,\n    inputWrapperRef,\n    mode = FormMode.onwhite,\n    baseIncrementValue,\n    variant,\n    label,\n    error,\n    errorText,\n    testId,\n    disabled,\n    readOnly,\n    autoComplete,\n    afterInputChildren,\n    rightOfInput,\n    width,\n    required,\n    onChange,\n    onKeyDown,\n    autoFocus,\n    maxCharacters,\n    maxText,\n    ...rest\n  } = props;\n  const breakpoint = useBreakpoint();\n  const inputContainerRef = useRef<HTMLDivElement>(null);\n  const inputIdState = useUuid(inputId);\n  const [input, setInput] = useState(defaultValue || '');\n  const [prevValue, setPrevValue] = useState<string | number | undefined>(undefined);\n  const numKeyPressed = useRef<boolean>(false);\n  const numRegex = /^[0-9]$/;\n\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const maxCharactersExceeded = !!maxCharacters && input.toString().length > maxCharacters;\n  const onError = mode === FormMode.oninvalid || !!errorText || !!error || maxCharactersExceeded;\n  const bigForm = variant === FormVariant.bigform;\n  const isTransparent = transparent && mode !== FormMode.ondark && !onError;\n\n  const inputWrapperClass = cn(styles['input-wrapper'], className);\n\n  const inputContainer = cn(styles['input-container'], {\n    [styles['input-container--transparent']]: isTransparent,\n    [styles['input-container--on-blueberry']]: onBlueberry,\n    [styles['input-container--on-dark']]: onDark,\n    [styles['input-container--invalid']]: onError,\n    [styles['input-container--bigform']]: bigForm,\n    [styles['input-container--disabled']]: disabled,\n    [styles['input-container--with-icon']]: icon,\n  });\n\n  const inputClass = cn(styles['input-container__input'], {\n    [styles['input-container__input--bigform']]: bigForm,\n    [styles['input-container__input--disabled']]: disabled,\n  });\n\n  const iconColor = disabled ? getColor('neutral', 500) : getColor('black');\n  const iconSize = breakpoint === Breakpoint.xs || !bigForm ? IconSize.XSmall : IconSize.Small;\n\n  const renderIcon = (): React.ReactNode => {\n    return icon !== undefined ? (\n      <Icon className={styles['input-container__input__icon']} color={iconColor} size={iconSize} svgIcon={icon} />\n    ) : null;\n  };\n\n  // eslint-disable-next-line\n  const handleClick = (e: React.MouseEvent<any>): void => {\n    if (inputContainerRef && inputContainerRef.current && icon) {\n      const selectedChild = iconRight ? 0 : 1;\n      const input = inputContainerRef.current.children[selectedChild] as HTMLInputElement;\n      input.focus();\n\n      props.onClick && props.onClick(e);\n    }\n  };\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    const newValue = getIncrementValue(e);\n\n    if (onChange) {\n      onChange(e);\n    }\n\n    setInput(newValue);\n    setPrevValue(newValue);\n  };\n\n  // Hvis bruker endrer number value med 1 og det skal startes på en annen verdi enn 0\n  const getIncrementValue = (e: React.ChangeEvent<HTMLInputElement>): string => {\n    if (typeof baseIncrementValue === 'undefined' || type !== 'number') return e.target.value;\n\n    const valueAsNumber = Number(e.target.value);\n\n    if (!prevValue && !numKeyPressed.current && (valueAsNumber === 1 || valueAsNumber === -1)) {\n      e.target.value = baseIncrementValue + '';\n    }\n\n    return e.target.value;\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {\n    if (numRegex.test(e.key)) {\n      numKeyPressed.current = true;\n    }\n    onKeyDown && onKeyDown(e);\n  };\n\n  const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>): void => {\n    if (numRegex.test(e.key)) {\n      numKeyPressed.current = false;\n    }\n  };\n\n  const maxWidth = width ? getInputMaxWidth(width, !!icon, iconSize) : undefined;\n\n  return (\n    <ErrorWrapper errorText={errorText}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Input} className={inputWrapperClass} ref={inputWrapperRef}>\n        {renderLabel(label, inputIdState, mode as FormMode, disabled)}\n        {/* input-elementet tillater keyboard-interaksjon */}\n        <div className={styles['content-wrapper']}>\n          {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n          <div onClick={handleClick} ref={inputContainerRef} className={inputContainer} style={{ maxWidth }}>\n            {!iconRight && renderIcon()}\n            <input\n              onChange={handleChange}\n              onKeyDown={handleKeyDown}\n              onKeyUp={handleKeyUp}\n              name={name}\n              type={type}\n              defaultValue={defaultValue}\n              id={inputIdState}\n              className={inputClass}\n              ref={ref}\n              aria-labelledby={props['aria-labelledby'] ?? undefined}\n              aria-describedby={props['aria-describedby'] ?? undefined}\n              aria-invalid={!!onError}\n              disabled={disabled}\n              placeholder={placeholder}\n              readOnly={readOnly}\n              autoComplete={autoComplete || 'off'}\n              required={required}\n              // eslint-disable-next-line jsx-a11y/no-autofocus\n              autoFocus={autoFocus}\n              {...rest}\n            />\n            {iconRight && renderIcon()}\n          </div>\n          <div className={styles['content-wrapper__right-of-input']}>{rightOfInput}</div>\n        </div>\n        {maxCharacters && (\n          <MaxCharacters maxCharacters={maxCharacters} length={input.toString().length} maxText={maxText} mode={mode} maxWidth={maxWidth} />\n        )}\n        {afterInputChildren}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"names":["InputTypes","getInputMaxWidth","characters","hasIcon","iconSize","paddingWidth","iconWidth","borderWidth","AVERAGE_CHARACTER_WIDTH_PX","Input","React","props","ref","className","defaultValue","placeholder","type","name","transparent","icon","iconRight","inputId","inputWrapperRef","mode","FormMode","baseIncrementValue","variant","label","error","errorText","testId","disabled","readOnly","autoComplete","afterInputChildren","rightOfInput","width","required","onChange","onKeyDown","autoFocus","maxCharacters","maxText","rest","breakpoint","useBreakpoint","inputContainerRef","useRef","inputIdState","useUuid","input","setInput","useState","prevValue","setPrevValue","numKeyPressed","numRegex","onDark","onBlueberry","maxCharactersExceeded","onError","bigForm","FormVariant","isTransparent","inputWrapperClass","cn","styles","inputContainer","inputClass","iconColor","getColor","Breakpoint","IconSize","renderIcon","Icon","handleClick","e","selectedChild","handleChange","newValue","getIncrementValue","valueAsNumber","handleKeyDown","handleKeyUp","maxWidth","ErrorWrapper","AnalyticsId","renderLabel","MaxCharacters","Input$1"],"mappings":"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"}
+{"version":3,"file":"Input.js","sources":["../src/components/Input/Input.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\n\nimport cn from 'classnames';\n\nimport { FormMode, FormVariant, AnalyticsId, AVERAGE_CHARACTER_WIDTH_PX } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useUuid } from '../../hooks/useUuid';\nimport { getColor } from '../../theme/currys';\nimport ErrorWrapper from '../ErrorWrapper';\nimport Icon, { IconSize, SvgIcon } from '../Icons';\nimport { renderLabel } from '../Label';\nimport MaxCharacters from '../MaxCharacters/MaxCharacters';\n\nimport styles from './styles.module.scss';\n\nexport interface InputProps\n  extends Pick<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    | 'disabled'\n    | 'readOnly'\n    | 'autoComplete'\n    | 'name'\n    | 'placeholder'\n    | 'defaultValue'\n    | 'required'\n    | 'value'\n    | 'min'\n    | 'max'\n    | 'aria-describedby'\n    | 'aria-labelledby'\n    | 'onBlur'\n    | 'onClick'\n    | 'onChange'\n    | 'onFocus'\n    | 'onKeyDown'\n    | 'autoFocus'\n  > {\n  /** The number at which the input field starts when you increment or decrement it */\n  baseIncrementValue?: number;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /**  HMTL Input type */\n  type?: keyof typeof InputTypes;\n  /** input id */\n  inputId?: string;\n  /** Width of input field in characters (approximate) */\n  width?: number;\n  /** If true, the component will be transparent. */\n  transparent?: boolean;\n  /** Icon to be displayed next to the input field */\n  icon?: SvgIcon;\n  /** Places the icon to the right */\n  iconRight?: boolean;\n  /** Ref that is placed on the inputWrapper */\n  inputWrapperRef?: React.RefObject<HTMLDivElement>;\n  /** Changes the color profile of the input */\n  mode?: keyof typeof FormMode;\n  /** Changes the visuals of the input */\n  variant?: keyof typeof FormVariant;\n  /** Label of the input */\n  label?: React.ReactNode;\n  /** Activates Error style for the input */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Component shown after input */\n  afterInputChildren?: React.ReactNode;\n  /** Component shown to the right of input */\n  rightOfInput?: React.ReactNode;\n  /** max character limit in input  */\n  maxCharacters?: number;\n  /** The text is displayed in the end of the text-counter */\n  maxText?: string;\n}\n\nexport enum InputTypes {\n  text = 'text',\n  number = 'number',\n  email = 'email',\n  password = 'password',\n  search = 'search',\n  tel = 'tel',\n  url = 'url',\n  date = 'date',\n  time = 'time',\n}\n\nconst getInputMaxWidth = (characters: number, hasIcon: boolean, iconSize: number): string => {\n  const paddingWidth = hasIcon ? '1.5rem' : '2rem';\n  const iconWidth = hasIcon ? `${iconSize}px` : '0px';\n  const borderWidth = '4px';\n\n  return `calc(${characters * AVERAGE_CHARACTER_WIDTH_PX}px + ${paddingWidth} + ${iconWidth} + ${borderWidth})`;\n};\n\nconst Input = React.forwardRef((props: InputProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    defaultValue = '',\n    placeholder,\n    type = InputTypes.text,\n    name,\n    transparent = false,\n    icon,\n    iconRight,\n    inputId,\n    inputWrapperRef,\n    mode = FormMode.onwhite,\n    baseIncrementValue,\n    variant,\n    label,\n    error,\n    errorText,\n    testId,\n    disabled,\n    readOnly,\n    autoComplete,\n    afterInputChildren,\n    rightOfInput,\n    width,\n    required,\n    onChange,\n    onKeyDown,\n    autoFocus,\n    maxCharacters,\n    maxText,\n    ...rest\n  } = props;\n  const breakpoint = useBreakpoint();\n  const inputContainerRef = useRef<HTMLDivElement>(null);\n  const inputIdState = useUuid(inputId);\n  const [input, setInput] = useState(defaultValue);\n  const [prevValue, setPrevValue] = useState<string | number | undefined>(undefined);\n  const numKeyPressed = useRef<boolean>(false);\n  const numRegex = /^[0-9]$/;\n\n  useEffect(() => {\n    setInput(defaultValue);\n  }, [defaultValue]);\n\n  const onDark = mode === FormMode.ondark;\n  const onBlueberry = mode === FormMode.onblueberry;\n  const maxCharactersExceeded = !!maxCharacters && input.toString().length > maxCharacters;\n  const onError = mode === FormMode.oninvalid || !!errorText || !!error || maxCharactersExceeded;\n  const bigForm = variant === FormVariant.bigform;\n  const isTransparent = transparent && mode !== FormMode.ondark && !onError;\n\n  const inputWrapperClass = cn(styles['input-wrapper'], className);\n\n  const inputContainer = cn(styles['input-container'], {\n    [styles['input-container--transparent']]: isTransparent,\n    [styles['input-container--on-blueberry']]: onBlueberry,\n    [styles['input-container--on-dark']]: onDark,\n    [styles['input-container--invalid']]: onError,\n    [styles['input-container--bigform']]: bigForm,\n    [styles['input-container--disabled']]: disabled,\n    [styles['input-container--with-icon']]: icon,\n  });\n\n  const inputClass = cn(styles['input-container__input'], {\n    [styles['input-container__input--bigform']]: bigForm,\n    [styles['input-container__input--disabled']]: disabled,\n  });\n\n  const iconColor = disabled ? getColor('neutral', 500) : getColor('black');\n  const iconSize = breakpoint === Breakpoint.xs || !bigForm ? IconSize.XSmall : IconSize.Small;\n\n  const renderIcon = (): React.ReactNode => {\n    return icon !== undefined ? (\n      <Icon className={styles['input-container__input__icon']} color={iconColor} size={iconSize} svgIcon={icon} />\n    ) : null;\n  };\n\n  // eslint-disable-next-line\n  const handleClick = (e: React.MouseEvent<any>): void => {\n    if (inputContainerRef && inputContainerRef.current && icon) {\n      const selectedChild = iconRight ? 0 : 1;\n      const input = inputContainerRef.current.children[selectedChild] as HTMLInputElement;\n      input.focus();\n\n      props.onClick && props.onClick(e);\n    }\n  };\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    const newValue = getIncrementValue(e);\n\n    if (onChange) {\n      onChange(e);\n    }\n\n    setInput(newValue);\n    setPrevValue(newValue);\n  };\n\n  // Hvis bruker endrer number value med 1 og det skal startes på en annen verdi enn 0\n  const getIncrementValue = (e: React.ChangeEvent<HTMLInputElement>): string => {\n    if (typeof baseIncrementValue === 'undefined' || type !== 'number') return e.target.value;\n\n    const valueAsNumber = Number(e.target.value);\n\n    if (!prevValue && !numKeyPressed.current && (valueAsNumber === 1 || valueAsNumber === -1)) {\n      e.target.value = baseIncrementValue + '';\n    }\n\n    return e.target.value;\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>): void => {\n    if (numRegex.test(e.key)) {\n      numKeyPressed.current = true;\n    }\n    onKeyDown && onKeyDown(e);\n  };\n\n  const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>): void => {\n    if (numRegex.test(e.key)) {\n      numKeyPressed.current = false;\n    }\n  };\n\n  const maxWidth = width ? getInputMaxWidth(width, !!icon, iconSize) : undefined;\n\n  return (\n    <ErrorWrapper errorText={errorText}>\n      <div data-testid={testId} data-analyticsid={AnalyticsId.Input} className={inputWrapperClass} ref={inputWrapperRef}>\n        {renderLabel(label, inputIdState, mode as FormMode, disabled)}\n        {/* input-elementet tillater keyboard-interaksjon */}\n        <div className={styles['content-wrapper']}>\n          {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}\n          <div onClick={handleClick} ref={inputContainerRef} className={inputContainer} style={{ maxWidth }}>\n            {!iconRight && renderIcon()}\n            <input\n              onChange={handleChange}\n              onKeyDown={handleKeyDown}\n              onKeyUp={handleKeyUp}\n              name={name}\n              type={type}\n              defaultValue={defaultValue}\n              id={inputIdState}\n              className={inputClass}\n              ref={ref}\n              aria-labelledby={props['aria-labelledby'] ?? undefined}\n              aria-describedby={props['aria-describedby'] ?? undefined}\n              aria-invalid={!!onError}\n              disabled={disabled}\n              placeholder={placeholder}\n              readOnly={readOnly}\n              autoComplete={autoComplete || 'off'}\n              required={required}\n              // eslint-disable-next-line jsx-a11y/no-autofocus\n              autoFocus={autoFocus}\n              {...rest}\n            />\n            {iconRight && renderIcon()}\n          </div>\n          <div className={styles['content-wrapper__right-of-input']}>{rightOfInput}</div>\n        </div>\n        {maxCharacters && (\n          <MaxCharacters maxCharacters={maxCharacters} length={input.toString().length} maxText={maxText} mode={mode} maxWidth={maxWidth} />\n        )}\n        {afterInputChildren}\n      </div>\n    </ErrorWrapper>\n  );\n});\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"names":["InputTypes","getInputMaxWidth","characters","hasIcon","iconSize","paddingWidth","iconWidth","borderWidth","AVERAGE_CHARACTER_WIDTH_PX","Input","React","props","ref","className","defaultValue","placeholder","type","name","transparent","icon","iconRight","inputId","inputWrapperRef","mode","FormMode","baseIncrementValue","variant","label","error","errorText","testId","disabled","readOnly","autoComplete","afterInputChildren","rightOfInput","width","required","onChange","onKeyDown","autoFocus","maxCharacters","maxText","rest","breakpoint","useBreakpoint","inputContainerRef","useRef","inputIdState","useUuid","input","setInput","useState","prevValue","setPrevValue","numKeyPressed","numRegex","useEffect","onDark","onBlueberry","maxCharactersExceeded","onError","bigForm","FormVariant","isTransparent","inputWrapperClass","cn","styles","inputContainer","inputClass","iconColor","getColor","Breakpoint","IconSize","renderIcon","Icon","handleClick","e","selectedChild","handleChange","newValue","getIncrementValue","valueAsNumber","handleKeyDown","handleKeyUp","maxWidth","ErrorWrapper","AnalyticsId","renderLabel","MaxCharacters","Input$1"],"mappings":"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"}

package/Table.js

@@ -1,2 +1,2 @@
-import s,{useState as d,useRef as x,useEffect as u}from"react";import H from"classnames";import{AnalyticsId as R}from"./constants.js";import{Breakpoint as v,useBreakpoint as A}from"./hooks/useBreakpoint.js";import{useLayoutEvent as D}from"./hooks/useLayoutEvent.js";import{H as I}from"./HorizontalScroll.js";import C from"./components/Table/styles.module.scss";import{isTouchDevice as N}from"./utils/device.js";const O=t=>t.variant===a.centeredoverflow||t.variant===a.block,_=t=>C[`table--${t.variant}-${t.breakpoint}`],$=(t,o)=>v[t.breakpoint]-v[o.breakpoint],z=(t,o)=>v[t.breakpoint]>=o,F=(t,o)=>{if(Array.isArray(t))return t.sort($),t.find(n=>z(n,o));if(t&&z(t,o))return t},L=(t,o,n,f)=>{const r=F(t,o),l=N(),e=n<=f;if(r)return r.variant===a.centeredoverflow&&!e&&r.fallbackVariant===a.horizontalscroll?{variant:l?a.horizontalscroll:a.none,breakpoint:r.breakpoint}:r.variant===a.centeredoverflow&&!e&&r.fallbackVariant!==a.centeredoverflow?{variant:r.fallbackVariant??a.none,breakpoint:r.breakpoint}:r.variant===a.horizontalscroll&&!l&&r.fallbackVariant===a.centeredoverflow?{variant:e?a.centeredoverflow:a.none,breakpoint:r.breakpoint}:r.variant===a.horizontalscroll&&!l&&r.fallbackVariant!==a.horizontalscroll?{variant:r.fallbackVariant??a.none,breakpoint:r.breakpoint}:r},P=t=>t&&O(t)?_(t):void 0,G=(t,o)=>{if(t===o)return;const n=8;return{left:`${(t-o)/2-n}px`}};var a=(t=>(t.none="none",t.centeredoverflow="centeredoverflow",t.horizontalscroll="horizontalscroll",t.block="block",t))(a||{}),M=(t=>(t.compact="compact",t.normal="normal",t))(M||{});const X=[{breakpoint:"xl",variant:"centeredoverflow",fallbackVariant:"horizontalscroll"}],tt=[{breakpoint:"xl",variant:"centeredoverflow",fallbackVariant:"horizontalscroll"},{breakpoint:"sm",variant:"centeredoverflow",fallbackVariant:"block"}],et=({id:t,testId:o,className:n,children:f,breakpointConfig:r=X,mode:l="normal"})=>{const[e,y]=d(),[c,B]=d(0),[W,E]=d(0),[k,V]=d(window.innerWidth),b=x(null),p=A();u(()=>{y(L(r,p,c,k))},[r,p,c,k]),u(()=>{var i,w,h;((e==null?void 0:e.variant)==="centeredoverflow"||(e==null?void 0:e.variant)==="horizontalscroll")&&B(((i=b.current)==null?void 0:i.getBoundingClientRect().width)??0),(e==null?void 0:e.variant)==="centeredoverflow"&&E(((h=(w=b.current)==null?void 0:w.parentElement)==null?void 0:h.getBoundingClientRect().width)??0)},[e]),D(()=>V(window.innerWidth),["resize"],100);const S=(e==null?void 0:e.variant)==="centeredoverflow"?G(W,c):void 0,T=P(e),U=H(C.table,T,n),m=s.createElement("table",{className:U,id:t,"data-testid":o,"data-analyticsid":R.Table,ref:b,style:S},s.Children.map(f,i=>s.isValidElement(i)&&s.cloneElement(i,{mode:l})));return(e==null?void 0:e.variant)==="horizontalscroll"?s.createElement(I,{childWidth:c,testId:"horizontal-scroll"},m):m};export{M,a as R,et as T,X as d,tt as s};
+import c,{useState as b,useRef as L,useEffect as z}from"react";import R from"classnames";import{AnalyticsId as D}from"./constants.js";import{Breakpoint as k,useBreakpoint as I}from"./hooks/useBreakpoint.js";import{useLayoutEvent as N}from"./hooks/useLayoutEvent.js";import{getAriaLabelAttributes as O}from"./utils/accessibility.js";import{H as _}from"./HorizontalScroll.js";import y from"./components/Table/styles.module.scss";import{isTouchDevice as $}from"./utils/device.js";const F=t=>t.variant===a.centeredoverflow||t.variant===a.block,P=t=>y[`table--${t.variant}-${t.breakpoint}`],G=(t,o)=>k[t.breakpoint]-k[o.breakpoint],C=(t,o)=>k[t.breakpoint]>=o,M=(t,o)=>{if(Array.isArray(t))return t.sort(G),t.find(n=>C(n,o));if(t&&C(t,o))return t},X=(t,o,n,f)=>{const e=M(t,o),l=$(),i=n<=f;if(e)return e.variant===a.centeredoverflow&&!i&&e.fallbackVariant===a.horizontalscroll?{variant:l?a.horizontalscroll:a.none,breakpoint:e.breakpoint}:e.variant===a.centeredoverflow&&!i&&e.fallbackVariant!==a.centeredoverflow?{variant:e.fallbackVariant??a.none,breakpoint:e.breakpoint}:e.variant===a.horizontalscroll&&!l&&e.fallbackVariant===a.centeredoverflow?{variant:i?a.centeredoverflow:a.none,breakpoint:e.breakpoint}:e.variant===a.horizontalscroll&&!l&&e.fallbackVariant!==a.horizontalscroll?{variant:e.fallbackVariant??a.none,breakpoint:e.breakpoint}:e},j=t=>t&&F(t)?P(t):void 0,q=(t,o)=>{if(t===o)return;const n=8;return{left:`${(t-o)/2-n}px`}};var a=(t=>(t.none="none",t.centeredoverflow="centeredoverflow",t.horizontalscroll="horizontalscroll",t.block="block",t))(a||{}),J=(t=>(t.compact="compact",t.normal="normal",t))(J||{});const K=[{breakpoint:"xl",variant:"centeredoverflow",fallbackVariant:"horizontalscroll"}],nt=[{breakpoint:"xl",variant:"centeredoverflow",fallbackVariant:"horizontalscroll"},{breakpoint:"sm",variant:"centeredoverflow",fallbackVariant:"block"}],lt=({id:t,testId:o,className:n,children:f,breakpointConfig:e=K,mode:l="normal",scrollAriaLabel:i,scrollAriaLabelledById:B})=>{const[r,W]=b(),[d,E]=b(0),[V,A]=b(0),[p,S]=b(window.innerWidth),v=L(null),m=I();z(()=>{W(X(e,m,d,p))},[e,m,d,p]),z(()=>{var s,h,u;((r==null?void 0:r.variant)==="centeredoverflow"||(r==null?void 0:r.variant)==="horizontalscroll")&&E(((s=v.current)==null?void 0:s.getBoundingClientRect().width)??0),(r==null?void 0:r.variant)==="centeredoverflow"&&A(((u=(h=v.current)==null?void 0:h.parentElement)==null?void 0:u.getBoundingClientRect().width)??0)},[r]),N(()=>S(window.innerWidth),["resize"],100);const T=(r==null?void 0:r.variant)==="centeredoverflow"?q(V,d):void 0,U=j(r),x=R(y.table,U,n),w=c.createElement("table",{className:x,id:t,"data-testid":o,"data-analyticsid":D.Table,ref:v,style:T},c.Children.map(f,s=>c.isValidElement(s)&&c.cloneElement(s,{mode:l}))),H=O({label:i,id:B});return(r==null?void 0:r.variant)==="horizontalscroll"?c.createElement(_,{childWidth:d,testId:"horizontal-scroll",...H},w):w};export{J as M,a as R,lt as T,K as d,nt as s};
 //# sourceMappingURL=Table.js.map

package/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sources":["../src/components/Table/utils.ts","../src/components/Table/Table.tsx"],"sourcesContent":["import React from 'react';\n\nimport { BreakpointConfig, ResponsiveTableVariant } from './Table';\nimport { Breakpoint } from '../../hooks/useBreakpoint';\nimport { isTouchDevice } from '../../utils/device';\n\nimport styles from './styles.module.scss';\n\n/**\n * Sjekk om det skal brukes CSS for å bestemme responsivt utseende på dette breakpoint\n * @param config Konfigurasjon for responsiv oppførsel\n * @returns true om breakpoint bruker CSS\n */\nconst configUsesCss = (config: BreakpointConfig): boolean =>\n  config.variant === ResponsiveTableVariant.centeredoverflow || config.variant === ResponsiveTableVariant.block;\n\n/**\n * Lag klassenavn for CSS-config\n * @param config Konfigurasjon for responsiv oppførsel\n * @returns CSS-klassenavn\n */\nconst mapConfigToClass = (config: BreakpointConfig): string => styles[`table--${config.variant}-${config.breakpoint}`];\n\n/**\n * Sorter konfigurasjon etter breakpoints, fra største til minste\n * @param a Konfigurasjon for responsiv oppførsel\n * @param b Konfigurasjon for responsiv oppførsel\n * @returns Sortert liste\n */\nconst sortByBreakpointsDescending = (a: BreakpointConfig, b: BreakpointConfig): number =>\n  Breakpoint[a.breakpoint] - Breakpoint[b.breakpoint];\n\n/**\n * Sjekk om en konfigurasjon skal brukes for nåværende breakpoint\n * @param a Konfigurasjon for responsiv oppførsel\n * @param breakpoint Nåværende breakpoint\n * @returns true dersom config skal brukes for breakpointet\n */\nconst isValidForCurrentBreakpoint = (config: BreakpointConfig, breakpoint: Breakpoint): boolean =>\n  Breakpoint[config.breakpoint] >= breakpoint;\n\n/**\n * Finn konfigurasjon for nåværende breakpoint\n * @param config Konfigurasjon for responsiv oppførsel\n * @param breakpoint Nåværende breakpoint\n * @returns Konfigurasjon for responsiv oppførsel\n */\nconst getConfigForBreakpoint = (config: BreakpointConfig | BreakpointConfig[], breakpoint: Breakpoint): BreakpointConfig | undefined => {\n  if (Array.isArray(config)) {\n    config.sort(sortByBreakpointsDescending);\n\n    return config.find(x => isValidForCurrentBreakpoint(x, breakpoint));\n  } else if (config && isValidForCurrentBreakpoint(config, breakpoint)) {\n    return config;\n  }\n};\n\n/**\n * Finn konfigurasjon for nåværende breakpoint og tabellbredde\n * @param config Konfigurasjon for responsiv oppførsel\n * @param breakpoint Nåværende breakpoint\n * @param tableWidth Bredde på tabell i px\n * @returns Konfigurasjon for responsiv oppførsel uten fallbackVariant\n */\nexport const getCurrentConfig = (\n  config: BreakpointConfig | BreakpointConfig[],\n  breakpoint: Breakpoint,\n  tableWidth: number,\n  windowWidth: number\n): Omit<BreakpointConfig, 'fallbackVariant'> | undefined => {\n  const breakpointConfig = getConfigForBreakpoint(config, breakpoint);\n  const canUseHorizontalScroll = isTouchDevice();\n  const canUseCenteredOverflow = tableWidth <= windowWidth;\n\n  if (!breakpointConfig) {\n    return;\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.centeredoverflow &&\n    !canUseCenteredOverflow &&\n    breakpointConfig.fallbackVariant === ResponsiveTableVariant.horizontalscroll\n  ) {\n    return {\n      variant: canUseHorizontalScroll ? ResponsiveTableVariant.horizontalscroll : ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.centeredoverflow &&\n    !canUseCenteredOverflow &&\n    breakpointConfig.fallbackVariant !== ResponsiveTableVariant.centeredoverflow\n  ) {\n    return {\n      variant: breakpointConfig.fallbackVariant ?? ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.horizontalscroll &&\n    !canUseHorizontalScroll &&\n    breakpointConfig.fallbackVariant === ResponsiveTableVariant.centeredoverflow\n  ) {\n    return {\n      variant: canUseCenteredOverflow ? ResponsiveTableVariant.centeredoverflow : ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.horizontalscroll &&\n    !canUseHorizontalScroll &&\n    breakpointConfig.fallbackVariant !== ResponsiveTableVariant.horizontalscroll\n  ) {\n    return {\n      variant: breakpointConfig.fallbackVariant ?? ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  return breakpointConfig;\n};\n\n/**\n * Finn klassenavn for responsiv oppførsel\n * @param config Konfigurasjon for responsiv oppførsel\n * @returns Klassenavn\n */\nexport const getBreakpointClass = (config?: BreakpointConfig): string | undefined =>\n  config && configUsesCss(config) ? mapConfigToClass(config) : undefined;\n\n/**\n * Finn riktig posisjon for horisontal sentrering av tabell som skal vises \"centeredoverflow\"\n * @param parentWidth Bredde på element som tabellen ligger i\n * @param tableWidth Bredde på tabellen\n * @returns Styling som posisjonerer tabellen riktig\n */\nexport const getCenteredOverflowTableStyle = (parentWidth: number, tableWidth: number): React.CSSProperties | undefined => {\n  if (parentWidth === tableWidth) {\n    return;\n  }\n\n  const COLUMN_GUTTER_WIDTH_PX = 8;\n\n  return { left: `${(parentWidth - tableWidth) / 2 - COLUMN_GUTTER_WIDTH_PX}px` };\n};\n","import React, { useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { getCurrentConfig, getBreakpointClass, getCenteredOverflowTableStyle } from './utils';\nimport { AnalyticsId } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useLayoutEvent } from '../../hooks/useLayoutEvent';\nimport HorizontalScroll from '../HorizontalScroll';\n\nimport styles from './styles.module.scss';\n\nexport enum ResponsiveTableVariant {\n  /** No handling responsive behaviour. Default. */\n  none = 'none',\n  /** Overflow parent container to the left and right while remaining centered horizontally. */\n  centeredoverflow = 'centeredoverflow',\n  /** Show horizontal scrollbar when table is too big for the screen. */\n  horizontalscroll = 'horizontalscroll',\n  /** Collapse to two columns. */\n  block = 'block',\n}\nexport enum ModeType {\n  compact = 'compact',\n  normal = 'normal',\n}\nexport interface BreakpointConfig {\n  /** Breakpoint at which responsive behaviour will be applied. The table component uses a \"desktop first\" approach. */\n  breakpoint: keyof typeof Breakpoint;\n  /** Desired behaviour on this breakpoint and all smaller screens. */\n  variant: keyof typeof ResponsiveTableVariant;\n  /** If variant is horizontallscroll, use a fallback instead of device is not a touch device. */\n  fallbackVariant?: keyof typeof ResponsiveTableVariant;\n}\n\nexport interface Props {\n  /** Unique ID */\n  id?: string;\n  /** Id used for testing */\n  testId?: string;\n  /** Customize how the table behaves on various screen widths */\n  breakpointConfig?: BreakpointConfig | BreakpointConfig[];\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the table. Use TableHead and TableBody */\n  children: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n}\n\nexport const defaultConfig: BreakpointConfig[] = [\n  {\n    breakpoint: 'xl',\n    variant: ResponsiveTableVariant.centeredoverflow,\n    fallbackVariant: ResponsiveTableVariant.horizontalscroll,\n  },\n];\n\nexport const simpleConfig: BreakpointConfig[] = [\n  {\n    breakpoint: 'xl',\n    variant: ResponsiveTableVariant.centeredoverflow,\n    fallbackVariant: ResponsiveTableVariant.horizontalscroll,\n  },\n  {\n    breakpoint: 'sm',\n    variant: ResponsiveTableVariant.centeredoverflow,\n    fallbackVariant: ResponsiveTableVariant.block,\n  },\n];\n\nexport const Table: React.FC<Props> = ({ id, testId, className, children, breakpointConfig = defaultConfig, mode = ModeType.normal }) => {\n  const [currentConfig, setCurrentConfig] = useState<BreakpointConfig>();\n  const [tableWidth, setTableWidth] = useState<number>(0);\n  const [parentWidth, setParentWidth] = useState<number>(0);\n  const [windowWidth, setWindowWidth] = useState(window.innerWidth);\n  const tableRef = useRef<HTMLTableElement>(null);\n  const breakpoint = useBreakpoint();\n\n  useEffect(() => {\n    setCurrentConfig(getCurrentConfig(breakpointConfig, breakpoint, tableWidth, windowWidth));\n  }, [breakpointConfig, breakpoint, tableWidth, windowWidth]);\n\n  useEffect(() => {\n    if (\n      currentConfig?.variant === ResponsiveTableVariant.centeredoverflow ||\n      currentConfig?.variant === ResponsiveTableVariant.horizontalscroll\n    ) {\n      setTableWidth(tableRef.current?.getBoundingClientRect().width ?? 0);\n    }\n    if (currentConfig?.variant === ResponsiveTableVariant.centeredoverflow) {\n      setParentWidth(tableRef.current?.parentElement?.getBoundingClientRect().width ?? 0);\n    }\n  }, [currentConfig]);\n\n  useLayoutEvent(() => setWindowWidth(window.innerWidth), ['resize'], 100);\n\n  const tableStyle =\n    currentConfig?.variant === ResponsiveTableVariant.centeredoverflow ? getCenteredOverflowTableStyle(parentWidth, tableWidth) : undefined;\n\n  const breakpointClass = getBreakpointClass(currentConfig);\n  const tableClass = classNames(styles.table, breakpointClass, className);\n\n  const table = (\n    <table className={tableClass} id={id} data-testid={testId} data-analyticsid={AnalyticsId.Table} ref={tableRef} style={tableStyle}>\n      {React.Children.map(children, child => React.isValidElement<{ mode?: ModeType }>(child) && React.cloneElement(child, { mode }))}\n    </table>\n  );\n\n  if (currentConfig?.variant === ResponsiveTableVariant.horizontalscroll) {\n    return (\n      <HorizontalScroll childWidth={tableWidth} testId=\"horizontal-scroll\">\n        {table}\n      </HorizontalScroll>\n    );\n  }\n\n  return table;\n};\n\nexport default Table;\n"],"names":["configUsesCss","config","ResponsiveTableVariant","mapConfigToClass","styles","sortByBreakpointsDescending","a","b","Breakpoint","isValidForCurrentBreakpoint","breakpoint","getConfigForBreakpoint","x","getCurrentConfig","tableWidth","windowWidth","breakpointConfig","canUseHorizontalScroll","isTouchDevice","canUseCenteredOverflow","getBreakpointClass","getCenteredOverflowTableStyle","parentWidth","COLUMN_GUTTER_WIDTH_PX","ModeType","defaultConfig","simpleConfig","Table","id","testId","className","children","mode","currentConfig","setCurrentConfig","useState","setTableWidth","setParentWidth","setWindowWidth","tableRef","useRef","useBreakpoint","useEffect","_a","_c","_b","useLayoutEvent","tableStyle","breakpointClass","tableClass","classNames","table","React","AnalyticsId","child","HorizontalScroll"],"mappings":"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"}
+{"version":3,"file":"Table.js","sources":["../src/components/Table/utils.ts","../src/components/Table/Table.tsx"],"sourcesContent":["import React from 'react';\n\nimport { BreakpointConfig, ResponsiveTableVariant } from './Table';\nimport { Breakpoint } from '../../hooks/useBreakpoint';\nimport { isTouchDevice } from '../../utils/device';\n\nimport styles from './styles.module.scss';\n\n/**\n * Sjekk om det skal brukes CSS for å bestemme responsivt utseende på dette breakpoint\n * @param config Konfigurasjon for responsiv oppførsel\n * @returns true om breakpoint bruker CSS\n */\nconst configUsesCss = (config: BreakpointConfig): boolean =>\n  config.variant === ResponsiveTableVariant.centeredoverflow || config.variant === ResponsiveTableVariant.block;\n\n/**\n * Lag klassenavn for CSS-config\n * @param config Konfigurasjon for responsiv oppførsel\n * @returns CSS-klassenavn\n */\nconst mapConfigToClass = (config: BreakpointConfig): string => styles[`table--${config.variant}-${config.breakpoint}`];\n\n/**\n * Sorter konfigurasjon etter breakpoints, fra største til minste\n * @param a Konfigurasjon for responsiv oppførsel\n * @param b Konfigurasjon for responsiv oppførsel\n * @returns Sortert liste\n */\nconst sortByBreakpointsDescending = (a: BreakpointConfig, b: BreakpointConfig): number =>\n  Breakpoint[a.breakpoint] - Breakpoint[b.breakpoint];\n\n/**\n * Sjekk om en konfigurasjon skal brukes for nåværende breakpoint\n * @param a Konfigurasjon for responsiv oppførsel\n * @param breakpoint Nåværende breakpoint\n * @returns true dersom config skal brukes for breakpointet\n */\nconst isValidForCurrentBreakpoint = (config: BreakpointConfig, breakpoint: Breakpoint): boolean =>\n  Breakpoint[config.breakpoint] >= breakpoint;\n\n/**\n * Finn konfigurasjon for nåværende breakpoint\n * @param config Konfigurasjon for responsiv oppførsel\n * @param breakpoint Nåværende breakpoint\n * @returns Konfigurasjon for responsiv oppførsel\n */\nconst getConfigForBreakpoint = (config: BreakpointConfig | BreakpointConfig[], breakpoint: Breakpoint): BreakpointConfig | undefined => {\n  if (Array.isArray(config)) {\n    config.sort(sortByBreakpointsDescending);\n\n    return config.find(x => isValidForCurrentBreakpoint(x, breakpoint));\n  } else if (config && isValidForCurrentBreakpoint(config, breakpoint)) {\n    return config;\n  }\n};\n\n/**\n * Finn konfigurasjon for nåværende breakpoint og tabellbredde\n * @param config Konfigurasjon for responsiv oppførsel\n * @param breakpoint Nåværende breakpoint\n * @param tableWidth Bredde på tabell i px\n * @returns Konfigurasjon for responsiv oppførsel uten fallbackVariant\n */\nexport const getCurrentConfig = (\n  config: BreakpointConfig | BreakpointConfig[],\n  breakpoint: Breakpoint,\n  tableWidth: number,\n  windowWidth: number\n): Omit<BreakpointConfig, 'fallbackVariant'> | undefined => {\n  const breakpointConfig = getConfigForBreakpoint(config, breakpoint);\n  const canUseHorizontalScroll = isTouchDevice();\n  const canUseCenteredOverflow = tableWidth <= windowWidth;\n\n  if (!breakpointConfig) {\n    return;\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.centeredoverflow &&\n    !canUseCenteredOverflow &&\n    breakpointConfig.fallbackVariant === ResponsiveTableVariant.horizontalscroll\n  ) {\n    return {\n      variant: canUseHorizontalScroll ? ResponsiveTableVariant.horizontalscroll : ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.centeredoverflow &&\n    !canUseCenteredOverflow &&\n    breakpointConfig.fallbackVariant !== ResponsiveTableVariant.centeredoverflow\n  ) {\n    return {\n      variant: breakpointConfig.fallbackVariant ?? ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.horizontalscroll &&\n    !canUseHorizontalScroll &&\n    breakpointConfig.fallbackVariant === ResponsiveTableVariant.centeredoverflow\n  ) {\n    return {\n      variant: canUseCenteredOverflow ? ResponsiveTableVariant.centeredoverflow : ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  if (\n    breakpointConfig.variant === ResponsiveTableVariant.horizontalscroll &&\n    !canUseHorizontalScroll &&\n    breakpointConfig.fallbackVariant !== ResponsiveTableVariant.horizontalscroll\n  ) {\n    return {\n      variant: breakpointConfig.fallbackVariant ?? ResponsiveTableVariant.none,\n      breakpoint: breakpointConfig.breakpoint,\n    };\n  }\n\n  return breakpointConfig;\n};\n\n/**\n * Finn klassenavn for responsiv oppførsel\n * @param config Konfigurasjon for responsiv oppførsel\n * @returns Klassenavn\n */\nexport const getBreakpointClass = (config?: BreakpointConfig): string | undefined =>\n  config && configUsesCss(config) ? mapConfigToClass(config) : undefined;\n\n/**\n * Finn riktig posisjon for horisontal sentrering av tabell som skal vises \"centeredoverflow\"\n * @param parentWidth Bredde på element som tabellen ligger i\n * @param tableWidth Bredde på tabellen\n * @returns Styling som posisjonerer tabellen riktig\n */\nexport const getCenteredOverflowTableStyle = (parentWidth: number, tableWidth: number): React.CSSProperties | undefined => {\n  if (parentWidth === tableWidth) {\n    return;\n  }\n\n  const COLUMN_GUTTER_WIDTH_PX = 8;\n\n  return { left: `${(parentWidth - tableWidth) / 2 - COLUMN_GUTTER_WIDTH_PX}px` };\n};\n","import React, { useEffect, useRef, useState } from 'react';\n\nimport classNames from 'classnames';\n\nimport { getCurrentConfig, getBreakpointClass, getCenteredOverflowTableStyle } from './utils';\nimport { AnalyticsId } from '../../constants';\nimport { Breakpoint, useBreakpoint } from '../../hooks/useBreakpoint';\nimport { useLayoutEvent } from '../../hooks/useLayoutEvent';\nimport { getAriaLabelAttributes } from '../../utils/accessibility';\nimport HorizontalScroll from '../HorizontalScroll';\n\nimport styles from './styles.module.scss';\n\nexport enum ResponsiveTableVariant {\n  /** No handling responsive behaviour. Default. */\n  none = 'none',\n  /** Overflow parent container to the left and right while remaining centered horizontally. */\n  centeredoverflow = 'centeredoverflow',\n  /** Show horizontal scrollbar when table is too big for the screen. */\n  horizontalscroll = 'horizontalscroll',\n  /** Collapse to two columns. */\n  block = 'block',\n}\nexport enum ModeType {\n  compact = 'compact',\n  normal = 'normal',\n}\nexport interface BreakpointConfig {\n  /** Breakpoint at which responsive behaviour will be applied. The table component uses a \"desktop first\" approach. */\n  breakpoint: keyof typeof Breakpoint;\n  /** Desired behaviour on this breakpoint and all smaller screens. */\n  variant: keyof typeof ResponsiveTableVariant;\n  /** If variant is horizontallscroll, use a fallback instead of device is not a touch device. */\n  fallbackVariant?: keyof typeof ResponsiveTableVariant;\n}\n\nexport interface Props {\n  /** Unique ID */\n  id?: string;\n  /** Id used for testing */\n  testId?: string;\n  /** Customize how the table behaves on various screen widths */\n  breakpointConfig?: BreakpointConfig | BreakpointConfig[];\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the table. Use TableHead and TableBody */\n  children: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n  /** Sets aria-label of the horizontal scroll container. scrollAriaLabel or scrollAriaLabelledById MUST be set if horizontal scrolling is enabled! */\n  scrollAriaLabel?: string;\n  /** Sets aria-labelledby of the horizontal scroll container. scrollAriaLabel or scrollAriaLabelledById MUST be set if horizontal scrolling is enabled! */\n  scrollAriaLabelledById?: string;\n}\n\nexport const defaultConfig: BreakpointConfig[] = [\n  {\n    breakpoint: 'xl',\n    variant: ResponsiveTableVariant.centeredoverflow,\n    fallbackVariant: ResponsiveTableVariant.horizontalscroll,\n  },\n];\n\nexport const simpleConfig: BreakpointConfig[] = [\n  {\n    breakpoint: 'xl',\n    variant: ResponsiveTableVariant.centeredoverflow,\n    fallbackVariant: ResponsiveTableVariant.horizontalscroll,\n  },\n  {\n    breakpoint: 'sm',\n    variant: ResponsiveTableVariant.centeredoverflow,\n    fallbackVariant: ResponsiveTableVariant.block,\n  },\n];\n\nexport const Table: React.FC<Props> = ({\n  id,\n  testId,\n  className,\n  children,\n  breakpointConfig = defaultConfig,\n  mode = ModeType.normal,\n  scrollAriaLabel,\n  scrollAriaLabelledById,\n}) => {\n  const [currentConfig, setCurrentConfig] = useState<BreakpointConfig>();\n  const [tableWidth, setTableWidth] = useState<number>(0);\n  const [parentWidth, setParentWidth] = useState<number>(0);\n  const [windowWidth, setWindowWidth] = useState(window.innerWidth);\n  const tableRef = useRef<HTMLTableElement>(null);\n  const breakpoint = useBreakpoint();\n\n  useEffect(() => {\n    setCurrentConfig(getCurrentConfig(breakpointConfig, breakpoint, tableWidth, windowWidth));\n  }, [breakpointConfig, breakpoint, tableWidth, windowWidth]);\n\n  useEffect(() => {\n    if (\n      currentConfig?.variant === ResponsiveTableVariant.centeredoverflow ||\n      currentConfig?.variant === ResponsiveTableVariant.horizontalscroll\n    ) {\n      setTableWidth(tableRef.current?.getBoundingClientRect().width ?? 0);\n    }\n    if (currentConfig?.variant === ResponsiveTableVariant.centeredoverflow) {\n      setParentWidth(tableRef.current?.parentElement?.getBoundingClientRect().width ?? 0);\n    }\n  }, [currentConfig]);\n\n  useLayoutEvent(() => setWindowWidth(window.innerWidth), ['resize'], 100);\n\n  const tableStyle =\n    currentConfig?.variant === ResponsiveTableVariant.centeredoverflow ? getCenteredOverflowTableStyle(parentWidth, tableWidth) : undefined;\n\n  const breakpointClass = getBreakpointClass(currentConfig);\n  const tableClass = classNames(styles.table, breakpointClass, className);\n\n  const table = (\n    <table className={tableClass} id={id} data-testid={testId} data-analyticsid={AnalyticsId.Table} ref={tableRef} style={tableStyle}>\n      {React.Children.map(children, child => React.isValidElement<{ mode?: ModeType }>(child) && React.cloneElement(child, { mode }))}\n    </table>\n  );\n\n  const ariaLabelAttributes = getAriaLabelAttributes({ label: scrollAriaLabel, id: scrollAriaLabelledById });\n\n  if (currentConfig?.variant === ResponsiveTableVariant.horizontalscroll) {\n    return (\n      <HorizontalScroll childWidth={tableWidth} testId=\"horizontal-scroll\" {...ariaLabelAttributes}>\n        {table}\n      </HorizontalScroll>\n    );\n  }\n\n  return table;\n};\n\nexport default Table;\n"],"names":["configUsesCss","config","ResponsiveTableVariant","mapConfigToClass","styles","sortByBreakpointsDescending","a","b","Breakpoint","isValidForCurrentBreakpoint","breakpoint","getConfigForBreakpoint","x","getCurrentConfig","tableWidth","windowWidth","breakpointConfig","canUseHorizontalScroll","isTouchDevice","canUseCenteredOverflow","getBreakpointClass","getCenteredOverflowTableStyle","parentWidth","COLUMN_GUTTER_WIDTH_PX","ModeType","defaultConfig","simpleConfig","Table","id","testId","className","children","mode","scrollAriaLabel","scrollAriaLabelledById","currentConfig","setCurrentConfig","useState","setTableWidth","setParentWidth","setWindowWidth","tableRef","useRef","useBreakpoint","useEffect","_a","_c","_b","useLayoutEvent","tableStyle","breakpointClass","tableClass","classNames","table","React","AnalyticsId","child","ariaLabelAttributes","getAriaLabelAttributes","HorizontalScroll"],"mappings":"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"}

package/TableHeadCell.js

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

package/TableHeadCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeadCell.js","sources":["../src/components/Table/TableHeadCell/TableHeadCell.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport Icon, { IconSize } from '../../Icons';\nimport ArrowDown from '../../Icons/ArrowDown';\nimport ArrowUp from '../../Icons/ArrowUp';\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\n\nexport enum SortDirection {\n  asc = 'asc',\n  desc = 'desc',\n}\n\nexport interface Props {\n  /** Sets if column for head cell should be sortable*/\n  sortable?: boolean;\n  /** Sort direction  */\n  sortDir?: SortDirection;\n  /** Function that is called when clicked */\n  onClick?: () => void;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the td element.  */\n  children?: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n}\n\nexport const TableHeadCell = ({ sortable, onClick, className, children, sortDir, mode = ModeType.normal }: Props): React.JSX.Element => {\n  const tableHeadCellDefaultClass = classNames(tableStyles['table__head-cell'], className, {\n    [tableStyles['table__head-cell--compact']]: mode === ModeType.compact,\n  });\n\n  if (!sortable) {\n    return (\n      <th scope=\"col\" className={tableHeadCellDefaultClass}>\n        {children}\n      </th>\n    );\n  }\n\n  const sortableClasses = classNames(\n    tableHeadCellDefaultClass,\n    tableStyles['table__head-cell--sortable'],\n    { [tableStyles['table__head-cell--sorted']]: sortDir },\n    className\n  );\n\n  const renderSortIcon = (): React.JSX.Element | undefined =>\n    sortDir && (\n      <div className={tableStyles['table__head-cell-sort-icon-wrapper']}>\n        <Icon svgIcon={sortDir == SortDirection.asc ? ArrowDown : ArrowUp} size={IconSize.XXSmall} />\n      </div>\n    );\n\n  const getSortDirection = (): React.AriaAttributes['aria-sort'] => {\n    switch (sortDir) {\n      case SortDirection.asc:\n        return 'ascending';\n      case SortDirection.desc:\n        return 'descending';\n    }\n  };\n\n  return (\n    <th scope=\"col\" className={sortableClasses} aria-sort={getSortDirection()}>\n      <button type=\"button\" onClick={onClick} className={tableStyles['table__sort-button']} aria-pressed={sortDir ? !!sortDir : undefined}>\n        {renderSortIcon()}\n        {children}\n      </button>\n    </th>\n  );\n};\n\nexport default TableHeadCell;\n"],"names":["SortDirection","TableHeadCell","sortable","onClick","className","children","sortDir","mode","ModeType","tableHeadCellDefaultClass","classNames","tableStyles","sortableClasses","renderSortIcon","Icon","ArrowDown","ArrowUp","IconSize","getSortDirection","React","TableHeadCell$1"],"mappings":"2TAUY,IAAAA,GAAAA,IACVA,EAAA,IAAM,MACNA,EAAA,KAAO,OAFGA,IAAAA,GAAA,CAAA,CAAA,EAoBC,MAAAC,EAAgB,CAAC,CAAE,SAAAC,EAAU,QAAAC,EAAS,UAAAC,EAAW,SAAAC,EAAU,QAAAC,EAAS,KAAAC,EAAOC,EAAS,UAAuC,CACtI,MAAMC,EAA4BC,EAAWC,EAAY,kBAAkB,EAAGP,EAAW,CACvF,CAACO,EAAY,2BAA2B,CAAC,EAAGJ,IAASC,EAAS,OAAA,CAC/D,EAED,GAAI,CAACN,EACH,uBACG,KAAG,CAAA,MAAM,MAAM,UAAWO,GACxBJ,CACH,EAIJ,MAAMO,EAAkBF,EACtBD,EACAE,EAAY,4BAA4B,EACxC,CAAE,CAACA,EAAY,0BAA0B,CAAC,EAAGL,CAAQ,EACrDF,CAAA,EAGIS,EAAiB,IACrBP,mBACG,MAAI,CAAA,UAAWK,EAAY,oCAAoC,CAAA,kBAC7DG,EAAK,CAAA,QAASR,GAAW,MAAoBS,EAAYC,EAAS,KAAMC,EAAS,QAAS,CAC7F,EAGEC,EAAmB,IAAyC,CAChE,OAAQZ,EAAS,CACf,IAAK,MACI,MAAA,YACT,IAAK,OACI,MAAA,YACX,CAAA,EAIA,OAAAa,EAAA,cAAC,KAAG,CAAA,MAAM,MAAM,UAAWP,EAAiB,YAAWM,EAAiB,CAAA,EACrEC,EAAA,cAAA,SAAA,CAAO,KAAK,SAAS,QAAAhB,EAAkB,UAAWQ,EAAY,oBAAoB,EAAG,eAAcL,EAAU,CAAC,CAACA,EAAU,MACvH,EAAAO,EAAA,EACAR,CACH,CACF,CAEJ,EAEAe,EAAenB"}
+{"version":3,"file":"TableHeadCell.js","sources":["../src/components/Table/TableHeadCell/TableHeadCell.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport Icon, { IconSize } from '../../Icons';\nimport ArrowDown from '../../Icons/ArrowDown';\nimport ArrowUp from '../../Icons/ArrowUp';\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\n\nexport enum SortDirection {\n  asc = 'asc',\n  desc = 'desc',\n}\n\nexport interface Props {\n  /** Sets if column for head cell should be sortable*/\n  sortable?: boolean;\n  /** Sort direction  */\n  sortDir?: SortDirection;\n  /** Function that is called when clicked */\n  onClick?: () => void;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the td element.  */\n  children?: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n}\n\nexport const TableHeadCell = ({ sortable, onClick, className, children, sortDir, mode = ModeType.normal }: Props): React.JSX.Element => {\n  const tableHeadCellDefaultClass = classNames(tableStyles['table__head-cell'], className, {\n    [tableStyles['table__head-cell--compact']]: mode === ModeType.compact,\n  });\n\n  if (!sortable && !children) {\n    return <td className={tableHeadCellDefaultClass}></td>;\n  }\n\n  if (!sortable) {\n    return (\n      <th scope=\"col\" className={tableHeadCellDefaultClass}>\n        {children}\n      </th>\n    );\n  }\n\n  const sortableClasses = classNames(\n    tableHeadCellDefaultClass,\n    tableStyles['table__head-cell--sortable'],\n    { [tableStyles['table__head-cell--sorted']]: sortDir },\n    className\n  );\n\n  const renderSortIcon = (): React.JSX.Element | undefined =>\n    sortDir && (\n      <div className={tableStyles['table__head-cell-sort-icon-wrapper']}>\n        <Icon svgIcon={sortDir == SortDirection.asc ? ArrowDown : ArrowUp} size={IconSize.XXSmall} />\n      </div>\n    );\n\n  const getSortDirection = (): React.AriaAttributes['aria-sort'] => {\n    switch (sortDir) {\n      case SortDirection.asc:\n        return 'ascending';\n      case SortDirection.desc:\n        return 'descending';\n    }\n  };\n\n  return (\n    <th scope=\"col\" className={sortableClasses} aria-sort={getSortDirection()}>\n      <button type=\"button\" onClick={onClick} className={tableStyles['table__sort-button']} aria-pressed={sortDir ? !!sortDir : undefined}>\n        {renderSortIcon()}\n        {children}\n      </button>\n    </th>\n  );\n};\n\nexport default TableHeadCell;\n"],"names":["SortDirection","TableHeadCell","sortable","onClick","className","children","sortDir","mode","ModeType","tableHeadCellDefaultClass","classNames","tableStyles","React","sortableClasses","renderSortIcon","Icon","ArrowDown","ArrowUp","IconSize","getSortDirection","TableHeadCell$1"],"mappings":"2TAUY,IAAAA,GAAAA,IACVA,EAAA,IAAM,MACNA,EAAA,KAAO,OAFGA,IAAAA,GAAA,CAAA,CAAA,EAoBC,MAAAC,EAAgB,CAAC,CAAE,SAAAC,EAAU,QAAAC,EAAS,UAAAC,EAAW,SAAAC,EAAU,QAAAC,EAAS,KAAAC,EAAOC,EAAS,UAAuC,CACtI,MAAMC,EAA4BC,EAAWC,EAAY,kBAAkB,EAAGP,EAAW,CACvF,CAACO,EAAY,2BAA2B,CAAC,EAAGJ,IAASC,EAAS,OAAA,CAC/D,EAEG,GAAA,CAACN,GAAY,CAACG,EACT,OAAAO,EAAA,cAAC,KAAG,CAAA,UAAWH,CAA2B,CAAA,EAGnD,GAAI,CAACP,EACH,uBACG,KAAG,CAAA,MAAM,MAAM,UAAWO,GACxBJ,CACH,EAIJ,MAAMQ,EAAkBH,EACtBD,EACAE,EAAY,4BAA4B,EACxC,CAAE,CAACA,EAAY,0BAA0B,CAAC,EAAGL,CAAQ,EACrDF,CAAA,EAGIU,EAAiB,IACrBR,mBACG,MAAI,CAAA,UAAWK,EAAY,oCAAoC,CAAA,kBAC7DI,EAAK,CAAA,QAAST,GAAW,MAAoBU,EAAYC,EAAS,KAAMC,EAAS,QAAS,CAC7F,EAGEC,EAAmB,IAAyC,CAChE,OAAQb,EAAS,CACf,IAAK,MACI,MAAA,YACT,IAAK,OACI,MAAA,YACX,CAAA,EAIA,OAAAM,EAAA,cAAC,KAAG,CAAA,MAAM,MAAM,UAAWC,EAAiB,YAAWM,EAAiB,CAAA,EACrEP,EAAA,cAAA,SAAA,CAAO,KAAK,SAAS,QAAAT,EAAkB,UAAWQ,EAAY,oBAAoB,EAAG,eAAcL,EAAU,CAAC,CAACA,EAAU,MACvH,EAAAQ,EAAA,EACAT,CACH,CACF,CAEJ,EAEAe,EAAenB"}

package/Textarea.js

@@ -1,2 +1,2 @@
-import o,{useState as I,useRef as U,useEffect as Y}from"react";import x from"classnames";import{FormMode as d,AnalyticsId as Z,AVERAGE_CHARACTER_WIDTH_PX as ee}from"./constants.js";import{u as te}from"./uuid.js";import{E as ae}from"./ErrorWrapper.js";import{a as re}from"./Label.js";import{M as ne}from"./MaxCharacters.js";import t from"./components/Textarea/styles.module.scss";const oe=r=>{const m="2rem",n="16px",u="4px";return`calc(${r*ee}px + ${m} + ${n} + ${u})`},A=o.forwardRef((r,m)=>{const{maxCharacters:n,maxText:u,width:h,testId:M,defaultValue:f,marginBottom:N,transparent:$,mode:s=d.onwhite,label:B,textareaId:b=te(),minRows:g=3,maxRows:i=10,grow:w,errorText:C,autoFocus:k,disabled:E,name:L,autoComplete:T,placeholder:S,readOnly:D,required:F,onChange:y,...V}=r,[q,R]=I(g),[v,z]=I(f||""),c=U(null),W=e=>{const l=e.rows;e.rows=g;const a=Math.floor((e.scrollHeight-16)/28);a===l&&(e.rows=a),a>=i&&(e.rows=i,e.scrollTop=e.scrollHeight),a<i?R(a):R(i)},G=s===d.ondark,O=s===d.onblueberry,P=!!n&&v.toString().length>n,H=s===d.oninvalid||!!C||P,X=x(t.textarea,{[t["textarea--gutterBottom"]]:N}),j=x(t["input-container"],{[t["input-container--transparent"]]:$,[t["input-container--on-blueberry"]]:O,[t["input-container--on-dark"]]:G,[t["input-container--invalid"]]:H,[t["input-container--disabled"]]:r.disabled}),J=x(t["input-container__input"],{[t["input-container__input--disabled"]]:r.disabled});Y(()=>{var e,p,l;if(w&&((e=c.current)!=null&&e.children)&&((p=c.current)!=null&&p.children[0])){const a=(l=c.current)==null?void 0:l.children[0];W(a)}},[]);const K=e=>{w&&W(e.target),z(e.target.value)},Q=e=>{y&&y(e),K(e)},_=h?oe(h):void 0;return o.createElement(ae,{errorText:C},o.createElement("div",{"data-testid":M,"data-analyticsid":Z.Textarea,className:X},re(B,b,s,E),o.createElement("div",{className:j,ref:c,style:{maxWidth:_}},o.createElement("textarea",{rows:q,defaultValue:f,id:b,className:J,ref:m,"aria-describedby":r["aria-describedby"]??void 0,"aria-invalid":!!H,autoFocus:k,disabled:E,name:L,autoComplete:T||void 0,placeholder:S,readOnly:D,required:F,onChange:Q,...V})),n&&o.createElement(ne,{maxCharacters:n,length:v.toString().length,maxText:u,mode:s,maxWidth:_})))});A.displayName="Textarea";const xe=A;export{xe as T};
+import o,{useState as A,useRef as Y,useEffect as M}from"react";import h from"classnames";import{FormMode as m,AnalyticsId as Z,AVERAGE_CHARACTER_WIDTH_PX as ee}from"./constants.js";import{u as te}from"./uuid.js";import{E as ae}from"./ErrorWrapper.js";import{a as re}from"./Label.js";import{M as ne}from"./MaxCharacters.js";import t from"./components/Textarea/styles.module.scss";const oe=r=>{const u="2rem",n="16px",p="4px";return`calc(${r*ee}px + ${u} + ${n} + ${p})`},N=o.forwardRef((r,u)=>{const{maxCharacters:n,maxText:p,width:f,testId:$,defaultValue:i="",marginBottom:B,transparent:k,mode:s=m.onwhite,label:L,textareaId:b=te(),minRows:g=3,maxRows:c=10,grow:w,errorText:C,autoFocus:S,disabled:E,name:D,autoComplete:T,placeholder:F,readOnly:V,required:q,onChange:y,...z}=r,[G,R]=A(g),[v,W]=A(i),l=Y(null);M(()=>{W(i)},[i]);const H=e=>{const d=e.rows;e.rows=g;const a=Math.floor((e.scrollHeight-16)/28);a===d&&(e.rows=a),a>=c&&(e.rows=c,e.scrollTop=e.scrollHeight),a<c?R(a):R(c)},O=s===m.ondark,P=s===m.onblueberry,X=!!n&&v.toString().length>n,_=s===m.oninvalid||!!C||X,j=h(t.textarea,{[t["textarea--gutterBottom"]]:B}),J=h(t["input-container"],{[t["input-container--transparent"]]:k,[t["input-container--on-blueberry"]]:P,[t["input-container--on-dark"]]:O,[t["input-container--invalid"]]:_,[t["input-container--disabled"]]:r.disabled}),K=h(t["input-container__input"],{[t["input-container__input--disabled"]]:r.disabled});M(()=>{var e,x,d;if(w&&((e=l.current)!=null&&e.children)&&((x=l.current)!=null&&x.children[0])){const a=(d=l.current)==null?void 0:d.children[0];H(a)}},[]);const Q=e=>{w&&H(e.target),W(e.target.value)},U=e=>{y&&y(e),Q(e)},I=f?oe(f):void 0;return o.createElement(ae,{errorText:C},o.createElement("div",{"data-testid":$,"data-analyticsid":Z.Textarea,className:j},re(L,b,s,E),o.createElement("div",{className:J,ref:l,style:{maxWidth:I}},o.createElement("textarea",{rows:G,defaultValue:i,id:b,className:K,ref:u,"aria-describedby":r["aria-describedby"]??void 0,"aria-invalid":!!_,autoFocus:S,disabled:E,name:D,autoComplete:T||void 0,placeholder:F,readOnly:V,required:q,onChange:U,...z})),n&&o.createElement(ne,{maxCharacters:n,length:v.toString().length,maxText:p,mode:s,maxWidth:I})))});N.displayName="Textarea";const xe=N;export{xe as T};
 //# sourceMappingURL=Textarea.js.map

package/Textarea.js.map

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

package/components/FormExample/index.js

@@ -1,12 +1,12 @@
-import m from"react";import{isTest as xt}from"../../utils/environment.js";import{B as pt}from"../../Button.js";import{C as te}from"../../Checkbox.js";import{F as ae}from"../../FormGroup.js";import{F as kt,a as Et}from"../../FormLayout.js";import Ke from"../Icons/Hospital.js";import{I as je}from"../../Input.js";import{L as T}from"../../Label.js";import{R as ve}from"../../RadioButton.js";import{S as ze}from"../../Select.js";import{T as Je}from"../../Textarea.js";import{V as _t}from"../../Validation.js";import"classnames";import"../Icons/Icon.js";import"../../constants.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../hooks/useBreakpoint.js";import"../../theme/grid.js";import"../../hooks/useHover.js";import"../../hooks/usePseudoClasses.js";import"../../hooks/useIcons.js";import"../../hooks/useSize.js";import"../../utils/debounce.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../Icons/ArrowRight.js";import"../Button/styles.module.scss";import"../../utils/refs.js";import"../Icons/Check.js";import"../Checkbox/styles.module.scss";import"../../utils/component.js";import"../../ErrorWrapper.js";import"../ErrorWrapper/styles.module.scss";import"../../Title.js";import"../Title/styles.module.scss";import"../FormGroup/styles.module.scss";import"../FormLayout/styles.module.scss";import"../../MaxCharacters.js";import"../MaxCharacters/styles.module.scss";import"../Input/styles.module.scss";import"../../Spacer.js";import"../Spacer/styles.module.scss";import"../Label/styles.module.scss";import"../../StatusDot.js";import"../Icons/Attachment.js";import"../Icons/Group.js";import"../Icons/NoAccess.js";import"../Icons/Undo.js";import"../StatusDot/styles.module.scss";import"../RadioButton/styles.module.scss";import"../Icons/ChevronDown.js";import"../Select/styles.module.scss";import"../Textarea/styles.module.scss";import"../Validation/styles.module.scss";var me=e=>e.type==="checkbox",ue=e=>e instanceof Date,L=e=>e==null;const nt=e=>typeof e=="object";var F=e=>!L(e)&&!Array.isArray(e)&&nt(e)&&!ue(e),Vt=e=>F(e)&&e.target?me(e.target)?e.target.checked:e.target.value:e,At=e=>e.substring(0,e.search(/\.\d+(\.|$)/))||e,Dt=(e,i)=>e.has(At(i)),St=e=>{const i=e.constructor&&e.constructor.prototype;return F(i)&&i.hasOwnProperty("isPrototypeOf")},Ce=typeof window<"u"&&typeof window.HTMLElement<"u"&&typeof document<"u";function Q(e){let i;const s=Array.isArray(e);if(e instanceof Date)i=new Date(e);else if(e instanceof Set)i=new Set(e);else if(!(Ce&&(e instanceof Blob||e instanceof FileList))&&(s||F(e)))if(i=s?[]:{},!s&&!St(e))i=e;else for(const r in e)e.hasOwnProperty(r)&&(i[r]=Q(e[r]));else return e;return i}var ge=e=>Array.isArray(e)?e.filter(Boolean):[],w=e=>e===void 0,d=(e,i,s)=>{if(!i||!F(e))return s;const r=ge(i.split(/[,[\].]+?/)).reduce((l,o)=>L(l)?l:l[o],e);return w(r)||r===e?w(e[i])?s:e[i]:r},re=e=>typeof e=="boolean";const Qe={BLUR:"blur",FOCUS_OUT:"focusout",CHANGE:"change"},W={onBlur:"onBlur",onChange:"onChange",onSubmit:"onSubmit",onTouched:"onTouched",all:"all"},J={max:"max",min:"min",maxLength:"maxLength",minLength:"minLength",pattern:"pattern",required:"required",validate:"validate"};m.createContext(null);var wt=(e,i,s,r=!0)=>{const l={defaultValues:i._defaultValues};for(const o in e)Object.defineProperty(l,o,{get:()=>{const f=o;return i._proxyFormState[f]!==W.all&&(i._proxyFormState[f]=!r||W.all),s&&(s[f]=!0),e[f]}});return l},P=e=>F(e)&&!Object.keys(e).length,Ft=(e,i,s,r)=>{s(e);const{name:l,...o}=e;return P(o)||Object.keys(o).length>=Object.keys(i).length||Object.keys(o).find(f=>i[f]===(!r||W.all))},De=e=>Array.isArray(e)?e:[e];function Tt(e){const i=m.useRef(e);i.current=e,m.useEffect(()=>{const s=!e.disabled&&i.current.subject&&i.current.subject.subscribe({next:i.current.next});return()=>{s&&s.unsubscribe()}},[e.disabled])}var j=e=>typeof e=="string",Ot=(e,i,s,r,l)=>j(e)?(r&&i.watch.add(e),d(s,e,l)):Array.isArray(e)?e.map(o=>(r&&i.watch.add(o),d(s,o))):(r&&(i.watchAll=!0),s),Le=e=>/^\w*$/.test(e),lt=e=>ge(e.replace(/["|']|\]/g,"").split(/\.|\[/));function E(e,i,s){let r=-1;const l=Le(i)?[i]:lt(i),o=l.length,f=o-1;for(;++r<o;){const x=l[r];let p=s;if(r!==f){const C=e[x];p=F(C)||Array.isArray(C)?C:isNaN(+l[r+1])?{}:[]}e[x]=p,e=e[x]}return e}var Ct=(e,i,s,r,l)=>i?{...s[e],types:{...s[e]&&s[e].types?s[e].types:{},[r]:l||!0}}:{};const Oe=(e,i,s)=>{for(const r of s||Object.keys(e)){const l=d(e,r);if(l){const{_f:o,...f}=l;if(o&&i(o.name)){if(o.ref.focus){o.ref.focus();break}else if(o.refs&&o.refs[0].focus){o.refs[0].focus();break}}else F(f)&&Oe(f,i)}}};var Xe=e=>({isOnSubmit:!e||e===W.onSubmit,isOnBlur:e===W.onBlur,isOnChange:e===W.onChange,isOnAll:e===W.all,isOnTouch:e===W.onTouched}),Ye=(e,i,s)=>!s&&(i.watchAll||i.watch.has(e)||[...i.watch].some(r=>e.startsWith(r)&&/^\.\w+/.test(e.slice(r.length)))),Lt=(e,i,s)=>{const r=ge(d(e,s));return E(r,"root",i[s]),E(e,s,r),e},Re=e=>e.type==="file",X=e=>typeof e=="function",be=e=>{if(!Ce)return!1;const i=e?e.ownerDocument:0;return e instanceof(i&&i.defaultView?i.defaultView.HTMLElement:HTMLElement)},he=e=>j(e),Ie=e=>e.type==="radio",xe=e=>e instanceof RegExp;const Ze={value:!1,isValid:!1},et={value:!0,isValid:!0};var at=e=>{if(Array.isArray(e)){if(e.length>1){const i=e.filter(s=>s&&s.checked&&!s.disabled).map(s=>s.value);return{value:i,isValid:!!i.length}}return e[0].checked&&!e[0].disabled?e[0].attributes&&!w(e[0].attributes.value)?w(e[0].value)||e[0].value===""?et:{value:e[0].value,isValid:!0}:et:Ze}return Ze};const tt={isValid:!1,value:null};var ot=e=>Array.isArray(e)?e.reduce((i,s)=>s&&s.checked&&!s.disabled?{isValid:!0,value:s.value}:i,tt):tt;function rt(e,i,s="validate"){if(he(e)||Array.isArray(e)&&e.every(he)||re(e)&&!e)return{type:s,message:he(e)?e:"",ref:i}}var oe=e=>F(e)&&!xe(e)?e:{value:e,message:""},st=async(e,i,s,r,l)=>{const{ref:o,refs:f,required:x,maxLength:p,minLength:C,min:H,max:_,pattern:h,validate:$,name:R,valueAsNumber:N,mount:ie,disabled:ne}=e._f,v=d(i,R);if(!ie||ne)return{};const U=f?f[0]:o,B=k=>{r&&U.reportValidity&&(U.setCustomValidity(re(k)?"":k||""),U.reportValidity())},A={},Y=Ie(o),I=me(o),ce=Y||I,G=(N||Re(o))&&w(o.value)&&w(v)||be(o)&&o.value===""||v===""||Array.isArray(v)&&!v.length,Z=Ct.bind(null,R,s,A),z=(k,b,D,M=J.maxLength,q=J.minLength)=>{const K=k?b:D;A[R]={type:k?M:q,message:K,ref:o,...Z(k?M:q,K)}};if(l?!Array.isArray(v)||!v.length:x&&(!ce&&(G||L(v))||re(v)&&!v||I&&!at(f).isValid||Y&&!ot(f).isValid)){const{value:k,message:b}=he(x)?{value:!!x,message:x}:oe(x);if(k&&(A[R]={type:J.required,message:b,ref:U,...Z(J.required,b)},!s))return B(b),A}if(!G&&(!L(H)||!L(_))){let k,b;const D=oe(_),M=oe(H);if(!L(v)&&!isNaN(v)){const q=o.valueAsNumber||v&&+v;L(D.value)||(k=q>D.value),L(M.value)||(b=q<M.value)}else{const q=o.valueAsDate||new Date(v),K=de=>new Date(new Date().toDateString()+" "+de),ee=o.type=="time",fe=o.type=="week";j(D.value)&&v&&(k=ee?K(v)>K(D.value):fe?v>D.value:q>new Date(D.value)),j(M.value)&&v&&(b=ee?K(v)<K(M.value):fe?v<M.value:q<new Date(M.value))}if((k||b)&&(z(!!k,D.message,M.message,J.max,J.min),!s))return B(A[R].message),A}if((p||C)&&!G&&(j(v)||l&&Array.isArray(v))){const k=oe(p),b=oe(C),D=!L(k.value)&&v.length>+k.value,M=!L(b.value)&&v.length<+b.value;if((D||M)&&(z(D,k.message,b.message),!s))return B(A[R].message),A}if(h&&!G&&j(v)){const{value:k,message:b}=oe(h);if(xe(k)&&!v.match(k)&&(A[R]={type:J.pattern,message:b,ref:o,...Z(J.pattern,b)},!s))return B(b),A}if($){if(X($)){const k=await $(v,i),b=rt(k,U);if(b&&(A[R]={...b,...Z(J.validate,b.message)},!s))return B(b.message),A}else if(F($)){let k={};for(const b in $){if(!P(k)&&!s)break;const D=rt(await $[b](v,i),U,b);D&&(k={...D,...Z(b,D.message)},B(D.message),s&&(A[R]=k))}if(!P(k)&&(A[R]={ref:U,...k},!s))return A}}return B(!0),A};function Rt(e,i){const s=i.slice(0,-1).length;let r=0;for(;r<s;)e=w(e)?r++:e[i[r++]];return e}function It(e){for(const i in e)if(e.hasOwnProperty(i)&&!w(e[i]))return!1;return!0}function O(e,i){const s=Array.isArray(i)?i:Le(i)?[i]:lt(i),r=s.length===1?e:Rt(e,s),l=s.length-1,o=s[l];return r&&delete r[o],l!==0&&(F(r)&&P(r)||Array.isArray(r)&&It(r))&&O(e,s.slice(0,-1)),e}function Se(){let e=[];return{get observers(){return e},next:l=>{for(const o of e)o.next&&o.next(l)},subscribe:l=>(e.push(l),{unsubscribe:()=>{e=e.filter(o=>o!==l)}}),unsubscribe:()=>{e=[]}}}var pe=e=>L(e)||!nt(e);function se(e,i){if(pe(e)||pe(i))return e===i;if(ue(e)&&ue(i))return e.getTime()===i.getTime();const s=Object.keys(e),r=Object.keys(i);if(s.length!==r.length)return!1;for(const l of s){const o=e[l];if(!r.includes(l))return!1;if(l!=="ref"){const f=i[l];if(ue(o)&&ue(f)||F(o)&&F(f)||Array.isArray(o)&&Array.isArray(f)?!se(o,f):o!==f)return!1}}return!0}var ut=e=>e.type==="select-multiple",Mt=e=>Ie(e)||me(e),we=e=>be(e)&&e.isConnected,ct=e=>{for(const i in e)if(X(e[i]))return!0;return!1};function ke(e,i={}){const s=Array.isArray(e);if(F(e)||s)for(const r in e)Array.isArray(e[r])||F(e[r])&&!ct(e[r])?(i[r]=Array.isArray(e[r])?[]:{},ke(e[r],i[r])):L(e[r])||(i[r]=!0);return i}function ft(e,i,s){const r=Array.isArray(e);if(F(e)||r)for(const l in e)Array.isArray(e[l])||F(e[l])&&!ct(e[l])?w(i)||pe(s[l])?s[l]=Array.isArray(e[l])?ke(e[l],[]):{...ke(e[l])}:ft(e[l],L(i)?{}:i[l],s[l]):s[l]=!se(e[l],i[l]);return s}var Fe=(e,i)=>ft(e,i,ke(i)),dt=(e,{valueAsNumber:i,valueAsDate:s,setValueAs:r})=>w(e)?e:i?e===""?NaN:e&&+e:s&&j(e)?new Date(e):r?r(e):e;function Te(e){const i=e.ref;if(!(e.refs?e.refs.every(s=>s.disabled):i.disabled))return Re(i)?i.files:Ie(i)?ot(e.refs).value:ut(i)?[...i.selectedOptions].map(({value:s})=>s):me(i)?at(e.refs).value:dt(w(i.value)?e.ref.value:i.value,e)}var Ut=(e,i,s,r)=>{const l={};for(const o of e){const f=d(i,o);f&&E(l,o,f._f)}return{criteriaMode:s,names:[...e],fields:l,shouldUseNativeValidation:r}},ye=e=>w(e)?e:xe(e)?e.source:F(e)?xe(e.value)?e.value.source:e.value:e,Bt=e=>e.mount&&(e.required||e.min||e.max||e.maxLength||e.minLength||e.pattern||e.validate);function it(e,i,s){const r=d(e,s);if(r||Le(s))return{error:r,name:s};const l=s.split(".");for(;l.length;){const o=l.join("."),f=d(i,o),x=d(e,o);if(f&&!Array.isArray(f)&&s!==o)return{name:s};if(x&&x.type)return{name:o,error:x};l.pop()}return{name:s}}var Nt=(e,i,s,r,l)=>l.isOnAll?!1:!s&&l.isOnTouch?!(i||e):(s?r.isOnBlur:l.isOnBlur)?!e:(s?r.isOnChange:l.isOnChange)?e:!0,qt=(e,i)=>!ge(d(e,i)).length&&O(e,i);const Pt={mode:W.onSubmit,reValidateMode:W.onChange,shouldFocusError:!0};function Ht(e={},i){let s={...Pt,...e},r={submitCount:0,isDirty:!1,isLoading:X(s.defaultValues),isValidating:!1,isSubmitted:!1,isSubmitting:!1,isSubmitSuccessful:!1,isValid:!1,touchedFields:{},dirtyFields:{},errors:{}},l={},o=F(s.defaultValues)||F(s.values)?Q(s.defaultValues||s.values)||{}:{},f=s.shouldUnregister?{}:Q(o),x={action:!1,mount:!1,watch:!1},p={mount:new Set,unMount:new Set,array:new Set,watch:new Set},C,H=0;const _={isDirty:!1,dirtyFields:!1,touchedFields:!1,isValidating:!1,isValid:!1,errors:!1},h={values:Se(),array:Se(),state:Se()},$=e.resetOptions&&e.resetOptions.keepDirtyValues,R=Xe(s.mode),N=Xe(s.reValidateMode),ie=s.criteriaMode===W.all,ne=t=>n=>{clearTimeout(H),H=setTimeout(t,n)},v=async t=>{if(_.isValid||t){const n=s.resolver?P((await G()).errors):await z(l,!0);n!==r.isValid&&h.state.next({isValid:n})}},U=t=>_.isValidating&&h.state.next({isValidating:t}),B=(t,n=[],a,y,c=!0,u=!0)=>{if(y&&a){if(x.action=!0,u&&Array.isArray(d(l,t))){const g=a(d(l,t),y.argA,y.argB);c&&E(l,t,g)}if(u&&Array.isArray(d(r.errors,t))){const g=a(d(r.errors,t),y.argA,y.argB);c&&E(r.errors,t,g),qt(r.errors,t)}if(_.touchedFields&&u&&Array.isArray(d(r.touchedFields,t))){const g=a(d(r.touchedFields,t),y.argA,y.argB);c&&E(r.touchedFields,t,g)}_.dirtyFields&&(r.dirtyFields=Fe(o,f)),h.state.next({name:t,isDirty:b(t,n),dirtyFields:r.dirtyFields,errors:r.errors,isValid:r.isValid})}else E(f,t,n)},A=(t,n)=>{E(r.errors,t,n),h.state.next({errors:r.errors})},Y=(t,n,a,y)=>{const c=d(l,t);if(c){const u=d(f,t,w(a)?d(o,t):a);w(u)||y&&y.defaultChecked||n?E(f,t,n?u:Te(c._f)):q(t,u),x.mount&&v()}},I=(t,n,a,y,c)=>{let u=!1,g=!1;const V={name:t};if(!a||y){_.isDirty&&(g=r.isDirty,r.isDirty=V.isDirty=b(),u=g!==V.isDirty);const S=se(d(o,t),n);g=d(r.dirtyFields,t),S?O(r.dirtyFields,t):E(r.dirtyFields,t,!0),V.dirtyFields=r.dirtyFields,u=u||_.dirtyFields&&g!==!S}if(a){const S=d(r.touchedFields,t);S||(E(r.touchedFields,t,a),V.touchedFields=r.touchedFields,u=u||_.touchedFields&&S!==a)}return u&&c&&h.state.next(V),u?V:{}},ce=(t,n,a,y)=>{const c=d(r.errors,t),u=_.isValid&&re(n)&&r.isValid!==n;if(e.delayError&&a?(C=ne(()=>A(t,a)),C(e.delayError)):(clearTimeout(H),C=null,a?E(r.errors,t,a):O(r.errors,t)),(a?!se(c,a):c)||!P(y)||u){const g={...y,...u&&re(n)?{isValid:n}:{},errors:r.errors,name:t};r={...r,...g},h.state.next(g)}U(!1)},G=async t=>s.resolver(f,s.context,Ut(t||p.mount,l,s.criteriaMode,s.shouldUseNativeValidation)),Z=async t=>{const{errors:n}=await G(t);if(t)for(const a of t){const y=d(n,a);y?E(r.errors,a,y):O(r.errors,a)}else r.errors=n;return n},z=async(t,n,a={valid:!0})=>{for(const y in t){const c=t[y];if(c){const{_f:u,...g}=c;if(u){const V=p.array.has(u.name),S=await st(c,f,ie,s.shouldUseNativeValidation&&!n,V);if(S[u.name]&&(a.valid=!1,n))break;!n&&(d(S,u.name)?V?Lt(r.errors,S,u.name):E(r.errors,u.name,S[u.name]):O(r.errors,u.name))}g&&await z(g,n,a)}}return a.valid},k=()=>{for(const t of p.unMount){const n=d(l,t);n&&(n._f.refs?n._f.refs.every(a=>!we(a)):!we(n._f.ref))&&Ee(t)}p.unMount=new Set},b=(t,n)=>(t&&n&&E(f,t,n),!se(Me(),o)),D=(t,n,a)=>Ot(t,p,{...x.mount?f:w(n)?o:j(t)?{[t]:n}:n},a,n),M=t=>ge(d(x.mount?f:o,t,e.shouldUnregister?d(o,t,[]):[])),q=(t,n,a={})=>{const y=d(l,t);let c=n;if(y){const u=y._f;u&&(!u.disabled&&E(f,t,dt(n,u)),c=be(u.ref)&&L(n)?"":n,ut(u.ref)?[...u.ref.options].forEach(g=>g.selected=c.includes(g.value)):u.refs?me(u.ref)?u.refs.length>1?u.refs.forEach(g=>(!g.defaultChecked||!g.disabled)&&(g.checked=Array.isArray(c)?!!c.find(V=>V===g.value):c===g.value)):u.refs[0]&&(u.refs[0].checked=!!c):u.refs.forEach(g=>g.checked=g.value===c):Re(u.ref)?u.ref.value="":(u.ref.value=c,u.ref.type||h.values.next({name:t,values:{...f}})))}(a.shouldDirty||a.shouldTouch)&&I(t,c,a.shouldTouch,a.shouldDirty,!0),a.shouldValidate&&de(t)},K=(t,n,a)=>{for(const y in n){const c=n[y],u=`${t}.${y}`,g=d(l,u);(p.array.has(t)||!pe(c)||g&&!g._f)&&!ue(c)?K(u,c,a):q(u,c,a)}},ee=(t,n,a={})=>{const y=d(l,t),c=p.array.has(t),u=Q(n);E(f,t,u),c?(h.array.next({name:t,values:{...f}}),(_.isDirty||_.dirtyFields)&&a.shouldDirty&&h.state.next({name:t,dirtyFields:Fe(o,f),isDirty:b(t,u)})):y&&!y._f&&!L(u)?K(t,u,a):q(t,u,a),Ye(t,p)&&h.state.next({...r}),h.values.next({name:t,values:{...f}}),!x.mount&&i()},fe=async t=>{const n=t.target;let a=n.name,y=!0;const c=d(l,a),u=()=>n.type?Te(c._f):Vt(t);if(c){let g,V;const S=u(),le=t.type===Qe.BLUR||t.type===Qe.FOCUS_OUT,vt=!Bt(c._f)&&!s.resolver&&!d(r.errors,a)&&!c._f.deps||Nt(le,d(r.touchedFields,a),r.isSubmitted,N,R),Ve=Ye(a,p,le);E(f,a,S),le?(c._f.onBlur&&c._f.onBlur(t),C&&C(0)):c._f.onChange&&c._f.onChange(t);const Ae=I(a,S,le,!1),ht=!P(Ae)||Ve;if(!le&&h.values.next({name:a,type:t.type,values:{...f}}),vt)return _.isValid&&v(),ht&&h.state.next({name:a,...Ve?{}:Ae});if(!le&&Ve&&h.state.next({...r}),U(!0),s.resolver){const{errors:We}=await G([a]),bt=it(r.errors,l,a),Ge=it(We,l,bt.name||a);g=Ge.error,a=Ge.name,V=P(We)}else g=(await st(c,f,ie,s.shouldUseNativeValidation))[a],y=Number.isNaN(S)||S===d(f,a,S),y&&(g?V=!1:_.isValid&&(V=await z(l,!0)));y&&(c._f.deps&&de(c._f.deps),ce(a,V,g,Ae))}},de=async(t,n={})=>{let a,y;const c=De(t);if(U(!0),s.resolver){const u=await Z(w(t)?t:c);a=P(u),y=t?!c.some(g=>d(u,g)):a}else t?(y=(await Promise.all(c.map(async u=>{const g=d(l,u);return await z(g&&g._f?{[u]:g}:g)}))).every(Boolean),!(!y&&!r.isValid)&&v()):y=a=await z(l);return h.state.next({...!j(t)||_.isValid&&a!==r.isValid?{}:{name:t},...s.resolver||!t?{isValid:a}:{},errors:r.errors,isValidating:!1}),n.shouldFocus&&!y&&Oe(l,u=>u&&d(r.errors,u),t?c:p.mount),y},Me=t=>{const n={...o,...x.mount?f:{}};return w(t)?n:j(t)?d(n,t):t.map(a=>d(n,a))},Ue=(t,n)=>({invalid:!!d((n||r).errors,t),isDirty:!!d((n||r).dirtyFields,t),isTouched:!!d((n||r).touchedFields,t),error:d((n||r).errors,t)}),yt=t=>{t&&De(t).forEach(n=>O(r.errors,n)),h.state.next({errors:t?r.errors:{}})},Be=(t,n,a)=>{const y=(d(l,t,{_f:{}})._f||{}).ref;E(r.errors,t,{...n,ref:y}),h.state.next({name:t,errors:r.errors,isValid:!1}),a&&a.shouldFocus&&y&&y.focus&&y.focus()},mt=(t,n)=>X(t)?h.values.subscribe({next:a=>t(D(void 0,n),a)}):D(t,n,!0),Ee=(t,n={})=>{for(const a of t?De(t):p.mount)p.mount.delete(a),p.array.delete(a),n.keepValue||(O(l,a),O(f,a)),!n.keepError&&O(r.errors,a),!n.keepDirty&&O(r.dirtyFields,a),!n.keepTouched&&O(r.touchedFields,a),!s.shouldUnregister&&!n.keepDefaultValue&&O(o,a);h.values.next({values:{...f}}),h.state.next({...r,...n.keepDirty?{isDirty:b()}:{}}),!n.keepIsValid&&v()},Ne=({disabled:t,name:n,field:a,fields:y})=>{if(re(t)){const c=t?void 0:d(f,n,Te(a?a._f:d(y,n)._f));E(f,n,c),I(n,c,!1,!1,!0)}},_e=(t,n={})=>{let a=d(l,t);const y=re(n.disabled);return E(l,t,{...a||{},_f:{...a&&a._f?a._f:{ref:{name:t}},name:t,mount:!0,...n}}),p.mount.add(t),a?Ne({field:a,disabled:n.disabled,name:t}):Y(t,!0,n.value),{...y?{disabled:n.disabled}:{},...s.progressive?{required:!!n.required,min:ye(n.min),max:ye(n.max),minLength:ye(n.minLength),maxLength:ye(n.maxLength),pattern:ye(n.pattern)}:{},name:t,onChange:fe,onBlur:fe,ref:c=>{if(c){_e(t,n),a=d(l,t);const u=w(c.value)&&c.querySelectorAll&&c.querySelectorAll("input,select,textarea")[0]||c,g=Mt(u),V=a._f.refs||[];if(g?V.find(S=>S===u):u===a._f.ref)return;E(l,t,{_f:{...a._f,...g?{refs:[...V.filter(we),u,...Array.isArray(d(o,t))?[{}]:[]],ref:{type:u.type,name:t}}:{ref:u}}}),Y(t,!1,void 0,u)}else a=d(l,t,{}),a._f&&(a._f.mount=!1),(s.shouldUnregister||n.shouldUnregister)&&!(Dt(p.array,t)&&x.action)&&p.unMount.add(t)}}},qe=()=>s.shouldFocusError&&Oe(l,t=>t&&d(r.errors,t),p.mount),Pe=(t,n)=>async a=>{a&&(a.preventDefault&&a.preventDefault(),a.persist&&a.persist());let y=Q(f);if(h.state.next({isSubmitting:!0}),s.resolver){const{errors:c,values:u}=await G();r.errors=c,y=u}else await z(l);O(r.errors,"root"),P(r.errors)?(h.state.next({errors:{}}),await t(y,a)):(n&&await n({...r.errors},a),qe(),setTimeout(qe)),h.state.next({isSubmitted:!0,isSubmitting:!1,isSubmitSuccessful:P(r.errors),submitCount:r.submitCount+1,errors:r.errors})},gt=(t,n={})=>{d(l,t)&&(w(n.defaultValue)?ee(t,d(o,t)):(ee(t,n.defaultValue),E(o,t,n.defaultValue)),n.keepTouched||O(r.touchedFields,t),n.keepDirty||(O(r.dirtyFields,t),r.isDirty=n.defaultValue?b(t,d(o,t)):b()),n.keepError||(O(r.errors,t),_.isValid&&v()),h.state.next({...r}))},He=(t,n={})=>{const a=t?Q(t):o,y=Q(a),c=t&&!P(t)?y:o;if(n.keepDefaultValues||(o=a),!n.keepValues){if(n.keepDirtyValues||$)for(const u of p.mount)d(r.dirtyFields,u)?E(c,u,d(f,u)):ee(u,d(c,u));else{if(Ce&&w(t))for(const u of p.mount){const g=d(l,u);if(g&&g._f){const V=Array.isArray(g._f.refs)?g._f.refs[0]:g._f.ref;if(be(V)){const S=V.closest("form");if(S){S.reset();break}}}}l={}}f=e.shouldUnregister?n.keepDefaultValues?Q(o):{}:Q(c),h.array.next({values:{...c}}),h.values.next({values:{...c}})}p={mount:new Set,unMount:new Set,array:new Set,watch:new Set,watchAll:!1,focus:""},!x.mount&&i(),x.mount=!_.isValid||!!n.keepIsValid,x.watch=!!e.shouldUnregister,h.state.next({submitCount:n.keepSubmitCount?r.submitCount:0,isDirty:n.keepDirty?r.isDirty:!!(n.keepDefaultValues&&!se(t,o)),isSubmitted:n.keepIsSubmitted?r.isSubmitted:!1,dirtyFields:n.keepDirtyValues?r.dirtyFields:n.keepDefaultValues&&t?Fe(o,t):{},touchedFields:n.keepTouched?r.touchedFields:{},errors:n.keepErrors?r.errors:{},isSubmitSuccessful:n.keepIsSubmitSuccessful?r.isSubmitSuccessful:!1,isSubmitting:!1})},$e=(t,n)=>He(X(t)?t(f):t,n);return{control:{register:_e,unregister:Ee,getFieldState:Ue,handleSubmit:Pe,setError:Be,_executeSchema:G,_getWatch:D,_getDirty:b,_updateValid:v,_removeUnmounted:k,_updateFieldArray:B,_updateDisabledField:Ne,_getFieldArray:M,_reset:He,_resetDefaultValues:()=>X(s.defaultValues)&&s.defaultValues().then(t=>{$e(t,s.resetOptions),h.state.next({isLoading:!1})}),_updateFormState:t=>{r={...r,...t}},_subjects:h,_proxyFormState:_,get _fields(){return l},get _formValues(){return f},get _state(){return x},set _state(t){x=t},get _defaultValues(){return o},get _names(){return p},set _names(t){p=t},get _formState(){return r},set _formState(t){r=t},get _options(){return s},set _options(t){s={...s,...t}}},trigger:de,register:_e,handleSubmit:Pe,watch:mt,setValue:ee,getValues:Me,reset:$e,resetField:gt,clearErrors:yt,unregister:Ee,setError:Be,setFocus:(t,n={})=>{const a=d(l,t),y=a&&a._f;if(y){const c=y.refs?y.refs[0]:y.ref;c.focus&&(c.focus(),n.shouldSelect&&c.select())}},getFieldState:Ue}}function $t(e={}){const i=m.useRef(),s=m.useRef(),[r,l]=m.useState({isDirty:!1,isValidating:!1,isLoading:X(e.defaultValues),isSubmitted:!1,isSubmitting:!1,isSubmitSuccessful:!1,isValid:!1,submitCount:0,dirtyFields:{},touchedFields:{},errors:{},defaultValues:X(e.defaultValues)?void 0:e.defaultValues});i.current||(i.current={...Ht(e,()=>l(f=>({...f}))),formState:r});const o=i.current.control;return o._options=e,Tt({subject:o._subjects.state,next:f=>{Ft(f,o._proxyFormState,o._updateFormState,!0)&&l({...o._formState})}}),m.useEffect(()=>{e.values&&!se(e.values,s.current)?(o._reset(e.values,o._options.resetOptions),s.current=e.values):o._resetDefaultValues()},[e.values,o]),m.useEffect(()=>{o._state.mount||(o._updateValid(),o._state.mount=!0),o._state.watch&&(o._state.watch=!1,o._subjects.state.next({...o._formState})),o._removeUnmounted()}),i.current.formState=wt(r,o),i.current}var Wt=(e=>(e.formgroup="formgroup",e.checkbox="checkbox",e.radiobutton="radiobutton",e.textarea="textarea",e.input="input",e.select="select",e))(Wt||{});const Gt=e=>{const{exampleType:i="formgroup"}=e,{register:s,handleSubmit:r,formState:{errors:l}}=$t(),o=new Date;o.setHours(0),o.setMinutes(0),o.setSeconds(0);const f=new Date;f.setDate(o.getDate()-5),f.setHours(6),f.setMinutes(10),f.setSeconds(0);const x=new Date;x.setDate(o.getDate()+5),x.setHours(22),x.setMinutes(0),x.setSeconds(0);const p="field1",C="field2",H="field3",_="field4",h="field5",$="field6",R=l.field1||l.field2||l.field3||l.field4||l.field5||l.field6||l.field7||l.field8||l.field9,N="Du må velge et alternativ",ie="Du må velge to alternativ",ne="Det kan ikke legges inn mer enn 40 tegn",v="Du må skrive noe her",U='Du må velge "Option 2"';`${f.toLocaleDateString("nb")}${x.toLocaleDateString("nb")}`,`${f.toLocaleTimeString("nb",{hour:"2-digit",minute:"2-digit"})}${x.toLocaleTimeString("nb",{hour:"2-digit",minute:"2-digit"})}`;const B=I=>I.length>=2||ie,A=I=>I.toString()==="Option 2"||U,Y=()=>{if(i==="formgroup"){const I=[m.createElement(te,{key:0,inputId:"checkbox1",label:m.createElement(T,{labelTexts:[{text:"Checkbox 1"}]}),...s(p,{required:N})}),m.createElement(te,{key:1,inputId:"checkbox2",label:m.createElement(T,{labelTexts:[{text:"Checkbox 2"}]}),...s(p,{required:N})}),m.createElement(te,{key:2,inputId:"checkbox3",label:m.createElement(T,{labelTexts:[{text:"Checkbox 3"}]}),...s(p,{required:N})})];return[m.createElement(ae,{key:0,title:"Gruppe tittel",legend:"Velg minst en",error:l.field1?l.field1.message:void 0,variant:e.variant},m.createElement(kt,{maxColumns:Et.two},I.map(ce=>ce))),m.createElement(ae,{key:1,legend:"Velg minst to",error:l.field2?l.field2.message:void 0,variant:e.variant},m.createElement(te,{inputId:"checkbox4",label:m.createElement(T,{labelTexts:[{text:"Checkbox 4"}]}),...s(C,{validate:B})}),m.createElement(te,{inputId:"checkbox5",label:m.createElement(T,{labelTexts:[{text:"Checkbox 5"}]}),...s(C,{validate:B})}),m.createElement(te,{inputId:"checkbox6",label:m.createElement(T,{labelTexts:[{text:"Checkbox 6"}]}),...s(C,{validate:B})})),m.createElement(ae,{key:2,legend:"Velg en",error:l.field3?l.field3.message:void 0,variant:e.variant},m.createElement(ve,{inputId:"radiobutton1",label:m.createElement(T,{labelTexts:[{text:"Radiobutton 1"}]}),...s(H,{required:N})}),m.createElement(ve,{inputId:"radiobutton2",label:m.createElement(T,{labelTexts:[{text:"Radiobutton 2"}]}),...s(H,{required:N})}),m.createElement(ve,{inputId:"radiobutton3",label:m.createElement(T,{labelTexts:[{text:"Radiobutton 3"}]}),...s(H,{required:N})})),m.createElement(ae,{key:3,error:l.field4?l.field4.message:void 0},m.createElement(Je,{defaultValue:`Dette er en test 
+import y from"react";import{isTest as _t}from"../../utils/environment.js";import{B as Et}from"../../Button.js";import{C as re}from"../../Checkbox.js";import{F as ae}from"../../FormGroup.js";import{F as Vt,a as Dt}from"../../FormLayout.js";import ze from"../Icons/Hospital.js";import{I as Je}from"../../Input.js";import{L as T}from"../../Label.js";import{R as he}from"../../RadioButton.js";import{S as Qe}from"../../Select.js";import{T as Xe}from"../../Textarea.js";import{V as At}from"../../Validation.js";import"classnames";import"../Icons/Icon.js";import"../../constants.js";import"../../hooks/useUuid.js";import"../../uuid.js";import"../../hooks/useBreakpoint.js";import"../../theme/grid.js";import"../../hooks/useHover.js";import"../../hooks/usePseudoClasses.js";import"../../hooks/useIcons.js";import"../../hooks/useSize.js";import"../../utils/debounce.js";import"../../theme/currys/color.js";import"../../theme/index.js";import"../../theme/palette.js";import"../../theme/spacers.js";import"../Icons/ArrowRight.js";import"../Button/styles.module.scss";import"../../utils/refs.js";import"../Icons/Check.js";import"../Checkbox/styles.module.scss";import"../../utils/component.js";import"../../ErrorWrapper.js";import"../ErrorWrapper/styles.module.scss";import"../../Title.js";import"../Title/styles.module.scss";import"../FormGroup/styles.module.scss";import"../FormLayout/styles.module.scss";import"../../MaxCharacters.js";import"../MaxCharacters/styles.module.scss";import"../Input/styles.module.scss";import"../../Spacer.js";import"../Spacer/styles.module.scss";import"../Label/styles.module.scss";import"../../StatusDot.js";import"../Icons/Attachment.js";import"../Icons/Group.js";import"../Icons/NoAccess.js";import"../Icons/Undo.js";import"../StatusDot/styles.module.scss";import"../RadioButton/styles.module.scss";import"../Icons/ChevronDown.js";import"../Select/styles.module.scss";import"../Textarea/styles.module.scss";import"../Validation/styles.module.scss";var ye=e=>e.type==="checkbox",ue=e=>e instanceof Date,L=e=>e==null;const at=e=>typeof e=="object";var w=e=>!L(e)&&!Array.isArray(e)&&at(e)&&!ue(e),St=e=>w(e)&&e.target?ye(e.target)?e.target.checked:e.target.value:e,Ft=e=>e.substring(0,e.search(/\.\d+(\.|$)/))||e,wt=(e,i)=>e.has(Ft(i)),Tt=e=>{const i=e.constructor&&e.constructor.prototype;return w(i)&&i.hasOwnProperty("isPrototypeOf")},Ie=typeof window<"u"&&typeof window.HTMLElement<"u"&&typeof document<"u";function Q(e){let i;const s=Array.isArray(e);if(e instanceof Date)i=new Date(e);else if(e instanceof Set)i=new Set(e);else if(!(Ie&&(e instanceof Blob||e instanceof FileList))&&(s||w(e)))if(i=s?[]:{},!s&&!Tt(e))i=e;else for(const r in e)e.hasOwnProperty(r)&&(i[r]=Q(e[r]));else return e;return i}var me=e=>Array.isArray(e)?e.filter(Boolean):[],S=e=>e===void 0,m=(e,i,s)=>{if(!i||!w(e))return s;const r=me(i.split(/[,[\].]+?/)).reduce((l,o)=>L(l)?l:l[o],e);return S(r)||r===e?S(e[i])?s:e[i]:r},X=e=>typeof e=="boolean";const Ye={BLUR:"blur",FOCUS_OUT:"focusout",CHANGE:"change"},W={onBlur:"onBlur",onChange:"onChange",onSubmit:"onSubmit",onTouched:"onTouched",all:"all"},J={max:"max",min:"min",maxLength:"maxLength",minLength:"minLength",pattern:"pattern",required:"required",validate:"validate"};y.createContext(null);var Ot=(e,i,s,r=!0)=>{const l={defaultValues:i._defaultValues};for(const o in e)Object.defineProperty(l,o,{get:()=>{const c=o;return i._proxyFormState[c]!==W.all&&(i._proxyFormState[c]=!r||W.all),s&&(s[c]=!0),e[c]}});return l},P=e=>w(e)&&!Object.keys(e).length,Ct=(e,i,s,r)=>{s(e);const{name:l,...o}=e;return P(o)||Object.keys(o).length>=Object.keys(i).length||Object.keys(o).find(c=>i[c]===(!r||W.all))},we=e=>Array.isArray(e)?e:[e];function Lt(e){const i=y.useRef(e);i.current=e,y.useEffect(()=>{const s=!e.disabled&&i.current.subject&&i.current.subject.subscribe({next:i.current.next});return()=>{s&&s.unsubscribe()}},[e.disabled])}var j=e=>typeof e=="string",It=(e,i,s,r,l)=>j(e)?(r&&i.watch.add(e),m(s,e,l)):Array.isArray(e)?e.map(o=>(r&&i.watch.add(o),m(s,o))):(r&&(i.watchAll=!0),s),Re=e=>/^\w*$/.test(e),ot=e=>me(e.replace(/["|']|\]/g,"").split(/\.|\[/));function E(e,i,s){let r=-1;const l=Re(i)?[i]:ot(i),o=l.length,c=o-1;for(;++r<o;){const h=l[r];let p=s;if(r!==c){const C=e[h];p=w(C)||Array.isArray(C)?C:isNaN(+l[r+1])?{}:[]}e[h]=p,e=e[h]}return e}var Rt=(e,i,s,r,l)=>i?{...s[e],types:{...s[e]&&s[e].types?s[e].types:{},[r]:l||!0}}:{},Ze=e=>({isOnSubmit:!e||e===W.onSubmit,isOnBlur:e===W.onBlur,isOnChange:e===W.onChange,isOnAll:e===W.all,isOnTouch:e===W.onTouched}),et=(e,i,s)=>!s&&(i.watchAll||i.watch.has(e)||[...i.watch].some(r=>e.startsWith(r)&&/^\.\w+/.test(e.slice(r.length))));const be=(e,i,s,r)=>{for(const l of s||Object.keys(e)){const o=m(e,l);if(o){const{_f:c,...h}=o;if(c){if(c.refs&&c.refs[0]&&i(c.refs[0],l)&&!r)break;if(c.ref&&i(c.ref,c.name)&&!r)break}else w(h)&&be(h,i)}}};var Mt=(e,i,s)=>{const r=me(m(e,s));return E(r,"root",i[s]),E(e,s,r),e},Me=e=>e.type==="file",Y=e=>typeof e=="function",pe=e=>{if(!Ie)return!1;const i=e?e.ownerDocument:0;return e instanceof(i&&i.defaultView?i.defaultView.HTMLElement:HTMLElement)},xe=e=>j(e),Ue=e=>e.type==="radio",ke=e=>e instanceof RegExp;const tt={value:!1,isValid:!1},rt={value:!0,isValid:!0};var ut=e=>{if(Array.isArray(e)){if(e.length>1){const i=e.filter(s=>s&&s.checked&&!s.disabled).map(s=>s.value);return{value:i,isValid:!!i.length}}return e[0].checked&&!e[0].disabled?e[0].attributes&&!S(e[0].attributes.value)?S(e[0].value)||e[0].value===""?rt:{value:e[0].value,isValid:!0}:rt:tt}return tt};const st={isValid:!1,value:null};var ct=e=>Array.isArray(e)?e.reduce((i,s)=>s&&s.checked&&!s.disabled?{isValid:!0,value:s.value}:i,st):st;function it(e,i,s="validate"){if(xe(e)||Array.isArray(e)&&e.every(xe)||X(e)&&!e)return{type:s,message:xe(e)?e:"",ref:i}}var oe=e=>w(e)&&!ke(e)?e:{value:e,message:""},nt=async(e,i,s,r,l)=>{const{ref:o,refs:c,required:h,maxLength:p,minLength:C,min:H,max:V,pattern:b,validate:$,name:I,valueAsNumber:N,mount:ie,disabled:ne}=e._f,v=m(i,I);if(!ie||ne)return{};const U=c?c[0]:o,B=k=>{r&&U.reportValidity&&(U.setCustomValidity(X(k)?"":k||""),U.reportValidity())},D={},Z=Ue(o),R=ye(o),ce=Z||R,G=(N||Me(o))&&S(o.value)&&S(v)||pe(o)&&o.value===""||v===""||Array.isArray(v)&&!v.length,ee=Rt.bind(null,I,s,D),z=(k,x,A,M=J.maxLength,q=J.minLength)=>{const K=k?x:A;D[I]={type:k?M:q,message:K,ref:o,...ee(k?M:q,K)}};if(l?!Array.isArray(v)||!v.length:h&&(!ce&&(G||L(v))||X(v)&&!v||R&&!ut(c).isValid||Z&&!ct(c).isValid)){const{value:k,message:x}=xe(h)?{value:!!h,message:h}:oe(h);if(k&&(D[I]={type:J.required,message:x,ref:U,...ee(J.required,x)},!s))return B(x),D}if(!G&&(!L(H)||!L(V))){let k,x;const A=oe(V),M=oe(H);if(!L(v)&&!isNaN(v)){const q=o.valueAsNumber||v&&+v;L(A.value)||(k=q>A.value),L(M.value)||(x=q<M.value)}else{const q=o.valueAsDate||new Date(v),K=ge=>new Date(new Date().toDateString()+" "+ge),te=o.type=="time",fe=o.type=="week";j(A.value)&&v&&(k=te?K(v)>K(A.value):fe?v>A.value:q>new Date(A.value)),j(M.value)&&v&&(x=te?K(v)<K(M.value):fe?v<M.value:q<new Date(M.value))}if((k||x)&&(z(!!k,A.message,M.message,J.max,J.min),!s))return B(D[I].message),D}if((p||C)&&!G&&(j(v)||l&&Array.isArray(v))){const k=oe(p),x=oe(C),A=!L(k.value)&&v.length>+k.value,M=!L(x.value)&&v.length<+x.value;if((A||M)&&(z(A,k.message,x.message),!s))return B(D[I].message),D}if(b&&!G&&j(v)){const{value:k,message:x}=oe(b);if(ke(k)&&!v.match(k)&&(D[I]={type:J.pattern,message:x,ref:o,...ee(J.pattern,x)},!s))return B(x),D}if($){if(Y($)){const k=await $(v,i),x=it(k,U);if(x&&(D[I]={...x,...ee(J.validate,x.message)},!s))return B(x.message),D}else if(w($)){let k={};for(const x in $){if(!P(k)&&!s)break;const A=it(await $[x](v,i),U,x);A&&(k={...A,...ee(x,A.message)},B(A.message),s&&(D[I]=k))}if(!P(k)&&(D[I]={ref:U,...k},!s))return D}}return B(!0),D};function Ut(e,i){const s=i.slice(0,-1).length;let r=0;for(;r<s;)e=S(e)?r++:e[i[r++]];return e}function Bt(e){for(const i in e)if(e.hasOwnProperty(i)&&!S(e[i]))return!1;return!0}function O(e,i){const s=Array.isArray(i)?i:Re(i)?[i]:ot(i),r=s.length===1?e:Ut(e,s),l=s.length-1,o=s[l];return r&&delete r[o],l!==0&&(w(r)&&P(r)||Array.isArray(r)&&Bt(r))&&O(e,s.slice(0,-1)),e}function Te(){let e=[];return{get observers(){return e},next:l=>{for(const o of e)o.next&&o.next(l)},subscribe:l=>(e.push(l),{unsubscribe:()=>{e=e.filter(o=>o!==l)}}),unsubscribe:()=>{e=[]}}}var _e=e=>L(e)||!at(e);function se(e,i){if(_e(e)||_e(i))return e===i;if(ue(e)&&ue(i))return e.getTime()===i.getTime();const s=Object.keys(e),r=Object.keys(i);if(s.length!==r.length)return!1;for(const l of s){const o=e[l];if(!r.includes(l))return!1;if(l!=="ref"){const c=i[l];if(ue(o)&&ue(c)||w(o)&&w(c)||Array.isArray(o)&&Array.isArray(c)?!se(o,c):o!==c)return!1}}return!0}var ft=e=>e.type==="select-multiple",Nt=e=>Ue(e)||ye(e),Oe=e=>pe(e)&&e.isConnected,dt=e=>{for(const i in e)if(Y(e[i]))return!0;return!1};function Ee(e,i={}){const s=Array.isArray(e);if(w(e)||s)for(const r in e)Array.isArray(e[r])||w(e[r])&&!dt(e[r])?(i[r]=Array.isArray(e[r])?[]:{},Ee(e[r],i[r])):L(e[r])||(i[r]=!0);return i}function yt(e,i,s){const r=Array.isArray(e);if(w(e)||r)for(const l in e)Array.isArray(e[l])||w(e[l])&&!dt(e[l])?S(i)||_e(s[l])?s[l]=Array.isArray(e[l])?Ee(e[l],[]):{...Ee(e[l])}:yt(e[l],L(i)?{}:i[l],s[l]):s[l]=!se(e[l],i[l]);return s}var Ce=(e,i)=>yt(e,i,Ee(i)),mt=(e,{valueAsNumber:i,valueAsDate:s,setValueAs:r})=>S(e)?e:i?e===""?NaN:e&&+e:s&&j(e)?new Date(e):r?r(e):e;function Le(e){const i=e.ref;if(!(e.refs?e.refs.every(s=>s.disabled):i.disabled))return Me(i)?i.files:Ue(i)?ct(e.refs).value:ft(i)?[...i.selectedOptions].map(({value:s})=>s):ye(i)?ut(e.refs).value:mt(S(i.value)?e.ref.value:i.value,e)}var qt=(e,i,s,r)=>{const l={};for(const o of e){const c=m(i,o);c&&E(l,o,c._f)}return{criteriaMode:s,names:[...e],fields:l,shouldUseNativeValidation:r}},de=e=>S(e)?e:ke(e)?e.source:w(e)?ke(e.value)?e.value.source:e.value:e,Pt=e=>e.mount&&(e.required||e.min||e.max||e.maxLength||e.minLength||e.pattern||e.validate);function lt(e,i,s){const r=m(e,s);if(r||Re(s))return{error:r,name:s};const l=s.split(".");for(;l.length;){const o=l.join("."),c=m(i,o),h=m(e,o);if(c&&!Array.isArray(c)&&s!==o)return{name:s};if(h&&h.type)return{name:o,error:h};l.pop()}return{name:s}}var Ht=(e,i,s,r,l)=>l.isOnAll?!1:!s&&l.isOnTouch?!(i||e):(s?r.isOnBlur:l.isOnBlur)?!e:(s?r.isOnChange:l.isOnChange)?e:!0,$t=(e,i)=>!me(m(e,i)).length&&O(e,i);const Wt={mode:W.onSubmit,reValidateMode:W.onChange,shouldFocusError:!0};function Gt(e={},i){let s={...Wt,...e},r={submitCount:0,isDirty:!1,isLoading:Y(s.defaultValues),isValidating:!1,isSubmitted:!1,isSubmitting:!1,isSubmitSuccessful:!1,isValid:!1,touchedFields:{},dirtyFields:{},errors:{},disabled:!1},l={},o=w(s.defaultValues)||w(s.values)?Q(s.defaultValues||s.values)||{}:{},c=s.shouldUnregister?{}:Q(o),h={action:!1,mount:!1,watch:!1},p={mount:new Set,unMount:new Set,array:new Set,watch:new Set},C,H=0;const V={isDirty:!1,dirtyFields:!1,touchedFields:!1,isValidating:!1,isValid:!1,errors:!1},b={values:Te(),array:Te(),state:Te()},$=e.resetOptions&&e.resetOptions.keepDirtyValues,I=Ze(s.mode),N=Ze(s.reValidateMode),ie=s.criteriaMode===W.all,ne=t=>n=>{clearTimeout(H),H=setTimeout(t,n)},v=async t=>{if(V.isValid||t){const n=s.resolver?P((await G()).errors):await z(l,!0);n!==r.isValid&&b.state.next({isValid:n})}},U=t=>V.isValidating&&b.state.next({isValidating:t}),B=(t,n=[],a,d,f=!0,u=!0)=>{if(d&&a){if(h.action=!0,u&&Array.isArray(m(l,t))){const g=a(m(l,t),d.argA,d.argB);f&&E(l,t,g)}if(u&&Array.isArray(m(r.errors,t))){const g=a(m(r.errors,t),d.argA,d.argB);f&&E(r.errors,t,g),$t(r.errors,t)}if(V.touchedFields&&u&&Array.isArray(m(r.touchedFields,t))){const g=a(m(r.touchedFields,t),d.argA,d.argB);f&&E(r.touchedFields,t,g)}V.dirtyFields&&(r.dirtyFields=Ce(o,c)),b.state.next({name:t,isDirty:x(t,n),dirtyFields:r.dirtyFields,errors:r.errors,isValid:r.isValid})}else E(c,t,n)},D=(t,n)=>{E(r.errors,t,n),b.state.next({errors:r.errors})},Z=(t,n,a,d)=>{const f=m(l,t);if(f){const u=m(c,t,S(a)?m(o,t):a);S(u)||d&&d.defaultChecked||n?E(c,t,n?u:Le(f._f)):q(t,u),h.mount&&v()}},R=(t,n,a,d,f)=>{let u=!1,g=!1;const _={name:t};if(!a||d){V.isDirty&&(g=r.isDirty,r.isDirty=_.isDirty=x(),u=g!==_.isDirty);const F=se(m(o,t),n);g=m(r.dirtyFields,t),F?O(r.dirtyFields,t):E(r.dirtyFields,t,!0),_.dirtyFields=r.dirtyFields,u=u||V.dirtyFields&&g!==!F}if(a){const F=m(r.touchedFields,t);F||(E(r.touchedFields,t,a),_.touchedFields=r.touchedFields,u=u||V.touchedFields&&F!==a)}return u&&f&&b.state.next(_),u?_:{}},ce=(t,n,a,d)=>{const f=m(r.errors,t),u=V.isValid&&X(n)&&r.isValid!==n;if(e.delayError&&a?(C=ne(()=>D(t,a)),C(e.delayError)):(clearTimeout(H),C=null,a?E(r.errors,t,a):O(r.errors,t)),(a?!se(f,a):f)||!P(d)||u){const g={...d,...u&&X(n)?{isValid:n}:{},errors:r.errors,name:t};r={...r,...g},b.state.next(g)}U(!1)},G=async t=>s.resolver(c,s.context,qt(t||p.mount,l,s.criteriaMode,s.shouldUseNativeValidation)),ee=async t=>{const{errors:n}=await G(t);if(t)for(const a of t){const d=m(n,a);d?E(r.errors,a,d):O(r.errors,a)}else r.errors=n;return n},z=async(t,n,a={valid:!0})=>{for(const d in t){const f=t[d];if(f){const{_f:u,...g}=f;if(u){const _=p.array.has(u.name),F=await nt(f,c,ie,s.shouldUseNativeValidation&&!n,_);if(F[u.name]&&(a.valid=!1,n))break;!n&&(m(F,u.name)?_?Mt(r.errors,F,u.name):E(r.errors,u.name,F[u.name]):O(r.errors,u.name))}g&&await z(g,n,a)}}return a.valid},k=()=>{for(const t of p.unMount){const n=m(l,t);n&&(n._f.refs?n._f.refs.every(a=>!Oe(a)):!Oe(n._f.ref))&&De(t)}p.unMount=new Set},x=(t,n)=>(t&&n&&E(c,t,n),!se(Be(),o)),A=(t,n,a)=>It(t,p,{...h.mount?c:S(n)?o:j(t)?{[t]:n}:n},a,n),M=t=>me(m(h.mount?c:o,t,e.shouldUnregister?m(o,t,[]):[])),q=(t,n,a={})=>{const d=m(l,t);let f=n;if(d){const u=d._f;u&&(!u.disabled&&E(c,t,mt(n,u)),f=pe(u.ref)&&L(n)?"":n,ft(u.ref)?[...u.ref.options].forEach(g=>g.selected=f.includes(g.value)):u.refs?ye(u.ref)?u.refs.length>1?u.refs.forEach(g=>(!g.defaultChecked||!g.disabled)&&(g.checked=Array.isArray(f)?!!f.find(_=>_===g.value):f===g.value)):u.refs[0]&&(u.refs[0].checked=!!f):u.refs.forEach(g=>g.checked=g.value===f):Me(u.ref)?u.ref.value="":(u.ref.value=f,u.ref.type||b.values.next({name:t,values:{...c}})))}(a.shouldDirty||a.shouldTouch)&&R(t,f,a.shouldTouch,a.shouldDirty,!0),a.shouldValidate&&Ve(t)},K=(t,n,a)=>{for(const d in n){const f=n[d],u=`${t}.${d}`,g=m(l,u);(p.array.has(t)||!_e(f)||g&&!g._f)&&!ue(f)?K(u,f,a):q(u,f,a)}},te=(t,n,a={})=>{const d=m(l,t),f=p.array.has(t),u=Q(n);E(c,t,u),f?(b.array.next({name:t,values:{...c}}),(V.isDirty||V.dirtyFields)&&a.shouldDirty&&b.state.next({name:t,dirtyFields:Ce(o,c),isDirty:x(t,u)})):d&&!d._f&&!L(u)?K(t,u,a):q(t,u,a),et(t,p)&&b.state.next({...r}),b.values.next({name:t,values:{...c}}),!h.mount&&i()},fe=async t=>{const n=t.target;let a=n.name,d=!0;const f=m(l,a),u=()=>n.type?Le(f._f):St(t),g=_=>{d=Number.isNaN(_)||_===m(c,a,_)};if(f){let _,F;const ve=u(),le=t.type===Ye.BLUR||t.type===Ye.FOCUS_OUT,xt=!Pt(f._f)&&!s.resolver&&!m(r.errors,a)&&!f._f.deps||Ht(le,m(r.touchedFields,a),r.isSubmitted,N,I),Se=et(a,p,le);E(c,a,ve),le?(f._f.onBlur&&f._f.onBlur(t),C&&C(0)):f._f.onChange&&f._f.onChange(t);const Fe=R(a,ve,le,!1),pt=!P(Fe)||Se;if(!le&&b.values.next({name:a,type:t.type,values:{...c}}),xt)return V.isValid&&v(),pt&&b.state.next({name:a,...Se?{}:Fe});if(!le&&Se&&b.state.next({...r}),U(!0),s.resolver){const{errors:Ke}=await G([a]);if(g(ve),d){const kt=lt(r.errors,l,a),je=lt(Ke,l,kt.name||a);_=je.error,a=je.name,F=P(Ke)}}else _=(await nt(f,c,ie,s.shouldUseNativeValidation))[a],g(ve),d&&(_?F=!1:V.isValid&&(F=await z(l,!0)));d&&(f._f.deps&&Ve(f._f.deps),ce(a,F,_,Fe))}},ge=(t,n)=>{if(m(r.errors,n)&&t.focus)return t.focus(),1},Ve=async(t,n={})=>{let a,d;const f=we(t);if(U(!0),s.resolver){const u=await ee(S(t)?t:f);a=P(u),d=t?!f.some(g=>m(u,g)):a}else t?(d=(await Promise.all(f.map(async u=>{const g=m(l,u);return await z(g&&g._f?{[u]:g}:g)}))).every(Boolean),!(!d&&!r.isValid)&&v()):d=a=await z(l);return b.state.next({...!j(t)||V.isValid&&a!==r.isValid?{}:{name:t},...s.resolver||!t?{isValid:a}:{},errors:r.errors,isValidating:!1}),n.shouldFocus&&!d&&be(l,ge,t?f:p.mount),d},Be=t=>{const n={...o,...h.mount?c:{}};return S(t)?n:j(t)?m(n,t):t.map(a=>m(n,a))},Ne=(t,n)=>({invalid:!!m((n||r).errors,t),isDirty:!!m((n||r).dirtyFields,t),isTouched:!!m((n||r).touchedFields,t),error:m((n||r).errors,t)}),gt=t=>{t&&we(t).forEach(n=>O(r.errors,n)),b.state.next({errors:t?r.errors:{}})},qe=(t,n,a)=>{const d=(m(l,t,{_f:{}})._f||{}).ref;E(r.errors,t,{...n,ref:d}),b.state.next({name:t,errors:r.errors,isValid:!1}),a&&a.shouldFocus&&d&&d.focus&&d.focus()},vt=(t,n)=>Y(t)?b.values.subscribe({next:a=>t(A(void 0,n),a)}):A(t,n,!0),De=(t,n={})=>{for(const a of t?we(t):p.mount)p.mount.delete(a),p.array.delete(a),n.keepValue||(O(l,a),O(c,a)),!n.keepError&&O(r.errors,a),!n.keepDirty&&O(r.dirtyFields,a),!n.keepTouched&&O(r.touchedFields,a),!s.shouldUnregister&&!n.keepDefaultValue&&O(o,a);b.values.next({values:{...c}}),b.state.next({...r,...n.keepDirty?{isDirty:x()}:{}}),!n.keepIsValid&&v()},Pe=({disabled:t,name:n,field:a,fields:d,value:f})=>{if(X(t)){const u=t?void 0:S(f)?Le(a?a._f:m(d,n)._f):f;E(c,n,u),R(n,u,!1,!1,!0)}},Ae=(t,n={})=>{let a=m(l,t);const d=X(n.disabled);return E(l,t,{...a||{},_f:{...a&&a._f?a._f:{ref:{name:t}},name:t,mount:!0,...n}}),p.mount.add(t),a?Pe({field:a,disabled:n.disabled,name:t}):Z(t,!0,n.value),{...d?{disabled:n.disabled}:{},...s.progressive?{required:!!n.required,min:de(n.min),max:de(n.max),minLength:de(n.minLength),maxLength:de(n.maxLength),pattern:de(n.pattern)}:{},name:t,onChange:fe,onBlur:fe,ref:f=>{if(f){Ae(t,n),a=m(l,t);const u=S(f.value)&&f.querySelectorAll&&f.querySelectorAll("input,select,textarea")[0]||f,g=Nt(u),_=a._f.refs||[];if(g?_.find(F=>F===u):u===a._f.ref)return;E(l,t,{_f:{...a._f,...g?{refs:[..._.filter(Oe),u,...Array.isArray(m(o,t))?[{}]:[]],ref:{type:u.type,name:t}}:{ref:u}}}),Z(t,!1,void 0,u)}else a=m(l,t,{}),a._f&&(a._f.mount=!1),(s.shouldUnregister||n.shouldUnregister)&&!(wt(p.array,t)&&h.action)&&p.unMount.add(t)}}},He=()=>s.shouldFocusError&&be(l,ge,p.mount),ht=t=>{X(t)&&(b.state.next({disabled:t}),be(l,n=>{n.disabled=t},0,!1))},$e=(t,n)=>async a=>{a&&(a.preventDefault&&a.preventDefault(),a.persist&&a.persist());let d=Q(c);if(b.state.next({isSubmitting:!0}),s.resolver){const{errors:f,values:u}=await G();r.errors=f,d=u}else await z(l);O(r.errors,"root"),P(r.errors)?(b.state.next({errors:{}}),await t(d,a)):(n&&await n({...r.errors},a),He(),setTimeout(He)),b.state.next({isSubmitted:!0,isSubmitting:!1,isSubmitSuccessful:P(r.errors),submitCount:r.submitCount+1,errors:r.errors})},bt=(t,n={})=>{m(l,t)&&(S(n.defaultValue)?te(t,m(o,t)):(te(t,n.defaultValue),E(o,t,n.defaultValue)),n.keepTouched||O(r.touchedFields,t),n.keepDirty||(O(r.dirtyFields,t),r.isDirty=n.defaultValue?x(t,m(o,t)):x()),n.keepError||(O(r.errors,t),V.isValid&&v()),b.state.next({...r}))},We=(t,n={})=>{const a=t?Q(t):o,d=Q(a),f=t&&!P(t)?d:o;if(n.keepDefaultValues||(o=a),!n.keepValues){if(n.keepDirtyValues||$)for(const u of p.mount)m(r.dirtyFields,u)?E(f,u,m(c,u)):te(u,m(f,u));else{if(Ie&&S(t))for(const u of p.mount){const g=m(l,u);if(g&&g._f){const _=Array.isArray(g._f.refs)?g._f.refs[0]:g._f.ref;if(pe(_)){const F=_.closest("form");if(F){F.reset();break}}}}l={}}c=e.shouldUnregister?n.keepDefaultValues?Q(o):{}:Q(f),b.array.next({values:{...f}}),b.values.next({values:{...f}})}p={mount:new Set,unMount:new Set,array:new Set,watch:new Set,watchAll:!1,focus:""},!h.mount&&i(),h.mount=!V.isValid||!!n.keepIsValid,h.watch=!!e.shouldUnregister,b.state.next({submitCount:n.keepSubmitCount?r.submitCount:0,isDirty:n.keepDirty?r.isDirty:!!(n.keepDefaultValues&&!se(t,o)),isSubmitted:n.keepIsSubmitted?r.isSubmitted:!1,dirtyFields:n.keepDirtyValues?r.dirtyFields:n.keepDefaultValues&&t?Ce(o,t):{},touchedFields:n.keepTouched?r.touchedFields:{},errors:n.keepErrors?r.errors:{},isSubmitSuccessful:n.keepIsSubmitSuccessful?r.isSubmitSuccessful:!1,isSubmitting:!1})},Ge=(t,n)=>We(Y(t)?t(c):t,n);return{control:{register:Ae,unregister:De,getFieldState:Ne,handleSubmit:$e,setError:qe,_executeSchema:G,_getWatch:A,_getDirty:x,_updateValid:v,_removeUnmounted:k,_updateFieldArray:B,_updateDisabledField:Pe,_getFieldArray:M,_reset:We,_resetDefaultValues:()=>Y(s.defaultValues)&&s.defaultValues().then(t=>{Ge(t,s.resetOptions),b.state.next({isLoading:!1})}),_updateFormState:t=>{r={...r,...t}},_disableForm:ht,_subjects:b,_proxyFormState:V,get _fields(){return l},get _formValues(){return c},get _state(){return h},set _state(t){h=t},get _defaultValues(){return o},get _names(){return p},set _names(t){p=t},get _formState(){return r},set _formState(t){r=t},get _options(){return s},set _options(t){s={...s,...t}}},trigger:Ve,register:Ae,handleSubmit:$e,watch:vt,setValue:te,getValues:Be,reset:Ge,resetField:bt,clearErrors:gt,unregister:De,setError:qe,setFocus:(t,n={})=>{const a=m(l,t),d=a&&a._f;if(d){const f=d.refs?d.refs[0]:d.ref;f.focus&&(f.focus(),n.shouldSelect&&f.select())}},getFieldState:Ne}}function Kt(e={}){const i=y.useRef(),s=y.useRef(),[r,l]=y.useState({isDirty:!1,isValidating:!1,isLoading:Y(e.defaultValues),isSubmitted:!1,isSubmitting:!1,isSubmitSuccessful:!1,isValid:!1,submitCount:0,dirtyFields:{},touchedFields:{},errors:{},disabled:!1,defaultValues:Y(e.defaultValues)?void 0:e.defaultValues});i.current||(i.current={...Gt(e,()=>l(c=>({...c}))),formState:r});const o=i.current.control;return o._options=e,Lt({subject:o._subjects.state,next:c=>{Ct(c,o._proxyFormState,o._updateFormState,!0)&&l({...o._formState})}}),y.useEffect(()=>o._disableForm(e.disabled),[o,e.disabled]),y.useEffect(()=>{if(o._proxyFormState.isDirty){const c=o._getDirty();c!==r.isDirty&&o._subjects.state.next({isDirty:c})}},[o,r.isDirty]),y.useEffect(()=>{e.values&&!se(e.values,s.current)?(o._reset(e.values,o._options.resetOptions),s.current=e.values):o._resetDefaultValues()},[e.values,o]),y.useEffect(()=>{o._state.mount||(o._updateValid(),o._state.mount=!0),o._state.watch&&(o._state.watch=!1,o._subjects.state.next({...o._formState})),o._removeUnmounted()}),i.current.formState=Ot(r,o),i.current}var jt=(e=>(e.formgroup="formgroup",e.checkbox="checkbox",e.radiobutton="radiobutton",e.textarea="textarea",e.input="input",e.select="select",e))(jt||{});const zt=e=>{const{exampleType:i="formgroup"}=e,{register:s,handleSubmit:r,formState:{errors:l}}=Kt(),o=new Date;o.setHours(0),o.setMinutes(0),o.setSeconds(0);const c=new Date;c.setDate(o.getDate()-5),c.setHours(6),c.setMinutes(10),c.setSeconds(0);const h=new Date;h.setDate(o.getDate()+5),h.setHours(22),h.setMinutes(0),h.setSeconds(0);const p="field1",C="field2",H="field3",V="field4",b="field5",$="field6",I=l.field1||l.field2||l.field3||l.field4||l.field5||l.field6||l.field7||l.field8||l.field9,N="Du må velge et alternativ",ie="Du må velge to alternativ",ne="Det kan ikke legges inn mer enn 40 tegn",v="Du må skrive noe her",U='Du må velge "Option 2"';`${c.toLocaleDateString("nb")}${h.toLocaleDateString("nb")}`,`${c.toLocaleTimeString("nb",{hour:"2-digit",minute:"2-digit"})}${h.toLocaleTimeString("nb",{hour:"2-digit",minute:"2-digit"})}`;const B=R=>R.length>=2||ie,D=R=>R.toString()==="Option 2"||U,Z=()=>{if(i==="formgroup"){const R=[y.createElement(re,{key:0,inputId:"checkbox1",label:y.createElement(T,{labelTexts:[{text:"Checkbox 1"}]}),...s(p,{required:N})}),y.createElement(re,{key:1,inputId:"checkbox2",label:y.createElement(T,{labelTexts:[{text:"Checkbox 2"}]}),...s(p,{required:N})}),y.createElement(re,{key:2,inputId:"checkbox3",label:y.createElement(T,{labelTexts:[{text:"Checkbox 3"}]}),...s(p,{required:N})})];return[y.createElement(ae,{key:0,title:"Gruppe tittel",legend:"Velg minst en",error:l.field1?l.field1.message:void 0,variant:e.variant},y.createElement(Vt,{maxColumns:Dt.two},R.map(ce=>ce))),y.createElement(ae,{key:1,legend:"Velg minst to",error:l.field2?l.field2.message:void 0,variant:e.variant},y.createElement(re,{inputId:"checkbox4",label:y.createElement(T,{labelTexts:[{text:"Checkbox 4"}]}),...s(C,{validate:B})}),y.createElement(re,{inputId:"checkbox5",label:y.createElement(T,{labelTexts:[{text:"Checkbox 5"}]}),...s(C,{validate:B})}),y.createElement(re,{inputId:"checkbox6",label:y.createElement(T,{labelTexts:[{text:"Checkbox 6"}]}),...s(C,{validate:B})})),y.createElement(ae,{key:2,legend:"Velg en",error:l.field3?l.field3.message:void 0,variant:e.variant},y.createElement(he,{inputId:"radiobutton1",label:y.createElement(T,{labelTexts:[{text:"Radiobutton 1"}]}),...s(H,{required:N})}),y.createElement(he,{inputId:"radiobutton2",label:y.createElement(T,{labelTexts:[{text:"Radiobutton 2"}]}),...s(H,{required:N})}),y.createElement(he,{inputId:"radiobutton3",label:y.createElement(T,{labelTexts:[{text:"Radiobutton 3"}]}),...s(H,{required:N})})),y.createElement(ae,{key:3,error:l.field4?l.field4.message:void 0},y.createElement(Xe,{defaultValue:`Dette er en test 
 
  Hello 
 
  test 
 
- test test`,grow:!0,maxCharacters:40,minRows:5,label:m.createElement(T,{labelTexts:[{text:"Skriv din historie her",type:"semibold"}]}),textareaId:"textarea1",...s(_,{maxLength:{value:40,message:ne}})})),m.createElement(ae,{key:4,variant:e.variant,error:l.field5?l.field5.message:void 0},m.createElement(je,{label:m.createElement(T,{labelTexts:[{text:"Skriv inn din tekst",type:"semibold"}]}),placeholder:"Skriv noe!",icon:Ke,...s(h,{required:v})})),m.createElement(ae,{key:5,variant:e.variant,error:l.field6?l.field6.message:void 0},m.createElement(ze,{label:m.createElement(T,{labelTexts:[{text:"Skriv inn din tekst",type:"semibold"}]}),...s($,{validate:A})},m.createElement("option",{value:"Option 1"},"Option 1"),m.createElement("option",{value:"Option 2"},"Option 2"),m.createElement("option",{value:"Option 3"},"Option 3")))]}else{if(i==="checkbox")return m.createElement(te,{inputId:"checkbox1",label:m.createElement(T,{labelTexts:[{text:"Checkbox 1"}]}),errorText:l.field1?l.field1.message:void 0,variant:e.variant,...s(p,{required:N})});if(i==="radiobutton")return m.createElement(ve,{inputId:"radiobutton1",label:m.createElement(T,{labelTexts:[{text:"Radiobutton 1"}]}),errorText:l.field3?l.field3.message:void 0,variant:e.variant,...s(H,{required:N})});if(i==="textarea")return m.createElement(Je,{defaultValue:`Dette er min historie 
+ test test`,grow:!0,maxCharacters:40,minRows:5,label:y.createElement(T,{labelTexts:[{text:"Skriv din historie her",type:"semibold"}]}),textareaId:"textarea1",...s(V,{maxLength:{value:40,message:ne}})})),y.createElement(ae,{key:4,variant:e.variant,error:l.field5?l.field5.message:void 0},y.createElement(Je,{label:y.createElement(T,{labelTexts:[{text:"Skriv inn din tekst",type:"semibold"}]}),placeholder:"Skriv noe!",icon:ze,...s(b,{required:v})})),y.createElement(ae,{key:5,variant:e.variant,error:l.field6?l.field6.message:void 0},y.createElement(Qe,{label:y.createElement(T,{labelTexts:[{text:"Skriv inn din tekst",type:"semibold"}]}),...s($,{validate:D})},y.createElement("option",{value:"Option 1"},"Option 1"),y.createElement("option",{value:"Option 2"},"Option 2"),y.createElement("option",{value:"Option 3"},"Option 3")))]}else{if(i==="checkbox")return y.createElement(re,{inputId:"checkbox1",label:y.createElement(T,{labelTexts:[{text:"Checkbox 1"}]}),errorText:l.field1?l.field1.message:void 0,variant:e.variant,...s(p,{required:N})});if(i==="radiobutton")return y.createElement(he,{inputId:"radiobutton1",label:y.createElement(T,{labelTexts:[{text:"Radiobutton 1"}]}),errorText:l.field3?l.field3.message:void 0,variant:e.variant,...s(H,{required:N})});if(i==="textarea")return y.createElement(Xe,{defaultValue:`Dette er min historie 
 
  Hello 
 
- test`,grow:!0,maxCharacters:40,minRows:5,errorText:l.field4?l.field4.message:void 0,label:m.createElement(T,{labelTexts:[{text:"Skriv din historie her",type:"semibold"}]}),textareaId:"textarea1",...s(_,{maxLength:{value:40,message:ne}})});if(i==="input")return m.createElement(je,{inputId:"input1",label:m.createElement(T,{labelTexts:[{text:"Skriv inn din tekst",type:"semibold"}]}),placeholder:"Skriv noe!",errorText:l.field5?l.field5.message:void 0,icon:Ke,...s(h,{required:v})});if(i==="select")return m.createElement(ze,{errorText:l.field6?l.field6.message:void 0,label:m.createElement(T,{labelTexts:[{text:"Skriv inn din tekst",type:"semibold"}]}),...s($,{validate:A})},m.createElement("option",{value:"Option 1"},"Option 1"),m.createElement("option",{value:"Option 2"},"Option 2"),m.createElement("option",{value:"Option 3"},"Option 3"))}};return m.createElement("form",{noValidate:!0,onSubmit:r(I=>{!xt()&&console.log(I)})},m.createElement(_t,{variant:e.variant,errorSummary:R?"Sjekk at alt er riktig utfylt":void 0},Y()),m.createElement(pt,{type:"submit"},"Send inn"))},Zr=Gt;export{Gt as FormExample,Wt as FormExampleVariants,Zr as default};
+ test`,grow:!0,maxCharacters:40,minRows:5,errorText:l.field4?l.field4.message:void 0,label:y.createElement(T,{labelTexts:[{text:"Skriv din historie her",type:"semibold"}]}),textareaId:"textarea1",...s(V,{maxLength:{value:40,message:ne}})});if(i==="input")return y.createElement(Je,{inputId:"input1",label:y.createElement(T,{labelTexts:[{text:"Skriv inn din tekst",type:"semibold"}]}),placeholder:"Skriv noe!",errorText:l.field5?l.field5.message:void 0,icon:ze,...s(b,{required:v})});if(i==="select")return y.createElement(Qe,{errorText:l.field6?l.field6.message:void 0,label:y.createElement(T,{labelTexts:[{text:"Skriv inn din tekst",type:"semibold"}]}),...s($,{validate:D})},y.createElement("option",{value:"Option 1"},"Option 1"),y.createElement("option",{value:"Option 2"},"Option 2"),y.createElement("option",{value:"Option 3"},"Option 3"))}};return y.createElement("form",{noValidate:!0,onSubmit:r(R=>{!_t()&&console.log(R)})},y.createElement(At,{variant:e.variant,errorSummary:I?"Sjekk at alt er riktig utfylt":void 0},Z()),y.createElement(Et,{type:"submit"},"Send inn"))},rs=zt;export{zt as FormExample,jt as FormExampleVariants,rs as default};
 //# sourceMappingURL=index.js.map