@fremtind/jokul 3.0.0 → 3.2.0

package/build/es/components/table/TableHead.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHead.js","sources":["../../../../src/components/table/TableHead.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, useEffect } from \"react\";\nimport { useTableContext } from \"./tableContext.js\";\nimport { TableSectionContextProvider } from \"./tableSectionContext.js\";\nimport type { TableHeadProps } from \"./types.js\";\n\nconst TableHead = forwardRef<HTMLTableSectionElement, TableHeadProps>(\n    ({ className, srOnly, sticky = false, ...rest }, ref) => {\n        const { setHasStickyHead } = useTableContext();\n        useEffect(() => {\n            setHasStickyHead(sticky);\n        }, [sticky, setHasStickyHead]);\n\n        return (\n            <TableSectionContextProvider\n                state={{\n                    isTableHead: true,\n                    isTableBody: false,\n                    isTableFooter: false,\n                }}\n            >\n                <thead\n                    className={clsx(\"jkl-table-head\", className, {\n                        [\"jkl-table-head--sr-only\"]: srOnly,\n                        [\"jkl-table-head--sticky\"]: sticky,\n                    })}\n                    {...rest}\n                    ref={ref}\n                />\n            </TableSectionContextProvider>\n        );\n    },\n);\n\nTableHead.displayName = \"TableHead\";\n\nexport { TableHead };\n"],"names":["TableHead","forwardRef","className","srOnly","sticky","rest","ref","setHasStickyHead","useTableContext","useEffect","jsx","TableSectionContextProvider","state","isTableHead","isTableBody","isTableFooter","children","clsx","displayName"],"mappings":"mQAMA,MAAMA,EAAYC,GACd,EAAGC,UAAAA,EAAWC,OAAAA,EAAQC,OAAAA,GAAS,KAAUC,GAAQC,KACvC,MAAEC,iBAAAA,GAAqBC,IAC7B,OAAAC,GAAU,KACNF,EAAiBH,EAAM,GACxB,CAACA,EAAQG,IAGRG,EAACC,EAAA,CACGC,MAAO,CACHC,aAAa,EACbC,aAAa,EACbC,eAAe,GAGnBC,SAAAN,EAAC,QAAA,CACGR,UAAWe,EAAK,iBAAkBf,EAAW,CACxC,0BAA4BC,EAC5B,yBAA2BC,OAE5BC,EACJC,IAAAA,KAER,IAKZN,EAAUkB,YAAc"}
+{"version":3,"file":"TableHead.js","sources":["../../../../src/components/table/TableHead.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, useEffect } from \"react\";\nimport { useTableContext } from \"./tableContext.js\";\nimport { TableSectionContextProvider } from \"./tableSectionContext.js\";\nimport type { TableHeadProps } from \"./types.js\";\n\nconst TableHead = forwardRef<HTMLTableSectionElement, TableHeadProps>(\n    ({ className, srOnly, sticky = false, ...rest }, ref) => {\n        const { setHasStickyHead } = useTableContext();\n        useEffect(() => {\n            setHasStickyHead(sticky);\n        }, [sticky, setHasStickyHead]);\n\n        return (\n            <TableSectionContextProvider\n                state={{\n                    isTableHead: true,\n                    isTableBody: false,\n                    isTableFooter: false,\n                }}\n            >\n                <thead\n                    className={clsx(\"jkl-table-head\", className, {\n                        [\"jkl-table-head--sr-only\"]: srOnly,\n                        [\"jkl-table-head--sticky\"]: sticky,\n                    })}\n                    {...rest}\n                    ref={ref}\n                />\n            </TableSectionContextProvider>\n        );\n    },\n);\n\nTableHead.displayName = \"TableHead\";\n\nexport { TableHead };\n"],"names":["TableHead","forwardRef","className","srOnly","sticky","rest","ref","setHasStickyHead","useTableContext","useEffect","jsx","TableSectionContextProvider","state","isTableHead","isTableBody","isTableFooter","children","clsx","displayName"],"mappings":"mQAMA,MAAMA,EAAYC,EACd,EAAGC,UAAAA,EAAWC,OAAAA,EAAQC,OAAAA,GAAS,KAAUC,GAAQC,KAC7C,MAAQC,iBAAAA,GAAqBC,IAC7B,OAAAC,EAAU,KACNF,EAAiBH,IAClB,CAACA,EAAQG,IAGRG,EAACC,EAAA,CACGC,MAAO,CACHC,aAAa,EACbC,aAAa,EACbC,eAAe,GAGnBC,SAAAN,EAAC,QAAA,CACGR,UAAWe,EAAK,iBAAkBf,EAAW,CACxC,0BAA4BC,EAC5B,yBAA2BC,OAE5BC,EACJC,IAAAA,QAOpBN,EAAUkB,YAAc"}

package/build/es/components/table/TableHeader.js

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as a}from"react/jsx-runtime";import{c as r}from"../../../clsx-BeLtu-UY.js";import{forwardRef as t}from"react";import{ArrowVerticalAnimated as l}from"../icon/icons/animated/ArrowVerticalAnimated.js";import{useTableContext as o}from"./tableContext.js";const i=t(((t,i)=>{const{bold:s=!0,density:n,sortable:d,className:c,scope:m="col",srOnly:b,align:h="left",children:j,onClick:k,...p}=t,{density:f}=o();return e("th",{className:r("jkl-table-header",c,{"jkl-table-header--bold":s,"jkl-table-header--align-right":"right"===h,"jkl-table-header--align-center":"center"===h,"jkl-table-header--sr-only":b,"jkl-table-header--sortable":typeof d<"u"}),scope:m,onClick:e=>{k?.(e),d?.onClick()},...p,"data-density":n||f,ref:i,children:[j,d&&a("div",{className:r("jkl-table-header__arrows",{"jkl-table-header__arrows--active":!!d.direction}),children:d.direction&&a(l,{pointingDown:"desc"===d.direction,bold:!0})})]})}));i.displayName="TableHeader";export{i as TableHeader};
+import{jsxs as e,jsx as a}from"react/jsx-runtime";import{c as r}from"../../../clsx-BeLtu-UY.js";import{forwardRef as t}from"react";import{ArrowVerticalAnimated as l}from"../icon/icons/animated/ArrowVerticalAnimated.js";import{useTableContext as o}from"./tableContext.js";const i=t((t,i)=>{const{bold:s=!0,density:n,sortable:d,className:c,scope:m="col",srOnly:b,align:h="left",children:j,onClick:k,...p}=t,{density:f}=o();return e("th",{className:r("jkl-table-header",c,{"jkl-table-header--bold":s,"jkl-table-header--align-right":"right"===h,"jkl-table-header--align-center":"center"===h,"jkl-table-header--sr-only":b,"jkl-table-header--sortable":typeof d<"u"}),scope:m,onClick:e=>{k?.(e),d?.onClick()},...p,"data-density":n||f,ref:i,children:[j,d&&a("div",{className:r("jkl-table-header__arrows",{"jkl-table-header__arrows--active":!!d.direction}),children:d.direction&&a(l,{pointingDown:"desc"===d.direction,bold:!0})})]})});i.displayName="TableHeader";export{i as TableHeader};
 //# sourceMappingURL=TableHeader.js.map

package/build/es/components/table/TableHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeader.js","sources":["../../../../src/components/table/TableHeader.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, type MouseEventHandler } from \"react\";\nimport { ArrowVerticalAnimated } from \"../icon/icons/animated/ArrowVerticalAnimated.js\";\nimport { useTableContext } from \"./tableContext.js\";\nimport type { TableHeaderProps } from \"./types.js\";\n\nexport type TableSortDirection = \"asc\" | \"desc\";\n\nconst TableHeader = forwardRef<HTMLTableCellElement, TableHeaderProps>(\n    (props, ref) => {\n        const {\n            bold = true,\n            density,\n            sortable,\n            className,\n            scope = \"col\",\n            srOnly,\n            align = \"left\",\n            children,\n            onClick,\n            ...rest\n        } = props;\n        const { density: contextDensity } = useTableContext();\n\n        const handleClick: MouseEventHandler<HTMLTableCellElement> = (e) => {\n            onClick?.(e);\n            sortable?.onClick();\n        };\n\n        return (\n            <th\n                className={clsx(\"jkl-table-header\", className, {\n                    [\"jkl-table-header--bold\"]: bold,\n                    [\"jkl-table-header--align-right\"]: align === \"right\",\n                    [\"jkl-table-header--align-center\"]: align === \"center\",\n                    [\"jkl-table-header--sr-only\"]: srOnly,\n                    [\"jkl-table-header--sortable\"]:\n                        typeof sortable !== \"undefined\",\n                })}\n                scope={scope}\n                onClick={handleClick}\n                {...rest}\n                data-density={density || contextDensity}\n                ref={ref}\n            >\n                {children}\n                {sortable && (\n                    <div\n                        className={clsx(\"jkl-table-header__arrows\", {\n                            \"jkl-table-header__arrows--active\": Boolean(\n                                sortable.direction,\n                            ),\n                        })}\n                    >\n                        {sortable.direction && (\n                            <ArrowVerticalAnimated\n                                pointingDown={sortable.direction === \"desc\"}\n                                bold\n                            />\n                        )}\n                    </div>\n                )}\n            </th>\n        );\n    },\n);\n\nTableHeader.displayName = \"TableHeader\";\n\nexport { TableHeader };\n"],"names":["TableHeader","forwardRef","props","ref","bold","density","sortable","className","scope","srOnly","align","children","onClick","rest","contextDensity","useTableContext","jsxs","clsx","e","jsx","direction","ArrowVerticalAnimated","pointingDown","displayName"],"mappings":"+QAQA,MAAMA,EAAcC,GAChB,CAACC,EAAOC,KACE,MACFC,KAAAA,GAAO,EACPC,QAAAA,EACAC,SAAAA,EACAC,UAAAA,EACAC,MAAAA,EAAQ,MACRC,OAAAA,EACAC,MAAAA,EAAQ,OACRC,SAAAA,EACAC,QAAAA,KACGC,GACHX,GACIG,QAASS,GAAmBC,IAQhC,OAAAC,EAAC,KAAA,CACGT,UAAWU,EAAK,mBAAoBV,EAAW,CAC1C,yBAA2BH,EAC3B,gCAA4C,UAAVM,EAClC,iCAA6C,WAAVA,EACnC,4BAA8BD,EAC9B,oCACUH,EAAa,MAE5BE,MAAAA,EACAI,QAhBsDM,IAC1DN,IAAUM,GACVZ,GAAUM,SAAQ,KAeVC,EACJ,eAAcR,GAAWS,EACzBX,IAAAA,EAECQ,SAAA,CAAAA,EACAL,GACGa,EAAC,MAAA,CACGZ,UAAWU,EAAK,2BAA4B,CACxC,qCACIX,EAASc,YAIhBT,WAASS,WACND,EAACE,EAAA,CACGC,aAAqC,SAAvBhB,EAASc,UACvBhB,MAAI,QAKxB,IAKZJ,EAAYuB,YAAc"}
+{"version":3,"file":"TableHeader.js","sources":["../../../../src/components/table/TableHeader.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, type MouseEventHandler } from \"react\";\nimport { ArrowVerticalAnimated } from \"../icon/icons/animated/ArrowVerticalAnimated.js\";\nimport { useTableContext } from \"./tableContext.js\";\nimport type { TableHeaderProps } from \"./types.js\";\n\nexport type TableSortDirection = \"asc\" | \"desc\";\n\nconst TableHeader = forwardRef<HTMLTableCellElement, TableHeaderProps>(\n    (props, ref) => {\n        const {\n            bold = true,\n            density,\n            sortable,\n            className,\n            scope = \"col\",\n            srOnly,\n            align = \"left\",\n            children,\n            onClick,\n            ...rest\n        } = props;\n        const { density: contextDensity } = useTableContext();\n\n        const handleClick: MouseEventHandler<HTMLTableCellElement> = (e) => {\n            onClick?.(e);\n            sortable?.onClick();\n        };\n\n        return (\n            <th\n                className={clsx(\"jkl-table-header\", className, {\n                    [\"jkl-table-header--bold\"]: bold,\n                    [\"jkl-table-header--align-right\"]: align === \"right\",\n                    [\"jkl-table-header--align-center\"]: align === \"center\",\n                    [\"jkl-table-header--sr-only\"]: srOnly,\n                    [\"jkl-table-header--sortable\"]:\n                        typeof sortable !== \"undefined\",\n                })}\n                scope={scope}\n                onClick={handleClick}\n                {...rest}\n                data-density={density || contextDensity}\n                ref={ref}\n            >\n                {children}\n                {sortable && (\n                    <div\n                        className={clsx(\"jkl-table-header__arrows\", {\n                            \"jkl-table-header__arrows--active\": Boolean(\n                                sortable.direction,\n                            ),\n                        })}\n                    >\n                        {sortable.direction && (\n                            <ArrowVerticalAnimated\n                                pointingDown={sortable.direction === \"desc\"}\n                                bold\n                            />\n                        )}\n                    </div>\n                )}\n            </th>\n        );\n    },\n);\n\nTableHeader.displayName = \"TableHeader\";\n\nexport { TableHeader };\n"],"names":["TableHeader","forwardRef","props","ref","bold","density","sortable","className","scope","srOnly","align","children","onClick","rest","contextDensity","useTableContext","jsxs","clsx","e","jsx","direction","ArrowVerticalAnimated","pointingDown","displayName"],"mappings":"+QAQA,MAAMA,EAAcC,EAChB,CAACC,EAAOC,KACJ,MACIC,KAAAA,GAAO,EACPC,QAAAA,EACAC,SAAAA,EACAC,UAAAA,EACAC,MAAAA,EAAQ,MACRC,OAAAA,EACAC,MAAAA,EAAQ,OACRC,SAAAA,EACAC,QAAAA,KACGC,GACHX,GACIG,QAASS,GAAmBC,IAOpC,OACIC,EAAC,KAAA,CACGT,UAAWU,EAAK,mBAAoBV,EAAW,CAC1C,yBAA2BH,EAC3B,gCAA4C,UAAVM,EAClC,iCAA6C,WAAVA,EACnC,4BAA8BD,EAC9B,oCACUH,EAAa,MAE5BE,MAAAA,EACAI,QAhBsDM,IAC1DN,IAAUM,GACVZ,GAAUM,cAeFC,EACJ,eAAcR,GAAWS,EACzBX,IAAAA,EAECQ,SAAA,CAAAA,EACAL,GACGa,EAAC,MAAA,CACGZ,UAAWU,EAAK,2BAA4B,CACxC,qCACIX,EAASc,YAIhBT,WAASS,WACND,EAACE,EAAA,CACGC,aAAqC,SAAvBhB,EAASc,UACvBhB,MAAI,WAUpCJ,EAAYuB,YAAc"}

package/build/es/components/table/TablePagination.js

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as a,Fragment as i}from"react/jsx-runtime";import{c as n}from"../../../clsx-BeLtu-UY.js";import{forwardRef as t,useState as l,useCallback as r}from"react";import{useId as o}from"../../hooks/useId/useId.js";import{IconButton as s}from"../icon-button/IconButton.js";import{ChevronLeftIcon as c}from"../icon/icons/ChevronLeftIcon.js";import{ChevronRightIcon as p}from"../icon/icons/ChevronRightIcon.js";import{NativeSelect as m}from"../select/NativeSelect.js";import{TextInput as g}from"../text-input/TextInput.js";import{useTableContext as d}from"./tableContext.js";const b=t(((i,t)=>{const{activePage:b=0,totalNumberOfRows:h,rowsPerPage:k,rowsPerPageItems:v,className:_,density:j,id:f,withGoToPage:N=!1,onChange:C,onChangeRowsPerPage:P,labels:x={rowsPerPage:"Rader per side",previous:"Forrige",next:"Neste"},...I}=i,w=o(f||"jkl-table-pagination",{generateSuffix:!f}),{density:y}=d(),S=k<=0?1:Math.ceil(h/k),[A,M]=l(function(e,a,i){return a<e?e:a>i?i:a}(0,b,S-1)),T=r((e=>{const a=Number.parseInt(e.currentTarget.dataset.number);C(e,a,A),M(a),O(String(a+1))}),[C,A]),[R,O]=l(String(A+1)),L=r((e=>{O(e.target.value);try{const a=Number.parseInt(e.target.value)-1;if(Number.isNaN(a))return;a>=0&&a<S&&(C(e,a,A),M(a))}catch{return}}),[C,A,S]),$=r((e=>{if(0===A)return void C(e,A,A);const a=A-1;C(e,a,A),M(a),O(String(a+1))}),[C,A]),G=r((e=>{if(A===S-1)return void C(e,A,A);const a=A+1;C(e,a,A),M(a),O(String(a+1))}),[C,S,A]);return e("div",{className:n("jkl-table-pagination",_),...I,id:w,"data-density":j||y,ref:t,children:[a("div",{className:"jkl-table-pagination__left",children:e("div",{className:"jkl-table-pagination__picker jkl-table-pagination__picker--rows",children:[e("span",{className:"jkl-table-pagination__picker-label","aria-hidden":"true",children:[x.rowsPerPage,":"]}),a(m,{className:"jkl-table-pagination__picker-input",label:x.rowsPerPage,labelProps:{srOnly:!0},name:`${w}-rows-per-page`,items:v.map((e=>"number"==typeof e?String(e):{label:e.label,value:String(e.value)})),value:String(k),onChange:P,width:"min(8rem, 100%)",inline:!0})]})}),a("div",{className:"jkl-table-pagination__right",children:1!==S&&e("nav",{className:"jkl-table-pagination__nav",children:[N&&e("div",{className:"jkl-table-pagination__picker jkl-table-pagination__picker--page",children:[e("span",{className:"jkl-table-pagination__picker-label","aria-hidden":"true",children:["object"==typeof N?N.gotoLabel:"Gå til side",":"]}),a(g,{className:"jkl-table-pagination__picker-input",label:"object"==typeof N?N.gotoLabel:"Gå til side",labelProps:{srOnly:!0},name:`${w}-go-to-page`,value:R,width:"min(4rem, 100%)",onChange:L,"aria-invalid":R&&R!==String(A+1)?"true":void 0})]}),e("ul",{children:[a("li",{children:a(s,{className:"jkl-table-pagination__previous",title:x.previous,onClick:$,children:a(c,{})})}),a(u,{id:w,activePage:b,numberOfPages:S,onPageClick:T}),a("li",{children:a(s,{className:"jkl-table-pagination__next",title:x.next,onClick:G,children:a(p,{})})})]})]})})]})})),u=({id:t,activePage:l,numberOfPages:r,onPageClick:o})=>{if(r<=7)return a(i,{children:Array.from({length:r}).map(((e,i)=>a("li",{children:a("button",{className:n("jkl-table-pagination__page",{"jkl-table-pagination__page--active":l===i}),type:"button","data-number":i,onClick:o,children:i+1})},`${t}-page-${i}`)))});const s=l>3&&r>7,c=l<r-4&&r>7,p=Math.min(Math.max(l-2,1),r-6),m=Math.min(p+1,r-5),g=Math.min(m+1,r-4),d=Math.min(m+2,r-3),b=Math.min(m+3,r-2);return e(i,{children:[a("li",{children:a(h,{isActive:0===l,number:0,onClick:o})}),a("li",{children:s?a("span",{className:"jkl-table-pagination__ellipsis","aria-hidden":!0,children:"..."}):a(h,{isActive:l===p,number:p,onClick:o})}),a("li",{children:a(h,{isActive:l===m,number:m,onClick:o})}),a("li",{children:a(h,{isActive:l===g,number:g,onClick:o})}),a("li",{children:a(h,{isActive:l===d,number:d,onClick:o})}),a("li",{children:c?a("span",{className:"jkl-table-pagination__ellipsis","aria-hidden":!0,children:"..."}):a(h,{isActive:l===b,number:b,onClick:o})}),a("li",{children:a(h,{isActive:l===r-1,number:r-1,onClick:o})})]})},h=({isActive:e,number:i,onClick:t,...l})=>a("button",{className:n("jkl-table-pagination__page",{"jkl-table-pagination__page--active":e}),type:"button","data-number":i,onClick:t,...l,children:i+1});b.displayName="TablePagination";export{b as TablePagination};
+import{jsxs as e,jsx as a,Fragment as i}from"react/jsx-runtime";import{c as n}from"../../../clsx-BeLtu-UY.js";import{forwardRef as t,useState as l,useCallback as r}from"react";import{useId as o}from"../../hooks/useId/useId.js";import{IconButton as s}from"../icon-button/IconButton.js";import{ChevronLeftIcon as c}from"../icon/icons/ChevronLeftIcon.js";import{ChevronRightIcon as p}from"../icon/icons/ChevronRightIcon.js";import{NativeSelect as m}from"../select/NativeSelect.js";import{TextInput as g}from"../text-input/TextInput.js";import{useTableContext as d}from"./tableContext.js";const b=t((i,t)=>{const{activePage:b=0,totalNumberOfRows:h,rowsPerPage:k,rowsPerPageItems:_,className:v,density:j,id:f,withGoToPage:N=!1,onChange:C,onChangeRowsPerPage:P,labels:x={rowsPerPage:"Rader per side",previous:"Forrige",next:"Neste"},...w}=i,I=o(f||"jkl-table-pagination",{generateSuffix:!f}),{density:y}=d(),S=k<=0?1:Math.ceil(h/k),[A,T]=l(function(e,a,i){return a<e?e:a>i?i:a}(0,b,S-1)),M=r(e=>{const a=Number.parseInt(e.currentTarget.dataset.number);C(e,a,A),T(a),O(String(a+1))},[C,A]),[R,O]=l(String(A+1)),L=r(e=>{O(e.target.value);try{const a=Number.parseInt(e.target.value)-1;if(Number.isNaN(a))return;a>=0&&a<S&&(C(e,a,A),T(a))}catch{return}},[C,A,S]),$=r(e=>{if(0===A)return void C(e,A,A);const a=A-1;C(e,a,A),T(a),O(String(a+1))},[C,A]),G=r(e=>{if(A===S-1)return void C(e,A,A);const a=A+1;C(e,a,A),T(a),O(String(a+1))},[C,S,A]);return e("div",{className:n("jkl-table-pagination",v),...w,id:I,"data-density":j||y,ref:t,children:[a("div",{className:"jkl-table-pagination__left",children:e("div",{className:"jkl-table-pagination__picker jkl-table-pagination__picker--rows",children:[e("span",{className:"jkl-table-pagination__picker-label","aria-hidden":"true",children:[x.rowsPerPage,":"]}),a(m,{className:"jkl-table-pagination__picker-input",label:x.rowsPerPage,labelProps:{srOnly:!0},name:`${I}-rows-per-page`,items:_.map(e=>"number"==typeof e?String(e):{label:e.label,value:String(e.value)}),value:String(k),onChange:P,width:"min(8rem, 100%)",inline:!0})]})}),e("span",{className:"jkl-table-pagination__total-rows",children:["Treff: ",h]}),a("div",{className:"jkl-table-pagination__right",children:1!==S&&e("nav",{className:"jkl-table-pagination__nav",children:[N&&e("div",{className:"jkl-table-pagination__picker jkl-table-pagination__picker--page",children:[e("span",{className:"jkl-table-pagination__picker-label","aria-hidden":"true",children:["object"==typeof N?N.gotoLabel:"Gå til side",":"]}),a(g,{className:"jkl-table-pagination__picker-input",label:"object"==typeof N?N.gotoLabel:"Gå til side",labelProps:{srOnly:!0},name:`${I}-go-to-page`,value:R,width:"min(4rem, 100%)",onChange:L,"aria-invalid":R&&R!==String(A+1)?"true":void 0})]}),e("ul",{children:[a("li",{children:a(s,{className:"jkl-table-pagination__previous",title:x.previous,onClick:$,children:a(c,{})})}),a(u,{id:I,activePage:b,numberOfPages:S,onPageClick:M}),a("li",{children:a(s,{className:"jkl-table-pagination__next",title:x.next,onClick:G,children:a(p,{})})})]})]})})]})}),u=({id:t,activePage:l,numberOfPages:r,onPageClick:o})=>{if(r<=7)return a(i,{children:Array.from({length:r}).map((e,i)=>a("li",{children:a("button",{className:n("jkl-table-pagination__page",{"jkl-table-pagination__page--active":l===i}),type:"button","data-number":i,onClick:o,children:i+1})},`${t}-page-${i}`))});const s=l>3&&r>7,c=l<r-4&&r>7,p=Math.min(Math.max(l-2,1),r-6),m=Math.min(p+1,r-5),g=Math.min(m+1,r-4),d=Math.min(m+2,r-3),b=Math.min(m+3,r-2);return e(i,{children:[a("li",{children:a(h,{isActive:0===l,number:0,onClick:o})}),a("li",{children:s?a("span",{className:"jkl-table-pagination__ellipsis","aria-hidden":!0,children:"..."}):a(h,{isActive:l===p,number:p,onClick:o})}),a("li",{children:a(h,{isActive:l===m,number:m,onClick:o})}),a("li",{children:a(h,{isActive:l===g,number:g,onClick:o})}),a("li",{children:a(h,{isActive:l===d,number:d,onClick:o})}),a("li",{children:c?a("span",{className:"jkl-table-pagination__ellipsis","aria-hidden":!0,children:"..."}):a(h,{isActive:l===b,number:b,onClick:o})}),a("li",{children:a(h,{isActive:l===r-1,number:r-1,onClick:o})})]})},h=({isActive:e,number:i,onClick:t,...l})=>a("button",{className:n("jkl-table-pagination__page",{"jkl-table-pagination__page--active":e}),type:"button","data-number":i,onClick:t,...l,children:i+1});b.displayName="TablePagination";export{b as TablePagination};
 //# sourceMappingURL=TablePagination.js.map

