@fremtind/jokul 0.71.1 → 1.0.0

package/build/cjs/components/table/stories/table.stories.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime");require("react");const r=require("../Table.cjs"),a=require("../TableBody.cjs"),l=require("../TableCaption.cjs"),n=require("../TableCell.cjs"),t=require("../TableHead.cjs"),i=require("../TableHeader.cjs"),s=require("../TableRow.cjs"),d={title:"Komponenter/Table",component:r.Table,parameters:{layout:"centered"},tags:["autodocs"]},o=["Dato","Saksnummer","Kundenummer","Kundenavn","Milepæl","Følger saken"],c={args:{caption:e.jsx(l.TableCaption,{srOnly:!0,children:"Overskrift for skjermlesere"}),children:e.jsxs(e.Fragment,{children:[e.jsx(t.TableHead,{children:e.jsx(s.TableRow,{children:o.map(((r,a)=>e.jsx(i.TableHeader,{bold:!0,children:r},a)))})}),e.jsx(a.TableBody,{children:[["24.02.2020","20-1234567","010203 99887","Ola Nordmann","Opprettet","Siri Saksbehandler"],["13.04.2019","20-8382811","010203 99887","Kari Nordkvinne","Opprettet","Siri Saksbehandler"],["31.07.2017","20-1111","010203 99887","Kari Nordkvinne","Opprettet","Per Persen"]].map(((r,a)=>e.jsx(s.TableRow,{children:r.map(((r,a)=>e.jsx(n.TableCell,{"data-th":o[a],align:[1,2].includes(a)?"right":"left",children:r},a)))},a)))})]})},render:a=>e.jsx(r.Table,{caption:a.caption,fullWidth:!0,children:a.children})};exports.TableComponent=c,exports.default=d;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),a=require("react"),r=require("../Table.cjs"),l=require("../TableBody.cjs"),s=require("../TableCaption.cjs"),t=require("../TableCell.cjs"),i=require("../TableHead.cjs"),n=require("../TableHeader.cjs"),o=require("../TableRow.cjs"),d=require("../../../../paginated-table-data-VQZB3_Aj.cjs"),c=require("../utils.cjs"),b=require("./data.cjs");/* empty css                             *//* empty css                             */;/* empty css                            */const u={title:"Komponenter/Table",component:r.Table,subcomponents:{TableCaption:s.TableCaption,TableHead:i.TableHead,TableHeader:n.TableHeader,TableBody:l.TableBody,TableRow:o.TableRow,TableCell:t.TableCell},parameters:{layout:"centered"},tags:["autodocs"]},T={name:"Table",args:{collapseToList:!0,fullWidth:!0,caption:e.jsx(s.TableCaption,{srOnly:!0,children:"Overskrift for skjermlesere"}),children:""},render:a=>e.jsx("div",{style:{width:"90dvw"},children:e.jsxs(r.Table,{...a,children:[e.jsx(i.TableHead,{sticky:!0,children:e.jsx(o.TableRow,{children:b.skadesaker.columns.map(((a,r)=>e.jsx(n.TableHeader,{bold:!0,children:a},r)))})}),e.jsx(l.TableBody,{children:b.skadesaker.rows.map(((a,r)=>e.jsx(o.TableRow,{children:a.map(((a,r)=>e.jsx(t.TableCell,{"data-th":b.skadesaker.columns[r],align:[1,2].includes(r)?"right":"left",children:a},r)))},r)))})]})})},j={name:"useSortableTableHeader",args:{caption:e.jsx(s.TableCaption,{srOnly:!0,children:"Overskrift for skjermlesere"}),children:""},render:s=>{const[u,T]=a.useState(d.columns[0]),[j,p]=a.useState("desc"),{getSortProps:h}=c.useSortableTableHeader(u,j,((e,a)=>{T(e),p(a)}));return e.jsxs(r.Table,{caption:s.caption,fullWidth:!0,children:[e.jsx(i.TableHead,{sticky:!0,children:e.jsx(o.TableRow,{children:b.faktura.columns.slice(0,4).map(((a,r)=>e.jsx(n.TableHeader,{bold:!0,...h(a),children:a},r)))})}),e.jsx(l.TableBody,{children:b.faktura.rows.sort(((e,a)=>{if("Forfallsdato"===u){const r=new Date(e[0]).getTime(),l=new Date(a[0]).getTime();return"asc"===j?r-l:l-r}if("Beløp"===u){const r=Number(e[2]),l=Number(a[2]);return"asc"===j?r-l:l-r}return 0})).map(((a,r)=>e.jsx(o.TableRow,{children:a.slice(0,4).map(((a,r)=>e.jsx(t.TableCell,{"data-th":d.columns[r],align:[1,2].includes(r)?"right":"left",children:a.toLocaleString()},r)))},r)))})]})}};exports.StortableTable=j,exports.TableStory=T,exports.default=u;
 //# sourceMappingURL=table.stories.cjs.map

package/build/cjs/components/table/stories/table.stories.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"table.stories.cjs","sources":["../../../../../src/components/table/stories/table.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport React from \"react\";\nimport { Table } from \"../Table.js\";\nimport { TableBody } from \"../TableBody.js\";\nimport { TableCaption } from \"../TableCaption.js\";\nimport { TableCell } from \"../TableCell.js\";\nimport { TableHead } from \"../TableHead.js\";\nimport { TableHeader } from \"../TableHeader.js\";\nimport { TableRow } from \"../TableRow.js\";\nimport \"../styles/_index.scss\";\n\nconst meta = {\n    title: \"Komponenter/Table\",\n    component: Table,\n    parameters: {\n        layout: \"centered\",\n    },\n    tags: [\"autodocs\"],\n} satisfies Meta<typeof Table>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nconst columns = [\n    \"Dato\",\n    \"Saksnummer\",\n    \"Kundenummer\",\n    \"Kundenavn\",\n    \"Milepæl\",\n    \"Følger saken\",\n];\n\nconst rows = [\n    [\n        \"24.02.2020\",\n        \"20-1234567\",\n        \"010203 99887\",\n        \"Ola Nordmann\",\n        \"Opprettet\",\n        \"Siri Saksbehandler\",\n    ],\n    [\n        \"13.04.2019\",\n        \"20-8382811\",\n        \"010203 99887\",\n        \"Kari Nordkvinne\",\n        \"Opprettet\",\n        \"Siri Saksbehandler\",\n    ],\n    [\n        \"31.07.2017\",\n        \"20-1111\",\n        \"010203 99887\",\n        \"Kari Nordkvinne\",\n        \"Opprettet\",\n        \"Per Persen\",\n    ],\n];\n\nexport const TableComponent: Story = {\n    args: {\n        caption: (\n            <TableCaption srOnly>Overskrift for skjermlesere</TableCaption>\n        ),\n        children: (\n            <>\n                <TableHead>\n                    <TableRow>\n                        {columns.map((column, index) => (\n                            <TableHeader key={index} bold>\n                                {column}\n                            </TableHeader>\n                        ))}\n                    </TableRow>\n                </TableHead>\n                <TableBody>\n                    {rows.map((row, rowIndex) => (\n                        <TableRow key={rowIndex}>\n                            {row.map((cell, cellIndex) => (\n                                <TableCell\n                                    key={cellIndex}\n                                    data-th={columns[cellIndex]}\n                                    align={\n                                        [1, 2].includes(cellIndex)\n                                            ? \"right\"\n                                            : \"left\"\n                                    }\n                                >\n                                    {cell}\n                                </TableCell>\n                            ))}\n                        </TableRow>\n                    ))}\n                </TableBody>\n            </>\n        ),\n    },\n    render: (args) => (\n        <Table caption={args.caption} fullWidth>\n            {args.children}\n        </Table>\n    ),\n};\n"],"names":["meta","title","component","Table","parameters","layout","tags","columns","TableComponent","args","caption","jsx","TableCaption","srOnly","children","jsxs","Fragment","TableHead","TableRow","map","column","index","TableHeader","bold","TableBody","row","rowIndex","cell","cellIndex","TableCell","align","includes","render","fullWidth"],"mappings":"0XAWMA,EAAO,CACTC,MAAO,oBACPC,UAAWC,EAAAA,MACXC,WAAY,CACRC,OAAQ,YAEZC,KAAM,CAAC,aAMLC,EAAU,CACZ,OACA,aACA,cACA,YACA,UACA,gBA8BSC,EAAwB,CACjCC,KAAM,CACFC,QACIC,EAAAA,IAACC,eAAa,CAAAC,QAAM,EAACC,SAA2B,gCAEpDA,SAEQC,EAAAA,KAAAC,WAAA,CAAAF,SAAA,CAAAH,MAACM,EAAAA,WACGH,SAACH,EAAAA,IAAAO,WAAA,CACIJ,SAAQP,EAAAY,KAAI,CAACC,EAAQC,IACjBV,EAAAA,IAAAW,EAAAA,YAAA,CAAwBC,MAAI,EACxBT,SAAAM,GADaC,SAM7BV,EAAAA,IAAAa,EAAAA,UAAA,CACIV,SA5CR,CACT,CACI,aACA,aACA,eACA,eACA,YACA,sBAEJ,CACI,aACA,aACA,eACA,kBACA,YACA,sBAEJ,CACI,aACA,UACA,eACA,kBACA,YACA,eAqBkBK,KAAI,CAACM,EAAKC,IACZf,EAAAA,IAACO,EACIA,SAAA,CAAAJ,SAAAW,EAAIN,KAAI,CAACQ,EAAMC,IACZjB,EAAAA,IAACkB,EAAAA,UAAA,CAEG,UAAStB,EAAQqB,GACjBE,MACI,CAAC,EAAG,GAAGC,SAASH,GACV,QACA,OAGTd,SAAAa,GARIC,MAHFF,WAoBnCM,OAASvB,GACJE,MAAAR,EAAAA,MAAA,CAAMO,QAASD,EAAKC,QAASuB,WAAS,EAClCnB,SAAAL,EAAKK"}
+{"version":3,"file":"table.stories.cjs","sources":["../../../../../src/components/table/stories/table.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport React, { useState } from \"react\";\nimport { Table } from \"../Table.js\";\nimport { TableBody } from \"../TableBody.js\";\nimport { TableCaption } from \"../TableCaption.js\";\nimport { TableCell } from \"../TableCell.js\";\nimport { TableHead } from \"../TableHead.js\";\nimport { TableHeader, type TableSortDirection } from \"../TableHeader.js\";\nimport { TableRow } from \"../TableRow.js\";\nimport { columns } from \"../development/paginated-table-data.js\";\nimport { useSortableTableHeader } from \"../utils.js\";\nimport { faktura, skadesaker } from \"./data.js\";\n\nimport \"../styles/_index.scss\";\nimport \"../../description-list/styles/_index.scss\";\nimport \"../../link/styles/_index.scss\";\n\nconst meta = {\n    title: \"Komponenter/Table\",\n    component: Table,\n    subcomponents: {\n        TableCaption,\n        TableHead,\n        TableHeader,\n        TableBody,\n        TableRow,\n        TableCell,\n    },\n    parameters: {\n        layout: \"centered\",\n    },\n    tags: [\"autodocs\"],\n} satisfies Meta<typeof Table>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const TableStory: Story = {\n    name: \"Table\",\n    args: {\n        collapseToList: true,\n        fullWidth: true,\n        caption: (\n            <TableCaption srOnly>Overskrift for skjermlesere</TableCaption>\n        ),\n        children: \"\",\n    },\n    render: (args) => (\n        <div style={{ width: \"90dvw\" }}>\n            <Table {...args}>\n                <TableHead sticky={true}>\n                    <TableRow>\n                        {skadesaker.columns.map((column, index) => (\n                            <TableHeader key={index} bold>\n                                {column}\n                            </TableHeader>\n                        ))}\n                    </TableRow>\n                </TableHead>\n                <TableBody>\n                    {skadesaker.rows.map((row, rowIndex) => (\n                        <TableRow key={rowIndex}>\n                            {row.map((cell, cellIndex) => (\n                                <TableCell\n                                    key={cellIndex}\n                                    data-th={skadesaker.columns[cellIndex]}\n                                    align={\n                                        [1, 2].includes(cellIndex)\n                                            ? \"right\"\n                                            : \"left\"\n                                    }\n                                >\n                                    {cell}\n                                </TableCell>\n                            ))}\n                        </TableRow>\n                    ))}\n                </TableBody>\n            </Table>\n        </div>\n    ),\n};\n\nexport const StortableTable: Story = {\n    name: \"useSortableTableHeader\",\n    args: {\n        caption: (\n            <TableCaption srOnly>Overskrift for skjermlesere</TableCaption>\n        ),\n        children: \"\",\n    },\n    render: (args) => {\n        const [sortBy, setSortBy] = useState(columns[0]);\n        const [direction, setDirection] = useState<TableSortDirection>(\"desc\");\n\n        const handleSortChange = (\n            sortKey: string,\n            sortDirection: TableSortDirection,\n        ) => {\n            setSortBy(sortKey);\n            setDirection(sortDirection);\n        };\n\n        const { getSortProps } = useSortableTableHeader(\n            sortBy,\n            direction,\n            handleSortChange,\n        );\n\n        return (\n            <Table caption={args.caption} fullWidth>\n                <TableHead sticky={true}>\n                    <TableRow>\n                        {faktura.columns.slice(0, 4).map((column, index) => (\n                            <TableHeader\n                                key={index}\n                                bold\n                                {...getSortProps(column)}\n                            >\n                                {column}\n                            </TableHeader>\n                        ))}\n                    </TableRow>\n                </TableHead>\n                <TableBody>\n                    {faktura.rows\n                        .sort((a, b) => {\n                            if (sortBy === \"Forfallsdato\") {\n                                const timeA = new Date(a[0] as Date).getTime();\n                                const timeB = new Date(b[0] as Date).getTime();\n\n                                if (direction === \"asc\") {\n                                    return timeA - timeB;\n                                }\n\n                                return timeB - timeA;\n                            }\n\n                            if (sortBy === \"Beløp\") {\n                                const numberA = Number(a[2]);\n                                const numberB = Number(b[2]);\n\n                                if (direction === \"asc\") {\n                                    return numberA - numberB;\n                                }\n\n                                return numberB - numberA;\n                            }\n\n                            return 0;\n                        })\n                        .map((row, rowIndex) => (\n                            <TableRow key={rowIndex}>\n                                {row.slice(0, 4).map((cell, cellIndex) => (\n                                    <TableCell\n                                        key={cellIndex}\n                                        data-th={columns[cellIndex]}\n                                        align={\n                                            [1, 2].includes(cellIndex)\n                                                ? \"right\"\n                                                : \"left\"\n                                        }\n                                    >\n                                        {cell.toLocaleString()}\n                                    </TableCell>\n                                ))}\n                            </TableRow>\n                        ))}\n                </TableBody>\n            </Table>\n        );\n    },\n};\n"],"names":["meta","title","component","Table","subcomponents","TableCaption","TableHead","TableHeader","TableBody","TableRow","TableCell","parameters","layout","tags","TableStory","name","args","collapseToList","fullWidth","caption","jsx","srOnly","children","render","style","width","jsxs","sticky","skadesaker","columns","map","column","index","bold","rows","row","rowIndex","cell","cellIndex","align","includes","StortableTable","sortBy","setSortBy","useState","direction","setDirection","getSortProps","useSortableTableHeader","sortKey","sortDirection","faktura","slice","sort","a","b","timeA","Date","getTime","timeB","numberA","Number","numberB","toLocaleString"],"mappings":"omBAiBA,MAAMA,EAAO,CACTC,MAAO,oBACPC,UAAWC,EAAAA,MACXC,cAAe,CAAAC,aACXA,EAAAA,aAAAC,UACAA,EAAAA,UAAAC,YACAA,EAAAA,YAAAC,UACAA,EAAAA,UAAAC,SACAA,EAAAA,SACAC,UAAAA,EAAAA,WAEJC,WAAY,CACRC,OAAQ,YAEZC,KAAM,CAAC,aAMEC,EAAoB,CAC7BC,KAAM,QACNC,KAAM,CACFC,gBAAgB,EAChBC,WAAW,EACXC,QACIC,EAAAA,IAACf,eAAa,CAAAgB,QAAM,EAACC,SAA2B,gCAEpDA,SAAU,IAEdC,OAASP,GACLI,EAAAA,IAAC,MAAI,CAAAI,MAAO,CAAEC,MAAO,SACjBH,SAACI,EAAAA,KAAAvB,EAAAA,MAAA,IAAUa,EACPM,SAAA,CAAAF,EAAAA,IAACd,aAAUqB,QAAQ,EACfL,eAACb,EAAAA,SACI,CAAAa,SAAAM,EAAAA,WAAWC,QAAQC,KAAI,CAACC,EAAQC,IAC7BZ,EAAAA,IAACb,eAAwB0B,MAAI,EACxBX,YADaU,SAM7BZ,EAAAA,IAAAZ,EAAAA,UAAA,CACIc,SAAWM,EAAAA,WAAAM,KAAKJ,KAAI,CAACK,EAAKC,IACvBhB,EAAAA,IAACX,EAAAA,SACI,CAAAa,SAAAa,EAAIL,KAAI,CAACO,EAAMC,IACZlB,EAAAA,IAACV,EAAAA,UAAA,CAEG,UAASkB,EAAAA,WAAWC,QAAQS,GAC5BC,MACI,CAAC,EAAG,GAAGC,SAASF,GACV,QACA,OAGThB,SAAAe,GARIC,MAHFF,aAsB1BK,EAAwB,CACjC1B,KAAM,yBACNC,KAAM,CACFG,QACIC,EAAAA,IAACf,eAAa,CAAAgB,QAAM,EAACC,SAA2B,gCAEpDA,SAAU,IAEdC,OAASP,IACL,MAAO0B,EAAQC,GAAaC,EAAAA,SAASf,EAAAA,QAAQ,KACtCgB,EAAWC,GAAgBF,EAAAA,SAA6B,SAUvDG,aAAAA,GAAiBC,EAAAA,uBACrBN,EACAG,GAVqB,CACrBI,EACAC,KAEAP,EAAUM,GACVH,EAAaI,EAAa,IAS9B,cACK/C,EAAMA,MAAA,CAAAgB,QAASH,EAAKG,QAASD,WAAS,EACnCI,SAAA,CAAAF,MAACd,EAAAA,UAAU,CAAAqB,QAAQ,EACfL,SAAAF,EAAAA,IAACX,YACIa,SAAQ6B,EAAAA,QAAAtB,QAAQuB,MAAM,EAAG,GAAGtB,KAAI,CAACC,EAAQC,IACtCZ,EAAAA,IAACb,EAAAA,YAAA,CAEG0B,MAAI,KACAc,EAAahB,GAEhBT,SAAAS,GAJIC,eASpBxB,EAAAA,UACI,CAAAc,SAAA6B,EAAAA,QAAQjB,KACJmB,MAAK,CAACC,EAAGC,KACN,GAAe,iBAAXb,EAA2B,CAC3B,MAAMc,EAAQ,IAAIC,KAAKH,EAAE,IAAYI,UAC/BC,EAAQ,IAAIF,KAAKF,EAAE,IAAYG,UAErC,MAAkB,QAAdb,EACOW,EAAQG,EAGZA,EAAQH,CAAA,CAGnB,GAAe,UAAXd,EAAoB,CACpB,MAAMkB,EAAUC,OAAOP,EAAE,IACnBQ,EAAUD,OAAON,EAAE,IAEzB,MAAkB,QAAdV,EACOe,EAAUE,EAGdA,EAAUF,CAAA,CAGd,YAEV9B,KAAI,CAACK,EAAKC,IACNhB,EAAAA,IAAAX,EAAAA,SAAA,CACIa,SAAIa,EAAAiB,MAAM,EAAG,GAAGtB,KAAI,CAACO,EAAMC,IACxBlB,EAAAA,IAACV,EAAAA,UAAA,CAEG,UAASmB,UAAQS,GACjBC,MACI,CAAC,EAAG,GAAGC,SAASF,GACV,QACA,OAGThB,WAAKyC,kBARDzB,MAHFF,SAiB/B"}