package/build/es/components/table/TablePagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"TablePagination.js","sources":["../../../../src/components/table/TablePagination.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n    forwardRef,\n    useCallback,\n    useState,\n    type ChangeEventHandler,\n    type FC,\n    type MouseEventHandler,\n} from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport { ChevronLeftIcon } from \"../icon/icons/ChevronLeftIcon.js\";\nimport { ChevronRightIcon } from \"../icon/icons/ChevronRightIcon.js\";\nimport { NativeSelect } from \"../select/NativeSelect.js\";\nimport { TextInput } from \"../text-input/TextInput.js\";\nimport { useTableContext } from \"./tableContext.js\";\nimport type { TablePaginationProps } from \"./types.js\";\n\nfunction clamp(min: number, num: number, max: number): number {\n    if (num < min) {\n        return min;\n    }\n\n    if (num > max) {\n        return max;\n    }\n\n    return num;\n}\n\nexport const TablePagination = forwardRef<HTMLDivElement, TablePaginationProps>(\n    (props, ref) => {\n        const {\n            activePage = 0,\n            totalNumberOfRows,\n            rowsPerPage,\n            rowsPerPageItems,\n            className,\n            density,\n            id: idProp,\n            withGoToPage = false,\n            onChange,\n            onChangeRowsPerPage,\n            labels = {\n                rowsPerPage: \"Rader per side\",\n                previous: \"Forrige\",\n                next: \"Neste\",\n            },\n            ...rest\n        } = props;\n\n        const id = useId(idProp || \"jkl-table-pagination\", {\n            generateSuffix: !idProp,\n        });\n        const { density: contextDensity } = useTableContext();\n\n        const showAll = rowsPerPage <= 0;\n        const numberOfPages = showAll\n            ? 1\n            : Math.ceil(totalNumberOfRows / rowsPerPage);\n\n        const [currentPage, setCurrentPage] = useState(\n            clamp(0, activePage, numberOfPages - 1),\n        );\n\n        const onPageClick: MouseEventHandler<HTMLButtonElement> = useCallback(\n            (e) => {\n                const toPage = Number.parseInt(\n                    e.currentTarget.dataset.number as string,\n                );\n                onChange(e, toPage, currentPage);\n                setCurrentPage(toPage);\n                setPagePickerValue(String(toPage + 1));\n            },\n            [onChange, currentPage],\n        );\n\n        const [pagePickerValue, setPagePickerValue] = useState(\n            String(currentPage + 1),\n        );\n        const onPageChange: ChangeEventHandler<HTMLInputElement> = useCallback(\n            (e) => {\n                setPagePickerValue(e.target.value);\n                try {\n                    const toPage = Number.parseInt(e.target.value) - 1;\n                    if (Number.isNaN(toPage)) {\n                        return;\n                    }\n\n                    if (toPage >= 0 && toPage < numberOfPages) {\n                        onChange(e, toPage, currentPage);\n                        setCurrentPage(toPage);\n                    }\n                } catch {\n                    return;\n                }\n            },\n            [onChange, currentPage, numberOfPages],\n        );\n\n        const onPrevious: MouseEventHandler<HTMLButtonElement> = useCallback(\n            (e) => {\n                if (currentPage === 0) {\n                    // TODO: skal dette være en no-op i stedet?\n                    onChange(e, currentPage, currentPage);\n                    return;\n                }\n                const toPage = currentPage - 1;\n                onChange(e, toPage, currentPage);\n                setCurrentPage(toPage);\n                setPagePickerValue(String(toPage + 1));\n            },\n            [onChange, currentPage],\n        );\n\n        const onNext: MouseEventHandler<HTMLButtonElement> = useCallback(\n            (e) => {\n                if (currentPage === numberOfPages - 1) {\n                    // TODO: skal dette være en no-op i stedet?\n                    onChange(e, currentPage, currentPage);\n                    return;\n                }\n                const toPage = currentPage + 1;\n                onChange(e, toPage, currentPage);\n                setCurrentPage(toPage);\n                setPagePickerValue(String(toPage + 1));\n            },\n            [onChange, numberOfPages, currentPage],\n        );\n\n        return (\n            <div\n                className={clsx(\"jkl-table-pagination\", className)}\n                {...rest}\n                id={id}\n                data-density={density || contextDensity}\n                ref={ref}\n            >\n                <div className=\"jkl-table-pagination__left\">\n                    <div className=\"jkl-table-pagination__picker jkl-table-pagination__picker--rows\">\n                        <span\n                            className=\"jkl-table-pagination__picker-label\"\n                            aria-hidden=\"true\"\n                        >\n                            {labels.rowsPerPage}:\n                        </span>\n                        <NativeSelect\n                            className=\"jkl-table-pagination__picker-input\"\n                            label={labels.rowsPerPage}\n                            labelProps={{ srOnly: true }}\n                            name={`${id}-rows-per-page`}\n                            items={rowsPerPageItems.map((i) =>\n                                typeof i === \"number\"\n                                    ? String(i)\n                                    : {\n                                          label: i.label,\n                                          value: String(i.value),\n                                      },\n                            )}\n                            value={String(rowsPerPage)}\n                            onChange={onChangeRowsPerPage}\n                            width=\"min(8rem, 100%)\"\n                            inline\n                        />\n                    </div>\n                </div>\n                <div className=\"jkl-table-pagination__right\">\n                    {numberOfPages !== 1 && (\n                        <nav className=\"jkl-table-pagination__nav\">\n                            {withGoToPage && (\n                                <div className=\"jkl-table-pagination__picker jkl-table-pagination__picker--page\">\n                                    <span\n                                        className=\"jkl-table-pagination__picker-label\"\n                                        aria-hidden=\"true\"\n                                    >\n                                        {typeof withGoToPage === \"object\"\n                                            ? withGoToPage.gotoLabel\n                                            : \"Gå til side\"}\n                                        :\n                                    </span>\n                                    {/* onChange først ved enter/submit */}\n                                    <TextInput\n                                        className=\"jkl-table-pagination__picker-input\"\n                                        label={\n                                            typeof withGoToPage === \"object\"\n                                                ? withGoToPage.gotoLabel\n                                                : \"Gå til side\"\n                                        }\n                                        labelProps={{ srOnly: true }}\n                                        name={`${id}-go-to-page`}\n                                        value={pagePickerValue}\n                                        width=\"min(4rem, 100%)\"\n                                        onChange={onPageChange}\n                                        aria-invalid={\n                                            pagePickerValue &&\n                                            pagePickerValue !==\n                                                String(currentPage + 1)\n                                                ? \"true\"\n                                                : undefined\n                                        }\n                                    />\n                                </div>\n                            )}\n                            <ul>\n                                <li>\n                                    <IconButton\n                                        className=\"jkl-table-pagination__previous\"\n                                        title={labels.previous}\n                                        onClick={onPrevious}\n                                    >\n                                        <ChevronLeftIcon />\n                                    </IconButton>\n                                </li>\n                                <PaginationPages\n                                    id={id}\n                                    activePage={activePage}\n                                    numberOfPages={numberOfPages}\n                                    onPageClick={onPageClick}\n                                />\n                                <li>\n                                    <IconButton\n                                        className=\"jkl-table-pagination__next\"\n                                        title={labels.next}\n                                        onClick={onNext}\n                                    >\n                                        <ChevronRightIcon />\n                                    </IconButton>\n                                </li>\n                            </ul>\n                        </nav>\n                    )}\n                </div>\n            </div>\n        );\n    },\n);\n\nconst PaginationPages: FC<{\n    id: string;\n    activePage: number;\n    numberOfPages: number;\n    onPageClick: MouseEventHandler;\n}> = ({ id, activePage, numberOfPages, onPageClick }) => {\n    if (numberOfPages <= 7) {\n        return (\n            <>\n                {Array.from({ length: numberOfPages }).map((_, i) => (\n                    <li key={`${id}-page-${i}`}>\n                        <button\n                            className={clsx(\"jkl-table-pagination__page\", {\n                                \"jkl-table-pagination__page--active\":\n                                    activePage === i,\n                            })}\n                            type=\"button\"\n                            data-number={i}\n                            onClick={onPageClick}\n                        >\n                            {i + 1}\n                        </button>\n                    </li>\n                ))}\n            </>\n        );\n    }\n\n    const showStartEllipsis = activePage > 3 && numberOfPages > 7;\n    const showEndEllipsis = activePage < numberOfPages - 4 && numberOfPages > 7;\n\n    const startEllipsis = Math.min(\n        Math.max(activePage - 2, 1),\n        numberOfPages - 6,\n    );\n    const centerPageNumberStart = Math.min(\n        startEllipsis + 1,\n        numberOfPages - 5,\n    );\n    const centerPageNumber = Math.min(\n        centerPageNumberStart + 1,\n        numberOfPages - 4,\n    );\n    const centerPageNumberEnd = Math.min(\n        centerPageNumberStart + 2,\n        numberOfPages - 3,\n    );\n    const endEllipsis = Math.min(centerPageNumberStart + 3, numberOfPages - 2);\n\n    return (\n        <>\n            <li>\n                <PaginationPageButton\n                    isActive={activePage === 0}\n                    number={0}\n                    onClick={onPageClick}\n                />\n            </li>\n            <li>\n                {showStartEllipsis ? (\n                    <span\n                        className=\"jkl-table-pagination__ellipsis\"\n                        aria-hidden\n                    >\n                        {\"...\"}\n                    </span>\n                ) : (\n                    <PaginationPageButton\n                        isActive={activePage === startEllipsis}\n                        number={startEllipsis}\n                        onClick={onPageClick}\n                    />\n                )}\n            </li>\n            <li>\n                <PaginationPageButton\n                    isActive={activePage === centerPageNumberStart}\n                    number={centerPageNumberStart}\n                    onClick={onPageClick}\n                />\n            </li>\n            <li>\n                <PaginationPageButton\n                    isActive={activePage === centerPageNumber}\n                    number={centerPageNumber}\n                    onClick={onPageClick}\n                />\n            </li>\n            <li>\n                <PaginationPageButton\n                    isActive={activePage === centerPageNumberEnd}\n                    number={centerPageNumberEnd}\n                    onClick={onPageClick}\n                />\n            </li>\n            <li>\n                {showEndEllipsis ? (\n                    <span\n                        className=\"jkl-table-pagination__ellipsis\"\n                        aria-hidden\n                    >\n                        {\"...\"}\n                    </span>\n                ) : (\n                    <PaginationPageButton\n                        isActive={activePage === endEllipsis}\n                        number={endEllipsis}\n                        onClick={onPageClick}\n                    />\n                )}\n            </li>\n            <li>\n                <PaginationPageButton\n                    isActive={activePage === numberOfPages - 1}\n                    number={numberOfPages - 1}\n                    onClick={onPageClick}\n                />\n            </li>\n        </>\n    );\n};\n\nconst PaginationPageButton: FC<{\n    isActive: boolean;\n    number: number;\n    onClick: MouseEventHandler;\n}> = ({ isActive, number, onClick, ...rest }) => (\n    <button\n        className={clsx(\"jkl-table-pagination__page\", {\n            \"jkl-table-pagination__page--active\": isActive,\n        })}\n        type=\"button\"\n        data-number={number}\n        onClick={onClick}\n        {...rest}\n    >\n        {number + 1}\n    </button>\n);\n\nTablePagination.displayName = \"TablePagination\";\n"],"names":["TablePagination","forwardRef","props","ref","activePage","totalNumberOfRows","rowsPerPage","rowsPerPageItems","className","density","id","idProp","withGoToPage","onChange","onChangeRowsPerPage","labels","previous","next","rest","useId","generateSuffix","contextDensity","useTableContext","numberOfPages","Math","ceil","currentPage","setCurrentPage","useState","min","num","max","clamp","onPageClick","useCallback","e","toPage","Number","parseInt","currentTarget","dataset","number","setPagePickerValue","String","pagePickerValue","onPageChange","target","value","isNaN","onPrevious","onNext","jsxs","clsx","children","jsx","NativeSelect","label","labelProps","srOnly","name","items","map","i","width","inline","gotoLabel","TextInput","IconButton","title","onClick","ChevronLeftIcon","PaginationPages","ChevronRightIcon","Fragment","Array","from","length","_","type","showStartEllipsis","showEndEllipsis","startEllipsis","centerPageNumberStart","centerPageNumber","centerPageNumberEnd","endEllipsis","PaginationPageButton","isActive","displayName"],"mappings":"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"}
+{"version":3,"file":"TablePagination.js","sources":["../../../../src/components/table/TablePagination.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n    forwardRef,\n    useCallback,\n    useState,\n    type ChangeEventHandler,\n    type FC,\n    type MouseEventHandler,\n} from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport { ChevronLeftIcon } from \"../icon/icons/ChevronLeftIcon.js\";\nimport { ChevronRightIcon } from \"../icon/icons/ChevronRightIcon.js\";\nimport { NativeSelect } from \"../select/NativeSelect.js\";\nimport { TextInput } from \"../text-input/TextInput.js\";\nimport { useTableContext } from \"./tableContext.js\";\nimport type { TablePaginationProps } from \"./types.js\";\n\nfunction clamp(min: number, num: number, max: number): number {\n    if (num < min) {\n        return min;\n    }\n\n    if (num > max) {\n        return max;\n    }\n\n    return num;\n}\n\nexport const TablePagination = forwardRef<HTMLDivElement, TablePaginationProps>(\n    (props, ref) => {\n        const {\n            activePage = 0,\n            totalNumberOfRows,\n            rowsPerPage,\n            rowsPerPageItems,\n            className,\n            density,\n            id: idProp,\n            withGoToPage = false,\n            onChange,\n            onChangeRowsPerPage,\n            labels = {\n                rowsPerPage: \"Rader per side\",\n                previous: \"Forrige\",\n                next: \"Neste\",\n            },\n            ...rest\n        } = props;\n\n        const id = useId(idProp || \"jkl-table-pagination\", {\n            generateSuffix: !idProp,\n        });\n        const { density: contextDensity } = useTableContext();\n\n        const showAll = rowsPerPage <= 0;\n        const numberOfPages = showAll\n            ? 1\n            : Math.ceil(totalNumberOfRows / rowsPerPage);\n\n        const [currentPage, setCurrentPage] = useState(\n            clamp(0, activePage, numberOfPages - 1),\n        );\n\n        const onPageClick: MouseEventHandler<HTMLButtonElement> = useCallback(\n            (e) => {\n                const toPage = Number.parseInt(\n                    e.currentTarget.dataset.number as string,\n                );\n                onChange(e, toPage, currentPage);\n                setCurrentPage(toPage);\n                setPagePickerValue(String(toPage + 1));\n            },\n            [onChange, currentPage],\n        );\n\n        const [pagePickerValue, setPagePickerValue] = useState(\n            String(currentPage + 1),\n        );\n        const onPageChange: ChangeEventHandler<HTMLInputElement> = useCallback(\n            (e) => {\n                setPagePickerValue(e.target.value);\n                try {\n                    const toPage = Number.parseInt(e.target.value) - 1;\n                    if (Number.isNaN(toPage)) {\n                        return;\n                    }\n\n                    if (toPage >= 0 && toPage < numberOfPages) {\n                        onChange(e, toPage, currentPage);\n                        setCurrentPage(toPage);\n                    }\n                } catch {\n                    return;\n                }\n            },\n            [onChange, currentPage, numberOfPages],\n        );\n\n        const onPrevious: MouseEventHandler<HTMLButtonElement> = useCallback(\n            (e) => {\n                if (currentPage === 0) {\n                    // TODO: skal dette være en no-op i stedet?\n                    onChange(e, currentPage, currentPage);\n                    return;\n                }\n                const toPage = currentPage - 1;\n                onChange(e, toPage, currentPage);\n                setCurrentPage(toPage);\n                setPagePickerValue(String(toPage + 1));\n            },\n            [onChange, currentPage],\n        );\n\n        const onNext: MouseEventHandler<HTMLButtonElement> = useCallback(\n            (e) => {\n                if (currentPage === numberOfPages - 1) {\n                    // TODO: skal dette være en no-op i stedet?\n                    onChange(e, currentPage, currentPage);\n                    return;\n                }\n                const toPage = currentPage + 1;\n                onChange(e, toPage, currentPage);\n                setCurrentPage(toPage);\n                setPagePickerValue(String(toPage + 1));\n            },\n            [onChange, numberOfPages, currentPage],\n        );\n\n        return (\n            <div\n                className={clsx(\"jkl-table-pagination\", className)}\n                {...rest}\n                id={id}\n                data-density={density || contextDensity}\n                ref={ref}\n            >\n                <div className=\"jkl-table-pagination__left\">\n                    <div className=\"jkl-table-pagination__picker jkl-table-pagination__picker--rows\">\n                        <span\n                            className=\"jkl-table-pagination__picker-label\"\n                            aria-hidden=\"true\"\n                        >\n                            {labels.rowsPerPage}:\n                        </span>\n                        <NativeSelect\n                            className=\"jkl-table-pagination__picker-input\"\n                            label={labels.rowsPerPage}\n                            labelProps={{ srOnly: true }}\n                            name={`${id}-rows-per-page`}\n                            items={rowsPerPageItems.map((i) =>\n                                typeof i === \"number\"\n                                    ? String(i)\n                                    : {\n                                          label: i.label,\n                                          value: String(i.value),\n                                      },\n                            )}\n                            value={String(rowsPerPage)}\n                            onChange={onChangeRowsPerPage}\n                            width=\"min(8rem, 100%)\"\n                            inline\n                        />\n                    </div>\n                </div>\n                <span className=\"jkl-table-pagination__total-rows\">\n                    Treff: {totalNumberOfRows}\n                </span>\n                <div className=\"jkl-table-pagination__right\">\n                    {numberOfPages !== 1 && (\n                        <nav className=\"jkl-table-pagination__nav\">\n                            {withGoToPage && (\n                                <div className=\"jkl-table-pagination__picker jkl-table-pagination__picker--page\">\n                                    <span\n                                        className=\"jkl-table-pagination__picker-label\"\n                                        aria-hidden=\"true\"\n                                    >\n                                        {typeof withGoToPage === \"object\"\n                                            ? withGoToPage.gotoLabel\n                                            : \"Gå til side\"}\n                                        :\n                                    </span>\n                                    {/* onChange først ved enter/submit */}\n                                    <TextInput\n                                        className=\"jkl-table-pagination__picker-input\"\n                                        label={\n                                            typeof withGoToPage === \"object\"\n                                                ? withGoToPage.gotoLabel\n                                                : \"Gå til side\"\n                                        }\n                                        labelProps={{ srOnly: true }}\n                                        name={`${id}-go-to-page`}\n                                        value={pagePickerValue}\n                                        width=\"min(4rem, 100%)\"\n                                        onChange={onPageChange}\n                                        aria-invalid={\n                                            pagePickerValue &&\n                                            pagePickerValue !==\n                                                String(currentPage + 1)\n                                                ? \"true\"\n                                                : undefined\n                                        }\n                                    />\n                                </div>\n                            )}\n                            <ul>\n                                <li>\n                                    <IconButton\n                                        className=\"jkl-table-pagination__previous\"\n                                        title={labels.previous}\n                                        onClick={onPrevious}\n                                    >\n                                        <ChevronLeftIcon />\n                                    </IconButton>\n                                </li>\n                                <PaginationPages\n                                    id={id}\n                                    activePage={activePage}\n                                    numberOfPages={numberOfPages}\n                                    onPageClick={onPageClick}\n                                />\n                                <li>\n                                    <IconButton\n                                        className=\"jkl-table-pagination__next\"\n                                        title={labels.next}\n                                        onClick={onNext}\n                                    >\n                                        <ChevronRightIcon />\n                                    </IconButton>\n                                </li>\n                            </ul>\n                        </nav>\n                    )}\n                </div>\n            </div>\n        );\n    },\n);\n\nconst PaginationPages: FC<{\n    id: string;\n    activePage: number;\n    numberOfPages: number;\n    onPageClick: MouseEventHandler;\n}> = ({ id, activePage, numberOfPages, onPageClick }) => {\n    if (numberOfPages <= 7) {\n        return (\n            <>\n                {Array.from({ length: numberOfPages }).map((_, i) => (\n                    <li key={`${id}-page-${i}`}>\n                        <button\n                            className={clsx(\"jkl-table-pagination__page\", {\n                                \"jkl-table-pagination__page--active\":\n                                    activePage === i,\n                            })}\n                            type=\"button\"\n                            data-number={i}\n                            onClick={onPageClick}\n                        >\n                            {i + 1}\n                        </button>\n                    </li>\n                ))}\n            </>\n        );\n    }\n\n    const showStartEllipsis = activePage > 3 && numberOfPages > 7;\n    const showEndEllipsis = activePage < numberOfPages - 4 && numberOfPages > 7;\n\n    const startEllipsis = Math.min(\n        Math.max(activePage - 2, 1),\n        numberOfPages - 6,\n    );\n    const centerPageNumberStart = Math.min(\n        startEllipsis + 1,\n        numberOfPages - 5,\n    );\n    const centerPageNumber = Math.min(\n        centerPageNumberStart + 1,\n        numberOfPages - 4,\n    );\n    const centerPageNumberEnd = Math.min(\n        centerPageNumberStart + 2,\n        numberOfPages - 3,\n    );\n    const endEllipsis = Math.min(centerPageNumberStart + 3, numberOfPages - 2);\n\n    return (\n        <>\n            <li>\n                <PaginationPageButton\n                    isActive={activePage === 0}\n                    number={0}\n                    onClick={onPageClick}\n                />\n            </li>\n            <li>\n                {showStartEllipsis ? (\n                    <span\n                        className=\"jkl-table-pagination__ellipsis\"\n                        aria-hidden\n                    >\n                        {\"...\"}\n                    </span>\n                ) : (\n                    <PaginationPageButton\n                        isActive={activePage === startEllipsis}\n                        number={startEllipsis}\n                        onClick={onPageClick}\n                    />\n                )}\n            </li>\n            <li>\n                <PaginationPageButton\n                    isActive={activePage === centerPageNumberStart}\n                    number={centerPageNumberStart}\n                    onClick={onPageClick}\n                />\n            </li>\n            <li>\n                <PaginationPageButton\n                    isActive={activePage === centerPageNumber}\n                    number={centerPageNumber}\n                    onClick={onPageClick}\n                />\n            </li>\n            <li>\n                <PaginationPageButton\n                    isActive={activePage === centerPageNumberEnd}\n                    number={centerPageNumberEnd}\n                    onClick={onPageClick}\n                />\n            </li>\n            <li>\n                {showEndEllipsis ? (\n                    <span\n                        className=\"jkl-table-pagination__ellipsis\"\n                        aria-hidden\n                    >\n                        {\"...\"}\n                    </span>\n                ) : (\n                    <PaginationPageButton\n                        isActive={activePage === endEllipsis}\n                        number={endEllipsis}\n                        onClick={onPageClick}\n                    />\n                )}\n            </li>\n            <li>\n                <PaginationPageButton\n                    isActive={activePage === numberOfPages - 1}\n                    number={numberOfPages - 1}\n                    onClick={onPageClick}\n                />\n            </li>\n        </>\n    );\n};\n\nconst PaginationPageButton: FC<{\n    isActive: boolean;\n    number: number;\n    onClick: MouseEventHandler;\n}> = ({ isActive, number, onClick, ...rest }) => (\n    <button\n        className={clsx(\"jkl-table-pagination__page\", {\n            \"jkl-table-pagination__page--active\": isActive,\n        })}\n        type=\"button\"\n        data-number={number}\n        onClick={onClick}\n        {...rest}\n    >\n        {number + 1}\n    </button>\n);\n\nTablePagination.displayName = \"TablePagination\";\n"],"names":["TablePagination","forwardRef","props","ref","activePage","totalNumberOfRows","rowsPerPage","rowsPerPageItems","className","density","id","idProp","withGoToPage","onChange","onChangeRowsPerPage","labels","previous","next","rest","useId","generateSuffix","contextDensity","useTableContext","numberOfPages","Math","ceil","currentPage","setCurrentPage","useState","min","num","max","clamp","onPageClick","useCallback","e","toPage","Number","parseInt","currentTarget","dataset","number","setPagePickerValue","String","pagePickerValue","onPageChange","target","value","isNaN","onPrevious","onNext","jsxs","clsx","children","jsx","NativeSelect","label","labelProps","srOnly","name","items","map","i","width","inline","gotoLabel","TextInput","IconButton","title","onClick","ChevronLeftIcon","PaginationPages","ChevronRightIcon","Fragment","Array","from","length","_","type","showStartEllipsis","showEndEllipsis","startEllipsis","centerPageNumberStart","centerPageNumber","centerPageNumberEnd","endEllipsis","PaginationPageButton","isActive","displayName"],"mappings":"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"}

package/build/es/components/table/TableRow.js

@@ -1,2 +1,2 @@
-import{jsx as e}from"react/jsx-runtime";import{c as a}from"../../../clsx-BeLtu-UY.js";import{forwardRef as t,useState as l,useEffect as s}from"react";import{useTableContext as i}from"./tableContext.js";import{useTableSectionContext as r}from"./tableSectionContext.js";const o=t((({className:t,clickable:o,children:c,...n},d)=>{const{density:k}=i(),{isTableBody:b}=r(),[m,f]=l(o?.isClicked||!1);return s((()=>{f((e=>void 0!==o?.isClicked?o.isClicked:e))}),[o?.isClicked]),e("tr",b&&o?{onClick:function(e){f(!m),o.onClick(e)},onKeyPress:function(e){(" "===e.key||"Enter"===e.key)&&(e.preventDefault(),f(!m),o.onClick(e))},"data-testid":"jkl-clickable-table-row",className:a("jkl-table-row","jkl-table-row--clickable",t,{"jkl-table-row--clicked":o?.markClickedRows&&m}),"aria-label":"Klikkbar rad","aria-pressed":o?.markClickedRows?m?"true":"false":void 0,tabIndex:0,...n,"data-density":k,ref:d,children:c}:{className:a("jkl-table-row",t),...n,ref:d,"data-density":k,children:c})}));o.displayName="TableRow";export{o as TableRow};
+import{jsx as e}from"react/jsx-runtime";import{c as a}from"../../../clsx-BeLtu-UY.js";import{forwardRef as t,useState as l,useEffect as s}from"react";import{useTableContext as i}from"./tableContext.js";import{useTableSectionContext as r}from"./tableSectionContext.js";const o=t(({className:t,clickable:o,children:c,...n},d)=>{const{density:k}=i(),{isTableBody:b}=r(),[m,f]=l(o?.isClicked||!1);return s(()=>{f(e=>void 0!==o?.isClicked?o.isClicked:e)},[o?.isClicked]),e("tr",b&&o?{onClick:function(e){f(!m),o.onClick(e)},onKeyPress:function(e){(" "===e.key||"Enter"===e.key)&&(e.preventDefault(),f(!m),o.onClick(e))},"data-testid":"jkl-clickable-table-row",className:a("jkl-table-row","jkl-table-row--clickable",t,{"jkl-table-row--clicked":o?.markClickedRows&&m}),"aria-label":"Klikkbar rad","aria-pressed":o?.markClickedRows?m?"true":"false":void 0,tabIndex:0,...n,"data-density":k,ref:d,children:c}:{className:a("jkl-table-row",t),...n,ref:d,"data-density":k,children:c})});o.displayName="TableRow";export{o as TableRow};
 //# sourceMappingURL=TableRow.js.map

package/build/es/components/table/TableRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableRow.js","sources":["../../../../src/components/table/TableRow.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, useEffect, useState } from \"react\";\nimport { useTableContext } from \"./tableContext.js\";\nimport { useTableSectionContext } from \"./tableSectionContext.js\";\nimport type { TableRowProps } from \"./types.js\";\n\nconst TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(\n    ({ className, clickable, children, ...rest }, ref) => {\n        const { density } = useTableContext();\n        const { isTableBody } = useTableSectionContext();\n\n        const [clicked, setClicked] = useState(clickable?.isClicked || false);\n\n        useEffect(() => {\n            setClicked((prev) =>\n                clickable?.isClicked !== undefined ? clickable.isClicked : prev,\n            );\n        }, [clickable?.isClicked]);\n\n        if (isTableBody && clickable) {\n            return (\n                <tr\n                    onClick={function handleOnClick(e) {\n                        setClicked(!clicked);\n                        clickable.onClick(e);\n                    }}\n                    onKeyPress={function handleKeyPress(e) {\n                        if (e.key === \" \" || e.key === \"Enter\") {\n                            e.preventDefault();\n                            setClicked(!clicked);\n                            clickable.onClick(e);\n                        }\n                    }}\n                    data-testid=\"jkl-clickable-table-row\"\n                    className={clsx(\n                        \"jkl-table-row\",\n                        \"jkl-table-row--clickable\",\n                        className,\n                        {\n                            [\"jkl-table-row--clicked\"]:\n                                clickable?.markClickedRows && clicked,\n                        },\n                    )}\n                    aria-label=\"Klikkbar rad\"\n                    aria-pressed={\n                        clickable?.markClickedRows\n                            ? clicked\n                                ? \"true\"\n                                : \"false\"\n                            : undefined\n                    }\n                    tabIndex={0}\n                    {...rest}\n                    data-density={density}\n                    ref={ref}\n                >\n                    {children}\n                </tr>\n            );\n        }\n\n        return (\n            <tr\n                className={clsx(\"jkl-table-row\", className)}\n                {...rest}\n                ref={ref}\n                data-density={density}\n            >\n                {children}\n            </tr>\n        );\n    },\n);\n\nTableRow.displayName = \"TableRow\";\n\nexport { TableRow };\n"],"names":["TableRow","forwardRef","className","clickable","children","rest","ref","density","useTableContext","isTableBody","useTableSectionContext","clicked","setClicked","useState","isClicked","useEffect","prev","jsx","onClick","e","onKeyPress","key","preventDefault","clsx","markClickedRows","tabIndex","displayName"],"mappings":"4QAMA,MAAMA,EAAWC,GACb,EAAGC,UAAAA,EAAWC,UAAAA,EAAWC,SAAAA,KAAaC,GAAQC,KACpC,MAAEC,QAAAA,GAAYC,KACZC,YAAAA,GAAgBC,KAEjBC,EAASC,GAAcC,EAASV,GAAWW,YAAa,GAQ/D,OANAC,GAAU,KACNH,GAAYI,QACiB,IAAzBb,GAAWW,UAA0BX,EAAUW,UAAYE,GAC/D,GACD,CAACb,GAAWW,YAIPG,EAAC,KAFLR,GAAeN,EAEV,CACGe,QAAS,SAAuBC,GAC5BP,GAAYD,GACZR,EAAUe,QAAQC,EACtB,EACAC,WAAY,SAAwBD,IAClB,MAAVA,EAAEE,KAAyB,UAAVF,EAAEE,OACnBF,EAAEG,iBACFV,GAAYD,GACZR,EAAUe,QAAQC,GAE1B,EACA,cAAY,0BACZjB,UAAWqB,EACP,gBACA,2BACArB,EACA,CACK,yBACGC,GAAWqB,iBAAmBb,IAG1C,aAAW,eACX,eACIR,GAAWqB,gBACLb,EACI,OACA,aACJ,EAEVc,SAAU,KACNpB,EACJ,eAAcE,EACdD,IAAAA,EAECF,SAAAA,GAMR,CACGF,UAAWqB,EAAK,gBAAiBrB,MAC7BG,EACJC,IAAAA,EACA,eAAcC,EAEbH,SAAAA,GACL,IAKZJ,EAAS0B,YAAc"}
+{"version":3,"file":"TableRow.js","sources":["../../../../src/components/table/TableRow.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, useEffect, useState } from \"react\";\nimport { useTableContext } from \"./tableContext.js\";\nimport { useTableSectionContext } from \"./tableSectionContext.js\";\nimport type { TableRowProps } from \"./types.js\";\n\nconst TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(\n    ({ className, clickable, children, ...rest }, ref) => {\n        const { density } = useTableContext();\n        const { isTableBody } = useTableSectionContext();\n\n        const [clicked, setClicked] = useState(clickable?.isClicked || false);\n\n        useEffect(() => {\n            setClicked((prev) =>\n                clickable?.isClicked !== undefined ? clickable.isClicked : prev,\n            );\n        }, [clickable?.isClicked]);\n\n        if (isTableBody && clickable) {\n            return (\n                <tr\n                    onClick={function handleOnClick(e) {\n                        setClicked(!clicked);\n                        clickable.onClick(e);\n                    }}\n                    onKeyPress={function handleKeyPress(e) {\n                        if (e.key === \" \" || e.key === \"Enter\") {\n                            e.preventDefault();\n                            setClicked(!clicked);\n                            clickable.onClick(e);\n                        }\n                    }}\n                    data-testid=\"jkl-clickable-table-row\"\n                    className={clsx(\n                        \"jkl-table-row\",\n                        \"jkl-table-row--clickable\",\n                        className,\n                        {\n                            [\"jkl-table-row--clicked\"]:\n                                clickable?.markClickedRows && clicked,\n                        },\n                    )}\n                    aria-label=\"Klikkbar rad\"\n                    aria-pressed={\n                        clickable?.markClickedRows\n                            ? clicked\n                                ? \"true\"\n                                : \"false\"\n                            : undefined\n                    }\n                    tabIndex={0}\n                    {...rest}\n                    data-density={density}\n                    ref={ref}\n                >\n                    {children}\n                </tr>\n            );\n        }\n\n        return (\n            <tr\n                className={clsx(\"jkl-table-row\", className)}\n                {...rest}\n                ref={ref}\n                data-density={density}\n            >\n                {children}\n            </tr>\n        );\n    },\n);\n\nTableRow.displayName = \"TableRow\";\n\nexport { TableRow };\n"],"names":["TableRow","forwardRef","className","clickable","children","rest","ref","density","useTableContext","isTableBody","useTableSectionContext","clicked","setClicked","useState","isClicked","useEffect","prev","jsx","onClick","e","onKeyPress","key","preventDefault","clsx","markClickedRows","tabIndex","displayName"],"mappings":"4QAMA,MAAMA,EAAWC,EACb,EAAGC,UAAAA,EAAWC,UAAAA,EAAWC,SAAAA,KAAaC,GAAQC,KAC1C,MAAQC,QAAAA,GAAYC,KACZC,YAAAA,GAAgBC,KAEjBC,EAASC,GAAcC,EAASV,GAAWW,YAAa,GAQ/D,OANAC,EAAU,KACNH,EAAYI,QACiB,IAAzBb,GAAWW,UAA0BX,EAAUW,UAAYE,IAEhE,CAACb,GAAWW,YAIPG,EAAC,KAFLR,GAAeN,EAEV,CACGe,QAAS,SAAuBC,GAC5BP,GAAYD,GACZR,EAAUe,QAAQC,EACtB,EACAC,WAAY,SAAwBD,IAClB,MAAVA,EAAEE,KAAyB,UAAVF,EAAEE,OACnBF,EAAEG,iBACFV,GAAYD,GACZR,EAAUe,QAAQC,GAE1B,EACA,cAAY,0BACZjB,UAAWqB,EACP,gBACA,2BACArB,EACA,CACK,yBACGC,GAAWqB,iBAAmBb,IAG1C,aAAW,eACX,eACIR,GAAWqB,gBACLb,EACI,OACA,aACJ,EAEVc,SAAU,KACNpB,EACJ,eAAcE,EACdD,IAAAA,EAECF,SAAAA,GAMR,CACGF,UAAWqB,EAAK,gBAAiBrB,MAC7BG,EACJC,IAAAA,EACA,eAAcC,EAEbH,SAAAA,MAMjBJ,EAAS0B,YAAc"}

package/build/es/components/table/tableSectionContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"tableSectionContext.js","sources":["../../../../src/components/table/tableSectionContext.tsx"],"sourcesContent":["import React, { createContext, useContext } from \"react\";\nimport type {\n    TableSectionContext,\n    TableSectionContextProviderProps,\n} from \"./types.js\";\n\nconst tableSectionContext = createContext<TableSectionContext>({\n    isTableHead: false,\n    isTableBody: false,\n    isTableFooter: false,\n});\n\nexport const useTableSectionContext = (): TableSectionContext =>\n    useContext(tableSectionContext);\n\nexport const TableSectionContextProvider: React.FC<\n    TableSectionContextProviderProps\n> = ({ state, children }) => (\n    <tableSectionContext.Provider value={state}>\n        {children}\n    </tableSectionContext.Provider>\n);\n"],"names":["tableSectionContext","createContext","isTableHead","isTableBody","isTableFooter","useTableSectionContext","useContext","TableSectionContextProvider","state","children","jsx","Provider","value"],"mappings":"8FAMA,MAAMA,EAAsBC,EAAmC,CAC3DC,aAAa,EACbC,aAAa,EACbC,eAAe,IAGNC,EAAyB,IAClCC,EAAWN,GAEFO,EAET,EAAGC,MAAAA,EAAOC,SAAAA,KACTC,EAAAV,EAAoBW,SAApB,CAA6BC,MAAOJ,EAChCC,SAAAA"}
+{"version":3,"file":"tableSectionContext.js","sources":["../../../../src/components/table/tableSectionContext.tsx"],"sourcesContent":["import React, { createContext, useContext } from \"react\";\nimport type {\n    TableSectionContext,\n    TableSectionContextProviderProps,\n} from \"./types.js\";\n\nconst tableSectionContext = createContext<TableSectionContext>({\n    isTableHead: false,\n    isTableBody: false,\n    isTableFooter: false,\n});\n\nexport const useTableSectionContext = (): TableSectionContext =>\n    useContext(tableSectionContext);\n\nexport const TableSectionContextProvider: React.FC<\n    TableSectionContextProviderProps\n> = ({ state, children }) => (\n    <tableSectionContext.Provider value={state}>\n        {children}\n    </tableSectionContext.Provider>\n);\n"],"names":["tableSectionContext","createContext","isTableHead","isTableBody","isTableFooter","useTableSectionContext","useContext","TableSectionContextProvider","state","children","jsx","Provider","value"],"mappings":"8FAMA,MAAMA,EAAsBC,EAAmC,CAC3DC,aAAa,EACbC,aAAa,EACbC,eAAe,IAGNC,EAAyB,IAClCC,EAAWN,GAEFO,EAET,EAAGC,MAAAA,EAAOC,SAAAA,KACVC,EAACV,EAAoBW,SAApB,CAA6BC,MAAOJ,EAChCC,SAAAA"}