package/build/cjs/components/table/stories/table.stories.d.cts

@@ -3,6 +3,14 @@ import { default as React } from 'react';
 declare const meta: {
     title: string;
     component: React.ForwardRefExoticComponent<import('../types.js').TableProps & React.RefAttributes<HTMLTableElement>>;
+    subcomponents: {
+        TableCaption: React.ForwardRefExoticComponent<import('../types.js').TableCaptionProps & React.RefAttributes<HTMLTableCaptionElement>>;
+        TableHead: React.ForwardRefExoticComponent<import('../types.js').TableHeadProps & React.RefAttributes<HTMLTableSectionElement>>;
+        TableHeader: React.ForwardRefExoticComponent<import('../types.js').TableHeaderProps & React.RefAttributes<HTMLTableCellElement>>;
+        TableBody: React.ForwardRefExoticComponent<import('../types.js').TableBodyProps & React.RefAttributes<HTMLTableSectionElement>>;
+        TableRow: React.ForwardRefExoticComponent<import('../types.js').TableRowProps & React.RefAttributes<HTMLTableRowElement>>;
+        TableCell: React.ForwardRefExoticComponent<import('../types.js').TableCellProps & React.RefAttributes<HTMLTableCellElement>>;
+    };
     parameters: {
         layout: string;
     };
@@ -10,4 +18,5 @@ declare const meta: {
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const TableComponent: Story;
+export declare const TableStory: Story;
+export declare const StortableTable: Story;

package/build/cjs/components/table/stories/tableCollapsing.stories.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),a=require("react"),r=require("../../description-list/DescriptionList.cjs"),l=require("../../link/Link.cjs"),i=require("../ExpandableTableRow.cjs"),n=require("../ExpandableTableRowController.cjs"),t=require("../Table.cjs"),s=require("../TableBody.cjs"),o=require("../TableCaption.cjs"),c=require("../TableCell.cjs"),d=require("../TableHead.cjs"),b=require("../TableHeader.cjs"),p=require("../TableRow.cjs"),j=require("../../../../paginated-table-data-VQZB3_Aj.cjs"),x=require("./data.cjs");/* empty css                             *//* empty css                             */;/* empty css                            */const u={title:"Komponenter/Table/ExpandableTableRow",component:i.ExpandableTableRow,subcomponents:{ExpandableTableRowController:n.ExpandableTableRowController},parameters:{layout:"centered"},tags:["autodocs"]},T={name:"Expandable Table",args:{colSpan:99,clickable:!1,isOpen:!1,expandedChildren:""},render:u=>e.jsx("div",{style:{width:"90dvw"},children:e.jsxs(t.Table,{fullWidth:!0,caption:e.jsx(o.TableCaption,{children:"Eksempel på ekspanderbare rader"}),children:[e.jsx(d.TableHead,{sticky:!0,children:e.jsxs(p.TableRow,{children:[x.faktura.columns.slice(0,4).map(((a,r)=>e.jsx(b.TableHeader,{bold:!0,children:a},r))),e.jsx(b.TableHeader,{})]})}),e.jsx(s.TableBody,{children:x.faktura.rows.map(((t,s)=>a.createElement(i.ExpandableTableRow,{...u,key:s,expandedChildren:e.jsxs(r.DescriptionList,{children:[x.faktura.columns.map(((l,i)=>t.map(((n,t)=>i===t&&e.jsxs(a.Fragment,{children:[e.jsx(r.DescriptionTerm,{children:l}),e.jsx(r.DescriptionDetail,{children:n.toLocaleString()})]},t))))),e.jsx(r.DescriptionTerm,{children:"Faktura"}),e.jsx(r.DescriptionDetail,{children:e.jsx(l.Link,{external:!0,target:"_blank",href:"#",children:"Åpne i ny fane"})}),e.jsx(r.DescriptionDetail,{children:e.jsx(l.Link,{download:`${t[3]} ${new Date(t[0]).toLocaleDateString()}`,href:"#",children:"Last ned"})})]})},e.jsx(c.TableCell,{children:e.jsx(l.Link,{download:`${t[3]} ${new Date(t[0]).toLocaleDateString()}`,href:"#",children:new Date(t[0]).toLocaleDateString()})}),t.slice(1,4).map(((a,r)=>e.jsx(c.TableCell,{"data-th":j.columns[r],children:a.toLocaleString()},r))),e.jsx(n.ExpandableTableRowController,{children:"Vis detaljer"}))))})]})})};exports.TableCollapse=T,exports.default=u;
+//# sourceMappingURL=tableCollapsing.stories.cjs.map

package/build/cjs/components/table/stories/tableCollapsing.stories.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tableCollapsing.stories.cjs","sources":["../../../../../src/components/table/stories/tableCollapsing.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport React, { Fragment } from \"react\";\nimport {\n    DescriptionDetail,\n    DescriptionList,\n    DescriptionTerm,\n} from \"../../description-list/index.js\";\nimport { Link } from \"../../link/index.js\";\nimport { ExpandableTableRow } from \"../ExpandableTableRow.js\";\nimport { ExpandableTableRowController } from \"../ExpandableTableRowController.js\";\nimport { Table } from \"../Table.js\";\nimport { TableBody } from \"../TableBody.js\";\nimport { TableCaption } from \"../TableCaption.js\";\nimport { TableCell } from \"../TableCell.js\";\nimport { TableHead } from \"../TableHead.js\";\nimport { TableHeader } from \"../TableHeader.js\";\nimport { TableRow } from \"../TableRow.js\";\nimport { columns } from \"../development/paginated-table-data.js\";\nimport { faktura } from \"./data.js\";\n\nimport \"../styles/_index.scss\";\nimport \"../../description-list/styles/_index.scss\";\nimport \"../../link/styles/_index.scss\";\n\nconst meta = {\n    title: \"Komponenter/Table/ExpandableTableRow\",\n    component: ExpandableTableRow,\n    subcomponents: {\n        ExpandableTableRowController,\n    },\n    parameters: {\n        layout: \"centered\",\n    },\n    tags: [\"autodocs\"],\n} satisfies Meta<typeof Table>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const TableCollapse: Story = {\n    name: \"Expandable Table\",\n    args: {\n        colSpan: 99,\n        // @ts-ignore\n        clickable: false,\n        isOpen: false,\n        expandedChildren: \"\",\n    },\n    render: (args) => (\n        <div style={{ width: \"90dvw\" }}>\n            <Table\n                fullWidth={true}\n                caption={\n                    <TableCaption>Eksempel på ekspanderbare rader</TableCaption>\n                }\n            >\n                <TableHead sticky={true}>\n                    <TableRow>\n                        {faktura.columns.slice(0, 4).map((column, index) => (\n                            <TableHeader key={index} bold>\n                                {column}\n                            </TableHeader>\n                        ))}\n                        <TableHeader />\n                    </TableRow>\n                </TableHead>\n                <TableBody>\n                    {faktura.rows.map((row, rowIndex) => (\n                        <ExpandableTableRow\n                            {...args}\n                            key={rowIndex}\n                            expandedChildren={\n                                <DescriptionList>\n                                    {faktura.columns.map(\n                                        (column, columnIndex) =>\n                                            row.map(\n                                                (cell, rowIndex) =>\n                                                    columnIndex ===\n                                                        rowIndex && (\n                                                        <Fragment\n                                                            key={rowIndex}\n                                                        >\n                                                            <DescriptionTerm>\n                                                                {column}\n                                                            </DescriptionTerm>\n                                                            <DescriptionDetail>\n                                                                {cell.toLocaleString()}\n                                                            </DescriptionDetail>\n                                                        </Fragment>\n                                                    ),\n                                            ),\n                                    )}\n                                    <DescriptionTerm>Faktura</DescriptionTerm>\n                                    <DescriptionDetail>\n                                        <Link\n                                            external\n                                            target={\"_blank\"}\n                                            href={\"#\"}\n                                        >\n                                            Åpne i ny fane\n                                        </Link>\n                                    </DescriptionDetail>\n                                    <DescriptionDetail>\n                                        <Link\n                                            download={`${row[3]} ${new Date(row[0] as Date).toLocaleDateString()}`}\n                                            href={\"#\"}\n                                        >\n                                            Last ned\n                                        </Link>\n                                    </DescriptionDetail>\n                                </DescriptionList>\n                            }\n                        >\n                            <TableCell>\n                                <Link\n                                    download={`${row[3]} ${new Date(row[0] as Date).toLocaleDateString()}`}\n                                    href={\"#\"}\n                                >\n                                    {new Date(\n                                        row[0] as Date,\n                                    ).toLocaleDateString()}\n                                </Link>\n                            </TableCell>\n                            {row.slice(1, 4).map((cell, cellIndex) => (\n                                <TableCell\n                                    key={cellIndex}\n                                    data-th={columns[cellIndex]}\n                                >\n                                    {cell.toLocaleString()}\n                                </TableCell>\n                            ))}\n                            <ExpandableTableRowController>\n                                Vis detaljer\n                            </ExpandableTableRowController>\n                        </ExpandableTableRow>\n                    ))}\n                </TableBody>\n            </Table>\n        </div>\n    ),\n};\n"],"names":["meta","title","component","ExpandableTableRow","subcomponents","ExpandableTableRowController","parameters","layout","tags","TableCollapse","name","args","colSpan","clickable","isOpen","expandedChildren","render","jsx","style","width","children","jsxs","Table","fullWidth","caption","TableCaption","TableHead","sticky","TableRow","faktura","columns","slice","map","column","index","TableHeader","bold","TableBody","rows","row","rowIndex","createElement","key","DescriptionList","columnIndex","cell","Fragment","DescriptionTerm","DescriptionDetail","toLocaleString","Link","external","target","href","download","Date","toLocaleDateString","TableCell","cellIndex"],"mappings":"2vBAwBA,MAAMA,EAAO,CACTC,MAAO,uCACPC,UAAWC,EAAAA,mBACXC,cAAe,CACXC,6BAAAA,EAAAA,8BAEJC,WAAY,CACRC,OAAQ,YAEZC,KAAM,CAAC,aAMEC,EAAuB,CAChCC,KAAM,mBACNC,KAAM,CACFC,QAAS,GAETC,WAAW,EACXC,QAAQ,EACRC,iBAAkB,IAEtBC,OAASL,GACLM,EAAAA,IAAC,OAAIC,MAAO,CAAEC,MAAO,SACjBC,SAAAC,EAAAA,KAACC,EAAAA,MAAA,CACGC,WAAW,EACXC,QACKP,EAAAA,IAAAQ,EAAAA,aAAA,CAAaL,SAA+B,oCAGjDA,SAAA,CAAAH,MAACS,EAAAA,UAAU,CAAAC,QAAQ,EACfP,SAAAC,EAAAA,KAACO,WACI,CAAAR,SAAA,CAAAS,EAAAA,QAAQC,QAAQC,MAAM,EAAG,GAAGC,KAAI,CAACC,EAAQC,UACrCC,EAAAA,YAAwB,CAAAC,MAAI,EACxBhB,SAAAa,GADaC,WAIrBC,EAAYA,YAAA,CAAA,cAGpBE,EAAAA,UACI,CAAAjB,SAAAS,EAAAA,QAAQS,KAAKN,KAAI,CAACO,EAAKC,IACpBC,EAAAA,cAACtC,EAAAA,mBAAA,IACOQ,EACJ+B,IAAKF,EACLzB,wBACK4B,kBACI,CAAAvB,SAAA,CAAAS,EAAAA,QAAQC,QAAQE,KACb,CAACC,EAAQW,IACLL,EAAIP,KACA,CAACa,EAAML,IACHI,IACIJ,GACAnB,EAAAA,KAACyB,EAAAA,SAAA,CAGG1B,SAAA,CAAAH,EAAAA,IAAC8B,mBACI3B,SACLa,IACChB,EAAAA,IAAA+B,EAAAA,kBAAA,CACI5B,SAAKyB,EAAAI,qBANLT,OAY7BvB,EAAAA,IAAC8B,mBAAgB3B,SAAO,kBACvB4B,EAAAA,kBACG,CAAA5B,SAAAH,EAAAA,IAACiC,EAAAA,KAAA,CACGC,UAAQ,EACRC,OAAQ,SACRC,KAAM,IACTjC,SAAA,2BAIJ4B,EAAAA,kBACG,CAAA5B,SAAAH,EAAAA,IAACiC,EAAAA,KAAA,CACGI,SAAU,GAAGf,EAAI,MAAM,IAAIgB,KAAKhB,EAAI,IAAYiB,uBAChDH,KAAM,IACTjC,SAAA,yBAOZqC,EAAAA,UACG,CAAArC,SAAAH,EAAAA,IAACiC,EAAAA,KAAA,CACGI,SAAU,GAAGf,EAAI,MAAM,IAAIgB,KAAKhB,EAAI,IAAYiB,uBAChDH,KAAM,IAELjC,SAAI,IAAAmC,KACDhB,EAAI,IACNiB,yBAGTjB,EAAIR,MAAM,EAAG,GAAGC,KAAI,CAACa,EAAMa,IACxBzC,EAAAA,IAACwC,EAAAA,UAAA,CAEG,UAAS3B,UAAQ4B,GAEhBtC,WAAK6B,kBAHDS,KAMbzC,EAAAA,IAACZ,gCAA6Be,SAE9B"}

package/build/cjs/components/table/stories/tableCollapsing.stories.d.cts

@@ -0,0 +1,16 @@
+import { StoryObj } from '@storybook/react';
+import { default as React } from 'react';
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import('../types.js').ExpandableTableRowProps & React.RefAttributes<HTMLTableRowElement>>;
+    subcomponents: {
+        ExpandableTableRowController: React.ForwardRefExoticComponent<import('../types.js').ExpandableTableRowControllerProps & React.RefAttributes<HTMLTableCellElement>>;
+    };
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const TableCollapse: Story;

package/build/cjs/components/table/stories/tableComplex.stories.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),r=require("react"),a=require("../../button/Button.cjs"),l=require("../../description-list/DescriptionList.cjs"),t=require("../../link/Link.cjs"),s=require("../../select/Select.cjs");require("../../select/NativeSelect.cjs"),require("../../text-input/BaseTextInput.cjs");const n=require("../../text-input/TextInput.cjs"),i=require("../ExpandableTableRow.cjs"),o=require("../ExpandableTableRowController.cjs"),c=require("../Table.cjs"),u=require("../TableBody.cjs"),d=require("../TableCaption.cjs"),b=require("../TableCell.cjs"),j=require("../TableFooter.cjs"),x=require("../TableHead.cjs"),T=require("../TableHeader.cjs"),p=require("../TablePagination.cjs"),h=require("../TableRow.cjs"),g=require("../utils.cjs"),m=require("./data.cjs");/* empty css                             *//* empty css                             *//* empty css                             *//* empty css                             *//* empty css                             */;/* empty css                            */const w={title:"Komponenter/Table",component:c.Table,subcomponents:{TableCaption:d.TableCaption,TableHead:x.TableHead,TableHeader:T.TableHeader,TableBody:u.TableBody,TableRow:h.TableRow,TableCell:b.TableCell},parameters:{layout:"centered"},tags:["autodocs"]},f={name:"Kompleks Table",args:{collapseToList:!0,fullWidth:!0,caption:e.jsx(d.TableCaption,{srOnly:!0,children:"Overskrift for skjermlesere"}),children:""},render:d=>{const w=r.useRef(null),[f,q]=r.useState(0),[k,S]=r.useState(6),[C,D]=r.useState(m.faktura.columns[0]),[L,v]=r.useState("desc"),[R,y]=r.useState(""),[P,B]=r.useState(""),[F,H]=r.useState(m.faktura.rows),I=f*k,{getSortProps:_}=g.useSortableTableHeader(C,L,((e,r)=>{D(e),v(r)}));return r.useEffect((()=>{H(m.faktura.rows.filter((e=>e.toString().toLowerCase().includes(R.toLowerCase()))).filter((e=>e[3].toString().toLowerCase().includes(P.toLowerCase()))).slice(I,I+k))}),[I,k,R,P]),e.jsxs(e.Fragment,{children:[e.jsxs("aside",{style:{display:"flex",gap:"24px",alignItems:"end",marginBlockEnd:"24px"},children:[e.jsx(n.TextInput,{label:"Søk",value:R,placeholder:"Søk",onChange:e=>y(e.target.value)}),e.jsx(s.Select,{items:[{label:"Alle statuser",value:""},"Faktura","Påminnelse","Inkasso"],label:"Status",name:"status",value:P,onChange:e=>B(e.target.value)}),e.jsx(a.Button,{onClick:()=>{y(""),B("")},children:"Fjern filter"})]}),e.jsx("div",{style:{width:"90dvw"},children:e.jsxs(c.Table,{...d,children:[e.jsx(x.TableHead,{sticky:!0,children:e.jsx(h.TableRow,{children:m.faktura.columns.slice(0,6).map(((r,a)=>e.jsx(T.TableHeader,{bold:!0,..._(r),children:r},a)))})}),e.jsx(u.TableBody,{children:0!==F.length?F.sort(((e,r)=>{if("Forfallsdato"===C){const a=new Date(e[0]).getTime(),l=new Date(r[0]).getTime();return"asc"===L?a-l:l-a}if("Beløp"===C){const a=Number(e[2]),l=Number(r[2]);return"asc"===L?a-l:l-a}return 0})).map(((a,s)=>e.jsxs(i.ExpandableTableRow,{clickable:!1,expandedChildren:e.jsxs(l.DescriptionList,{children:[m.faktura.columns.map(((t,s)=>a.map(((a,n)=>s===n&&e.jsxs(r.Fragment,{children:[e.jsx(l.DescriptionTerm,{children:t}),e.jsx(l.DescriptionDetail,{children:a.toLocaleString()})]},n))))),e.jsx(l.DescriptionTerm,{children:"Faktura"}),e.jsx(l.DescriptionDetail,{children:e.jsx(t.Link,{external:!0,target:"_blank",href:"#",children:"Åpne i ny fane"})}),e.jsx(l.DescriptionDetail,{children:e.jsx(t.Link,{download:`${a[3]} ${new Date(a[0]).toLocaleDateString()}`,href:"#",children:"Last ned"})})]}),children:[e.jsx(b.TableCell,{children:e.jsx(t.Link,{download:`${a[3]} ${new Date(a[0]).toLocaleDateString()}`,href:"#",children:new Date(a[0]).toLocaleDateString()})}),a.slice(1,6).map(((r,a)=>e.jsx(b.TableCell,{"data-th":m.faktura.columns[a],children:r.toLocaleString()},a))),e.jsx(o.ExpandableTableRowController,{children:"Vis detaljer"})]},s))):e.jsx(h.TableRow,{children:e.jsx(b.TableCell,{colSpan:99,children:"Fant ingen fakturaer."})})}),e.jsx(j.TableFooter,{children:e.jsx(h.TableRow,{children:e.jsx(b.TableCell,{colSpan:99,children:e.jsx(p.TablePagination,{activePage:f,totalNumberOfRows:m.faktura.rows.length,rowsPerPage:k,rowsPerPageItems:[6,12,24,{label:"Alle",value:F.length}],onChangeRowsPerPage:e=>{const r=Number.parseInt(e.target.value);S(r),q(0),w.current&&w.current.scrollIntoView({behavior:"smooth"})},onChange:(e,r)=>{q(r),w.current&&w.current.scrollIntoView({behavior:"smooth"})}})})})})]})})]})}};exports.TableComplex=f,exports.default=w;
+//# sourceMappingURL=tableComplex.stories.cjs.map