package/build/es/components/table/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../../src/components/table/utils.ts"],"sourcesContent":["import type { TableSortDirection } from \"./TableHeader.js\";\n\nexport type TableSortProps = ReturnType<\n    ReturnType<typeof useSortableTableHeader>[\"getSortProps\"]\n>[\"sortable\"];\n\nexport const useSortableTableHeader = (\n    activeSortKey: string,\n    activeSortDirection: TableSortDirection,\n    onChange: (\n        newSortKey: string,\n        newSortDirection: TableSortDirection,\n    ) => void,\n) => {\n    const calculateNewSortParameters = (\n        sortKey: string,\n    ): TableSortDirection => {\n        if (sortKey === activeSortKey && activeSortDirection === \"desc\") {\n            return \"asc\";\n        }\n\n        return \"desc\";\n    };\n\n    const handleClick = (sortKey: string) => {\n        const newSortParameters = calculateNewSortParameters(sortKey);\n        onChange(sortKey, newSortParameters);\n    };\n\n    const getSortProps = (sortKey: string) => {\n        return {\n            sortable: {\n                onClick: () => handleClick(sortKey),\n                direction:\n                    activeSortKey === sortKey ? activeSortDirection : undefined,\n            },\n        };\n    };\n\n    return {\n        getSortProps,\n    };\n};\n"],"names":["useSortableTableHeader","activeSortKey","activeSortDirection","onChange","calculateNewSortParameters","handleClick","sortKey","newSortParameters","getSortProps","sortable","onClick","direction"],"mappings":"AAMO,MAAMA,EAAyB,CAClCC,EACAC,EACAC,KAKMC,MAUAC,EAAeC,IACXC,MAAAA,EAXyB,CAC/BD,GAEIA,IAAYL,GAAyC,SAAxBC,EACtB,MAGJ,OAImBE,CAA2BE,GACrDH,EAASG,EAASC,EAAiB,EAahC,MAAA,CACHC,aAXkBF,IACX,CACHG,SAAU,CACNC,QAAS,IAAML,EAAYC,GAC3BK,UACIV,IAAkBK,EAAUJ,OAAsB,KAOlE"}
+{"version":3,"file":"utils.js","sources":["../../../../src/components/table/utils.ts"],"sourcesContent":["import type { TableSortDirection } from \"./TableHeader.js\";\n\nexport type TableSortProps = ReturnType<\n    ReturnType<typeof useSortableTableHeader>[\"getSortProps\"]\n>[\"sortable\"];\n\nexport const useSortableTableHeader = (\n    activeSortKey: string,\n    activeSortDirection: TableSortDirection,\n    onChange: (\n        newSortKey: string,\n        newSortDirection: TableSortDirection,\n    ) => void,\n) => {\n    const calculateNewSortParameters = (\n        sortKey: string,\n    ): TableSortDirection => {\n        if (sortKey === activeSortKey && activeSortDirection === \"desc\") {\n            return \"asc\";\n        }\n\n        return \"desc\";\n    };\n\n    const handleClick = (sortKey: string) => {\n        const newSortParameters = calculateNewSortParameters(sortKey);\n        onChange(sortKey, newSortParameters);\n    };\n\n    const getSortProps = (sortKey: string) => {\n        return {\n            sortable: {\n                onClick: () => handleClick(sortKey),\n                direction:\n                    activeSortKey === sortKey ? activeSortDirection : undefined,\n            },\n        };\n    };\n\n    return {\n        getSortProps,\n    };\n};\n"],"names":["useSortableTableHeader","activeSortKey","activeSortDirection","onChange","handleClick","sortKey","newSortParameters","calculateNewSortParameters","getSortProps","sortable","onClick","direction"],"mappings":"AAMO,MAAMA,EAAyB,CAClCC,EACAC,EACAC,KAKA,MAUMC,EAAeC,IACjB,MAAMC,EAXyB,CAC/BD,GAEIA,IAAYJ,GAAyC,SAAxBC,EACtB,MAGJ,OAImBK,CAA2BF,GACrDF,EAASE,EAASC,IAatB,MAAO,CACHE,aAXkBH,IAAAA,CAEdI,SAAU,CACNC,QAAS,IAAMN,EAAYC,GAC3BM,UACIV,IAAkBI,EAAUH,OAAsB"}

package/build/es/components/tabs/NavTab.js

@@ -1,2 +1,2 @@
-import{jsx as e}from"react/jsx-runtime";import{c as r}from"../../../clsx-BeLtu-UY.js";import{forwardRef as a,useCallback as t}from"react";const n=a((function(a,n){const{as:o="a","aria-selected":s,className:i,onBeforeKeyboardNavigation:c,...l}=a,f=o,m=t(((e,r)=>{c&&!1===c(e,r)||(r.focus(),r.click())}),[c]),u=t((e=>{if("ArrowLeft"===e.key){const r=e.currentTarget,a=e.currentTarget.previousSibling;m(r,a||r.parentElement?.lastChild?.previousSibling)}if("ArrowRight"===e.key){const r=e.currentTarget,a=e.currentTarget.nextSibling;a&&"A"===a.nodeName?m(r,a):m(r,r.parentElement?.firstChild)}}),[m]);return e(f,{ref:n,...l,role:"tab","aria-selected":s,className:r("jkl-tab",i),onKeyDown:u,tabIndex:s?0:-1})}));export{n as NavTab};
+import{jsx as e}from"react/jsx-runtime";import{c as r}from"../../../clsx-BeLtu-UY.js";import{forwardRef as a,useCallback as t}from"react";const n=a(function(a,n){const{as:o="a","aria-selected":s,className:i,onBeforeKeyboardNavigation:c,...l}=a,f=o,m=t((e,r)=>{c&&!1===c(e,r)||(r.focus(),r.click())},[c]),u=t(e=>{if("ArrowLeft"===e.key){const r=e.currentTarget,a=e.currentTarget.previousSibling;m(r,a||r.parentElement?.lastChild?.previousSibling)}if("ArrowRight"===e.key){const r=e.currentTarget,a=e.currentTarget.nextSibling;a&&"A"===a.nodeName?m(r,a):m(r,r.parentElement?.firstChild)}},[m]);return e(f,{ref:n,...l,role:"tab","aria-selected":s,className:r("jkl-tab",i),onKeyDown:u,tabIndex:s?0:-1})});export{n as NavTab};
 //# sourceMappingURL=NavTab.js.map

package/build/es/components/tabs/NavTab.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavTab.js","sources":["../../../../src/components/tabs/NavTab.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, useCallback } from \"react\";\nimport type { PolymorphicRef } from \"../../utilities/index.js\";\nimport type { NavTabProps } from \"./types.js\";\n\ntype NavTabComponent = <ElementType extends React.ElementType = \"a\">(\n    props: NavTabProps<ElementType>,\n) => React.ReactElement | null;\n\nexport const NavTab = forwardRef(function NavTab<\n    ElementType extends React.ElementType = \"a\",\n>(props: NavTabProps<ElementType>, ref?: PolymorphicRef<ElementType>) {\n    const {\n        as = \"a\",\n        \"aria-selected\": selected,\n        className,\n        onBeforeKeyboardNavigation: onBeforeNavigate,\n        ...rest\n    } = props;\n\n    const Component = as;\n\n    const navigate = useCallback(\n        (from: HTMLAnchorElement, to: HTMLAnchorElement) => {\n            if (onBeforeNavigate) {\n                // Åpne for å stoppe selve navigeringen hvis det skulle være behov for å gjøre noe custom med fokus og navigasjon\n                const doNavigate = onBeforeNavigate(from, to);\n                if (doNavigate === false) {\n                    return;\n                }\n            }\n\n            to.focus();\n            // Click brukes for å være router-agnostisk\n            to.click();\n        },\n        [onBeforeNavigate],\n    );\n\n    const handleOnKeyDown = useCallback(\n        (event: React.KeyboardEvent<HTMLAnchorElement>) => {\n            if (event.key === \"ArrowLeft\") {\n                const current = event.currentTarget;\n                const prev = event.currentTarget.previousSibling;\n\n                if (prev) {\n                    navigate(current, prev as HTMLAnchorElement);\n                } else {\n                    navigate(\n                        current,\n                        current.parentElement?.lastChild\n                            ?.previousSibling as HTMLAnchorElement,\n                    );\n                }\n            }\n\n            if (event.key === \"ArrowRight\") {\n                const current = event.currentTarget;\n                const next = event.currentTarget.nextSibling;\n\n                // skip the focus indicator element\n                if (next && next.nodeName === \"A\") {\n                    navigate(current, next as HTMLAnchorElement);\n                } else {\n                    navigate(\n                        current,\n                        current.parentElement?.firstChild as HTMLAnchorElement,\n                    );\n                }\n            }\n        },\n        [navigate],\n    );\n\n    return (\n        <Component\n            ref={ref}\n            {...rest}\n            role=\"tab\"\n            aria-selected={selected}\n            className={clsx(\"jkl-tab\", className)}\n            onKeyDown={handleOnKeyDown}\n            // En faneliste skal være én fokuserbar gruppe.\n            // Piltaster brukes for å veksle mellom faner.\n            // Bare den aktive fanen skal være fokuserbar med tastatur.\n            tabIndex={selected ? 0 : -1}\n        />\n    );\n}) as NavTabComponent;\n"],"names":["NavTab","forwardRef","props","ref","as","selected","className","onBeforeKeyboardNavigation","onBeforeNavigate","rest","Component","navigate","useCallback","from","to","focus","click","handleOnKeyDown","event","key","current","currentTarget","prev","previousSibling","parentElement","lastChild","next","nextSibling","nodeName","firstChild","jsx","role","clsx","onKeyDown","tabIndex"],"mappings":"0IASO,MAAMA,EAASC,GAAW,SAE/BC,EAAiCC,GACzB,MACFC,GAAAA,EAAK,IACL,gBAAiBC,EACjBC,UAAAA,EACAC,2BAA4BC,KACzBC,GACHP,EAEEQ,EAAYN,EAEZO,EAAWC,GACb,CAACC,EAAyBC,KAClBN,IAGmB,IADAA,EAAiBK,EAAMC,KAM9CA,EAAGC,QAEHD,EAAGE,QAAM,GAEb,CAACR,IAGCS,EAAkBL,GACnBM,IACOA,GAAc,cAAdA,EAAMC,IAAqB,CAC3B,MAAMC,EAAUF,EAAMG,cAChBC,EAAOJ,EAAMG,cAAcE,gBAG7BZ,EAASS,EADTE,GAKIF,EAAQI,eAAeC,WACjBF,gBAEd,CAGAL,GAAc,eAAdA,EAAMC,IAAsB,CAC5B,MAAMC,EAAUF,EAAMG,cAChBK,EAAOR,EAAMG,cAAcM,YAG7BD,GAA0B,MAAlBA,EAAKE,SACbjB,EAASS,EAASM,GAElBf,EACIS,EACAA,EAAQI,eAAeK,WAE/B,IAGR,CAAClB,IAID,OAAAmB,EAACpB,EAAA,CACGP,IAAAA,KACIM,EACJsB,KAAK,MACL,gBAAe1B,EACfC,UAAW0B,EAAK,UAAW1B,GAC3B2B,UAAWhB,EAIXiB,SAAU7B,EAAW,GAAI,GAGrC"}
+{"version":3,"file":"NavTab.js","sources":["../../../../src/components/tabs/NavTab.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, useCallback } from \"react\";\nimport type { PolymorphicRef } from \"../../utilities/index.js\";\nimport type { NavTabProps } from \"./types.js\";\n\ntype NavTabComponent = <ElementType extends React.ElementType = \"a\">(\n    props: NavTabProps<ElementType>,\n) => React.ReactElement | null;\n\nexport const NavTab = forwardRef(function NavTab<\n    ElementType extends React.ElementType = \"a\",\n>(props: NavTabProps<ElementType>, ref?: PolymorphicRef<ElementType>) {\n    const {\n        as = \"a\",\n        \"aria-selected\": selected,\n        className,\n        onBeforeKeyboardNavigation: onBeforeNavigate,\n        ...rest\n    } = props;\n\n    const Component = as;\n\n    const navigate = useCallback(\n        (from: HTMLAnchorElement, to: HTMLAnchorElement) => {\n            if (onBeforeNavigate) {\n                // Åpne for å stoppe selve navigeringen hvis det skulle være behov for å gjøre noe custom med fokus og navigasjon\n                const doNavigate = onBeforeNavigate(from, to);\n                if (doNavigate === false) {\n                    return;\n                }\n            }\n\n            to.focus();\n            // Click brukes for å være router-agnostisk\n            to.click();\n        },\n        [onBeforeNavigate],\n    );\n\n    const handleOnKeyDown = useCallback(\n        (event: React.KeyboardEvent<HTMLAnchorElement>) => {\n            if (event.key === \"ArrowLeft\") {\n                const current = event.currentTarget;\n                const prev = event.currentTarget.previousSibling;\n\n                if (prev) {\n                    navigate(current, prev as HTMLAnchorElement);\n                } else {\n                    navigate(\n                        current,\n                        current.parentElement?.lastChild\n                            ?.previousSibling as HTMLAnchorElement,\n                    );\n                }\n            }\n\n            if (event.key === \"ArrowRight\") {\n                const current = event.currentTarget;\n                const next = event.currentTarget.nextSibling;\n\n                // skip the focus indicator element\n                if (next && next.nodeName === \"A\") {\n                    navigate(current, next as HTMLAnchorElement);\n                } else {\n                    navigate(\n                        current,\n                        current.parentElement?.firstChild as HTMLAnchorElement,\n                    );\n                }\n            }\n        },\n        [navigate],\n    );\n\n    return (\n        <Component\n            ref={ref}\n            {...rest}\n            role=\"tab\"\n            aria-selected={selected}\n            className={clsx(\"jkl-tab\", className)}\n            onKeyDown={handleOnKeyDown}\n            // En faneliste skal være én fokuserbar gruppe.\n            // Piltaster brukes for å veksle mellom faner.\n            // Bare den aktive fanen skal være fokuserbar med tastatur.\n            tabIndex={selected ? 0 : -1}\n        />\n    );\n}) as NavTabComponent;\n"],"names":["NavTab","forwardRef","props","ref","as","selected","className","onBeforeKeyboardNavigation","onBeforeNavigate","rest","Component","navigate","useCallback","from","to","focus","click","handleOnKeyDown","event","key","current","currentTarget","prev","previousSibling","parentElement","lastChild","next","nextSibling","nodeName","firstChild","jsx","role","clsx","onKeyDown","tabIndex"],"mappings":"0IASO,MAAMA,EAASC,EAAW,SAE/BC,EAAiCC,GAC/B,MACIC,GAAAA,EAAK,IACL,gBAAiBC,EACjBC,UAAAA,EACAC,2BAA4BC,KACzBC,GACHP,EAEEQ,EAAYN,EAEZO,EAAWC,EACb,CAACC,EAAyBC,KAClBN,IAGmB,IADAA,EAAiBK,EAAMC,KAM9CA,EAAGC,QAEHD,EAAGE,UAEP,CAACR,IAGCS,EAAkBL,EACnBM,IACG,GAAkB,cAAdA,EAAMC,IAAqB,CAC3B,MAAMC,EAAUF,EAAMG,cAChBC,EAAOJ,EAAMG,cAAcE,gBAG7BZ,EAASS,EADTE,GAKIF,EAAQI,eAAeC,WACjBF,gBAGlB,CAEA,GAAkB,eAAdL,EAAMC,IAAsB,CAC5B,MAAMC,EAAUF,EAAMG,cAChBK,EAAOR,EAAMG,cAAcM,YAG7BD,GAA0B,MAAlBA,EAAKE,SACbjB,EAASS,EAASM,GAElBf,EACIS,EACAA,EAAQI,eAAeK,WAGnC,GAEJ,CAAClB,IAGL,OACImB,EAACpB,EAAA,CACGP,IAAAA,KACIM,EACJsB,KAAK,MACL,gBAAe1B,EACfC,UAAW0B,EAAK,UAAW1B,GAC3B2B,UAAWhB,EAIXiB,SAAU7B,EAAW,GAAI,GAGrC"}

package/build/es/components/tabs/NavTabs.js

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{c as l}from"../../../clsx-BeLtu-UY.js";import a,{useState as r,useRef as s,useEffect as n}from"react";const i=({"aria-label":i,children:c,className:o,density:d="comfortable",...m})=>{const[u,f]=r(),[b,p]=r(),h=s(null),j=s(null),x=s(null),y=a.Children.toArray(c).findIndex((e=>!!a.isValidElement(e)&&!0===e.props["aria-selected"]));return n((()=>{j.current&&f(j.current.getBoundingClientRect()),x.current&&p(x.current.getBoundingClientRect())}),[y,d]),e("div",{...m,"data-layout-density":d,className:l("jkl-tabs",o),ref:h,children:t("div",{role:"tablist","aria-label":i,ref:j,className:"jkl-tablist",children:[a.Children.map(c,((e,t)=>a.isValidElement(e)?a.cloneElement(e,{ref:y===t?x:void 0}):null)),e("span",{className:"jkl-tablist__indicator",style:{left:(b?.left||0)-(u?.left||0)+(h.current?.scrollLeft||0),bottom:-1,width:(b?.width||0)-("compact"===d?32:38)}})]})})};export{i as NavTabs};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{c as l}from"../../../clsx-BeLtu-UY.js";import a,{useState as r,useRef as s,useEffect as n}from"react";const i=({"aria-label":i,children:c,className:o,density:d="comfortable",...m})=>{const[u,f]=r(),[b,p]=r(),h=s(null),j=s(null),x=s(null),y=a.Children.toArray(c).findIndex(e=>!!a.isValidElement(e)&&!0===e.props["aria-selected"]);return n(()=>{j.current&&f(j.current.getBoundingClientRect()),x.current&&p(x.current.getBoundingClientRect())},[y,d]),e("div",{...m,"data-layout-density":d,className:l("jkl-tabs",o),ref:h,children:t("div",{role:"tablist","aria-label":i,ref:j,className:"jkl-tablist",children:[a.Children.map(c,(e,t)=>a.isValidElement(e)?a.cloneElement(e,{ref:y===t?x:void 0}):null),e("span",{className:"jkl-tablist__indicator",style:{left:(b?.left||0)-(u?.left||0)+(h.current?.scrollLeft||0),bottom:-1,width:(b?.width||0)-("compact"===d?32:38)}})]})})};export{i as NavTabs};
 //# sourceMappingURL=NavTabs.js.map