package/build/cjs/components/table/stories/tableComplex.stories.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tableComplex.stories.cjs","sources":["../../../../../src/components/table/stories/tableComplex.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport React, { Fragment, useEffect, useRef, useState } from \"react\";\nimport { Button } from \"../../button/index.js\";\nimport {\n    DescriptionDetail,\n    DescriptionList,\n    DescriptionTerm,\n} from \"../../description-list/index.js\";\nimport { Link } from \"../../link/index.js\";\nimport { Select } from \"../../select/index.js\";\nimport { TextInput } from \"../../text-input/index.js\";\nimport { ExpandableTableRow } from \"../ExpandableTableRow.js\";\nimport { ExpandableTableRowController } from \"../ExpandableTableRowController.js\";\nimport { Table } from \"../Table.js\";\nimport { TableBody } from \"../TableBody.js\";\nimport { TableCaption } from \"../TableCaption.js\";\nimport { TableCell } from \"../TableCell.js\";\nimport { TableFooter } from \"../TableFooter.js\";\nimport { TableHead } from \"../TableHead.js\";\nimport { TableHeader, type TableSortDirection } from \"../TableHeader.js\";\nimport { TablePagination } from \"../TablePagination.js\";\nimport { TableRow } from \"../TableRow.js\";\nimport { useSortableTableHeader } from \"../utils.js\";\nimport { faktura } from \"./data.js\";\n\nimport \"../styles/_index.scss\";\nimport \"../../description-list/styles/_index.scss\";\nimport \"../../link/styles/_index.scss\";\nimport \"../../button/styles/_index.scss\";\nimport \"../../combobox/styles/_index.scss\";\nimport \"../../text-input/styles/_index.scss\";\n\nconst meta = {\n    title: \"Komponenter/Table\",\n    component: Table,\n    subcomponents: {\n        TableCaption,\n        TableHead,\n        TableHeader,\n        TableBody,\n        TableRow,\n        TableCell,\n    },\n    parameters: {\n        layout: \"centered\",\n    },\n    tags: [\"autodocs\"],\n} satisfies Meta<typeof Table>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const TableComplex: Story = {\n    name: \"Kompleks Table\",\n    args: {\n        collapseToList: true,\n        fullWidth: true,\n        caption: (\n            <TableCaption srOnly>Overskrift for skjermlesere</TableCaption>\n        ),\n        children: \"\",\n    },\n    render: (args) => {\n        const ref = useRef<HTMLTableElement>(null);\n        const [activePage, setActivePage] = useState(0);\n        const [rowsPerPage, setRowsPerPage] = useState(6);\n        const [sortBy, setSortBy] = useState(faktura.columns[0]);\n        const [direction, setDirection] = useState<TableSortDirection>(\"desc\");\n        const [search, setSearch] = useState(\"\");\n        const [status, setStatus] = useState(\"\");\n        const [filteredRows, setFilteredRows] = useState(faktura.rows);\n\n        const startIndex = activePage * rowsPerPage;\n\n        const handleSortChange = (\n            sortKey: string,\n            sortDirection: TableSortDirection,\n        ) => {\n            setSortBy(sortKey);\n            setDirection(sortDirection);\n        };\n\n        const { getSortProps } = useSortableTableHeader(\n            sortBy,\n            direction,\n            handleSortChange,\n        );\n\n        useEffect(() => {\n            setFilteredRows(\n                faktura.rows\n                    .filter((row) =>\n                        row\n                            .toString()\n                            .toLowerCase()\n                            .includes(search.toLowerCase()),\n                    )\n                    .filter((row) =>\n                        row[3]\n                            .toString()\n                            .toLowerCase()\n                            .includes(status.toLowerCase()),\n                    )\n                    .slice(startIndex, startIndex + rowsPerPage),\n            );\n        }, [startIndex, rowsPerPage, search, status]);\n\n        return (\n            <>\n                <aside\n                    style={{\n                        display: \"flex\",\n                        gap: \"24px\",\n                        alignItems: \"end\",\n                        marginBlockEnd: \"24px\",\n                    }}\n                >\n                    <TextInput\n                        label={\"Søk\"}\n                        value={search}\n                        placeholder={\"Søk\"}\n                        onChange={(e) => setSearch(e.target.value)}\n                    />\n                    <Select\n                        items={[\n                            { label: \"Alle statuser\", value: \"\" },\n                            \"Faktura\",\n                            \"Påminnelse\",\n                            \"Inkasso\",\n                        ]}\n                        label={\"Status\"}\n                        name={\"status\"}\n                        value={status}\n                        onChange={(e) => setStatus(e.target.value)}\n                    />\n\n                    <Button\n                        onClick={() => {\n                            setSearch(\"\");\n                            setStatus(\"\");\n                        }}\n                    >\n                        Fjern filter\n                    </Button>\n                </aside>\n                <div style={{ width: \"90dvw\" }}>\n                    <Table {...args}>\n                        <TableHead sticky={true}>\n                            <TableRow>\n                                {faktura.columns\n                                    .slice(0, 6)\n                                    .map((column, index) => (\n                                        <TableHeader\n                                            key={index}\n                                            bold\n                                            {...getSortProps(column)}\n                                        >\n                                            {column}\n                                        </TableHeader>\n                                    ))}\n                            </TableRow>\n                        </TableHead>\n                        <TableBody>\n                            {filteredRows.length !== 0 ? (\n                                filteredRows\n                                    .sort((a, b) => {\n                                        if (sortBy === \"Forfallsdato\") {\n                                            const timeA = new Date(\n                                                a[0] as Date,\n                                            ).getTime();\n                                            const timeB = new Date(\n                                                b[0] as Date,\n                                            ).getTime();\n\n                                            if (direction === \"asc\") {\n                                                return timeA - timeB;\n                                            }\n\n                                            return timeB - timeA;\n                                        }\n\n                                        if (sortBy === \"Beløp\") {\n                                            const numberA = Number(a[2]);\n                                            const numberB = Number(b[2]);\n\n                                            if (direction === \"asc\") {\n                                                return numberA - numberB;\n                                            }\n\n                                            return numberB - numberA;\n                                        }\n\n                                        return 0;\n                                    })\n                                    .map((row, rowIndex) => (\n                                        <ExpandableTableRow\n                                            // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                                            // @ts-ignore\n                                            clickable={false}\n                                            key={rowIndex}\n                                            expandedChildren={\n                                                <DescriptionList>\n                                                    {faktura.columns.map(\n                                                        (column, columnIndex) =>\n                                                            row.map(\n                                                                (\n                                                                    cell,\n                                                                    rowIndex,\n                                                                ) =>\n                                                                    columnIndex ===\n                                                                        rowIndex && (\n                                                                        <Fragment\n                                                                            key={\n                                                                                rowIndex\n                                                                            }\n                                                                        >\n                                                                            <DescriptionTerm>\n                                                                                {\n                                                                                    column\n                                                                                }\n                                                                            </DescriptionTerm>\n                                                                            <DescriptionDetail>\n                                                                                {cell.toLocaleString()}\n                                                                            </DescriptionDetail>\n                                                                        </Fragment>\n                                                                    ),\n                                                            ),\n                                                    )}\n                                                    <DescriptionTerm>\n                                                        Faktura\n                                                    </DescriptionTerm>\n                                                    <DescriptionDetail>\n                                                        <Link\n                                                            external\n                                                            target={\"_blank\"}\n                                                            href={\"#\"}\n                                                        >\n                                                            Åpne i ny fane\n                                                        </Link>\n                                                    </DescriptionDetail>\n                                                    <DescriptionDetail>\n                                                        <Link\n                                                            download={`${row[3]} ${new Date(row[0] as Date).toLocaleDateString()}`}\n                                                            href={\"#\"}\n                                                        >\n                                                            Last ned\n                                                        </Link>\n                                                    </DescriptionDetail>\n                                                </DescriptionList>\n                                            }\n                                        >\n                                            <TableCell>\n                                                <Link\n                                                    download={`${row[3]} ${new Date(row[0] as Date).toLocaleDateString()}`}\n                                                    href={\"#\"}\n                                                >\n                                                    {new Date(\n                                                        row[0] as Date,\n                                                    ).toLocaleDateString()}\n                                                </Link>\n                                            </TableCell>\n                                            {row\n                                                .slice(1, 6)\n                                                .map((cell, cellIndex) => (\n                                                    <TableCell\n                                                        key={cellIndex}\n                                                        data-th={\n                                                            faktura.columns[\n                                                                cellIndex\n                                                            ]\n                                                        }\n                                                    >\n                                                        {cell.toLocaleString()}\n                                                    </TableCell>\n                                                ))}\n                                            <ExpandableTableRowController>\n                                                Vis detaljer\n                                            </ExpandableTableRowController>\n                                        </ExpandableTableRow>\n                                    ))\n                            ) : (\n                                <TableRow>\n                                    <TableCell colSpan={99}>\n                                        Fant ingen fakturaer.\n                                    </TableCell>\n                                </TableRow>\n                            )}\n                        </TableBody>\n                        <TableFooter>\n                            <TableRow>\n                                <TableCell colSpan={99}>\n                                    <TablePagination\n                                        activePage={activePage}\n                                        totalNumberOfRows={faktura.rows.length}\n                                        rowsPerPage={rowsPerPage}\n                                        rowsPerPageItems={[\n                                            6,\n                                            12,\n                                            24,\n                                            {\n                                                label: \"Alle\",\n                                                value: filteredRows.length,\n                                            },\n                                        ]}\n                                        onChangeRowsPerPage={(e) => {\n                                            const newRowsPerPage =\n                                                Number.parseInt(e.target.value);\n                                            setRowsPerPage(newRowsPerPage);\n                                            setActivePage(0);\n                                            if (ref.current) {\n                                                ref.current.scrollIntoView({\n                                                    behavior: \"smooth\",\n                                                });\n                                            }\n                                        }}\n                                        onChange={(_, toPage) => {\n                                            setActivePage(toPage);\n                                            if (ref.current) {\n                                                ref.current.scrollIntoView({\n                                                    behavior: \"smooth\",\n                                                });\n                                            }\n                                        }}\n                                    />\n                                </TableCell>\n                            </TableRow>\n                        </TableFooter>\n                    </Table>\n                </div>\n            </>\n        );\n    },\n};\n"],"names":["meta","title","component","Table","subcomponents","TableCaption","TableHead","TableHeader","TableBody","TableRow","TableCell","parameters","layout","tags","TableComplex","name","args","collapseToList","fullWidth","caption","jsx","srOnly","children","render","ref","useRef","activePage","setActivePage","useState","rowsPerPage","setRowsPerPage","sortBy","setSortBy","faktura","columns","direction","setDirection","search","setSearch","status","setStatus","filteredRows","setFilteredRows","rows","startIndex","getSortProps","useSortableTableHeader","sortKey","sortDirection","useEffect","filter","row","toString","toLowerCase","includes","slice","jsxs","Fragment","style","display","gap","alignItems","marginBlockEnd","TextInput","label","value","placeholder","onChange","e","target","Select","items","Button","onClick","width","sticky","map","column","index","bold","length","sort","a","b","timeA","Date","getTime","timeB","numberA","Number","numberB","rowIndex","ExpandableTableRow","clickable","expandedChildren","DescriptionList","columnIndex","cell","DescriptionTerm","DescriptionDetail","toLocaleString","Link","external","href","download","toLocaleDateString","cellIndex","ExpandableTableRowController","colSpan","TableFooter","TablePagination","totalNumberOfRows","rowsPerPageItems","onChangeRowsPerPage","newRowsPerPage","parseInt","current","scrollIntoView","behavior","_","toPage"],"mappings":"knCAgCA,MAAMA,EAAO,CACTC,MAAO,oBACPC,UAAWC,EAAAA,MACXC,cAAe,CAAAC,aACXA,EAAAA,aAAAC,UACAA,EAAAA,UAAAC,YACAA,EAAAA,YAAAC,UACAA,EAAAA,UAAAC,SACAA,EAAAA,SACAC,UAAAA,EAAAA,WAEJC,WAAY,CACRC,OAAQ,YAEZC,KAAM,CAAC,aAMEC,EAAsB,CAC/BC,KAAM,iBACNC,KAAM,CACFC,gBAAgB,EAChBC,WAAW,EACXC,QACIC,EAAAA,IAACf,eAAa,CAAAgB,QAAM,EAACC,SAA2B,gCAEpDA,SAAU,IAEdC,OAASP,IACC,MAAAQ,EAAMC,SAAyB,OAC9BC,EAAYC,GAAiBC,EAAAA,SAAS,IACtCC,EAAaC,GAAkBF,EAAAA,SAAS,IACxCG,EAAQC,GAAaJ,WAASK,UAAQC,QAAQ,KAC9CC,EAAWC,GAAgBR,EAAAA,SAA6B,SACxDS,EAAQC,GAAaV,EAAAA,SAAS,KAC9BW,EAAQC,GAAaZ,EAAAA,SAAS,KAC9Ba,EAAcC,GAAmBd,EAAAA,SAASK,EAAAA,QAAQU,MAEnDC,EAAalB,EAAaG,GAUxBgB,aAAAA,GAAiBC,EAAAA,uBACrBf,EACAI,GAVqB,CACrBY,EACAC,KAEAhB,EAAUe,GACVX,EAAaY,EAAa,IAS9BC,OAAAA,EAAAA,WAAU,KACNP,EACIT,UAAQU,KACHO,QAAQC,GACLA,EACKC,WACAC,cACAC,SAASjB,EAAOgB,iBAExBH,QAAQC,GACLA,EAAI,GACCC,WACAC,cACAC,SAASf,EAAOc,iBAExBE,MAAMX,EAAYA,EAAaf,GACxC,GACD,CAACe,EAAYf,EAAaQ,EAAQE,IAI7BiB,EAAAA,KAAAC,WAAA,CAAAnC,SAAA,CAAAkC,EAAAA,KAAC,QAAA,CACGE,MAAO,CACHC,QAAS,OACTC,IAAK,OACLC,WAAY,MACZC,eAAgB,QAGpBxC,SAAA,CAAAF,EAAAA,IAAC2C,EAAAA,UAAA,CACGC,MAAO,MACPC,MAAO5B,EACP6B,YAAa,MACbC,SAAWC,GAAM9B,EAAU8B,EAAEC,OAAOJ,SAExC7C,EAAAA,IAACkD,EAAAA,OAAA,CACGC,MAAO,CACH,CAAEP,MAAO,gBAAiBC,MAAO,IACjC,UACA,aACA,WAEJD,MAAO,SACPjD,KAAM,SACNkD,MAAO1B,EACP4B,SAAWC,GAAM5B,EAAU4B,EAAEC,OAAOJ,SAGxC7C,EAAAA,IAACoD,EAAAA,OAAA,CACGC,QAAS,KACLnC,EAAU,IACVE,EAAU,GAAE,EAEnBlB,SAAA,oBAILF,EAAAA,IAAC,MAAI,CAAAsC,MAAO,CAAEgB,MAAO,SACjBpD,SAAAkC,EAAAA,KAACrD,EAAOA,MAAA,IAAGa,EACPM,SAAA,CAAAF,MAACd,EAAAA,UAAU,CAAAqE,QAAQ,EACfrD,SAAAF,EAAAA,IAACX,YACIa,SAAQW,EAAAA,QAAAC,QACJqB,MAAM,EAAG,GACTqB,KAAI,CAACC,EAAQC,IACV1D,EAAAA,IAACb,EAAAA,YAAA,CAEGwE,MAAI,KACAlC,EAAagC,GAEhBvD,SAAAuD,GAJIC,SASzB1D,EAAAA,IAACZ,aACIc,SAAwB,IAAXmB,EAAAuC,OACVvC,EACKwC,MAAK,CAACC,EAAGC,KACN,GAAe,iBAAXpD,EAA2B,CAC3B,MAAMqD,EAAQ,IAAIC,KACdH,EAAE,IACJI,UACIC,EAAQ,IAAIF,KACdF,EAAE,IACJG,UAEF,MAAkB,QAAdnD,EACOiD,EAAQG,EAGZA,EAAQH,CAAA,CAGnB,GAAe,UAAXrD,EAAoB,CACpB,MAAMyD,EAAUC,OAAOP,EAAE,IACnBQ,EAAUD,OAAON,EAAE,IAEzB,MAAkB,QAAdhD,EACOqD,EAAUE,EAGdA,EAAUF,CAAA,CAGd,OAAA,KAEVZ,KAAI,CAACzB,EAAKwC,IACPnC,EAAAA,KAACoC,EAAAA,mBAAA,CAGGC,WAAW,EAEXC,wBACKC,kBACI,CAAAzE,SAAA,CAAAW,EAAAA,QAAQC,QAAQ0C,KACb,CAACC,EAAQmB,IACL7C,EAAIyB,KACA,CACIqB,EACAN,IAEAK,IACIL,GACAnC,EAAAA,KAACC,EAAAA,SAAA,CAKGnC,SAAA,CAAAF,EAAAA,IAAC8E,mBAEO5E,SAERuD,IACCzD,EAAAA,IAAA+E,EAAAA,kBAAA,CACI7E,SAAK2E,EAAAG,qBATNT,OAe5BvE,EAAAA,IAAC8E,mBAAgB5E,SAEjB,kBACC6E,EAAAA,kBACG,CAAA7E,SAAAF,EAAAA,IAACiF,EAAAA,KAAA,CACGC,UAAQ,EACRjC,OAAQ,SACRkC,KAAM,IACTjF,SAAA,2BAIJ6E,EAAAA,kBACG,CAAA7E,SAAAF,EAAAA,IAACiF,EAAAA,KAAA,CACGG,SAAU,GAAGrD,EAAI,MAAM,IAAIkC,KAAKlC,EAAI,IAAYsD,uBAChDF,KAAM,IACTjF,SAAA,kBAObA,SAAA,CAAAF,MAACV,EAAAA,UACG,CAAAY,SAAAF,EAAAA,IAACiF,EAAAA,KAAA,CACGG,SAAU,GAAGrD,EAAI,MAAM,IAAIkC,KAAKlC,EAAI,IAAYsD,uBAChDF,KAAM,IAELjF,SAAI,IAAA+D,KACDlC,EAAI,IACNsD,yBAGTtD,EACII,MAAM,EAAG,GACTqB,KAAI,CAACqB,EAAMS,IACRtF,EAAAA,IAACV,EAAAA,UAAA,CAEG,UACIuB,EAAAA,QAAQC,QACJwE,GAIPpF,WAAK8E,kBAPDM,KAUjBtF,EAAAA,IAACuF,gCAA6BrF,SAE9B,mBA9EKqE,KAkFjBvE,EAAAA,IAACX,EAAAA,SACG,CAAAa,SAAAF,EAAAA,IAACV,aAAUkG,QAAS,GAAItF,SAExB,oCAIXuF,EAAAA,YACG,CAAAvF,SAAAF,EAAAA,IAACX,EAAAA,UACGa,SAACF,EAAAA,IAAAV,EAAAA,UAAA,CAAUkG,QAAS,GAChBtF,SAAAF,EAAAA,IAAC0F,EAAAA,gBAAA,CACGpF,WAAAA,EACAqF,kBAAmB9E,EAAAA,QAAQU,KAAKqC,OAChCnD,YAAAA,EACAmF,iBAAkB,CACd,EACA,GACA,GACA,CACIhD,MAAO,OACPC,MAAOxB,EAAauC,SAG5BiC,oBAAsB7C,IAClB,MAAM8C,EACFzB,OAAO0B,SAAS/C,EAAEC,OAAOJ,OAC7BnC,EAAeoF,GACfvF,EAAc,GACVH,EAAI4F,SACJ5F,EAAI4F,QAAQC,eAAe,CACvBC,SAAU,UACb,EAGTnD,SAAU,CAACoD,EAAGC,KACV7F,EAAc6F,GACVhG,EAAI4F,SACJ5F,EAAI4F,QAAQC,eAAe,CACvBC,SAAU,UACb,iBASrC"}

package/build/cjs/components/table/stories/tableComplex.stories.d.cts

@@ -0,0 +1,21 @@
+import { StoryObj } from '@storybook/react';
+import { default as React } from 'react';
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import('../types.js').TableProps & React.RefAttributes<HTMLTableElement>>;
+    subcomponents: {
+        TableCaption: React.ForwardRefExoticComponent<import('../types.js').TableCaptionProps & React.RefAttributes<HTMLTableCaptionElement>>;
+        TableHead: React.ForwardRefExoticComponent<import('../types.js').TableHeadProps & React.RefAttributes<HTMLTableSectionElement>>;
+        TableHeader: React.ForwardRefExoticComponent<import('../types.js').TableHeaderProps & React.RefAttributes<HTMLTableCellElement>>;
+        TableBody: React.ForwardRefExoticComponent<import('../types.js').TableBodyProps & React.RefAttributes<HTMLTableSectionElement>>;
+        TableRow: React.ForwardRefExoticComponent<import('../types.js').TableRowProps & React.RefAttributes<HTMLTableRowElement>>;
+        TableCell: React.ForwardRefExoticComponent<import('../types.js').TableCellProps & React.RefAttributes<HTMLTableCellElement>>;
+    };
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const TableComplex: Story;

package/build/cjs/components/table/stories/tableFiltering.stories.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),a=require("react"),l=require("../../button/Button.cjs"),r=require("../../link/Link.cjs"),t=require("../../select/Select.cjs");require("../../select/NativeSelect.cjs"),require("../../text-input/BaseTextInput.cjs");const s=require("../../text-input/TextInput.cjs"),i=require("../Table.cjs"),n=require("../TableBody.cjs"),o=require("../TableCaption.cjs"),c=require("../TableCell.cjs"),u=require("../TableHead.cjs"),d=require("../TableHeader.cjs"),b=require("../TableRow.cjs"),j=require("./data.cjs");/* empty css                             *//* empty css                             *//* empty css                             *//* empty css                             *//* empty css                             */;/* empty css                            */const T={title:"Komponenter/Table",component:i.Table,subcomponents:{TableCaption:o.TableCaption,TableHead:u.TableHead,TableHeader:d.TableHeader,TableBody:n.TableBody,TableRow:b.TableRow,TableCell:c.TableCell},parameters:{layout:"centered"},tags:["autodocs"]},x={name:"Filtrering av data",args:{collapseToList:!0,fullWidth:!0,caption:e.jsx(o.TableCaption,{srOnly:!0,children:"Overskrift for skjermlesere"}),children:""},render:o=>{const[T,x]=a.useState(""),[p,h]=a.useState(""),[q,g]=a.useState(j.faktura.rows);return a.useEffect((()=>{g(j.faktura.rows.filter((e=>e.toString().toLowerCase().includes(T.toLowerCase()))).filter((e=>e[3].toString().toLowerCase().includes(p.toLowerCase()))))}),[T,p]),e.jsxs("div",{style:{width:"90dvw"},children:[e.jsxs("aside",{style:{display:"flex",gap:"24px",alignItems:"end",marginBlockEnd:"24px"},children:[e.jsx(s.TextInput,{label:"Søk",value:T,placeholder:"Søk",onChange:e=>x(e.target.value)}),e.jsx(t.Select,{items:[{label:"Alle statuser",value:""},"Faktura","Påminnelse","Inkasso"],label:"Status",name:"status",value:p,onChange:e=>h(e.target.value)}),e.jsx(l.Button,{onClick:()=>{x(""),h("")},children:"Fjern filter"})]}),e.jsxs(i.Table,{...o,children:[e.jsx(u.TableHead,{sticky:!0,children:e.jsx(b.TableRow,{children:j.faktura.columns.slice(0).map(((a,l)=>e.jsx(d.TableHeader,{bold:!0,children:a},l)))})}),e.jsx(n.TableBody,{children:0!==q.length?q.map(((a,l)=>e.jsxs(b.TableRow,{children:[e.jsx(c.TableCell,{children:e.jsx(r.Link,{download:`${a[3]} ${new Date(a[0]).toLocaleDateString()}`,href:"#",children:new Date(a[0]).toLocaleDateString()})}),a.slice(1).map(((a,l)=>e.jsx(c.TableCell,{"data-th":j.faktura.columns[l],children:a.toLocaleString()},l)))]},l))):e.jsx(b.TableRow,{children:e.jsx(c.TableCell,{colSpan:99,children:"Fant ingen fakturaer."})})})]})]})}};exports.TableFiltering=x,exports.default=T;
+//# sourceMappingURL=tableFiltering.stories.cjs.map

package/build/cjs/components/table/stories/tableFiltering.stories.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tableFiltering.stories.cjs","sources":["../../../../../src/components/table/stories/tableFiltering.stories.tsx"],"sourcesContent":["import type {Meta, StoryObj} from \"@storybook/react\";\nimport React, {useEffect, useState} from \"react\";\nimport {Button} from \"../../button/index.js\";\nimport {Link} from \"../../link/index.js\";\nimport {Select} from \"../../select/index.js\";\nimport {TextInput} from \"../../text-input/index.js\";\nimport {Table} from \"../Table.js\";\nimport {TableBody} from \"../TableBody.js\";\nimport {TableCaption} from \"../TableCaption.js\";\nimport {TableCell} from \"../TableCell.js\";\nimport {TableHead} from \"../TableHead.js\";\nimport {TableHeader} from \"../TableHeader.js\";\nimport {TableRow} from \"../TableRow.js\";\nimport {faktura} from \"./data.js\";\n\nimport \"../styles/_index.scss\";\nimport \"../../description-list/styles/_index.scss\";\nimport \"../../button/styles/_index.scss\";\nimport \"../../combobox/styles/_index.scss\";\nimport \"../../text-input/styles/_index.scss\";\nimport \"../../link/styles/_index.scss\";\n\nconst meta = {\n    title: \"Komponenter/Table\",\n    component: Table,\n    subcomponents: {\n        TableCaption,\n        TableHead,\n        TableHeader,\n        TableBody,\n        TableRow,\n        TableCell,\n    },\n    parameters: {\n        layout: \"centered\",\n    },\n    tags: [\"autodocs\"],\n} satisfies Meta<typeof Table>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const TableFiltering: Story = {\n    name: \"Filtrering av data\",\n    args: {\n        collapseToList: true,\n        fullWidth: true,\n        caption: (\n            <TableCaption srOnly>Overskrift for skjermlesere</TableCaption>\n        ),\n        children: \"\",\n    },\n    render: (args) => {\n        const [search, setSearch] = useState(\"\");\n        const [status, setStatus] = useState(\"\");\n        const [filteredRows, setFilteredRows] = useState(faktura.rows);\n\n        useEffect(() => {\n            setFilteredRows(\n                faktura.rows\n                    .filter((row) =>\n                        row\n                            .toString()\n                            .toLowerCase()\n                            .includes(search.toLowerCase()),\n                    )\n                    .filter((row) =>\n                        row[3]\n                            .toString()\n                            .toLowerCase()\n                            .includes(status.toLowerCase()),\n                    ),\n            );\n        }, [search, status]);\n\n        return (\n            <div style={{width: \"90dvw\"}}>\n                <aside\n                    style={{\n                        display: \"flex\",\n                        gap: \"24px\",\n                        alignItems: \"end\",\n                        marginBlockEnd: \"24px\",\n                    }}\n                >\n                    <TextInput\n                        label={\"Søk\"}\n                        value={search}\n                        placeholder={\"Søk\"}\n                        onChange={(e) => setSearch(e.target.value)}\n                    />\n                    <Select\n                        items={[\n                            {label: \"Alle statuser\", value: \"\"},\n                            \"Faktura\",\n                            \"Påminnelse\",\n                            \"Inkasso\",\n                        ]}\n                        label={\"Status\"}\n                        name={\"status\"}\n                        value={status}\n                        onChange={(e) => setStatus(e.target.value)}\n                    />\n\n                    <Button\n                        onClick={() => {\n                            setSearch(\"\");\n                            setStatus(\"\");\n                        }}\n                    >\n                        Fjern filter\n                    </Button>\n                </aside>\n                <Table {...args}>\n                    <TableHead sticky={true}>\n                        <TableRow>\n                            {faktura.columns.slice(0).map((column, index) => (\n                                <TableHeader key={index} bold>\n                                    {column}\n                                </TableHeader>\n                            ))}\n                        </TableRow>\n                    </TableHead>\n                    <TableBody>\n                        {filteredRows.length !== 0 ? (\n                            filteredRows.map((row, rowIndex) => (\n                                <TableRow key={rowIndex}>\n                                    <TableCell>\n                                        <Link\n                                            download={`${row[3]} ${new Date(row[0] as Date).toLocaleDateString()}`}\n                                            href={\"#\"}\n                                        >\n                                            {new Date(\n                                                row[0] as Date,\n                                            ).toLocaleDateString()}\n                                        </Link>\n                                    </TableCell>\n                                    {row.slice(1).map((cell, cellIndex) => (\n                                        <TableCell\n                                            key={cellIndex}\n                                            data-th={faktura.columns[cellIndex]}\n                                        >\n                                            {cell.toLocaleString()}\n                                        </TableCell>\n                                    ))}\n                                </TableRow>\n                            ))\n                        ) : (\n                            <TableRow>\n                                <TableCell colSpan={99}>\n                                    Fant ingen fakturaer.\n                                </TableCell>\n                            </TableRow>\n                        )}\n                    </TableBody>\n                </Table>\n            </div>\n        );\n    },\n};\n"],"names":["meta","title","component","Table","subcomponents","TableCaption","TableHead","TableHeader","TableBody","TableRow","TableCell","parameters","layout","tags","TableFiltering","name","args","collapseToList","fullWidth","caption","jsx","srOnly","children","render","search","setSearch","useState","status","setStatus","filteredRows","setFilteredRows","faktura","rows","useEffect","filter","row","toString","toLowerCase","includes","style","width","jsxs","display","gap","alignItems","marginBlockEnd","TextInput","label","value","placeholder","onChange","e","target","Select","items","Button","onClick","sticky","columns","slice","map","column","index","bold","length","rowIndex","Link","download","Date","toLocaleDateString","href","cell","cellIndex","toLocaleString","colSpan"],"mappings":"o4BAsBA,MAAMA,EAAO,CACTC,MAAO,oBACPC,UAAWC,EAAAA,MACXC,cAAe,CAAAC,aACXA,EAAAA,aAAAC,UACAA,EAAAA,UAAAC,YACAA,EAAAA,YAAAC,UACAA,EAAAA,UAAAC,SACAA,EAAAA,SACAC,UAAAA,EAAAA,WAEJC,WAAY,CACRC,OAAQ,YAEZC,KAAM,CAAC,aAMEC,EAAwB,CACjCC,KAAM,qBACNC,KAAM,CACFC,gBAAgB,EAChBC,WAAW,EACXC,QACIC,EAAAA,IAACf,eAAa,CAAAgB,QAAM,EAACC,SAA2B,gCAEpDA,SAAU,IAEdC,OAASP,IACL,MAAOQ,EAAQC,GAAaC,EAAAA,SAAS,KAC9BC,EAAQC,GAAaF,EAAAA,SAAS,KAC9BG,EAAcC,GAAmBJ,EAAAA,SAASK,EAAAA,QAAQC,MAEzDC,OAAAA,EAAAA,WAAU,KACNH,EACIC,UAAQC,KACHE,QAAQC,GACLA,EACKC,WACAC,cACAC,SAASd,EAAOa,iBAExBH,QAAQC,GACLA,EAAI,GACCC,WACAC,cACAC,SAASX,EAAOU,iBAEjC,GACD,CAACb,EAAQG,WAGP,MAAI,CAAAY,MAAO,CAACC,MAAO,SAChBlB,SAAA,CAAAmB,EAAAA,KAAC,QAAA,CACGF,MAAO,CACHG,QAAS,OACTC,IAAK,OACLC,WAAY,MACZC,eAAgB,QAGpBvB,SAAA,CAAAF,EAAAA,IAAC0B,EAAAA,UAAA,CACGC,MAAO,MACPC,MAAOxB,EACPyB,YAAa,MACbC,SAAWC,GAAM1B,EAAU0B,EAAEC,OAAOJ,SAExC5B,EAAAA,IAACiC,EAAAA,OAAA,CACGC,MAAO,CACH,CAACP,MAAO,gBAAiBC,MAAO,IAChC,UACA,aACA,WAEJD,MAAO,SACPhC,KAAM,SACNiC,MAAOrB,EACPuB,SAAWC,GAAMvB,EAAUuB,EAAEC,OAAOJ,SAGxC5B,EAAAA,IAACmC,EAAAA,OAAA,CACGC,QAAS,KACL/B,EAAU,IACVG,EAAU,GAAE,EAEnBN,SAAA,oBAILmB,EAAAA,KAACtC,EAAOA,MAAA,IAAGa,EACPM,SAAA,CAACF,EAAAA,IAAAd,EAAAA,UAAA,CAAUmD,QAAQ,EACfnC,SAAAF,EAAAA,IAACX,YACIa,SAAQS,EAAAA,QAAA2B,QAAQC,MAAM,GAAGC,KAAI,CAACC,EAAQC,UAClCvD,EAAAA,YAAwB,CAAAwD,MAAI,EACxBzC,SADauC,GAAAC,SAM9B1C,EAAAA,IAACZ,EACIA,UAAA,CAAAc,SAAwB,IAAxBO,EAAamC,OACVnC,EAAa+B,KAAI,CAACzB,EAAK8B,IACnBxB,EAAAA,KAAChC,EACGA,SAAA,CAAAa,SAAA,CAAAF,MAACV,EAAAA,UACG,CAAAY,SAAAF,EAAAA,IAAC8C,EAAAA,KAAA,CACGC,SAAU,GAAGhC,EAAI,MAAM,IAAIiC,KAAKjC,EAAI,IAAYkC,uBAChDC,KAAM,IAELhD,SAAI,IAAA8C,KACDjC,EAAI,IACNkC,yBAGTlC,EAAIwB,MAAM,GAAGC,KAAI,CAACW,EAAMC,IACrBpD,EAAAA,IAACV,EAAAA,UAAA,CAEG,UAASqB,EAAAA,QAAQ2B,QAAQc,GAExBlD,WAAKmD,kBAHDD,OAbFP,KAsBlB7C,EAAAA,IAAAX,EAAAA,SAAA,CACGa,SAACF,EAAAA,IAAAV,EAAAA,UAAA,CAAUgE,QAAS,GAAIpD,SAExB,mCAKpB"}