package/build/es/components/tabs/NavTabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavTabs.js","sources":["../../../../src/components/tabs/NavTabs.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useEffect, useRef, useState } from \"react\";\nimport type { NavTabsProps } from \"./types.js\";\n\nexport const NavTabs = ({\n    \"aria-label\": ariaLabel,\n    children,\n    className,\n    density = \"comfortable\",\n    ...rest\n}: NavTabsProps) => {\n    const [tabsRect, setTabsRect] = useState<DOMRect>();\n    const [activeRect, setActiveRect] = useState<DOMRect>();\n\n    const scrollRef = useRef<HTMLDivElement>(null);\n    const tablistRef = useRef<HTMLDivElement>(null);\n    const activeRef = useRef<HTMLElement>(null);\n\n    const selectedIndex = React.Children.toArray(children).findIndex(\n        (navTab) => {\n            if (!React.isValidElement(navTab)) {\n                return false;\n            }\n            return navTab.props[\"aria-selected\"] === true;\n        },\n    );\n\n    // biome-ignore lint/correctness/useExhaustiveDependencies:\n    useEffect(() => {\n        if (tablistRef.current) {\n            setTabsRect(tablistRef.current.getBoundingClientRect());\n        }\n        if (activeRef.current) {\n            setActiveRect(activeRef.current.getBoundingClientRect());\n        }\n    }, [selectedIndex, density]);\n\n    return (\n        <div\n            {...rest}\n            data-layout-density={density}\n            className={clsx(\"jkl-tabs\", className)}\n            ref={scrollRef}\n        >\n            <div\n                role=\"tablist\"\n                aria-label={ariaLabel}\n                ref={tablistRef}\n                className=\"jkl-tablist\"\n            >\n                {React.Children.map(children, (child, index) => {\n                    return React.isValidElement(child)\n                        ? React.cloneElement<any>(child, {\n                              ref:\n                                  selectedIndex === index\n                                      ? activeRef\n                                      : undefined,\n                          })\n                        : null;\n                })}\n                <span\n                    className=\"jkl-tablist__indicator\"\n                    style={{\n                        left:\n                            (activeRect?.left || 0) -\n                            (tabsRect?.left || 0) +\n                            (scrollRef.current?.scrollLeft || 0),\n                        bottom: -1,\n                        width:\n                            (activeRect?.width || 0) -\n                            (density === \"compact\" ? 32 : 38),\n                    }}\n                />\n            </div>\n        </div>\n    );\n};\n"],"names":["NavTabs","ariaLabel","children","className","density","rest","tabsRect","setTabsRect","useState","activeRect","setActiveRect","scrollRef","useRef","tablistRef","activeRef","selectedIndex","React","Children","toArray","findIndex","navTab","isValidElement","props","useEffect","current","getBoundingClientRect","jsx","clsx","ref","jsxs","role","map","child","index","cloneElement","style","left","scrollLeft","bottom","width"],"mappings":"+JAIO,MAAMA,EAAU,EACnB,aAAcC,EACdC,SAAAA,EACAC,UAAAA,EACAC,QAAAA,EAAU,iBACPC,MAEH,MAAOC,EAAUC,GAAeC,KACzBC,EAAYC,GAAiBF,IAE9BG,EAAYC,EAAuB,MACnCC,EAAaD,EAAuB,MACpCE,EAAYF,EAAoB,MAEhCG,EAAgBC,EAAMC,SAASC,QAAQhB,GAAUiB,WAClDC,KACQJ,EAAMK,eAAeD,KAGe,IAAlCA,EAAOE,MAAM,mBAK5B,OAAAC,GAAU,KACFV,EAAWW,SACCjB,EAAAM,EAAWW,QAAQC,yBAE/BX,EAAUU,SACId,EAAAI,EAAUU,QAAQC,wBAAuB,GAE5D,CAACV,EAAeX,IAGfsB,EAAC,MAAA,IACOrB,EACJ,sBAAqBD,EACrBD,UAAWwB,EAAK,WAAYxB,GAC5ByB,IAAKjB,EAELT,SAAA2B,EAAC,MAAA,CACGC,KAAK,UACL,aAAY7B,EACZ2B,IAAKf,EACLV,UAAU,cAETD,SAAA,CAAAc,EAAMC,SAASc,IAAI7B,GAAU,CAAC8B,EAAOC,IAC3BjB,EAAMK,eAAeW,GACtBhB,EAAMkB,aAAkBF,EAAO,CAC3BJ,IACIb,IAAkBkB,EACZnB,OACA,IAEd,OAEVY,EAAC,OAAA,CACGvB,UAAU,yBACVgC,MAAO,CACHC,MACK3B,GAAY2B,MAAQ,IACpB9B,GAAU8B,MAAQ,IAClBzB,EAAUa,SAASa,YAAc,GACtCC,QAAQ,EACRC,OACK9B,GAAY8B,OAAS,IACT,YAAZnC,EAAwB,GAAK,WAIlD"}
+{"version":3,"file":"NavTabs.js","sources":["../../../../src/components/tabs/NavTabs.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useEffect, useRef, useState } from \"react\";\nimport type { NavTabsProps } from \"./types.js\";\n\nexport const NavTabs = ({\n    \"aria-label\": ariaLabel,\n    children,\n    className,\n    density = \"comfortable\",\n    ...rest\n}: NavTabsProps) => {\n    const [tabsRect, setTabsRect] = useState<DOMRect>();\n    const [activeRect, setActiveRect] = useState<DOMRect>();\n\n    const scrollRef = useRef<HTMLDivElement>(null);\n    const tablistRef = useRef<HTMLDivElement>(null);\n    const activeRef = useRef<HTMLElement>(null);\n\n    const selectedIndex = React.Children.toArray(children).findIndex(\n        (navTab) => {\n            if (!React.isValidElement(navTab)) {\n                return false;\n            }\n            return navTab.props[\"aria-selected\"] === true;\n        },\n    );\n\n    // biome-ignore lint/correctness/useExhaustiveDependencies:\n    useEffect(() => {\n        if (tablistRef.current) {\n            setTabsRect(tablistRef.current.getBoundingClientRect());\n        }\n        if (activeRef.current) {\n            setActiveRect(activeRef.current.getBoundingClientRect());\n        }\n    }, [selectedIndex, density]);\n\n    return (\n        <div\n            {...rest}\n            data-layout-density={density}\n            className={clsx(\"jkl-tabs\", className)}\n            ref={scrollRef}\n        >\n            <div\n                role=\"tablist\"\n                aria-label={ariaLabel}\n                ref={tablistRef}\n                className=\"jkl-tablist\"\n            >\n                {React.Children.map(children, (child, index) => {\n                    return React.isValidElement(child)\n                        ? React.cloneElement<any>(child, {\n                              ref:\n                                  selectedIndex === index\n                                      ? activeRef\n                                      : undefined,\n                          })\n                        : null;\n                })}\n                <span\n                    className=\"jkl-tablist__indicator\"\n                    style={{\n                        left:\n                            (activeRect?.left || 0) -\n                            (tabsRect?.left || 0) +\n                            (scrollRef.current?.scrollLeft || 0),\n                        bottom: -1,\n                        width:\n                            (activeRect?.width || 0) -\n                            (density === \"compact\" ? 32 : 38),\n                    }}\n                />\n            </div>\n        </div>\n    );\n};\n"],"names":["NavTabs","ariaLabel","children","className","density","rest","tabsRect","setTabsRect","useState","activeRect","setActiveRect","scrollRef","useRef","tablistRef","activeRef","selectedIndex","React","Children","toArray","findIndex","navTab","isValidElement","props","useEffect","current","getBoundingClientRect","jsx","clsx","ref","jsxs","role","map","child","index","cloneElement","style","left","scrollLeft","bottom","width"],"mappings":"+JAIO,MAAMA,EAAU,EACnB,aAAcC,EACdC,SAAAA,EACAC,UAAAA,EACAC,QAAAA,EAAU,iBACPC,MAEH,MAAOC,EAAUC,GAAeC,KACzBC,EAAYC,GAAiBF,IAE9BG,EAAYC,EAAuB,MACnCC,EAAaD,EAAuB,MACpCE,EAAYF,EAAoB,MAEhCG,EAAgBC,EAAMC,SAASC,QAAQhB,GAAUiB,UAClDC,KACQJ,EAAMK,eAAeD,KAGe,IAAlCA,EAAOE,MAAM,kBAK5B,OAAAC,EAAU,KACFV,EAAWW,SACXjB,EAAYM,EAAWW,QAAQC,yBAE/BX,EAAUU,SACVd,EAAcI,EAAUU,QAAQC,0BAErC,CAACV,EAAeX,IAGfsB,EAAC,MAAA,IACOrB,EACJ,sBAAqBD,EACrBD,UAAWwB,EAAK,WAAYxB,GAC5ByB,IAAKjB,EAELT,SAAA2B,EAAC,MAAA,CACGC,KAAK,UACL,aAAY7B,EACZ2B,IAAKf,EACLV,UAAU,cAETD,SAAA,CAAAc,EAAMC,SAASc,IAAI7B,EAAU,CAAC8B,EAAOC,IAC3BjB,EAAMK,eAAeW,GACtBhB,EAAMkB,aAAkBF,EAAO,CAC3BJ,IACIb,IAAkBkB,EACZnB,OACA,IAEd,MAEVY,EAAC,OAAA,CACGvB,UAAU,yBACVgC,MAAO,CACHC,MACK3B,GAAY2B,MAAQ,IACpB9B,GAAU8B,MAAQ,IAClBzB,EAAUa,SAASa,YAAc,GACtCC,QAAQ,EACRC,OACK9B,GAAY8B,OAAS,IACT,YAAZnC,EAAwB,GAAK"}

package/build/es/components/tabs/Tab.js

@@ -1,2 +1,2 @@
-import{jsx as t}from"react/jsx-runtime";import{c as a}from"../../../clsx-BeLtu-UY.js";import r from"react";const s=r.forwardRef(((r,s)=>{const o=a("jkl-tab",r.className);return t("button",{role:"tab",type:"button",ref:s,...r,className:o})}));s.displayName="Tab";export{s as Tab};
+import{jsx as t}from"react/jsx-runtime";import{c as a}from"../../../clsx-BeLtu-UY.js";import r from"react";const s=r.forwardRef((r,s)=>{const o=a("jkl-tab",r.className);return t("button",{role:"tab",type:"button",ref:s,...r,className:o})});s.displayName="Tab";export{s as Tab};
 //# sourceMappingURL=Tab.js.map

package/build/es/components/tabs/Tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.js","sources":["../../../../src/components/tabs/Tab.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\nimport type { TabProps } from \"./types.js\";\n\n/**\n * En Tab til bruk som element i TabList. Ikke funksjonell utenfor et TabList element.\n *\n * Docs: https://jokul.fremtind.no/komponenter/tabs\n */\nexport const Tab = React.forwardRef<HTMLButtonElement, TabProps>(\n    (props, ref) => {\n        const classes = clsx(\"jkl-tab\", props.className);\n\n        return (\n            <button\n                role=\"tab\"\n                type=\"button\"\n                ref={ref}\n                {...props}\n                className={classes}\n            />\n        );\n    },\n);\n\nTab.displayName = \"Tab\";\n"],"names":["Tab","React","forwardRef","props","ref","classes","clsx","className","jsx","role","type","displayName"],"mappings":"2GASO,MAAMA,EAAMC,EAAMC,YACrB,CAACC,EAAOC,KACJ,MAAMC,EAAUC,EAAK,UAAWH,EAAMI,WAGlC,OAAAC,EAAC,SAAA,CACGC,KAAK,MACLC,KAAK,SACLN,IAAAA,KACID,EACJI,UAAWF,GACf,IAKZL,EAAIW,YAAc"}
+{"version":3,"file":"Tab.js","sources":["../../../../src/components/tabs/Tab.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\nimport type { TabProps } from \"./types.js\";\n\n/**\n * En Tab til bruk som element i TabList. Ikke funksjonell utenfor et TabList element.\n *\n * Docs: https://jokul.fremtind.no/komponenter/tabs\n */\nexport const Tab = React.forwardRef<HTMLButtonElement, TabProps>(\n    (props, ref) => {\n        const classes = clsx(\"jkl-tab\", props.className);\n\n        return (\n            <button\n                role=\"tab\"\n                type=\"button\"\n                ref={ref}\n                {...props}\n                className={classes}\n            />\n        );\n    },\n);\n\nTab.displayName = \"Tab\";\n"],"names":["Tab","React","forwardRef","props","ref","classes","clsx","className","jsx","role","type","displayName"],"mappings":"2GASO,MAAMA,EAAMC,EAAMC,WACrB,CAACC,EAAOC,KACJ,MAAMC,EAAUC,EAAK,UAAWH,EAAMI,WAEtC,OACIC,EAAC,SAAA,CACGC,KAAK,MACLC,KAAK,SACLN,IAAAA,KACID,EACJI,UAAWF,MAM3BL,EAAIW,YAAc"}

package/build/es/components/tabs/TabList.js

@@ -1,2 +1,2 @@
-import{jsx as e}from"react/jsx-runtime";import{c as t}from"../../../clsx-BeLtu-UY.js";import r,{useRef as n,useCallback as s}from"react";const a=({children:a,className:i,...l})=>{const{activeIndex:o,setActiveIndex:c,tabIDs:u,tabPanelIDs:d,...m}=l,f=n(null),b=n(null),p=s((e=>{if("ArrowLeft"===e.key){const t=e.currentTarget,r=e.currentTarget.previousSibling;r?r.focus():(t.parentElement?.lastChild?.previousSibling).focus()}if("ArrowRight"===e.key){const t=e.currentTarget,r=e.currentTarget.nextSibling;r&&"BUTTON"===r.nodeName?r.focus():(t.parentElement?.firstChild).focus()}}),[]);return e("div",{role:"tablist",ref:f,...m,className:t("jkl-tablist",i),children:r.Children.map(a,((e,t)=>{const n=o===t;return r.isValidElement(e)?r.cloneElement(e,{onKeyDown:p,tabIndex:n?void 0:-1,ref:n?b:void 0,onClick:()=>c(t),"aria-selected":n,"aria-controls":d[t],id:u[t]}):null}))})};export{a as TabList};
+import{jsx as e}from"react/jsx-runtime";import{c as t}from"../../../clsx-BeLtu-UY.js";import r,{useRef as n,useCallback as s}from"react";const a=({children:a,className:i,...l})=>{const{activeIndex:o,setActiveIndex:c,tabIDs:u,tabPanelIDs:d,...m}=l,f=n(null),b=n(null),p=s(e=>{if("ArrowLeft"===e.key){const t=e.currentTarget,r=e.currentTarget.previousSibling;r?r.focus():(t.parentElement?.lastChild?.previousSibling).focus()}if("ArrowRight"===e.key){const t=e.currentTarget,r=e.currentTarget.nextSibling;r&&"BUTTON"===r.nodeName?r.focus():(t.parentElement?.firstChild).focus()}},[]);return e("div",{role:"tablist",ref:f,...m,className:t("jkl-tablist",i),children:r.Children.map(a,(e,t)=>{const n=o===t;return r.isValidElement(e)?r.cloneElement(e,{onKeyDown:p,tabIndex:n?void 0:-1,ref:n?b:void 0,onClick:()=>c(t),"aria-selected":n,"aria-controls":d[t],id:u[t]}):null})})};export{a as TabList};
 //# sourceMappingURL=TabList.js.map

package/build/es/components/tabs/TabList.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabList.js","sources":["../../../../src/components/tabs/TabList.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useCallback, useRef } from \"react\";\nimport type { TabListProps } from \"./types.js\";\n\nexport interface InjectedProps {\n    activeIndex: number;\n    setActiveIndex: React.Dispatch<React.SetStateAction<number>>;\n    tabIDs: string[];\n    tabPanelIDs: string[];\n}\n\n/**\n * Konteiner for elementer av typen Tab. Ikke funksjonell utenfor et Tabs element.\n *\n * Docs: https://jokul.fremtind.no/komponenter/tabs\n */\nexport const TabList = ({ children, className, ...injected }: TabListProps) => {\n    // props injected by Tabs\n    const { activeIndex, setActiveIndex, tabIDs, tabPanelIDs, ...rest } =\n        injected as TabListProps & InjectedProps;\n\n    const tabsRef = useRef<HTMLDivElement>(null);\n    const activeRef = useRef<HTMLButtonElement>(null);\n\n    const keyDownHandler = useCallback(\n        (event: React.KeyboardEvent<HTMLButtonElement>) => {\n            if (event.key === \"ArrowLeft\") {\n                const current = event.currentTarget;\n                const prev = event.currentTarget.previousSibling;\n\n                if (prev) {\n                    (prev as HTMLElement).focus();\n                } else {\n                    (\n                        current.parentElement?.lastChild\n                            ?.previousSibling as HTMLElement\n                    ).focus();\n                }\n            }\n\n            if (event.key === \"ArrowRight\") {\n                const current = event.currentTarget;\n                const next = event.currentTarget.nextSibling;\n\n                // skip the focus indicator element\n                if (next && next.nodeName === \"BUTTON\") {\n                    (next as HTMLElement).focus();\n                } else {\n                    (current.parentElement?.firstChild as HTMLElement).focus();\n                }\n            }\n        },\n        [],\n    );\n\n    return (\n        <div\n            role=\"tablist\"\n            ref={tabsRef}\n            {...rest}\n            className={clsx(\"jkl-tablist\", className)}\n        >\n            {React.Children.map(children, (tab, tabIndex) => {\n                const isActive = activeIndex === tabIndex;\n\n                return React.isValidElement(tab)\n                    ? React.cloneElement<any>(tab, {\n                          onKeyDown: keyDownHandler,\n                          tabIndex: isActive ? undefined : -1,\n                          ref: isActive ? activeRef : undefined,\n                          onClick: () => setActiveIndex(tabIndex),\n                          \"aria-selected\": isActive,\n                          \"aria-controls\": tabPanelIDs[tabIndex],\n                          id: tabIDs[tabIndex],\n                      })\n                    : null;\n            })}\n        </div>\n    );\n};\n"],"names":["TabList","children","className","injected","activeIndex","setActiveIndex","tabIDs","tabPanelIDs","rest","tabsRef","useRef","activeRef","keyDownHandler","useCallback","event","key","current","currentTarget","prev","previousSibling","focus","parentElement","lastChild","next","nextSibling","nodeName","firstChild","jsx","role","ref","clsx","Children","map","tab","tabIndex","isActive","React","isValidElement","cloneElement","onKeyDown","onClick","id"],"mappings":"yIAgBO,MAAMA,EAAU,EAAGC,SAAAA,EAAUC,UAAAA,KAAcC,MAExC,MAAEC,YAAAA,EAAaC,eAAAA,EAAgBC,OAAAA,EAAQC,YAAAA,KAAgBC,GACzDL,EAEEM,EAAUC,EAAuB,MACjCC,EAAYD,EAA0B,MAEtCE,EAAiBC,GAClBC,IACOA,GAAc,cAAdA,EAAMC,IAAqB,CAC3B,MAAMC,EAAUF,EAAMG,cAChBC,EAAOJ,EAAMG,cAAcE,gBAE7BD,EACCA,EAAqBE,SAGlBJ,EAAQK,eAAeC,WACjBH,iBACRC,OACN,CAGAN,GAAc,eAAdA,EAAMC,IAAsB,CAC5B,MAAMC,EAAUF,EAAMG,cAChBM,EAAOT,EAAMG,cAAcO,YAG7BD,GAA0B,WAAlBA,EAAKE,SACZF,EAAqBH,SAErBJ,EAAQK,eAAeK,YAA2BN,OACvD,IAGR,IAIA,OAAAO,EAAC,MAAA,CACGC,KAAK,UACLC,IAAKpB,KACDD,EACJN,UAAW4B,EAAK,cAAe5B,GAE9BD,WAAM8B,SAASC,IAAI/B,GAAU,CAACgC,EAAKC,KAChC,MAAMC,EAAW/B,IAAgB8B,EAEjC,OAAOE,EAAMC,eAAeJ,GACtBG,EAAME,aAAkBL,EAAK,CACzBM,UAAW3B,EACXsB,SAAUC,OAAW,GAAY,EACjCN,IAAKM,EAAWxB,OAAY,EAC5B6B,QAAS,IAAMnC,EAAe6B,GAC9B,gBAAiBC,EACjB,gBAAiB5B,EAAY2B,GAC7BO,GAAInC,EAAO4B,KAEf,IAAA,KAEd"}
+{"version":3,"file":"TabList.js","sources":["../../../../src/components/tabs/TabList.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useCallback, useRef } from \"react\";\nimport type { TabListProps } from \"./types.js\";\n\nexport interface InjectedProps {\n    activeIndex: number;\n    setActiveIndex: React.Dispatch<React.SetStateAction<number>>;\n    tabIDs: string[];\n    tabPanelIDs: string[];\n}\n\n/**\n * Konteiner for elementer av typen Tab. Ikke funksjonell utenfor et Tabs element.\n *\n * Docs: https://jokul.fremtind.no/komponenter/tabs\n */\nexport const TabList = ({ children, className, ...injected }: TabListProps) => {\n    // props injected by Tabs\n    const { activeIndex, setActiveIndex, tabIDs, tabPanelIDs, ...rest } =\n        injected as TabListProps & InjectedProps;\n\n    const tabsRef = useRef<HTMLDivElement>(null);\n    const activeRef = useRef<HTMLButtonElement>(null);\n\n    const keyDownHandler = useCallback(\n        (event: React.KeyboardEvent<HTMLButtonElement>) => {\n            if (event.key === \"ArrowLeft\") {\n                const current = event.currentTarget;\n                const prev = event.currentTarget.previousSibling;\n\n                if (prev) {\n                    (prev as HTMLElement).focus();\n                } else {\n                    (\n                        current.parentElement?.lastChild\n                            ?.previousSibling as HTMLElement\n                    ).focus();\n                }\n            }\n\n            if (event.key === \"ArrowRight\") {\n                const current = event.currentTarget;\n                const next = event.currentTarget.nextSibling;\n\n                // skip the focus indicator element\n                if (next && next.nodeName === \"BUTTON\") {\n                    (next as HTMLElement).focus();\n                } else {\n                    (current.parentElement?.firstChild as HTMLElement).focus();\n                }\n            }\n        },\n        [],\n    );\n\n    return (\n        <div\n            role=\"tablist\"\n            ref={tabsRef}\n            {...rest}\n            className={clsx(\"jkl-tablist\", className)}\n        >\n            {React.Children.map(children, (tab, tabIndex) => {\n                const isActive = activeIndex === tabIndex;\n\n                return React.isValidElement(tab)\n                    ? React.cloneElement<any>(tab, {\n                          onKeyDown: keyDownHandler,\n                          tabIndex: isActive ? undefined : -1,\n                          ref: isActive ? activeRef : undefined,\n                          onClick: () => setActiveIndex(tabIndex),\n                          \"aria-selected\": isActive,\n                          \"aria-controls\": tabPanelIDs[tabIndex],\n                          id: tabIDs[tabIndex],\n                      })\n                    : null;\n            })}\n        </div>\n    );\n};\n"],"names":["TabList","children","className","injected","activeIndex","setActiveIndex","tabIDs","tabPanelIDs","rest","tabsRef","useRef","activeRef","keyDownHandler","useCallback","event","key","current","currentTarget","prev","previousSibling","focus","parentElement","lastChild","next","nextSibling","nodeName","firstChild","jsx","role","ref","clsx","Children","map","tab","tabIndex","isActive","React","isValidElement","cloneElement","onKeyDown","onClick","id"],"mappings":"yIAgBO,MAAMA,EAAU,EAAGC,SAAAA,EAAUC,UAAAA,KAAcC,MAE9C,MAAQC,YAAAA,EAAaC,eAAAA,EAAgBC,OAAAA,EAAQC,YAAAA,KAAgBC,GACzDL,EAEEM,EAAUC,EAAuB,MACjCC,EAAYD,EAA0B,MAEtCE,EAAiBC,EAClBC,IACG,GAAkB,cAAdA,EAAMC,IAAqB,CAC3B,MAAMC,EAAUF,EAAMG,cAChBC,EAAOJ,EAAMG,cAAcE,gBAE7BD,EACCA,EAAqBE,SAGlBJ,EAAQK,eAAeC,WACjBH,iBACRC,OAEV,CAEA,GAAkB,eAAdN,EAAMC,IAAsB,CAC5B,MAAMC,EAAUF,EAAMG,cAChBM,EAAOT,EAAMG,cAAcO,YAG7BD,GAA0B,WAAlBA,EAAKE,SACZF,EAAqBH,SAErBJ,EAAQK,eAAeK,YAA2BN,OAE3D,GAEJ,IAGJ,OACIO,EAAC,MAAA,CACGC,KAAK,UACLC,IAAKpB,KACDD,EACJN,UAAW4B,EAAK,cAAe5B,GAE9BD,WAAM8B,SAASC,IAAI/B,EAAU,CAACgC,EAAKC,KAChC,MAAMC,EAAW/B,IAAgB8B,EAEjC,OAAOE,EAAMC,eAAeJ,GACtBG,EAAME,aAAkBL,EAAK,CACzBM,UAAW3B,EACXsB,SAAUC,OAAW,GAAY,EACjCN,IAAKM,EAAWxB,OAAY,EAC5B6B,QAAS,IAAMnC,EAAe6B,GAC9B,gBAAiBC,EACjB,gBAAiB5B,EAAY2B,GAC7BO,GAAInC,EAAO4B,KAEf"}