package/build/cjs/components/table/stories/tableFiltering.stories.d.cts

@@ -0,0 +1,21 @@
+import { StoryObj } from '@storybook/react';
+import { default as React } from 'react';
+declare const meta: {
+    title: string;
+    component: React.ForwardRefExoticComponent<import('../types.js').TableProps & React.RefAttributes<HTMLTableElement>>;
+    subcomponents: {
+        TableCaption: React.ForwardRefExoticComponent<import('../types.js').TableCaptionProps & React.RefAttributes<HTMLTableCaptionElement>>;
+        TableHead: React.ForwardRefExoticComponent<import('../types.js').TableHeadProps & React.RefAttributes<HTMLTableSectionElement>>;
+        TableHeader: React.ForwardRefExoticComponent<import('../types.js').TableHeaderProps & React.RefAttributes<HTMLTableCellElement>>;
+        TableBody: React.ForwardRefExoticComponent<import('../types.js').TableBodyProps & React.RefAttributes<HTMLTableSectionElement>>;
+        TableRow: React.ForwardRefExoticComponent<import('../types.js').TableRowProps & React.RefAttributes<HTMLTableRowElement>>;
+        TableCell: React.ForwardRefExoticComponent<import('../types.js').TableCellProps & React.RefAttributes<HTMLTableCellElement>>;
+    };
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const TableFiltering: Story;

package/build/cjs/components/table/stories/tablePagination.stories.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime");require("react");const a=require("../../link/Link.cjs"),r=require("../Table.cjs"),o=require("../TableBody.cjs"),t=require("../TableCaption.cjs"),l=require("../TableCell.cjs"),n=require("../TableFooter.cjs"),i=require("../TableHead.cjs"),s=require("../TableHeader.cjs"),c=require("../TablePagination.cjs"),d=require("../TableRow.cjs"),u=require("../../../../paginated-table-data-VQZB3_Aj.cjs"),b=require("./data.cjs");/* empty css                             *//* empty css                             */;/* empty css                            */const g={title:"Komponenter/Table/TablePagination",component:c.TablePagination,parameters:{layout:"centered"},tags:["autodocs"]},T={name:"TablePagination",args:{labels:{next:"Neste side",previous:"Forrige side",rowsPerPage:"Fakturaer per side"},activePage:0,totalNumberOfRows:b.faktura.rows.length,rowsPerPage:12,rowsPerPageItems:[5,10,12,{label:"Alle",value:-1}],withGoToPage:{gotoLabel:"Side"},onChangeRowsPerPage:()=>"",onChange:()=>""},argTypes:{activePage:{control:{type:"number",min:0}},totalNumberOfRows:{control:{type:"number",min:b.faktura.rows.length,max:b.faktura.rows.length}},rowsPerPage:{control:{type:"number",min:-1,max:b.faktura.rows.length}},withGoToPage:{control:"boolean",description:"Du kan også velge å endre teksten ved siden av input-feltet med en optional goToPageLabel-prop."}},render:g=>{const T=(g.activePage||0)*g.rowsPerPage,j=b.faktura.rows.slice(T,T+g.rowsPerPage);return e.jsxs(r.Table,{caption:e.jsx(t.TableCaption,{children:"Eksempel på paginering"}),children:[e.jsx(i.TableHead,{sticky:!0,children:e.jsx(d.TableRow,{children:b.faktura.columns.slice(0,5).map(((a,r)=>e.jsx(s.TableHeader,{bold:!0,children:a},r)))})}),e.jsx(o.TableBody,{children:j.map(((r,o)=>e.jsxs(d.TableRow,{children:[e.jsx(l.TableCell,{children:e.jsx(a.Link,{download:`${r[3]} ${new Date(r[0]).toLocaleDateString()}`,href:"#",children:new Date(r[0]).toLocaleDateString()})}),r.slice(1,5).map(((a,r)=>e.jsx(l.TableCell,{"data-th":u.columns[r],children:a.toLocaleString()},r)))]},o)))}),e.jsx(n.TableFooter,{children:e.jsx(d.TableRow,{children:e.jsx(l.TableCell,{colSpan:99,children:e.jsx(c.TablePagination,{...g})})})})]})}};exports.TablePaginationStory=T,exports.default=g;
+//# sourceMappingURL=tablePagination.stories.cjs.map

package/build/cjs/components/table/stories/tablePagination.stories.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tablePagination.stories.cjs","sources":["../../../../../src/components/table/stories/tablePagination.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport React from \"react\";\nimport { Link } from \"../../link/index.js\";\nimport { Table } from \"../Table.js\";\nimport { TableBody } from \"../TableBody.js\";\nimport { TableCaption } from \"../TableCaption.js\";\nimport { TableCell } from \"../TableCell.js\";\nimport { TableFooter } from \"../TableFooter.js\";\nimport { TableHead } from \"../TableHead.js\";\nimport { TableHeader } from \"../TableHeader.js\";\nimport { TablePagination } from \"../TablePagination.js\";\nimport { TableRow } from \"../TableRow.js\";\nimport { columns } from \"../development/paginated-table-data.js\";\nimport { faktura } from \"./data.js\";\n\nimport \"../styles/_index.scss\";\nimport \"../../description-list/styles/_index.scss\";\nimport \"../../link/styles/_index.scss\";\n\nconst meta = {\n    title: \"Komponenter/Table/TablePagination\",\n    component: TablePagination,\n    parameters: {\n        layout: \"centered\",\n    },\n    tags: [\"autodocs\"],\n} satisfies Meta<typeof Table>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const TablePaginationStory: Story = {\n    name: \"TablePagination\",\n    args: {\n        labels: {\n            next: \"Neste side\",\n            previous: \"Forrige side\",\n            rowsPerPage: \"Fakturaer per side\",\n        },\n        activePage: 0,\n        totalNumberOfRows: faktura.rows.length,\n        rowsPerPage: 12,\n        rowsPerPageItems: [\n            5,\n            10,\n            12,\n            {\n                label: \"Alle\",\n                value: -1,\n            },\n        ],\n        withGoToPage: {\n            gotoLabel: \"Side\",\n        },\n        onChangeRowsPerPage: () => \"\",\n        onChange: () => \"\",\n    },\n    argTypes: {\n        activePage: {\n            control: {\n                type: \"number\",\n                min: 0,\n            },\n        },\n        totalNumberOfRows: {\n            control: {\n                type: \"number\",\n                min: faktura.rows.length,\n                max: faktura.rows.length,\n            },\n        },\n        rowsPerPage: {\n            control: {\n                type: \"number\",\n                min: -1,\n                max: faktura.rows.length,\n            },\n        },\n        withGoToPage: {\n            control: \"boolean\",\n            description:\n                \"Du kan også velge å endre teksten ved siden av input-feltet med en optional\" +\n                \" goToPageLabel-prop.\",\n        },\n    },\n    render: (args) => {\n        const startIndex = (args.activePage || 0) * args.rowsPerPage;\n\n        const visibleRows = faktura.rows.slice(\n            startIndex,\n            startIndex + args.rowsPerPage,\n        );\n\n        return (\n            <Table\n                caption={<TableCaption>Eksempel på paginering</TableCaption>}\n            >\n                <TableHead sticky={true}>\n                    <TableRow>\n                        {faktura.columns.slice(0, 5).map((column, index) => (\n                            <TableHeader key={index} bold>\n                                {column}\n                            </TableHeader>\n                        ))}\n                    </TableRow>\n                </TableHead>\n                <TableBody>\n                    {visibleRows.map((row, rowIndex) => (\n                        <TableRow key={rowIndex}>\n                            <TableCell>\n                                <Link\n                                    download={`${row[3]} ${new Date(row[0] as Date).toLocaleDateString()}`}\n                                    href={\"#\"}\n                                >\n                                    {new Date(\n                                        row[0] as Date,\n                                    ).toLocaleDateString()}\n                                </Link>\n                            </TableCell>\n                            {row.slice(1, 5).map((cell, cellIndex) => (\n                                <TableCell\n                                    key={cellIndex}\n                                    data-th={columns[cellIndex]}\n                                >\n                                    {cell.toLocaleString()}\n                                </TableCell>\n                            ))}\n                        </TableRow>\n                    ))}\n                </TableBody>\n                <TableFooter>\n                    <TableRow>\n                        <TableCell colSpan={99}>\n                            <TablePagination {...args} />\n                        </TableCell>\n                    </TableRow>\n                </TableFooter>\n            </Table>\n        );\n    },\n};\n"],"names":["meta","title","component","TablePagination","parameters","layout","tags","TablePaginationStory","name","args","labels","next","previous","rowsPerPage","activePage","totalNumberOfRows","faktura","rows","length","rowsPerPageItems","label","value","withGoToPage","gotoLabel","onChangeRowsPerPage","onChange","argTypes","control","type","min","max","description","render","startIndex","visibleRows","slice","jsxs","Table","caption","jsx","TableCaption","children","TableHead","sticky","TableRow","columns","map","column","index","TableHeader","bold","TableBody","row","rowIndex","TableCell","Link","download","Date","toLocaleDateString","href","cell","cellIndex","toLocaleString","TableFooter","colSpan"],"mappings":"mrBAmBA,MAAMA,EAAO,CACTC,MAAO,oCACPC,UAAWC,EAAAA,gBACXC,WAAY,CACRC,OAAQ,YAEZC,KAAM,CAAC,aAMEC,EAA8B,CACvCC,KAAM,kBACNC,KAAM,CACFC,OAAQ,CACJC,KAAM,aACNC,SAAU,eACVC,YAAa,sBAEjBC,WAAY,EACZC,kBAAmBC,EAAAA,QAAQC,KAAKC,OAChCL,YAAa,GACbM,iBAAkB,CACd,EACA,GACA,GACA,CACIC,MAAO,OACPC,OAAO,IAGfC,aAAc,CACVC,UAAW,QAEfC,oBAAqB,IAAM,GAC3BC,SAAU,IAAM,IAEpBC,SAAU,CACNZ,WAAY,CACRa,QAAS,CACLC,KAAM,SACNC,IAAK,IAGbd,kBAAmB,CACfY,QAAS,CACLC,KAAM,SACNC,IAAKb,EAAAA,QAAQC,KAAKC,OAClBY,IAAKd,UAAQC,KAAKC,SAG1BL,YAAa,CACTc,QAAS,CACLC,KAAM,SACNC,KACA,EAAAC,IAAKd,UAAQC,KAAKC,SAG1BI,aAAc,CACVK,QAAS,UACTI,YACI,oGAIZC,OAASvB,IACL,MAAMwB,GAAcxB,EAAKK,YAAc,GAAKL,EAAKI,YAE3CqB,EAAclB,UAAQC,KAAKkB,MAC7BF,EACAA,EAAaxB,EAAKI,aAIlB,OAAAuB,EAAAA,KAACC,EAAAA,MAAA,CACGC,QAAUC,EAAAA,IAAAC,EAAAA,aAAA,CAAaC,SAAsB,2BAE7CA,SAAA,CAACF,EAAAA,IAAAG,EAAAA,UAAA,CAAUC,QAAQ,EACfF,SAAAF,EAAAA,IAACK,YACIH,SAAQzB,EAAAA,QAAA6B,QAAQV,MAAM,EAAG,GAAGW,KAAI,CAACC,EAAQC,IACtCT,EAAAA,IAACU,EAAAA,YAAwB,CAAAC,MAAI,EACxBT,SADaM,GAAAC,SAM9BT,EAAAA,IAACY,aACIV,SAAYP,EAAAY,KAAI,CAACM,EAAKC,WAClBT,EACGA,SAAA,CAAAH,SAAA,CAAAF,MAACe,EAAAA,UACG,CAAAb,SAAAF,EAAAA,IAACgB,EAAAA,KAAA,CACGC,SAAU,GAAGJ,EAAI,MAAM,IAAIK,KAAKL,EAAI,IAAYM,uBAChDC,KAAM,IAELlB,SAAI,IAAAgB,KACDL,EAAI,IACNM,yBAGTN,EAAIjB,MAAM,EAAG,GAAGW,KAAI,CAACc,EAAMC,IACxBtB,EAAAA,IAACe,EAAAA,UAAA,CAEG,UAAST,UAAQgB,GAEhBpB,WAAKqB,kBAHDD,OAbFR,OAsBtBd,MAAAwB,EAAAA,YAAA,CACGtB,SAACF,EAAAA,IAAAK,EAAAA,SAAA,CACGH,eAACa,YAAU,CAAAU,QAAS,GAChBvB,SAAAF,EAAAA,IAACpC,EAAiBA,gBAAA,IAAGM,YAIrC"}

package/build/cjs/components/{accordion/stories/Accordion.stories.d.cts → table/stories/tablePagination.stories.d.cts}