package/build/es/components/tabs/TabPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanel.js","sources":["../../../../src/components/tabs/TabPanel.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\nimport type { TabPanelProps } from \"./types.js\";\n\n/**\n * Konteiner for innhold i et tabbet brukergrensesnitt. Ikke funksjonell utenfor et Tabs element.\n *\n * Docs: https://jokul.fremtind.no/komponenter/tabs\n */\nexport const TabPanel = ({ children, ...props }: TabPanelProps) => {\n    const classes = clsx(\"jkl-tabpanel\", props.className);\n\n    return (\n        <div role=\"tabpanel\" {...props} className={classes}>\n            {children}\n        </div>\n    );\n};\n"],"names":["TabPanel","children","props","classes","clsx","className","jsx","role"],"mappings":"oGASO,MAAMA,EAAW,EAAGC,SAAAA,KAAaC,MACpC,MAAMC,EAAUC,EAAK,eAAgBF,EAAMG,WAGvC,OAAAC,EAAC,OAAIC,KAAK,cAAeL,EAAOG,UAAWF,EACtCF,SAAAA,GACL"}
+{"version":3,"file":"TabPanel.js","sources":["../../../../src/components/tabs/TabPanel.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\nimport type { TabPanelProps } from \"./types.js\";\n\n/**\n * Konteiner for innhold i et tabbet brukergrensesnitt. Ikke funksjonell utenfor et Tabs element.\n *\n * Docs: https://jokul.fremtind.no/komponenter/tabs\n */\nexport const TabPanel = ({ children, ...props }: TabPanelProps) => {\n    const classes = clsx(\"jkl-tabpanel\", props.className);\n\n    return (\n        <div role=\"tabpanel\" {...props} className={classes}>\n            {children}\n        </div>\n    );\n};\n"],"names":["TabPanel","children","props","classes","clsx","className","jsx","role"],"mappings":"oGASO,MAAMA,EAAW,EAAGC,SAAAA,KAAaC,MACpC,MAAMC,EAAUC,EAAK,eAAgBF,EAAMG,WAE3C,OACIC,EAAC,OAAIC,KAAK,cAAeL,EAAOG,UAAWF,EACtCF,SAAAA"}

package/build/es/components/tabs/Tabs.js

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{c as s}from"../../../clsx-BeLtu-UY.js";import a,{useState as r,useEffect as n,useCallback as l}from"react";import{usePreviousValue as i}from"../../hooks/usePreviousValue/usePreviousValue.js";import{TabsContextProvider as o}from"./tabsContext.js";let d=(e=21)=>{let t="",s=crypto.getRandomValues(new Uint8Array(e|=0));for(;e--;)t+="useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict"[63&s[e]];return t};const c=({onChange:c,defaultTab:m,density:u,...h})=>{const[b,f]=r(m??0),p=i(b);n((()=>{void 0!==p&&p!==b&&c&&c(b)}),[c,p,b]);const[j,x]=r([]),[v,y]=r([]),C=l((()=>{const e=a.Children.toArray(h.children)[0];a.isValidElement(e)&&a.Children.forEach(e.props.children,(e=>{a.isValidElement(e)&&(x((e=>[...e,`jkl-tab-${d(8)}`])),y((e=>[...e,`jkl-tabpanel-${d(8)}`])))}))}),[h.children]);return n((()=>{C()}),[C]),e(o,{state:{density:u},children:t("div",{...h,className:s("jkl-tabs",h.className),"data-density":u,children:[(()=>{const e=a.Children.toArray(h.children)[0];if(a.isValidElement(e))return a.cloneElement(e,{activeIndex:b,setActiveIndex:f,tabIDs:j,tabPanelIDs:v})})(),a.Children.map(h.children,((e,t)=>{if(!a.isValidElement(e)||0===t)return;const s=t-1;return s===b?a.cloneElement(e,{"aria-labelledby":j[s],id:v[s]}):null}))]})})};export{c as Tabs};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{c as s}from"../../../clsx-BeLtu-UY.js";import a,{useState as r,useEffect as n,useCallback as l}from"react";import{usePreviousValue as i}from"../../hooks/usePreviousValue/usePreviousValue.js";import{TabsContextProvider as o}from"./tabsContext.js";let d=(e=21)=>{let t="",s=crypto.getRandomValues(new Uint8Array(e|=0));for(;e--;)t+="useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict"[63&s[e]];return t};const c=({onChange:c,defaultTab:m,density:u,...h})=>{const[b,f]=r(m??0),p=i(b);n(()=>{void 0!==p&&p!==b&&c&&c(b)},[c,p,b]);const[j,x]=r([]),[v,y]=r([]),C=l(()=>{const e=a.Children.toArray(h.children)[0];a.isValidElement(e)&&a.Children.forEach(e.props.children,e=>{a.isValidElement(e)&&(x(e=>[...e,`jkl-tab-${d(8)}`]),y(e=>[...e,`jkl-tabpanel-${d(8)}`]))})},[h.children]);return n(()=>{C()},[C]),e(o,{state:{density:u},children:t("div",{...h,className:s("jkl-tabs",h.className),"data-density":u,children:[(()=>{const e=a.Children.toArray(h.children)[0];if(a.isValidElement(e))return a.cloneElement(e,{activeIndex:b,setActiveIndex:f,tabIDs:j,tabPanelIDs:v})})(),a.Children.map(h.children,(e,t)=>{if(!a.isValidElement(e)||0===t)return;const s=t-1;return s===b?a.cloneElement(e,{"aria-labelledby":j[s],id:v[s]}):null})]})})};export{c as Tabs};
 //# sourceMappingURL=Tabs.js.map

package/build/es/components/tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sources":["../../../../../../node_modules/.pnpm/nanoid@5.1.5/node_modules/nanoid/index.browser.js","../../../../../../node_modules/.pnpm/nanoid@5.1.5/node_modules/nanoid/url-alphabet/index.js","../../../../src/components/tabs/Tabs.tsx"],"sourcesContent":["/* @ts-self-types=\"./index.d.ts\" */\nimport { urlAlphabet as scopedUrlAlphabet } from './url-alphabet/index.js'\nexport { urlAlphabet } from './url-alphabet/index.js'\nexport let random = bytes => crypto.getRandomValues(new Uint8Array(bytes))\nexport let customRandom = (alphabet, defaultSize, getRandom) => {\n  let mask = (2 << Math.log2(alphabet.length - 1)) - 1\n  let step = -~((1.6 * mask * defaultSize) / alphabet.length)\n  return (size = defaultSize) => {\n    let id = ''\n    while (true) {\n      let bytes = getRandom(step)\n      let j = step | 0\n      while (j--) {\n        id += alphabet[bytes[j] & mask] || ''\n        if (id.length >= size) return id\n      }\n    }\n  }\n}\nexport let customAlphabet = (alphabet, size = 21) =>\n  customRandom(alphabet, size | 0, random)\nexport let nanoid = (size = 21) => {\n  let id = ''\n  let bytes = crypto.getRandomValues(new Uint8Array((size |= 0)))\n  while (size--) {\n    id += scopedUrlAlphabet[bytes[size] & 63]\n  }\n  return id\n}\n","export const urlAlphabet =\n  'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict'\n","import clsx from \"clsx\";\nimport { nanoid } from \"nanoid\";\nimport React, { useCallback, useEffect, useState } from \"react\";\nimport { usePreviousValue } from \"../../hooks/usePreviousValue/usePreviousValue.js\";\nimport type { InjectedProps } from \"./TabList.js\";\nimport { TabsContextProvider } from \"./tabsContext.js\";\nimport type { TabListProps, TabPanelProps, TabsProps } from \"./types.js\";\n\n/**\n * Konteiner for et grensesnitt hvor man kan tabbe mellom innhold.\n * Må inneholde en TabList etterfulgt av en eller flere TabPanel.\n *\n * Docs: https://jokul.fremtind.no/komponenter/tabs\n */\nexport const Tabs = ({\n    onChange,\n    defaultTab,\n    density,\n    ...props\n}: TabsProps) => {\n    const [activeIndex, setActiveIndex] = useState(defaultTab ?? 0);\n\n    const previousTabIndex = usePreviousValue(activeIndex);\n\n    useEffect(() => {\n        if (\n            previousTabIndex !== undefined &&\n            previousTabIndex !== activeIndex &&\n            onChange\n        ) {\n            onChange(activeIndex);\n        }\n    }, [onChange, previousTabIndex, activeIndex]);\n\n    const [tabIDs, setTabIDs] = useState<string[]>([]);\n    const [tabPanelIDs, setTabPanelIds] = useState<string[]>([]);\n\n    const resolveIDs = useCallback(() => {\n        const tabList = React.Children.toArray(props.children)[0];\n\n        if (!React.isValidElement(tabList)) return;\n\n        React.Children.forEach(tabList.props.children, (tab) => {\n            if (!React.isValidElement(tab)) return;\n\n            setTabIDs((prev) => [...prev, `jkl-tab-${nanoid(8)}`]);\n            setTabPanelIds((prev) => [...prev, `jkl-tabpanel-${nanoid(8)}`]);\n        });\n    }, [props.children]);\n\n    const renderTabList = () => {\n        const tabList = React.Children.toArray(props.children)[0];\n\n        if (!React.isValidElement<TabListProps & InjectedProps>(tabList))\n            return;\n\n        return React.cloneElement<TabListProps & InjectedProps>(tabList, {\n            activeIndex,\n            setActiveIndex,\n            tabIDs,\n            tabPanelIDs,\n        });\n    };\n\n    const renderTabPanels = () => {\n        return React.Children.map(props.children, (child, childIndex) => {\n            if (\n                !React.isValidElement<\n                    TabPanelProps & React.HTMLAttributes<HTMLDivElement>\n                >(child) ||\n                childIndex === 0\n            )\n                return;\n\n            const tabPanelIndex = childIndex - 1;\n\n            return tabPanelIndex === activeIndex\n                ? React.cloneElement<\n                      TabPanelProps & React.HTMLAttributes<HTMLDivElement>\n                  >(child, {\n                      \"aria-labelledby\": tabIDs[tabPanelIndex],\n                      id: tabPanelIDs[tabPanelIndex],\n                  })\n                : null;\n        });\n    };\n\n    useEffect(() => {\n        resolveIDs();\n    }, [resolveIDs]);\n\n    return (\n        <TabsContextProvider state={{ density }}>\n            <div\n                {...props}\n                className={clsx(\"jkl-tabs\", props.className)}\n                data-density={density}\n            >\n                {renderTabList()}\n                {renderTabPanels()}\n            </div>\n        </TabsContextProvider>\n    );\n};\n"],"names":["nanoid","size","id","bytes","crypto","getRandomValues","Uint8Array","Tabs","onChange","defaultTab","density","props","activeIndex","setActiveIndex","useState","previousTabIndex","usePreviousValue","useEffect","tabIDs","setTabIDs","tabPanelIDs","setTabPanelIds","resolveIDs","useCallback","tabList","React","Children","toArray","children","isValidElement","forEach","tab","prev","jsx","TabsContextProvider","state","jsxs","className","clsx","cloneElement","renderTabList","map","child","childIndex","tabPanelIndex"],"mappings":"+SAqBO,IAAIA,EAAS,CAACC,EAAO,MACtBC,IAAAA,EAAK,GACLC,EAAQC,OAAOC,gBAAgB,IAAIC,WAAYL,GAAQ,IACpDA,KAAAA,KACLC,GCxBF,mEDwBwC,GAAdC,EAAMF,IAEzBC,OAAAA,CAAAA,EEbF,MAAMK,EAAO,EAChBC,SAAAA,EACAC,WAAAA,EACAC,QAAAA,KACGC,MAEG,MAACC,EAAaC,GAAkBC,EAASL,GAAc,GAEvDM,EAAmBC,EAAiBJ,GAE1CK,GAAU,UAEmB,IAArBF,GACAA,IAAqBH,GACrBJ,GAEAA,EAASI,EAAW,GAEzB,CAACJ,EAAUO,EAAkBH,IAEhC,MAAOM,EAAQC,GAAaL,EAAmB,KACxCM,EAAaC,GAAkBP,EAAmB,IAEnDQ,EAAaC,GAAY,KAC3B,MAAMC,EAAUC,EAAMC,SAASC,QAAQhB,EAAMiB,UAAU,GAElDH,EAAMI,eAAeL,IAE1BC,EAAMC,SAASI,QAAQN,EAAQb,MAAMiB,UAAWG,IACvCN,EAAMI,eAAeE,KAEhBZ,GAACa,GAAS,IAAIA,EAAM,WAAWhC,EAAO,QACjCqB,GAACW,GAAS,IAAIA,EAAM,gBAAgBhC,EAAO,QAAK,GAClE,GACF,CAACW,EAAMiB,WAuCV,OAAAX,GAAU,KACKK,GAAA,GACZ,CAACA,IAGCW,EAAAC,EAAA,CAAoBC,MAAO,CAAEzB,QAAAA,GAC1BkB,SAAAQ,EAAC,MAAA,IACOzB,EACJ0B,UAAWC,EAAK,WAAY3B,EAAM0B,WAClC,eAAc3B,EAEbkB,SAAA,CAhDS,MAClB,MAAMJ,EAAUC,EAAMC,SAASC,QAAQhB,EAAMiB,UAAU,GAElDH,GAAAA,EAAMI,eAA6CL,GAGjDC,OAAAA,EAAMc,aAA2Cf,EAAS,CAC7DZ,YAAAA,EACAC,eAAAA,EACAK,OAAAA,EACAE,YAAAA,GACH,EAqCsBoB,GAjChBf,EAAMC,SAASe,IAAI9B,EAAMiB,UAAU,CAACc,EAAOC,KAC9C,IACKlB,EAAMI,eAELa,IACa,IAAfC,EAEA,OAEJ,MAAMC,EAAgBD,EAAa,EAEnC,OAAOC,IAAkBhC,EACnBa,EAAMc,aAEJG,EAAO,CACL,kBAAmBxB,EAAO0B,GAC1B1C,GAAIkB,EAAYwB,KAEpB,IAAA,QAkBV","x_google_ignoreList":[0,1]}
+{"version":3,"file":"Tabs.js","sources":["../../../../../../node_modules/.pnpm/nanoid@5.1.6/node_modules/nanoid/index.browser.js","../../../../../../node_modules/.pnpm/nanoid@5.1.6/node_modules/nanoid/url-alphabet/index.js","../../../../src/components/tabs/Tabs.tsx"],"sourcesContent":["/* @ts-self-types=\"./index.d.ts\" */\nimport { urlAlphabet as scopedUrlAlphabet } from './url-alphabet/index.js'\nexport { urlAlphabet } from './url-alphabet/index.js'\nexport let random = bytes => crypto.getRandomValues(new Uint8Array(bytes))\nexport let customRandom = (alphabet, defaultSize, getRandom) => {\n  let mask = (2 << Math.log2(alphabet.length - 1)) - 1\n  let step = -~((1.6 * mask * defaultSize) / alphabet.length)\n  return (size = defaultSize) => {\n    let id = ''\n    while (true) {\n      let bytes = getRandom(step)\n      let j = step | 0\n      while (j--) {\n        id += alphabet[bytes[j] & mask] || ''\n        if (id.length >= size) return id\n      }\n    }\n  }\n}\nexport let customAlphabet = (alphabet, size = 21) =>\n  customRandom(alphabet, size | 0, random)\nexport let nanoid = (size = 21) => {\n  let id = ''\n  let bytes = crypto.getRandomValues(new Uint8Array((size |= 0)))\n  while (size--) {\n    id += scopedUrlAlphabet[bytes[size] & 63]\n  }\n  return id\n}\n","export const urlAlphabet =\n  'useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict'\n","import clsx from \"clsx\";\nimport { nanoid } from \"nanoid\";\nimport React, { useCallback, useEffect, useState } from \"react\";\nimport { usePreviousValue } from \"../../hooks/usePreviousValue/usePreviousValue.js\";\nimport type { InjectedProps } from \"./TabList.js\";\nimport { TabsContextProvider } from \"./tabsContext.js\";\nimport type { TabListProps, TabPanelProps, TabsProps } from \"./types.js\";\n\n/**\n * Konteiner for et grensesnitt hvor man kan tabbe mellom innhold.\n * Må inneholde en TabList etterfulgt av en eller flere TabPanel.\n *\n * Docs: https://jokul.fremtind.no/komponenter/tabs\n */\nexport const Tabs = ({\n    onChange,\n    defaultTab,\n    density,\n    ...props\n}: TabsProps) => {\n    const [activeIndex, setActiveIndex] = useState(defaultTab ?? 0);\n\n    const previousTabIndex = usePreviousValue(activeIndex);\n\n    useEffect(() => {\n        if (\n            previousTabIndex !== undefined &&\n            previousTabIndex !== activeIndex &&\n            onChange\n        ) {\n            onChange(activeIndex);\n        }\n    }, [onChange, previousTabIndex, activeIndex]);\n\n    const [tabIDs, setTabIDs] = useState<string[]>([]);\n    const [tabPanelIDs, setTabPanelIds] = useState<string[]>([]);\n\n    const resolveIDs = useCallback(() => {\n        const tabList = React.Children.toArray(props.children)[0];\n\n        if (!React.isValidElement(tabList)) return;\n\n        React.Children.forEach(tabList.props.children, (tab) => {\n            if (!React.isValidElement(tab)) return;\n\n            setTabIDs((prev) => [...prev, `jkl-tab-${nanoid(8)}`]);\n            setTabPanelIds((prev) => [...prev, `jkl-tabpanel-${nanoid(8)}`]);\n        });\n    }, [props.children]);\n\n    const renderTabList = () => {\n        const tabList = React.Children.toArray(props.children)[0];\n\n        if (!React.isValidElement<TabListProps & InjectedProps>(tabList))\n            return;\n\n        return React.cloneElement<TabListProps & InjectedProps>(tabList, {\n            activeIndex,\n            setActiveIndex,\n            tabIDs,\n            tabPanelIDs,\n        });\n    };\n\n    const renderTabPanels = () => {\n        return React.Children.map(props.children, (child, childIndex) => {\n            if (\n                !React.isValidElement<\n                    TabPanelProps & React.HTMLAttributes<HTMLDivElement>\n                >(child) ||\n                childIndex === 0\n            )\n                return;\n\n            const tabPanelIndex = childIndex - 1;\n\n            return tabPanelIndex === activeIndex\n                ? React.cloneElement<\n                      TabPanelProps & React.HTMLAttributes<HTMLDivElement>\n                  >(child, {\n                      \"aria-labelledby\": tabIDs[tabPanelIndex],\n                      id: tabPanelIDs[tabPanelIndex],\n                  })\n                : null;\n        });\n    };\n\n    useEffect(() => {\n        resolveIDs();\n    }, [resolveIDs]);\n\n    return (\n        <TabsContextProvider state={{ density }}>\n            <div\n                {...props}\n                className={clsx(\"jkl-tabs\", props.className)}\n                data-density={density}\n            >\n                {renderTabList()}\n                {renderTabPanels()}\n            </div>\n        </TabsContextProvider>\n    );\n};\n"],"names":["nanoid","size","id","bytes","crypto","getRandomValues","Uint8Array","Tabs","onChange","defaultTab","density","props","activeIndex","setActiveIndex","useState","previousTabIndex","usePreviousValue","useEffect","tabIDs","setTabIDs","tabPanelIDs","setTabPanelIds","resolveIDs","useCallback","tabList","React","Children","toArray","children","isValidElement","forEach","tab","prev","jsx","TabsContextProvider","state","jsxs","className","clsx","cloneElement","renderTabList","map","child","childIndex","tabPanelIndex"],"mappings":"+SAqBO,IAAIA,EAAS,CAACC,EAAO,MAC1B,IAAIC,EAAK,GACLC,EAAQC,OAAOC,gBAAgB,IAAIC,WAAYL,GAAQ,IAC3D,KAAOA,KACLC,GCxBF,mEDwBwC,GAAdC,EAAMF,IAEhC,OAAOC,GEbF,MAAMK,EAAO,EAChBC,SAAAA,EACAC,WAAAA,EACAC,QAAAA,KACGC,MAEH,MAAOC,EAAaC,GAAkBC,EAASL,GAAc,GAEvDM,EAAmBC,EAAiBJ,GAE1CK,EAAU,UAEmB,IAArBF,GACAA,IAAqBH,GACrBJ,GAEAA,EAASI,IAEd,CAACJ,EAAUO,EAAkBH,IAEhC,MAAOM,EAAQC,GAAaL,EAAmB,KACxCM,EAAaC,GAAkBP,EAAmB,IAEnDQ,EAAaC,EAAY,KAC3B,MAAMC,EAAUC,EAAMC,SAASC,QAAQhB,EAAMiB,UAAU,GAElDH,EAAMI,eAAeL,IAE1BC,EAAMC,SAASI,QAAQN,EAAQb,MAAMiB,SAAWG,IACvCN,EAAMI,eAAeE,KAE1BZ,EAAWa,GAAS,IAAIA,EAAM,WAAWhC,EAAO,OAChDqB,EAAgBW,GAAS,IAAIA,EAAM,gBAAgBhC,EAAO,WAE/D,CAACW,EAAMiB,WAuCV,OAAAX,EAAU,KACNK,KACD,CAACA,IAGAW,EAACC,EAAA,CAAoBC,MAAO,CAAEzB,QAAAA,GAC1BkB,SAAAQ,EAAC,MAAA,IACOzB,EACJ0B,UAAWC,EAAK,WAAY3B,EAAM0B,WAClC,eAAc3B,EAEbkB,SAAA,CAhDS,MAClB,MAAMJ,EAAUC,EAAMC,SAASC,QAAQhB,EAAMiB,UAAU,GAEvD,GAAKH,EAAMI,eAA6CL,GAGxD,OAAOC,EAAMc,aAA2Cf,EAAS,CAC7DZ,YAAAA,EACAC,eAAAA,EACAK,OAAAA,EACAE,YAAAA,KAsCKoB,GAjCFf,EAAMC,SAASe,IAAI9B,EAAMiB,SAAU,CAACc,EAAOC,KAC9C,IACKlB,EAAMI,eAELa,IACa,IAAfC,EAEA,OAEJ,MAAMC,EAAgBD,EAAa,EAEnC,OAAOC,IAAkBhC,EACnBa,EAAMc,aAEJG,EAAO,CACL,kBAAmBxB,EAAO0B,GAC1B1C,GAAIkB,EAAYwB,KAEpB","x_google_ignoreList":[0,1]}