@@ -2,7 +2,7 @@ import { StoryObj } from '@storybook/react';
 import { default as React } from 'react';
 declare const meta: {
     title: string;
-    component: React.FC<import('../types.js').AccordionProps>;
+    component: React.ForwardRefExoticComponent<import('../types.js').TablePaginationProps & React.RefAttributes<HTMLDivElement>>;
     parameters: {
         layout: string;
     };
@@ -10,4 +10,4 @@ declare const meta: {
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
-export declare const Accordion: Story;
+export declare const TablePaginationStory: Story;

package/build/cjs/components/tabs/NavTab.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../../../clsx-E3yX_9sL.cjs"),t=require("react"),a=t.forwardRef((function(a,n){const{as:i="a","aria-selected":l,className:o,onBeforeKeyboardNavigation:s,...c}=a,u=i,d=t.useCallback(((e,r)=>{s&&!1===s(e,r)||(r.focus(),r.click())}),[s]),b=t.useCallback((e=>{var r,t,a;if("ArrowLeft"===e.key){const a=e.currentTarget,n=e.currentTarget.previousSibling;d(a,n||(null==(t=null==(r=a.parentElement)?void 0:r.lastChild)?void 0:t.previousSibling))}if("ArrowRight"===e.key){const r=e.currentTarget,t=e.currentTarget.nextSibling;t&&"A"===t.nodeName?d(r,t):d(r,null==(a=r.parentElement)?void 0:a.firstChild)}}),[d]);return e.jsx(u,{ref:n,...c,role:"tab","aria-selected":l,className:r.clsx("jkl-tab",o),onKeyDown:b,tabIndex:l?0:-1})}));exports.NavTab=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../../../clsx-E3yX_9sL.cjs"),t=require("react"),a=t.forwardRef((function(a,n){const{as:i="a","aria-selected":s,className:c,onBeforeKeyboardNavigation:o,...l}=a,u=i,b=t.useCallback(((e,r)=>{o&&!1===o(e,r)||(r.focus(),r.click())}),[o]),f=t.useCallback((e=>{if("ArrowLeft"===e.key){const r=e.currentTarget,t=e.currentTarget.previousSibling;b(r,t||r.parentElement?.lastChild?.previousSibling)}if("ArrowRight"===e.key){const r=e.currentTarget,t=e.currentTarget.nextSibling;t&&"A"===t.nodeName?b(r,t):b(r,r.parentElement?.firstChild)}}),[b]);return e.jsx(u,{ref:n,...l,role:"tab","aria-selected":s,className:r.clsx("jkl-tab",c),onKeyDown:f,tabIndex:s?0:-1})}));exports.NavTab=a;
 //# sourceMappingURL=NavTab.cjs.map

package/build/cjs/components/tabs/NavTab.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NavTab.cjs","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","_b","_a","parentElement","lastChild","next","nextSibling","nodeName","_c","firstChild","jsx","role","clsx","onKeyDown","tabIndex"],"mappings":"gLASaA,EAASC,EAAAA,YAAW,SAE/BC,EAAiCC,GACzB,MACFC,GAAAA,EAAK,IACL,gBAAiBC,EACjBC,UAAAA,EACAC,2BAA4BC,KACzBC,GACHP,EAEEQ,EAAYN,EAEZO,EAAWC,EAAAA,aACb,CAACC,EAAyBC,KAClBN,IAGmB,IADAA,EAAiBK,EAAMC,KAM9CA,EAAGC,QAEHD,EAAGE,QAAM,GAEb,CAACR,IAGCS,EAAkBL,EAAAA,aACnBM,cACO,GAAc,cAAdA,EAAMC,IAAqB,CAC3B,MAAMC,EAAUF,EAAMG,cAChBC,EAAOJ,EAAMG,cAAcE,gBAG7BZ,EAASS,EADTE,IAKI,OAAAE,EAAA,OAAAC,EAAAL,EAAQM,oBAAR,EAAAD,EAAuBE,gBAAvB,EAAAH,EACMD,iBAEd,CAGA,GAAc,eAAdL,EAAMC,IAAsB,CAC5B,MAAMC,EAAUF,EAAMG,cAChBO,EAAOV,EAAMG,cAAcQ,YAG7BD,GAA0B,MAAlBA,EAAKE,SACbnB,EAASS,EAASQ,GAElBjB,EACIS,EACA,OAAAW,EAAAX,EAAQM,oBAAR,EAAAK,EAAuBC,WAE/B,IAGR,CAACrB,IAID,OAAAsB,EAAAA,IAACvB,EAAA,CACGP,IAAAA,KACIM,EACJyB,KAAK,MACL,gBAAe7B,EACfC,UAAW6B,EAAAA,KAAK,UAAW7B,GAC3B8B,UAAWnB,EAIXoB,SAAUhC,EAAW,GAAI,GAGrC"}
+{"version":3,"file":"NavTab.cjs","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":"gLASaA,EAASC,EAAAA,YAAW,SAE/BC,EAAiCC,GACzB,MACFC,GAAAA,EAAK,IACL,gBAAiBC,EACjBC,UAAAA,EACAC,2BAA4BC,KACzBC,GACHP,EAEEQ,EAAYN,EAEZO,EAAWC,EAAAA,aACb,CAACC,EAAyBC,KAClBN,IAGmB,IADAA,EAAiBK,EAAMC,KAM9CA,EAAGC,QAEHD,EAAGE,QACP,GACA,CAACR,IAGCS,EAAkBL,EAAAA,aACnBM,IACO,GAAc,cAAdA,EAAMC,IAAqB,CAC3B,MAAMC,EAAUF,EAAMG,cAChBC,EAAOJ,EAAMG,cAAcE,gBAG7BZ,EAASS,EADTE,GAKIF,EAAQI,eAAeC,WACjBF,gBAEd,CAGA,GAAc,eAAdL,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,EAAAA,IAACpB,EAAA,CACGP,IAAAA,KACIM,EACJsB,KAAK,MACL,gBAAe1B,EACfC,UAAW0B,EAAAA,KAAK,UAAW1B,GAC3B2B,UAAWhB,EAIXiB,SAAU7B,EAAW,GAAI,GAGrC"}

package/build/cjs/components/tabs/NavTabs.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("../../../clsx-E3yX_9sL.cjs"),t=require("react");exports.NavTabs=({"aria-label":r,children:s,className:a,density:i="comfortable",...n})=>{var c;const[u,d]=t.useState(),[o,f]=t.useState(),m=t.useRef(null),b=t.useRef(null),v=t.useRef(null),j=t.Children.toArray(s).findIndex((e=>!!t.isValidElement(e)&&!0===e.props["aria-selected"]));return t.useEffect((()=>{b.current&&d(b.current.getBoundingClientRect()),v.current&&f(v.current.getBoundingClientRect())}),[j,i]),e.jsx("div",{...n,"data-layout-density":i,className:l.clsx("jkl-tabs",a),ref:m,children:e.jsxs("div",{role:"tablist","aria-label":r,ref:b,className:"jkl-tablist",children:[t.Children.map(s,((e,l)=>t.isValidElement(e)?t.cloneElement(e,{ref:j===l?v:void 0}):null)),e.jsx("span",{className:"jkl-tablist__indicator",style:{left:((null==o?void 0:o.left)||0)-((null==u?void 0:u.left)||0)+((null==(c=m.current)?void 0:c.scrollLeft)||0),bottom:-1,width:((null==o?void 0:o.width)||0)-("compact"===i?32:38)}})]})})};
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../../clsx-E3yX_9sL.cjs"),l=require("react");exports.NavTabs=({"aria-label":r,children:s,className:a,density:i="comfortable",...n})=>{const[c,u]=l.useState(),[d,o]=l.useState(),f=l.useRef(null),m=l.useRef(null),b=l.useRef(null),j=l.Children.toArray(s).findIndex((e=>!!l.isValidElement(e)&&!0===e.props["aria-selected"]));return l.useEffect((()=>{m.current&&u(m.current.getBoundingClientRect()),b.current&&o(b.current.getBoundingClientRect())}),[j,i]),e.jsx("div",{...n,"data-layout-density":i,className:t.clsx("jkl-tabs",a),ref:f,children:e.jsxs("div",{role:"tablist","aria-label":r,ref:m,className:"jkl-tablist",children:[l.Children.map(s,((e,t)=>l.isValidElement(e)?l.cloneElement(e,{ref:j===t?b:void 0}):null)),e.jsx("span",{className:"jkl-tablist__indicator",style:{left:(d?.left||0)-(c?.left||0)+(f.current?.scrollLeft||0),bottom:-1,width:(d?.width||0)-("compact"===i?32:38)}})]})})};
 //# sourceMappingURL=NavTabs.cjs.map

package/build/cjs/components/tabs/NavTabs.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NavTabs.cjs","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":["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","_a","scrollLeft","bottom","width"],"mappings":"gMAIuB,EACnB,aAAcA,EACdC,SAAAA,EACAC,UAAAA,EACAC,QAAAA,EAAU,iBACPC,YAEH,MAAOC,EAAUC,GAAeC,cACzBC,EAAYC,GAAiBF,aAE9BG,EAAYC,SAAuB,MACnCC,EAAaD,SAAuB,MACpCE,EAAYF,SAAoB,MAEhCG,EAAgBC,EAAMC,SAASC,QAAQhB,GAAUiB,WAClDC,KACQJ,EAAMK,eAAeD,KAGe,IAAlCA,EAAOE,MAAM,mBAK5BC,OAAAA,EAAAA,WAAU,KACFV,EAAWW,SACCjB,EAAAM,EAAWW,QAAQC,yBAE/BX,EAAUU,SACId,EAAAI,EAAUU,QAAQC,wBAAuB,GAE5D,CAACV,EAAeX,IAGfsB,EAAAA,IAAC,MAAA,IACOrB,EACJ,sBAAqBD,EACrBD,UAAWwB,EAAAA,KAAK,WAAYxB,GAC5ByB,IAAKjB,EAELT,SAAA2B,EAAAA,KAAC,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,EAAAA,IAAC,OAAA,CACGvB,UAAU,yBACVgC,MAAO,CACHC,OACK,MAAA3B,OAAA,EAAAA,EAAY2B,OAAQ,KACpB,MAAA9B,SAAAA,EAAU8B,OAAQ,KAClB,OAAAC,EAAA1B,EAAUa,gBAAVa,EAAmBC,aAAc,GACtCC,QACA,EAAAC,QACK,MAAA/B,OAAAA,EAAAA,EAAY+B,QAAS,IACT,YAAZpC,EAAwB,GAAK,WAIlD"}
+{"version":3,"file":"NavTabs.cjs","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":["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":"gMAIuB,EACnB,aAAcA,EACdC,SAAAA,EACAC,UAAAA,EACAC,QAAAA,EAAU,iBACPC,MAEH,MAAOC,EAAUC,GAAeC,cACzBC,EAAYC,GAAiBF,aAE9BG,EAAYC,SAAuB,MACnCC,EAAaD,SAAuB,MACpCE,EAAYF,SAAoB,MAEhCG,EAAgBC,EAAMC,SAASC,QAAQhB,GAAUiB,WAClDC,KACQJ,EAAMK,eAAeD,KAGe,IAAlCA,EAAOE,MAAM,mBAK5BC,OAAAA,EAAAA,WAAU,KACFV,EAAWW,SACCjB,EAAAM,EAAWW,QAAQC,yBAE/BX,EAAUU,SACId,EAAAI,EAAUU,QAAQC,wBAAuB,GAE5D,CAACV,EAAeX,IAGfsB,EAAAA,IAAC,MAAA,IACOrB,EACJ,sBAAqBD,EACrBD,UAAWwB,EAAAA,KAAK,WAAYxB,GAC5ByB,IAAKjB,EAELT,SAAA2B,EAAAA,KAAC,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,EAAAA,IAAC,OAAA,CACGvB,UAAU,yBACVgC,MAAO,CACHC,MACK3B,GAAY2B,MAAQ,IACpB9B,GAAU8B,MAAQ,IAClBzB,EAAUa,SAASa,YAAc,GACtCC,UACAC,OACK9B,GAAY8B,OAAS,IACT,YAAZnC,EAAwB,GAAK,WAIlD"}

package/build/cjs/components/tabs/TabList.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../../../clsx-E3yX_9sL.cjs"),t=require("react");exports.TabList=({children:l,className:n,...i})=>{const{activeIndex:s,setActiveIndex:a,tabIDs:o,tabPanelIDs:c,...u}=i,d=t.useRef(null),f=t.useRef(null),b=t.useCallback((e=>{var r,t,l;if("ArrowLeft"===e.key){const l=e.currentTarget,n=e.currentTarget.previousSibling;n?n.focus():(null==(t=null==(r=l.parentElement)?void 0:r.lastChild)?void 0:t.previousSibling).focus()}if("ArrowRight"===e.key){const r=e.currentTarget,t=e.currentTarget.nextSibling;t&&"BUTTON"===t.nodeName?t.focus():(null==(l=r.parentElement)?void 0:l.firstChild).focus()}}),[]);return e.jsx("div",{role:"tablist",ref:d,...u,className:r.clsx("jkl-tablist",n),children:t.Children.map(l,((e,r)=>{const l=s===r;return t.isValidElement(e)?t.cloneElement(e,{onKeyDown:b,tabIndex:l?void 0:-1,ref:l?f:void 0,onClick:()=>a(r),"aria-selected":l,"aria-controls":c[r],id:o[r]}):null}))})};
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../../clsx-E3yX_9sL.cjs"),r=require("react");exports.TabList=({children:n,className:i,...l})=>{const{activeIndex:s,setActiveIndex:a,tabIDs:c,tabPanelIDs:o,...u}=l,d=r.useRef(null),f=r.useRef(null),b=r.useCallback((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.jsx("div",{role:"tablist",ref:d,...u,className:t.clsx("jkl-tablist",i),children:r.Children.map(n,((e,t)=>{const n=s===t;return r.isValidElement(e)?r.cloneElement(e,{onKeyDown:b,tabIndex:n?void 0:-1,ref:n?f:void 0,onClick:()=>a(t),"aria-selected":n,"aria-controls":o[t],id:c[t]}):null}))})};
 //# sourceMappingURL=TabList.cjs.map

package/build/cjs/components/tabs/TabList.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TabList.cjs","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":["children","className","injected","activeIndex","setActiveIndex","tabIDs","tabPanelIDs","rest","tabsRef","useRef","activeRef","keyDownHandler","useCallback","event","key","current","currentTarget","prev","previousSibling","focus","_b","_a","parentElement","lastChild","next","nextSibling","nodeName","_c","firstChild","jsx","role","ref","clsx","Children","map","tab","tabIndex","isActive","React","isValidElement","cloneElement","onKeyDown","onClick","id"],"mappings":"gMAgBuB,EAAGA,SAAAA,EAAUC,UAAAA,KAAcC,MAE9C,MAAQC,YAAAA,EAAaC,eAAAA,EAAgBC,OAAAA,EAAQC,YAAAA,KAAgBC,GACzDL,EAEEM,EAAUC,SAAuB,MACjCC,EAAYD,SAA0B,MAEtCE,EAAiBC,EAAAA,aAClBC,cACO,GAAc,cAAdA,EAAMC,IAAqB,CAC3B,MAAMC,EAAUF,EAAMG,cAChBC,EAAOJ,EAAMG,cAAcE,gBAE7BD,EACCA,EAAqBE,SAGlB,OAAAC,EAAA,OAAAC,EAAAN,EAAQO,oBAAR,EAAAD,EAAuBE,gBAAvB,EAAAH,EACMF,iBACRC,OACN,CAGA,GAAc,eAAdN,EAAMC,IAAsB,CAC5B,MAAMC,EAAUF,EAAMG,cAChBQ,EAAOX,EAAMG,cAAcS,YAG7BD,GAA0B,WAAlBA,EAAKE,SACZF,EAAqBL,SAErB,OAAAQ,EAAAZ,EAAQO,sBAARK,EAAuBC,YAA2BT,OACvD,IAGR,IAIA,OAAAU,EAAAA,IAAC,MAAA,CACGC,KAAK,UACLC,IAAKvB,KACDD,EACJN,UAAW+B,EAAAA,KAAK,cAAe/B,GAE9BD,WAAMiC,SAASC,IAAIlC,GAAU,CAACmC,EAAKC,KAChC,MAAMC,EAAWlC,IAAgBiC,EAEjC,OAAOE,EAAMC,eAAeJ,GACtBG,EAAME,aAAkBL,EAAK,CACzBM,UAAW9B,EACXyB,SAAUC,OAAW,GAAY,EACjCN,IAAKM,EAAW3B,OAAY,EAC5BgC,QAAS,IAAMtC,EAAegC,GAC9B,gBAAiBC,EACjB,gBAAiB/B,EAAY8B,GAC7BO,GAAItC,EAAO+B,KAEf,SAEd"}
+{"version":3,"file":"TabList.cjs","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":["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":"gMAgBuB,EAAGA,SAAAA,EAAUC,UAAAA,KAAcC,MAE9C,MAAQC,YAAAA,EAAaC,eAAAA,EAAgBC,OAAAA,EAAQC,YAAAA,KAAgBC,GACzDL,EAEEM,EAAUC,SAAuB,MACjCC,EAAYD,SAA0B,MAEtCE,EAAiBC,EAAAA,aAClBC,IACO,GAAc,cAAdA,EAAMC,IAAqB,CAC3B,MAAMC,EAAUF,EAAMG,cAChBC,EAAOJ,EAAMG,cAAcE,gBAE7BD,EACCA,EAAqBE,SAGlBJ,EAAQK,eAAeC,WACjBH,iBACRC,OACN,CAGA,GAAc,eAAdN,EAAMC,IAAsB,CAC5B,MAAMC,EAAUF,EAAMG,cAChBM,EAAOT,EAAMG,cAAcO,YAG7BD,GAA0B,WAAlBA,EAAKE,SACZF,EAAqBH,SAErBJ,EAAQK,eAAeK,YAA2BN,OACvD,IAGR,IAIA,OAAAO,EAAAA,IAAC,MAAA,CACGC,KAAK,UACLC,IAAKpB,KACDD,EACJN,UAAW4B,EAAAA,KAAK,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,KACrBN,IAAKM,EAAWxB,OAAY,EAC5B6B,QAAS,IAAMnC,EAAe6B,GAC9B,gBAAiBC,EACjB,gBAAiB5B,EAAY2B,GAC7BO,GAAInC,EAAO4B,KAEf,SAEd"}

package/build/cjs/components/text-area/BaseTextArea.cjs

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

package/build/cjs/components/text-area/BaseTextArea.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BaseTextArea.cjs","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","overflowStyle","overflowX","jsxs","className","children","jsx","e","target","hideProgress","total","displayName"],"mappings":"wIAWaA,EAAeC,EAAAA,YACxB,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,YAAS,WACtCN,EAAU,IACV,EAGU,iBAAVA,EACAO,OAAOP,GAAOQ,OAGlBR,EAAMQ,UAEVC,EAAiBC,GAAsBJ,EAAAA,UAAS,GACjDK,EAAcC,SAA4B,MAC1CC,EACDtB,GAA0CoB,EAG/CG,EAAAA,WAAU,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,GAAuB,MAAA1B,SAAAA,EAAS2B,YAAa,EAC7CC,EAA0BF,EAAef,EAO/C,MAKMkB,KAAkBrB,KAJpBR,GAAWW,EAAiBe,EACtB,kBAAkBf,EAAiBe,sBACnC,IAIJI,EAAgB,CAClBC,UAAWhC,EAAa,cAAW,GAInC,OAAAiC,EAAAA,KAAC,MAAA,CACGC,UAAU,wBACV,eAAcJ,EACd,mBAAkBlB,EAAiB,EAEnCuB,SAAA,CAAAC,EAAAA,IAAC,WAAA,CACG,eAAcN,EACdI,UAAW,sDAAsD9B,SACjEF,OA1CZ,SAAsBmC,GAClBnB,GAAmB,GACfhB,GACAA,EAAOmC,EACX,EAuCQlC,QAlDZ,SAAuBkC,GACnBnB,GAAmB,GACff,GACAA,EAAQkC,EACZ,EA+CQ3B,SArCZ,SAAwB2B,GACFxB,EAAAwB,EAAEC,OAAO9B,MAAMQ,QAC7BN,GACAA,EAAS2B,EACb,EAkCQtC,IAAKsB,EACLd,MAAO,IAAKA,KAAUwB,GACtB1B,YAAAA,EACAG,MAAAA,KACIG,IAEPV,GACIgC,EAAAA,KAAA,MAAA,CAAIC,UAAU,yBAAyB,cAAY,OAChDC,SAAA,CAACF,EAAAA,KAAA,MAAA,CAAIC,UAAU,+BACVC,SAAA,CAAAvB,EAAe,MAAce,MAEhC1B,EAAQsC,cACNH,EAAAA,IAAC,MAAA,CACGF,UAAU,kCACV3B,MAAO,CACF,oBA5CAiB,EA6CGK,EA7CcW,EA8Cdb,EA7CxBH,GAAW,GAGE,IAAVgB,EAFI,EAEyB,IAAVhB,EAAiBgB,GAwCa,aA5CnD,IAAoBhB,EAAiBgB,CAqD1C,IAIZ5C,EAAa6C,YAAc"}
+{"version":3,"file":"BaseTextArea.cjs","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","overflowStyle","overflowX","jsxs","className","children","jsx","e","target","hideProgress","total","displayName"],"mappings":"wIAWaA,EAAeC,EAAAA,YACxB,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,YAAS,WACtCN,EAAU,IACV,EAGU,iBAAVA,EACAO,OAAOP,GAAOQ,OAGlBR,EAAMQ,UAEVC,EAAiBC,GAAsBJ,EAAAA,UAAS,GACjDK,EAAcC,SAA4B,MAC1CC,EACDtB,GAA0CoB,EAG/CG,EAAAA,WAAU,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,IAIJI,EAAgB,CAClBC,UAAWhC,EAAa,cAAW,GAInC,OAAAiC,EAAAA,KAAC,MAAA,CACGC,UAAU,wBACV,eAAcJ,EACd,mBAAkBlB,EAAiB,EAEnCuB,SAAA,CAAAC,EAAAA,IAAC,WAAA,CACG,eAAcN,EACdI,UAAW,sDAAsD9B,SACjEF,OA1CZ,SAAsBmC,GAClBnB,GAAmB,GACfhB,GACAA,EAAOmC,EACX,EAuCQlC,QAlDZ,SAAuBkC,GACnBnB,GAAmB,GACff,GACAA,EAAQkC,EACZ,EA+CQ3B,SArCZ,SAAwB2B,GACFxB,EAAAwB,EAAEC,OAAO9B,MAAMQ,QAC7BN,GACAA,EAAS2B,EACb,EAkCQtC,IAAKsB,EACLd,MAAO,IAAKA,KAAUwB,GACtB1B,YAAAA,EACAG,MAAAA,KACIG,IAEPV,GACIgC,EAAAA,KAAA,MAAA,CAAIC,UAAU,yBAAyB,cAAY,OAChDC,SAAA,CAACF,EAAAA,KAAA,MAAA,CAAIC,UAAU,+BACVC,SAAA,CAAAvB,EAAe,MAAce,MAEhC1B,EAAQsC,cACNH,EAAAA,IAAC,MAAA,CACGF,UAAU,kCACV3B,MAAO,CACF,oBA5CAiB,EA6CGK,EA7CcW,EA8Cdb,EA7CxBH,GAAW,GAGE,IAAVgB,EAFI,EAEyB,IAAVhB,EAAiBgB,GAwCa,aA5CnD,IAAoBhB,EAAiBgB,CAqD1C,IAIZ5C,EAAa6C,YAAc"}

package/build/cjs/components/toast/Toast.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),s=require("@react-aria/toast"),o=require("../../../clsx-E3yX_9sL.cjs"),e=require("react"),n=require("../../hooks/useBrowserPreferences/useBrowserPreferences.cjs"),a=require("../button/Button.cjs"),r=require("../countdown/Countdown.cjs"),c=require("../icon-button/IconButton.cjs"),i=require("../icon/icons/CloseIcon.cjs"),l=require("../icon/icons/ErrorIcon.cjs"),u=require("../icon/icons/InfoIcon.cjs"),j=require("../icon/icons/SuccessIcon.cjs"),m=require("../icon/icons/WarningIcon.cjs"),d=s=>{switch(s){case"error":return t.jsx(l.ErrorIcon,{className:"jkl-toast__icon"});case"info":return t.jsx(u.InfoIcon,{className:"jkl-toast__icon"});case"success":return t.jsx(j.SuccessIcon,{className:"jkl-toast__icon"});case"warning":return t.jsx(m.WarningIcon,{className:"jkl-toast__icon"});default:return null}};exports.Toast=function({className:l,state:u,...j}){var m;const k=e.useRef(null),{toastProps:x,titleProps:_}=s.useToast(j,u,k),f="string"==typeof j.toast.content?j.toast.content:j.toast.content.content,v="string"==typeof j.toast.content?void 0:j.toast.content.title,g=null==(null==(m=j.toast.timer)?void 0:m.timerId),{prefersReducedMotion:p}=n.useBrowserPreferences();return e.useEffect((()=>{p&&"exiting"===j.toast.animation&&u.remove(j.toast.key)}),[p,j.toast.animation,j.toast.key,u]),t.jsxs("div",{...x,ref:k,className:o.clsx("jkl-toast",{"jkl-toast--info":"info"===j.toast.variant,"jkl-toast--error":"error"===j.toast.variant,"jkl-toast--warning":"warning"===j.toast.variant,"jkl-toast--success":"success"===j.toast.variant},l),"data-animation":j.toast.animation,onAnimationEnd:()=>{"exiting"===j.toast.animation&&u.remove(j.toast.key)},children:[t.jsx("span",{className:"jkl-toast__progress",children:j.toast.timeout?t.jsx(r.Countdown,{from:j.toast.timeout,isPaused:g,onAnimationEnd:t=>{t.stopPropagation()}}):null}),d(j.toast.variant),t.jsxs("div",{..._,className:"jkl-toast__content",children:[v&&t.jsx("p",{className:"jkl-toast__title",children:v}),t.jsx("p",{className:"jkl-toast__message",children:f}),j.toast.action&&t.jsx("div",{className:"jkl-toast__action",children:t.jsx(a.Button,{variant:"secondary",density:"compact",onClick:j.toast.action.onClick,children:j.toast.action.label})})]}),t.jsx(c.IconButton,{"data-theme":j.toast.variant?"light":void 0,"aria-label":"Lukk varsel",className:"jkl-toast__dismiss-button",onClick:()=>{u.close(j.toast.key)},children:t.jsx(i.CloseIcon,{})})]})};
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),s=require("@react-aria/toast"),o=require("../../../clsx-E3yX_9sL.cjs"),e=require("react"),n=require("../../hooks/useBrowserPreferences/useBrowserPreferences.cjs"),a=require("../button/Button.cjs"),r=require("../countdown/Countdown.cjs"),c=require("../icon-button/IconButton.cjs"),i=require("../icon/icons/CloseIcon.cjs"),l=require("../icon/icons/ErrorIcon.cjs"),u=require("../icon/icons/InfoIcon.cjs"),j=require("../icon/icons/SuccessIcon.cjs"),m=require("../icon/icons/WarningIcon.cjs"),d=s=>{switch(s){case"error":return t.jsx(l.ErrorIcon,{className:"jkl-toast__icon"});case"info":return t.jsx(u.InfoIcon,{className:"jkl-toast__icon"});case"success":return t.jsx(j.SuccessIcon,{className:"jkl-toast__icon"});case"warning":return t.jsx(m.WarningIcon,{className:"jkl-toast__icon"});default:return null}};exports.Toast=function({className:l,state:u,...j}){const m=e.useRef(null),{toastProps:k,titleProps:x}=s.useToast(j,u,m),_="string"==typeof j.toast.content?j.toast.content:j.toast.content.content,f="string"==typeof j.toast.content?void 0:j.toast.content.title,v=null==j.toast.timer?.timerId,{prefersReducedMotion:g}=n.useBrowserPreferences();return e.useEffect((()=>{g&&"exiting"===j.toast.animation&&u.remove(j.toast.key)}),[g,j.toast.animation,j.toast.key,u]),t.jsxs("div",{...k,ref:m,className:o.clsx("jkl-toast",{"jkl-toast--info":"info"===j.toast.variant,"jkl-toast--error":"error"===j.toast.variant,"jkl-toast--warning":"warning"===j.toast.variant,"jkl-toast--success":"success"===j.toast.variant},l),"data-animation":j.toast.animation,onAnimationEnd:()=>{"exiting"===j.toast.animation&&u.remove(j.toast.key)},children:[t.jsx("span",{className:"jkl-toast__progress",children:j.toast.timeout?t.jsx(r.Countdown,{from:j.toast.timeout,isPaused:v,onAnimationEnd:t=>{t.stopPropagation()}}):null}),d(j.toast.variant),t.jsxs("div",{...x,className:"jkl-toast__content",children:[f&&t.jsx("p",{className:"jkl-toast__title",children:f}),t.jsx("p",{className:"jkl-toast__message",children:_}),j.toast.action&&t.jsx("div",{className:"jkl-toast__action",children:t.jsx(a.Button,{variant:"secondary",density:"compact",onClick:j.toast.action.onClick,children:j.toast.action.label})})]}),t.jsx(c.IconButton,{"data-theme":j.toast.variant?"light":void 0,"aria-label":"Lukk varsel",className:"jkl-toast__dismiss-button",onClick:()=>{u.close(j.toast.key)},children:t.jsx(i.CloseIcon,{})})]})};
 //# sourceMappingURL=Toast.cjs.map