package/build/es/components/tabs/tabsContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabsContext.js","sources":["../../../../src/components/tabs/tabsContext.tsx"],"sourcesContent":["import React, { createContext, useContext } from \"react\";\nimport type { Density, WithChildren } from \"../../core/types.js\";\n\ntype TabsContext = {\n    density?: Density;\n};\n\nconst tabsContext = createContext<TabsContext>({\n    density: undefined,\n});\n\nexport const useTabsContext = (): TabsContext => useContext(tabsContext);\n\ninterface Props extends WithChildren {\n    state: TabsContext;\n}\n\nexport const TabsContextProvider: React.FC<Props> = ({ state, children }) => (\n    <tabsContext.Provider value={state}>{children}</tabsContext.Provider>\n);\n"],"names":["tabsContext","createContext","density","useTabsContext","useContext","TabsContextProvider","state","children","jsx","Provider","value"],"mappings":"8FAOA,MAAMA,EAAcC,EAA2B,CAC3CC,aAAS,IAGAC,EAAiB,IAAmBC,EAAWJ,GAM/CK,EAAuC,EAAGC,MAAAA,EAAOC,SAAAA,KACzDC,EAAAR,EAAYS,SAAZ,CAAqBC,MAAOJ,EAAQC,SAAAA"}
+{"version":3,"file":"tabsContext.js","sources":["../../../../src/components/tabs/tabsContext.tsx"],"sourcesContent":["import React, { createContext, useContext } from \"react\";\nimport type { Density, WithChildren } from \"../../core/types.js\";\n\ntype TabsContext = {\n    density?: Density;\n};\n\nconst tabsContext = createContext<TabsContext>({\n    density: undefined,\n});\n\nexport const useTabsContext = (): TabsContext => useContext(tabsContext);\n\ninterface Props extends WithChildren {\n    state: TabsContext;\n}\n\nexport const TabsContextProvider: React.FC<Props> = ({ state, children }) => (\n    <tabsContext.Provider value={state}>{children}</tabsContext.Provider>\n);\n"],"names":["tabsContext","createContext","density","useTabsContext","useContext","TabsContextProvider","state","children","jsx","Provider","value"],"mappings":"8FAOA,MAAMA,EAAcC,EAA2B,CAC3CC,aAAS,IAGAC,EAAiB,IAAmBC,EAAWJ,GAM/CK,EAAuC,EAAGC,MAAAA,EAAOC,SAAAA,KAC1DC,EAACR,EAAYS,SAAZ,CAAqBC,MAAOJ,EAAQC,SAAAA"}

package/build/es/components/tag/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sources":["../../../../src/components/tag/Tag.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { type FC } from \"react\";\nimport type { TagProps } from \"./types.js\";\n\ntype Variant = \"info\" | \"error\" | \"warning\" | \"success\";\n\nfunction getDisplayName(variant?: Variant) {\n    switch (variant) {\n        case \"info\":\n            return \"InfoTag\";\n        case \"error\":\n            return \"ErrorTag\";\n        case \"warning\":\n            return \"WarningTag\";\n        case \"success\":\n            return \"SuccessTag\";\n        default:\n            return \"Tag\";\n    }\n}\n\nfunction tagFactory(variant?: Variant) {\n    const Tag: FC<TagProps> = ({ className, density, children, ...rest }) => (\n        <span\n            className={clsx(\n                \"jkl-tag\",\n                {\n                    \"jkl-tag--info\": variant === \"info\",\n                    \"jkl-tag--error\": variant === \"error\",\n                    \"jkl-tag--warning\": variant === \"warning\",\n                    \"jkl-tag--success\": variant === \"success\",\n                },\n                className,\n            )}\n            data-density={density}\n            {...rest}\n        >\n            {children}\n        </span>\n    );\n    Tag.displayName = getDisplayName(variant);\n    return Tag;\n}\n\nexport const Tag = tagFactory();\nexport const InfoTag = tagFactory(\"info\");\nexport const ErrorTag = tagFactory(\"error\");\nexport const WarningTag = tagFactory(\"warning\");\nexport const SuccessTag = tagFactory(\"success\");\n"],"names":["tagFactory","variant","Tag","className","density","children","rest","jsx","clsx","displayName","getDisplayName","InfoTag","ErrorTag","WarningTag","SuccessTag"],"mappings":"oGAqBA,SAASA,EAAWC,GACVC,MAAAA,EAAoB,EAAGC,UAAAA,EAAWC,QAAAA,EAASC,SAAAA,KAAaC,KAC1DC,EAAC,OAAA,CACGJ,UAAWK,EACP,UACA,CACI,gBAA6B,SAAZP,EACjB,iBAA8B,UAAZA,EAClB,mBAAgC,YAAZA,EACpB,mBAAgC,YAAZA,GAExBE,GAEJ,eAAcC,KACVE,EAEHD,SAAAA,IAGTH,OAAAA,EAAIO,YAlCR,SAAwBR,GACpB,OAAQA,GACJ,IAAK,OACM,MAAA,UACX,IAAK,QACM,MAAA,WACX,IAAK,UACM,MAAA,aACX,IAAK,UACM,MAAA,aACX,QACW,MAAA,MAEnB,CAqBsBS,CAAeT,GAC1BC,CACX,CAEO,MAAMA,EAAMF,IACNW,EAAUX,EAAW,QACrBY,EAAWZ,EAAW,SACtBa,EAAab,EAAW,WACxBc,EAAad,EAAW"}
+{"version":3,"file":"Tag.js","sources":["../../../../src/components/tag/Tag.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { type FC } from \"react\";\nimport type { TagProps } from \"./types.js\";\n\ntype Variant = \"info\" | \"error\" | \"warning\" | \"success\";\n\nfunction getDisplayName(variant?: Variant) {\n    switch (variant) {\n        case \"info\":\n            return \"InfoTag\";\n        case \"error\":\n            return \"ErrorTag\";\n        case \"warning\":\n            return \"WarningTag\";\n        case \"success\":\n            return \"SuccessTag\";\n        default:\n            return \"Tag\";\n    }\n}\n\nfunction tagFactory(variant?: Variant) {\n    const Tag: FC<TagProps> = ({ className, density, children, ...rest }) => (\n        <span\n            className={clsx(\n                \"jkl-tag\",\n                {\n                    \"jkl-tag--info\": variant === \"info\",\n                    \"jkl-tag--error\": variant === \"error\",\n                    \"jkl-tag--warning\": variant === \"warning\",\n                    \"jkl-tag--success\": variant === \"success\",\n                },\n                className,\n            )}\n            data-density={density}\n            {...rest}\n        >\n            {children}\n        </span>\n    );\n    Tag.displayName = getDisplayName(variant);\n    return Tag;\n}\n\nexport const Tag = tagFactory();\nexport const InfoTag = tagFactory(\"info\");\nexport const ErrorTag = tagFactory(\"error\");\nexport const WarningTag = tagFactory(\"warning\");\nexport const SuccessTag = tagFactory(\"success\");\n"],"names":["tagFactory","variant","Tag","className","density","children","rest","jsx","clsx","displayName","getDisplayName","InfoTag","ErrorTag","WarningTag","SuccessTag"],"mappings":"oGAqBA,SAASA,EAAWC,GAChB,MAAMC,EAAoB,EAAGC,UAAAA,EAAWC,QAAAA,EAASC,SAAAA,KAAaC,KAC1DC,EAAC,OAAA,CACGJ,UAAWK,EACP,UACA,CACI,gBAA6B,SAAZP,EACjB,iBAA8B,UAAZA,EAClB,mBAAgC,YAAZA,EACpB,mBAAgC,YAAZA,GAExBE,GAEJ,eAAcC,KACVE,EAEHD,SAAAA,IAGTH,OAAAA,EAAIO,YAlCR,SAAwBR,GACpB,OAAQA,GACJ,IAAK,OACD,MAAO,UACX,IAAK,QACD,MAAO,WACX,IAAK,UACD,MAAO,aACX,IAAK,UACD,MAAO,aACX,QACI,MAAO,MAEnB,CAqBsBS,CAAeT,GAC1BC,CACX,CAEO,MAAMA,EAAMF,IACNW,EAAUX,EAAW,QACrBY,EAAWZ,EAAW,SACtBa,EAAab,EAAW,WACxBc,EAAad,EAAW"}

package/build/es/components/text-area/BaseTextArea.js

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{forwardRef as a,useState as r,useRef as s,useEffect as n}from"react";const o=a(((a,o)=>{const{autoExpand:l,counter:i,onBlur:c,onFocus:u,rows:d=7,placeholder:h=" ",startOpen:x,style:f,value:g,"aria-invalid":v,onChange:p,...m}=a,[y,_]=r((()=>typeof g>"u"?0:"number"==typeof g?String(g).length:g.length)),[j,k]=r(!1),w=s(null),N=o||w;n((()=>{const e=N.current;if(e){if(!l)return void(e.style.height="");j||g?(e.style.height="auto",e.style.height=`${e.scrollHeight}px`):e.style.height=""}}),[l,N,g,j,y]);const B=i?.maxLength||0,$=B-y;const A=!(!v&&!(i&&y>B?`Du har skrevet ${y-B} tegn for mye`:void 0));return e("div",{className:"jkl-text-area-wrapper","data-invalid":A,"data-has-content":y>0,children:[t("textarea",{"aria-invalid":A,className:`jkl-text-area__text-area jkl-text-area__text-area--${d}-rows`,onBlur:function(e){k(!1),c&&c(e)},onFocus:function(e){k(!0),u&&u(e)},onChange:function(e){_(e.target.value.length),p&&p(e)},ref:N,style:{...f,...{overflowX:l?"hidden":void 0}},placeholder:h,value:g,...m}),i&&e("div",{className:"jkl-text-area__counter","aria-hidden":"true",children:[e("div",{className:"jkl-text-area__counter-count",children:[y," / ",B]}),!i.hideProgress&&t("div",{className:"jkl-text-area__counter-progress",style:{"--progress-width":(C=$,E=B,C<=0||0===E?0:100*C/E)+"%"}})]})]});var C,E}));o.displayName="BaseTextArea";export{o as BaseTextArea};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{forwardRef as a,useState as r,useRef as s,useEffect as n}from"react";const o=a((a,o)=>{const{autoExpand:l,counter:i,onBlur:c,onFocus:u,rows:d=7,placeholder:h=" ",startOpen:x,style:f,value:g,"aria-invalid":v,onChange:p,...m}=a,[y,_]=r(()=>typeof g>"u"?0:"number"==typeof g?String(g).length:g.length),[j,k]=r(!1),w=s(null),N=o||w;n(()=>{const e=N.current;if(e){if(!l)return void(e.style.height="");j||g?(e.style.height="auto",e.style.height=`${e.scrollHeight}px`):e.style.height=""}},[l,N,g,j,y]);const B=i?.maxLength||0,$=B-y;const A=!(!v&&!(i&&y>B?`Du har skrevet ${y-B} tegn for mye`:void 0));return e("div",{className:"jkl-text-area-wrapper","data-invalid":A,"data-has-content":y>0,children:[t("textarea",{"aria-invalid":A,className:`jkl-text-area__text-area jkl-text-area__text-area--${d}-rows`,onBlur:function(e){k(!1),c&&c(e)},onFocus:function(e){k(!0),u&&u(e)},onChange:function(e){_(e.target.value.length),p&&p(e)},ref:N,style:{...f,...{overflowX:l?"hidden":void 0}},placeholder:h,value:g,...m}),i&&e("div",{className:"jkl-text-area__counter","aria-hidden":"true",children:[e("div",{className:"jkl-text-area__counter-count",children:[y," / ",B]}),!i.hideProgress&&t("div",{className:"jkl-text-area__counter-progress",style:{"--progress-width":(C=$,E=B,C<=0||0===E?0:100*C/E)+"%"}})]})]});var C,E});o.displayName="BaseTextArea";export{o as BaseTextArea};
 //# sourceMappingURL=BaseTextArea.js.map

package/build/es/components/text-area/BaseTextArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseTextArea.js","sources":["../../../../src/components/text-area/BaseTextArea.tsx"],"sourcesContent":["import React, {\n    type ChangeEvent,\n    type FocusEvent,\n    forwardRef,\n    type RefObject,\n    useEffect,\n    useRef,\n    useState,\n} from \"react\";\nimport type { BaseTextAreaProps } from \"./types.js\";\n\nexport const BaseTextArea = forwardRef<HTMLTextAreaElement, BaseTextAreaProps>(\n    (props, ref) => {\n        const {\n            autoExpand,\n            counter,\n            onBlur,\n            onFocus,\n            rows = 7,\n            placeholder = \" \", // This space intentionally left blank. Denne + rows trengs for å få den ekspanderende effekten.\n            startOpen,\n            style,\n            value,\n            \"aria-invalid\": ariaInvalid,\n            onChange,\n            ...rest\n        } = props;\n\n        const [counterCurrent, setCounterCurrent] = useState(() => {\n            if (typeof value === \"undefined\") {\n                return 0;\n            }\n\n            if (typeof value === \"number\") {\n                return String(value).length;\n            }\n\n            return value.length;\n        });\n        const [textAreaFocused, setTextAreaFocused] = useState(false);\n        const internalRef = useRef<HTMLTextAreaElement>(null);\n        const textAreaRef =\n            (ref as RefObject<HTMLTextAreaElement>) || internalRef;\n\n        // biome-ignore lint/correctness/useExhaustiveDependencies: counterCurrent trengs for å lytte på tekstendringer i textarea for auto-expand funksjonalitet\n        useEffect(() => {\n            const textAreaElement = textAreaRef.current;\n            if (textAreaElement) {\n                if (!autoExpand) {\n                    textAreaElement.style.height = \"\";\n                    return;\n                }\n\n                if (textAreaFocused || value) {\n                    textAreaElement.style.height = \"auto\"; // Sett til auto før scrollhøyden leses, sånn at redusering av høyde ved sletting av tekst fungerer\n                    textAreaElement.style.height = `${textAreaElement.scrollHeight}px`;\n                } else {\n                    textAreaElement.style.height = \"\";\n                }\n            }\n        }, [autoExpand, textAreaRef, value, textAreaFocused, counterCurrent]);\n\n        function handleOnFocus(e: FocusEvent<HTMLTextAreaElement>) {\n            setTextAreaFocused(true);\n            if (onFocus) {\n                onFocus(e);\n            }\n        }\n\n        function handleOnBlur(e: FocusEvent<HTMLTextAreaElement>) {\n            setTextAreaFocused(false);\n            if (onBlur) {\n                onBlur(e);\n            }\n        }\n\n        function handleOnChange(e: ChangeEvent<HTMLTextAreaElement>) {\n            setCounterCurrent(e.target.value.length);\n            if (onChange) {\n                onChange(e);\n            }\n        }\n\n        const counterTotal: number = counter?.maxLength || 0;\n        const progressCurrent: number = counterTotal - counterCurrent;\n        function calculatePercentage(current: number, total: number): number {\n            if (current <= 0) {\n                return 0;\n            }\n            return total === 0 ? 0 : (current * 100) / total;\n        }\n        const counterLabel =\n            counter && counterCurrent > counterTotal\n                ? `Du har skrevet ${counterCurrent - counterTotal} tegn for mye`\n                : undefined;\n\n        const invalid = Boolean(ariaInvalid || counterLabel);\n\n        const overflowStyle = {\n            overflowX: autoExpand ? \"hidden\" : undefined, // Must set overflowX hidden for Firefox https://stackoverflow.com/a/22700700\n        } as React.CSSProperties;\n\n        return (\n            <div\n                className=\"jkl-text-area-wrapper\"\n                data-invalid={invalid}\n                data-has-content={counterCurrent > 0}\n            >\n                <textarea\n                    aria-invalid={invalid}\n                    className={`jkl-text-area__text-area jkl-text-area__text-area--${rows}-rows`}\n                    onBlur={handleOnBlur}\n                    onFocus={handleOnFocus}\n                    onChange={handleOnChange}\n                    ref={textAreaRef}\n                    style={{ ...style, ...overflowStyle }}\n                    placeholder={placeholder}\n                    value={value}\n                    {...rest}\n                />\n                {counter && (\n                    <div className=\"jkl-text-area__counter\" aria-hidden=\"true\">\n                        <div className=\"jkl-text-area__counter-count\">\n                            {counterCurrent}&nbsp;/&nbsp;{counterTotal}\n                        </div>\n                        {!counter.hideProgress && (\n                            <div\n                                className=\"jkl-text-area__counter-progress\"\n                                style={{\n                                    [\"--progress-width\" as string]: `${calculatePercentage(\n                                        progressCurrent,\n                                        counterTotal,\n                                    )}%`,\n                                }}\n                            />\n                        )}\n                    </div>\n                )}\n            </div>\n        );\n    },\n);\nBaseTextArea.displayName = \"BaseTextArea\";\n"],"names":["BaseTextArea","forwardRef","props","ref","autoExpand","counter","onBlur","onFocus","rows","placeholder","startOpen","style","value","ariaInvalid","onChange","rest","counterCurrent","setCounterCurrent","useState","String","length","textAreaFocused","setTextAreaFocused","internalRef","useRef","textAreaRef","useEffect","textAreaElement","current","height","scrollHeight","counterTotal","maxLength","progressCurrent","invalid","jsxs","className","children","jsx","e","target","overflowX","hideProgress","total","calculatePercentage","displayName"],"mappings":"8HAWO,MAAMA,EAAeC,GACxB,CAACC,EAAOC,KACE,MACFC,WAAAA,EACAC,QAAAA,EACAC,OAAAA,EACAC,QAAAA,EACAC,KAAAA,EAAO,EACPC,YAAAA,EAAc,IACdC,UAAAA,EACAC,MAAAA,EACAC,MAAAA,EACA,eAAgBC,EAChBC,SAAAA,KACGC,GACHb,GAEGc,EAAgBC,GAAqBC,GAAS,WACtCN,EAAU,IACV,EAGU,iBAAVA,EACAO,OAAOP,GAAOQ,OAGlBR,EAAMQ,UAEVC,EAAiBC,GAAsBJ,GAAS,GACjDK,EAAcC,EAA4B,MAC1CC,EACDtB,GAA0CoB,EAG/CG,GAAU,KACN,MAAMC,EAAkBF,EAAYG,QACpC,GAAID,EAAiB,CACjB,IAAKvB,EAED,YADAuB,EAAgBhB,MAAMkB,OAAS,IAI/BR,GAAmBT,GACnBe,EAAgBhB,MAAMkB,OAAS,OAC/BF,EAAgBhB,MAAMkB,OAAS,GAAGF,EAAgBG,kBAElDH,EAAgBhB,MAAMkB,OAAS,EACnC,IAEL,CAACzB,EAAYqB,EAAab,EAAOS,EAAiBL,IAuB/C,MAAAe,EAAuB1B,GAAS2B,WAAa,EAC7CC,EAA0BF,EAAef,EAO/C,MAKMkB,KAAkBrB,KAJpBR,GAAWW,EAAiBe,EACtB,kBAAkBf,EAAiBe,sBACnC,IASN,OAAAI,EAAC,MAAA,CACGC,UAAU,wBACV,eAAcF,EACd,mBAAkBlB,EAAiB,EAEnCqB,SAAA,CAAAC,EAAC,WAAA,CACG,eAAcJ,EACdE,UAAW,sDAAsD5B,SACjEF,OA1CZ,SAAsBiC,GAClBjB,GAAmB,GACfhB,GACAA,EAAOiC,EACX,EAuCQhC,QAlDZ,SAAuBgC,GACnBjB,GAAmB,GACff,GACAA,EAAQgC,EACZ,EA+CQzB,SArCZ,SAAwByB,GACFtB,EAAAsB,EAAEC,OAAO5B,MAAMQ,QAC7BN,GACAA,EAASyB,EACb,EAkCQpC,IAAKsB,EACLd,MAAO,IAAKA,KAjBF,CAClB8B,UAAWrC,EAAa,cAAW,IAiB3BK,YAAAA,EACAG,MAAAA,KACIG,IAEPV,GACI8B,EAAA,MAAA,CAAIC,UAAU,yBAAyB,cAAY,OAChDC,SAAA,CAACF,EAAA,MAAA,CAAIC,UAAU,+BACVC,SAAA,CAAArB,EAAe,MAAce,MAEhC1B,EAAQqC,cACNJ,EAAC,MAAA,CACGF,UAAU,kCACVzB,MAAO,CACF,oBA5CAiB,EA6CGK,EA7CcU,EA8CdZ,EA7CxBH,GAAW,GAGE,IAAVe,EAFI,EAEyB,IAAVf,EAAiBe,GAwCa,aA5CnDC,IAAoBhB,EAAiBe,CAqD1C,IAIZ3C,EAAa6C,YAAc"}
+{"version":3,"file":"BaseTextArea.js","sources":["../../../../src/components/text-area/BaseTextArea.tsx"],"sourcesContent":["import React, {\n    type ChangeEvent,\n    type FocusEvent,\n    forwardRef,\n    type RefObject,\n    useEffect,\n    useRef,\n    useState,\n} from \"react\";\nimport type { BaseTextAreaProps } from \"./types.js\";\n\nexport const BaseTextArea = forwardRef<HTMLTextAreaElement, BaseTextAreaProps>(\n    (props, ref) => {\n        const {\n            autoExpand,\n            counter,\n            onBlur,\n            onFocus,\n            rows = 7,\n            placeholder = \" \", // This space intentionally left blank. Denne + rows trengs for å få den ekspanderende effekten.\n            startOpen,\n            style,\n            value,\n            \"aria-invalid\": ariaInvalid,\n            onChange,\n            ...rest\n        } = props;\n\n        const [counterCurrent, setCounterCurrent] = useState(() => {\n            if (typeof value === \"undefined\") {\n                return 0;\n            }\n\n            if (typeof value === \"number\") {\n                return String(value).length;\n            }\n\n            return value.length;\n        });\n        const [textAreaFocused, setTextAreaFocused] = useState(false);\n        const internalRef = useRef<HTMLTextAreaElement>(null);\n        const textAreaRef =\n            (ref as RefObject<HTMLTextAreaElement>) || internalRef;\n\n        // biome-ignore lint/correctness/useExhaustiveDependencies: counterCurrent trengs for å lytte på tekstendringer i textarea for auto-expand funksjonalitet\n        useEffect(() => {\n            const textAreaElement = textAreaRef.current;\n            if (textAreaElement) {\n                if (!autoExpand) {\n                    textAreaElement.style.height = \"\";\n                    return;\n                }\n\n                if (textAreaFocused || value) {\n                    textAreaElement.style.height = \"auto\"; // Sett til auto før scrollhøyden leses, sånn at redusering av høyde ved sletting av tekst fungerer\n                    textAreaElement.style.height = `${textAreaElement.scrollHeight}px`;\n                } else {\n                    textAreaElement.style.height = \"\";\n                }\n            }\n        }, [autoExpand, textAreaRef, value, textAreaFocused, counterCurrent]);\n\n        function handleOnFocus(e: FocusEvent<HTMLTextAreaElement>) {\n            setTextAreaFocused(true);\n            if (onFocus) {\n                onFocus(e);\n            }\n        }\n\n        function handleOnBlur(e: FocusEvent<HTMLTextAreaElement>) {\n            setTextAreaFocused(false);\n            if (onBlur) {\n                onBlur(e);\n            }\n        }\n\n        function handleOnChange(e: ChangeEvent<HTMLTextAreaElement>) {\n            setCounterCurrent(e.target.value.length);\n            if (onChange) {\n                onChange(e);\n            }\n        }\n\n        const counterTotal: number = counter?.maxLength || 0;\n        const progressCurrent: number = counterTotal - counterCurrent;\n        function calculatePercentage(current: number, total: number): number {\n            if (current <= 0) {\n                return 0;\n            }\n            return total === 0 ? 0 : (current * 100) / total;\n        }\n        const counterLabel =\n            counter && counterCurrent > counterTotal\n                ? `Du har skrevet ${counterCurrent - counterTotal} tegn for mye`\n                : undefined;\n\n        const invalid = Boolean(ariaInvalid || counterLabel);\n\n        const overflowStyle = {\n            overflowX: autoExpand ? \"hidden\" : undefined, // Must set overflowX hidden for Firefox https://stackoverflow.com/a/22700700\n        } as React.CSSProperties;\n\n        return (\n            <div\n                className=\"jkl-text-area-wrapper\"\n                data-invalid={invalid}\n                data-has-content={counterCurrent > 0}\n            >\n                <textarea\n                    aria-invalid={invalid}\n                    className={`jkl-text-area__text-area jkl-text-area__text-area--${rows}-rows`}\n                    onBlur={handleOnBlur}\n                    onFocus={handleOnFocus}\n                    onChange={handleOnChange}\n                    ref={textAreaRef}\n                    style={{ ...style, ...overflowStyle }}\n                    placeholder={placeholder}\n                    value={value}\n                    {...rest}\n                />\n                {counter && (\n                    <div className=\"jkl-text-area__counter\" aria-hidden=\"true\">\n                        <div className=\"jkl-text-area__counter-count\">\n                            {counterCurrent}&nbsp;/&nbsp;{counterTotal}\n                        </div>\n                        {!counter.hideProgress && (\n                            <div\n                                className=\"jkl-text-area__counter-progress\"\n                                style={{\n                                    [\"--progress-width\" as string]: `${calculatePercentage(\n                                        progressCurrent,\n                                        counterTotal,\n                                    )}%`,\n                                }}\n                            />\n                        )}\n                    </div>\n                )}\n            </div>\n        );\n    },\n);\nBaseTextArea.displayName = \"BaseTextArea\";\n"],"names":["BaseTextArea","forwardRef","props","ref","autoExpand","counter","onBlur","onFocus","rows","placeholder","startOpen","style","value","ariaInvalid","onChange","rest","counterCurrent","setCounterCurrent","useState","String","length","textAreaFocused","setTextAreaFocused","internalRef","useRef","textAreaRef","useEffect","textAreaElement","current","height","scrollHeight","counterTotal","maxLength","progressCurrent","invalid","jsxs","className","children","jsx","e","target","overflowX","hideProgress","total","displayName"],"mappings":"8HAWO,MAAMA,EAAeC,EACxB,CAACC,EAAOC,KACJ,MACIC,WAAAA,EACAC,QAAAA,EACAC,OAAAA,EACAC,QAAAA,EACAC,KAAAA,EAAO,EACPC,YAAAA,EAAc,IACdC,UAAAA,EACAC,MAAAA,EACAC,MAAAA,EACA,eAAgBC,EAChBC,SAAAA,KACGC,GACHb,GAEGc,EAAgBC,GAAqBC,EAAS,WACtCN,EAAU,IACV,EAGU,iBAAVA,EACAO,OAAOP,GAAOQ,OAGlBR,EAAMQ,SAEVC,EAAiBC,GAAsBJ,GAAS,GACjDK,EAAcC,EAA4B,MAC1CC,EACDtB,GAA0CoB,EAG/CG,EAAU,KACN,MAAMC,EAAkBF,EAAYG,QACpC,GAAID,EAAiB,CACjB,IAAKvB,EAED,YADAuB,EAAgBhB,MAAMkB,OAAS,IAI/BR,GAAmBT,GACnBe,EAAgBhB,MAAMkB,OAAS,OAC/BF,EAAgBhB,MAAMkB,OAAS,GAAGF,EAAgBG,kBAElDH,EAAgBhB,MAAMkB,OAAS,EAEvC,GACD,CAACzB,EAAYqB,EAAab,EAAOS,EAAiBL,IAuBrD,MAAMe,EAAuB1B,GAAS2B,WAAa,EAC7CC,EAA0BF,EAAef,EAO/C,MAKMkB,KAAkBrB,KAJpBR,GAAWW,EAAiBe,EACtB,kBAAkBf,EAAiBe,sBACnC,IAQV,OACII,EAAC,MAAA,CACGC,UAAU,wBACV,eAAcF,EACd,mBAAkBlB,EAAiB,EAEnCqB,SAAA,CAAAC,EAAC,WAAA,CACG,eAAcJ,EACdE,UAAW,sDAAsD5B,SACjEF,OA1CZ,SAAsBiC,GAClBjB,GAAmB,GACfhB,GACAA,EAAOiC,EAEf,EAsCYhC,QAlDZ,SAAuBgC,GACnBjB,GAAmB,GACff,GACAA,EAAQgC,EAEhB,EA8CYzB,SArCZ,SAAwByB,GACpBtB,EAAkBsB,EAAEC,OAAO5B,MAAMQ,QAC7BN,GACAA,EAASyB,EAEjB,EAiCYpC,IAAKsB,EACLd,MAAO,IAAKA,KAjBF,CAClB8B,UAAWrC,EAAa,cAAW,IAiB3BK,YAAAA,EACAG,MAAAA,KACIG,IAEPV,GACG8B,EAAC,MAAA,CAAIC,UAAU,yBAAyB,cAAY,OAChDC,SAAA,CAAAF,EAAC,MAAA,CAAIC,UAAU,+BACVC,SAAA,CAAArB,EAAe,MAAce,MAEhC1B,EAAQqC,cACNJ,EAAC,MAAA,CACGF,UAAU,kCACVzB,MAAO,CACF,oBA5CAiB,EA6CGK,EA7CcU,EA8CdZ,EA7CxBH,GAAW,GAGE,IAAVe,EAFI,EAEyB,IAAVf,EAAiBe,GAwCa,aA5C5D,IAA6Bf,EAAiBe,IAyDtD3C,EAAa4C,YAAc"}

package/build/es/components/text-area/TextArea.js

@@ -1,2 +1,2 @@
-import{jsx as e}from"react/jsx-runtime";import{c as t}from"../../../clsx-BeLtu-UY.js";import{forwardRef as a}from"react";import{InputGroup as r}from"../input-group/InputGroup.js";import{BaseTextArea as o}from"./BaseTextArea.js";const s=a(((a,s)=>{const{autoExpand:p,className:l,counter:n,density:i,errorLabel:u,helpLabel:x,inline:m,label:c,labelProps:d,startOpen:b,supportLabelProps:j,tooltip:f,description:L,...k}=a,A={label:c,density:i,errorLabel:u,helpLabel:x,labelProps:d,inline:m,supportLabelProps:j,tooltip:f,description:L},P={autoExpand:p,counter:n,startOpen:b};return e(r,{className:t("jkl-text-area",l,{"jkl-text-area--start-open":b,"jkl-text-area--auto-expand":p}),"data-testid":"jkl-text-area",...A,children:e(o,{ref:s,...k,...P})})}));s.displayName="TextArea";export{s as TextArea};
+import{jsx as e}from"react/jsx-runtime";import{c as t}from"../../../clsx-BeLtu-UY.js";import{forwardRef as a}from"react";import{InputGroup as r}from"../input-group/InputGroup.js";import{BaseTextArea as o}from"./BaseTextArea.js";const s=a((a,s)=>{const{autoExpand:p,className:l,counter:n,density:i,errorLabel:u,helpLabel:x,inline:m,label:c,labelProps:d,startOpen:b,supportLabelProps:j,tooltip:f,description:L,...k}=a,A={label:c,density:i,errorLabel:u,helpLabel:x,labelProps:d,inline:m,supportLabelProps:j,tooltip:f,description:L},P={autoExpand:p,counter:n,startOpen:b};return e(r,{className:t("jkl-text-area",l,{"jkl-text-area--start-open":b,"jkl-text-area--auto-expand":p}),"data-testid":"jkl-text-area",...A,children:e(o,{ref:s,...k,...P})})});s.displayName="TextArea";export{s as TextArea};
 //# sourceMappingURL=TextArea.js.map

package/build/es/components/text-area/TextArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.js","sources":["../../../../src/components/text-area/TextArea.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { InputGroup } from \"../input-group/InputGroup.js\";\nimport { BaseTextArea } from \"./BaseTextArea.js\";\nimport type { TextAreaProps } from \"./types.js\";\n\nexport const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n    (props, ref) => {\n        const {\n            autoExpand,\n            className,\n            counter,\n            density,\n            errorLabel,\n            helpLabel,\n            inline,\n            label,\n            labelProps,\n            startOpen,\n            supportLabelProps,\n            tooltip,\n            description,\n            ...rest\n        } = props;\n        const inputGroupProps = {\n            label,\n            density,\n            errorLabel,\n            helpLabel,\n            labelProps,\n            inline,\n            supportLabelProps,\n            tooltip,\n            description,\n        };\n        const textAreaProps = { autoExpand, counter, startOpen };\n        return (\n            <InputGroup\n                className={clsx(\"jkl-text-area\", className, {\n                    \"jkl-text-area--start-open\": startOpen,\n                    \"jkl-text-area--auto-expand\": autoExpand,\n                })}\n                data-testid=\"jkl-text-area\"\n                {...inputGroupProps}\n            >\n                <BaseTextArea ref={ref} {...rest} {...textAreaProps} />\n            </InputGroup>\n        );\n    },\n);\nTextArea.displayName = \"TextArea\";\n"],"names":["TextArea","forwardRef","props","ref","autoExpand","className","counter","density","errorLabel","helpLabel","inline","label","labelProps","startOpen","supportLabelProps","tooltip","description","rest","inputGroupProps","textAreaProps","jsx","InputGroup","clsx","children","BaseTextArea","displayName"],"mappings":"oOAMO,MAAMA,EAAWC,GACpB,CAACC,EAAOC,KACE,MACFC,WAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,OAAAA,EACAC,MAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,kBAAAA,EACAC,QAAAA,EACAC,YAAAA,KACGC,GACHf,EACEgB,EAAkB,CACpBP,MAAAA,EACAJ,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAG,WAAAA,EACAF,OAAAA,EACAI,kBAAAA,EACAC,QAAAA,EACAC,YAAAA,GAEEG,EAAgB,CAAEf,WAAAA,EAAYE,QAAAA,EAASO,UAAAA,GAEzC,OAAAO,EAACC,EAAA,CACGhB,UAAWiB,EAAK,gBAAiBjB,EAAW,CACxC,4BAA6BQ,EAC7B,6BAA8BT,IAElC,cAAY,mBACRc,EAEJK,WAACC,EAAa,CAAArB,IAAAA,KAAcc,KAAUE,KAC1C,IAIZnB,EAASyB,YAAc"}
+{"version":3,"file":"TextArea.js","sources":["../../../../src/components/text-area/TextArea.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { InputGroup } from \"../input-group/InputGroup.js\";\nimport { BaseTextArea } from \"./BaseTextArea.js\";\nimport type { TextAreaProps } from \"./types.js\";\n\nexport const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n    (props, ref) => {\n        const {\n            autoExpand,\n            className,\n            counter,\n            density,\n            errorLabel,\n            helpLabel,\n            inline,\n            label,\n            labelProps,\n            startOpen,\n            supportLabelProps,\n            tooltip,\n            description,\n            ...rest\n        } = props;\n        const inputGroupProps = {\n            label,\n            density,\n            errorLabel,\n            helpLabel,\n            labelProps,\n            inline,\n            supportLabelProps,\n            tooltip,\n            description,\n        };\n        const textAreaProps = { autoExpand, counter, startOpen };\n        return (\n            <InputGroup\n                className={clsx(\"jkl-text-area\", className, {\n                    \"jkl-text-area--start-open\": startOpen,\n                    \"jkl-text-area--auto-expand\": autoExpand,\n                })}\n                data-testid=\"jkl-text-area\"\n                {...inputGroupProps}\n            >\n                <BaseTextArea ref={ref} {...rest} {...textAreaProps} />\n            </InputGroup>\n        );\n    },\n);\nTextArea.displayName = \"TextArea\";\n"],"names":["TextArea","forwardRef","props","ref","autoExpand","className","counter","density","errorLabel","helpLabel","inline","label","labelProps","startOpen","supportLabelProps","tooltip","description","rest","inputGroupProps","textAreaProps","jsx","InputGroup","clsx","children","BaseTextArea","displayName"],"mappings":"oOAMO,MAAMA,EAAWC,EACpB,CAACC,EAAOC,KACJ,MACIC,WAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,OAAAA,EACAC,MAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,kBAAAA,EACAC,QAAAA,EACAC,YAAAA,KACGC,GACHf,EACEgB,EAAkB,CACpBP,MAAAA,EACAJ,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAG,WAAAA,EACAF,OAAAA,EACAI,kBAAAA,EACAC,QAAAA,EACAC,YAAAA,GAEEG,EAAgB,CAAEf,WAAAA,EAAYE,QAAAA,EAASO,UAAAA,GAC7C,OACIO,EAACC,EAAA,CACGhB,UAAWiB,EAAK,gBAAiBjB,EAAW,CACxC,4BAA6BQ,EAC7B,6BAA8BT,IAElC,cAAY,mBACRc,EAEJK,WAACC,EAAA,CAAarB,IAAAA,KAAcc,KAAUE,QAKtDnB,EAASyB,YAAc"}

package/build/es/components/text-input/BaseTextInput.js

@@ -1,2 +1,2 @@
-import{jsxs as t,jsx as n}from"react/jsx-runtime";import{c as a}from"../../../clsx-BeLtu-UY.js";import i,{forwardRef as e}from"react";import{IconButton as s}from"../icon-button/IconButton.js";function o(t,n){return t?{width:t}:n?{width:`calc(${Math.min(n,40)}ch + 24px)`}:void 0}const l=e(((e,l)=>{const{action:c,align:r="left","aria-invalid":u,className:p="",density:m,maxLength:d,style:x,type:h="text",unit:f,width:j,actionButton:y,...N}=e;return t("div",{className:"jkl-text-input-wrapper","data-invalid":u,style:{...x,...o(j,d)},children:[n("input",{"aria-invalid":u,ref:l,className:a("jkl-text-input__input",p,{"jkl-text-input__input--align-right":"right"===r}),maxLength:d,type:h,...N}),f&&n("span",{className:"jkl-text-input__unit",children:f}),!c&&y&&i.cloneElement(y,{className:a("jkl-text-input-action-button",y.props.className)}),c&&!y&&n(s,{density:m,className:a("jkl-text-input-action-button",c.className),title:c.label,onClick:c.onClick,onFocus:c.onFocus,onBlur:c.onBlur,ref:c.buttonRef,type:c.type||"button",children:c.icon})]})}));l.displayName="BaseInputField";export{l as BaseTextInput};
+import{jsxs as t,jsx as n}from"react/jsx-runtime";import{c as a}from"../../../clsx-BeLtu-UY.js";import i,{forwardRef as e}from"react";import{IconButton as s}from"../icon-button/IconButton.js";function o(t,n){return t?{width:t}:n?{width:`calc(${Math.min(n,40)}ch + 24px)`}:void 0}const l=e((e,l)=>{const{action:c,align:r="left","aria-invalid":u,className:p="",density:m,maxLength:d,style:x,type:h="text",unit:f,width:j,actionButton:y,...N}=e;return t("div",{className:"jkl-text-input-wrapper","data-invalid":u,style:{...x,...o(j,d)},children:[n("input",{"aria-invalid":u,ref:l,className:a("jkl-text-input__input",p,{"jkl-text-input__input--align-right":"right"===r}),maxLength:d,type:h,...N}),f&&n("span",{className:"jkl-text-input__unit",children:f}),!c&&y&&i.cloneElement(y,{className:a("jkl-text-input-action-button",y.props.className)}),c&&!y&&n(s,{density:m,className:a("jkl-text-input-action-button",c.className),title:c.label,onClick:c.onClick,onFocus:c.onFocus,onBlur:c.onBlur,ref:c.buttonRef,type:c.type||"button",children:c.icon})]})});l.displayName="BaseInputField";export{l as BaseTextInput};
 //# sourceMappingURL=BaseTextInput.js.map