@fremtind/jokul 0.71.1 → 1.0.0

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

@@ -1,2 +1,2 @@
-import{jsxs as e,Fragment as r,jsx as a}from"react/jsx-runtime";import"react";import{Table as l}from"../Table.js";import{TableBody as t}from"../TableBody.js";import{TableCaption as n}from"../TableCaption.js";import{TableCell as o}from"../TableCell.js";import{TableHead as i}from"../TableHead.js";import{TableHeader as s}from"../TableHeader.js";import{TableRow as d}from"../TableRow.js";const m={title:"Komponenter/Table",component:l,parameters:{layout:"centered"},tags:["autodocs"]},p=["Dato","Saksnummer","Kundenummer","Kundenavn","Milepæl","Følger saken"],c={args:{caption:a(n,{srOnly:!0,children:"Overskrift for skjermlesere"}),children:e(r,{children:[a(i,{children:a(d,{children:p.map(((e,r)=>a(s,{bold:!0,children:e},r)))})}),a(t,{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(((e,r)=>a(d,{children:e.map(((e,r)=>a(o,{"data-th":p[r],align:[1,2].includes(r)?"right":"left",children:e},r)))},r)))})]})},render:e=>a(l,{caption:e.caption,fullWidth:!0,children:e.children})};export{c as TableComponent,m as default};
+import{jsx as e,jsxs as a}from"react/jsx-runtime";import{useState as r}from"react";import{Table as l}from"../Table.js";import{TableBody as t}from"../TableBody.js";import{TableCaption as s}from"../TableCaption.js";import{TableCell as o}from"../TableCell.js";import{TableHead as i}from"../TableHead.js";import{TableHeader as n}from"../TableHeader.js";import{TableRow as d}from"../TableRow.js";import{c as m}from"../../../../paginated-table-data-ZMeh4d0Y.js";import{useSortableTableHeader as c}from"../utils.js";import{skadesaker as p,faktura as b}from"./data.js";/* empty css                         *//* empty css                         *//* empty css                         */const T={title:"Komponenter/Table",component:l,subcomponents:{TableCaption:s,TableHead:i,TableHeader:n,TableBody:t,TableRow:d,TableCell:o},parameters:{layout:"centered"},tags:["autodocs"]},h={name:"Table",args:{collapseToList:!0,fullWidth:!0,caption:e(s,{srOnly:!0,children:"Overskrift for skjermlesere"}),children:""},render:r=>e("div",{style:{width:"90dvw"},children:a(l,{...r,children:[e(i,{sticky:!0,children:e(d,{children:p.columns.map(((a,r)=>e(n,{bold:!0,children:a},r)))})}),e(t,{children:p.rows.map(((a,r)=>e(d,{children:a.map(((a,r)=>e(o,{"data-th":p.columns[r],align:[1,2].includes(r)?"right":"left",children:a},r)))},r)))})]})})},f={name:"useSortableTableHeader",args:{caption:e(s,{srOnly:!0,children:"Overskrift for skjermlesere"}),children:""},render:s=>{const[p,T]=r(m[0]),[h,f]=r("desc"),{getSortProps:u}=c(p,h,((e,a)=>{T(e),f(a)}));return a(l,{caption:s.caption,fullWidth:!0,children:[e(i,{sticky:!0,children:e(d,{children:b.columns.slice(0,4).map(((a,r)=>e(n,{bold:!0,...u(a),children:a},r)))})}),e(t,{children:b.rows.sort(((e,a)=>{if("Forfallsdato"===p){const r=new Date(e[0]).getTime(),l=new Date(a[0]).getTime();return"asc"===h?r-l:l-r}if("Beløp"===p){const r=Number(e[2]),l=Number(a[2]);return"asc"===h?r-l:l-r}return 0})).map(((a,r)=>e(d,{children:a.slice(0,4).map(((a,r)=>e(o,{"data-th":m[r],align:[1,2].includes(r)?"right":"left",children:a.toLocaleString()},r)))},r)))})]})}};export{f as StortableTable,h as TableStory,T as default};
 //# sourceMappingURL=table.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"table.stories.js","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":"kYAWA,MAAMA,EAAO,CACTC,MAAO,oBACPC,UAAWC,EACXC,WAAY,CACRC,OAAQ,YAEZC,KAAM,CAAC,aAMLC,EAAU,CACZ,OACA,aACA,cACA,YACA,UACA,gBA8BSC,EAAwB,CACjCC,KAAM,CACFC,QACIC,EAACC,EAAa,CAAAC,QAAM,EAACC,SAA2B,gCAEpDA,SAEQC,EAAAC,EAAA,CAAAF,SAAA,CAAAH,EAACM,GACGH,SAACH,EAAAO,EAAA,CACIJ,SAAQP,EAAAY,KAAI,CAACC,EAAQC,IACjBV,EAAAW,EAAA,CAAwBC,MAAI,EACxBT,SAAAM,GADaC,SAM7BV,EAAAa,EAAA,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,EAACO,EACI,CAAAJ,SAAAW,EAAIN,KAAI,CAACQ,EAAMC,IACZjB,EAACkB,EAAA,CAEG,UAAStB,EAAQqB,GACjBE,MACI,CAAC,EAAG,GAAGC,SAASH,GACV,QACA,OAGTd,SAAAa,GARIC,MAHFF,WAoBnCM,OAASvB,GACJE,EAAAR,EAAA,CAAMO,QAASD,EAAKC,QAASuB,WAAS,EAClCnB,SAAAL,EAAKK"}
+{"version":3,"file":"table.stories.js","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":"sqBAiBA,MAAMA,EAAO,CACTC,MAAO,oBACPC,UAAWC,EACXC,cAAe,CACXC,aAAAA,EACAC,UAAAA,EACAC,YAAAA,EACAC,UAAAA,EACAC,SAAAA,EACAC,UAAAA,GAEJC,WAAY,CACRC,OAAQ,YAEZC,KAAM,CAAC,aAMEC,EAAoB,CAC7BC,KAAM,QACNC,KAAM,CACFC,gBAAgB,EAChBC,WAAW,EACXC,QACIC,EAACf,EAAa,CAAAgB,QAAM,EAACC,SAA2B,gCAEpDA,SAAU,IAEdC,OAASP,GACLI,EAAC,MAAI,CAAAI,MAAO,CAAEC,MAAO,SACjBH,SAACI,EAAAvB,EAAA,IAAUa,EACPM,SAAA,CAAAF,EAACd,GAAUqB,QAAQ,EACfL,WAACb,EACI,CAAAa,SAAAM,EAAWC,QAAQC,KAAI,CAACC,EAAQC,IAC7BZ,EAACb,GAAwB0B,MAAI,EACxBX,YADaU,SAM7BZ,EAAAZ,EAAA,CACIc,SAAWM,EAAAM,KAAKJ,KAAI,CAACK,EAAKC,IACvBhB,EAACX,EACI,CAAAa,SAAAa,EAAIL,KAAI,CAACO,EAAMC,IACZlB,EAACV,EAAA,CAEG,UAASkB,EAAWC,QAAQS,GAC5BC,MACI,CAAC,EAAG,GAAGC,SAASF,GACV,QACA,OAGThB,SAAAe,GARIC,MAHFF,aAsB1BK,EAAwB,CACjC1B,KAAM,yBACNC,KAAM,CACFG,QACIC,EAACf,EAAa,CAAAgB,QAAM,EAACC,SAA2B,gCAEpDA,SAAU,IAEdC,OAASP,IACL,MAAO0B,EAAQC,GAAaC,EAASf,EAAQ,KACtCgB,EAAWC,GAAgBF,EAA6B,SAUvDG,aAAAA,GAAiBC,EACrBN,EACAG,GAVqB,CACrBI,EACAC,KAEAP,EAAUM,GACVH,EAAaI,EAAa,aAUzB/C,EAAM,CAAAgB,QAASH,EAAKG,QAASD,WAAS,EACnCI,SAAA,CAAAF,EAACd,EAAU,CAAAqB,QAAQ,EACfL,SAAAF,EAACX,GACIa,SAAQ6B,EAAAtB,QAAQuB,MAAM,EAAG,GAAGtB,KAAI,CAACC,EAAQC,IACtCZ,EAACb,EAAA,CAEG0B,MAAI,KACAc,EAAahB,GAEhBT,SAAAS,GAJIC,WASpBxB,EACI,CAAAc,SAAA6B,EAAQjB,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,CACdkB,MAAAA,EAAUC,OAAOP,EAAE,IACnBQ,EAAUD,OAAON,EAAE,IAEzB,MAAkB,QAAdV,EACOe,EAAUE,EAGdA,EAAUF,CAAA,CAGd,OAAA,CAAA,IAEV9B,KAAI,CAACK,EAAKC,IACNhB,EAAAX,EAAA,CACIa,SAAIa,EAAAiB,MAAM,EAAG,GAAGtB,KAAI,CAACO,EAAMC,IACxBlB,EAACV,EAAA,CAEG,UAASmB,EAAQS,GACjBC,MACI,CAAC,EAAG,GAAGC,SAASF,GACV,QACA,OAGThB,WAAKyC,kBARDzB,MAHFF,SAiB/B"}

package/build/es/components/table/stories/tableCollapsing.stories.d.ts

@@ -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/es/components/table/stories/tableCollapsing.stories.js

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

package/build/es/components/table/stories/tableCollapsing.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tableCollapsing.stories.js","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":"s6BAwBA,MAAMA,EAAO,CACTC,MAAO,uCACPC,UAAWC,EACXC,cAAe,CACXC,6BAAAA,GAEJC,WAAY,CACRC,OAAQ,YAEZC,KAAM,CAAC,aAMEC,EAAuB,CAChCC,KAAM,mBACNC,KAAM,CACFC,QAAS,GAETC,WAAW,EACXC,QAAQ,EACRC,iBAAkB,IAEtBC,OAASL,GACLM,EAAC,OAAIC,MAAO,CAAEC,MAAO,SACjBC,SAAAC,EAACC,EAAA,CACGC,WAAW,EACXC,QACKP,EAAAQ,EAAA,CAAaL,SAA+B,oCAGjDA,SAAA,CAAAH,EAACS,EAAU,CAAAC,QAAQ,EACfP,SAAAC,EAACO,EACI,CAAAR,SAAA,CAAAS,EAAQC,QAAQC,MAAM,EAAG,GAAGC,KAAI,CAACC,EAAQC,MACrCC,EAAwB,CAAAC,MAAI,EACxBhB,SAAAa,GADaC,OAIrBC,EAAY,CAAA,UAGpBE,EACI,CAAAjB,SAAAS,EAAQS,KAAKN,KAAI,CAACO,EAAKC,IACpBC,EAACtC,EAAA,IACOQ,EACJ+B,IAAKF,EACLzB,mBACK4B,EACI,CAAAvB,SAAA,CAAAS,EAAQC,QAAQE,KACb,CAACC,EAAQW,IACLL,EAAIP,KACA,CAACa,EAAML,IACHI,IACIJ,GACAnB,EAACyB,EAAA,CAGG1B,SAAA,CAAAH,EAAC8B,GACI3B,SACLa,IACChB,EAAA+B,EAAA,CACI5B,SAAKyB,EAAAI,qBANLT,OAY7BvB,EAAC8B,GAAgB3B,SAAO,cACvB4B,EACG,CAAA5B,SAAAH,EAACiC,EAAA,CACGC,UAAQ,EACRC,OAAQ,SACRC,KAAM,IACTjC,SAAA,uBAIJ4B,EACG,CAAA5B,SAAAH,EAACiC,EAAA,CACGI,SAAU,GAAGf,EAAI,MAAM,IAAIgB,KAAKhB,EAAI,IAAYiB,uBAChDH,KAAM,IACTjC,SAAA,qBAOZqC,EACG,CAAArC,SAAAH,EAACiC,EAAA,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,EAACwC,EAAA,CAEG,UAAS3B,EAAQ4B,GAEhBtC,WAAK6B,kBAHDS,KAMbzC,EAACZ,GAA6Be,SAE9B"}

package/build/es/components/table/stories/tableComplex.stories.d.ts

@@ -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/es/components/table/stories/tableComplex.stories.js

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

package/build/es/components/table/stories/tableComplex.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tableComplex.stories.js","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":"o4CAgCA,MAAMA,EAAO,CACTC,MAAO,oBACPC,UAAWC,EACXC,cAAe,CACXC,aAAAA,EACAC,UAAAA,EACAC,YAAAA,EACAC,UAAAA,EACAC,SAAAA,EACAC,UAAAA,GAEJC,WAAY,CACRC,OAAQ,YAEZC,KAAM,CAAC,aAMEC,EAAsB,CAC/BC,KAAM,iBACNC,KAAM,CACFC,gBAAgB,EAChBC,WAAW,EACXC,QACIC,EAACf,EAAa,CAAAgB,QAAM,EAACC,SAA2B,gCAEpDA,SAAU,IAEdC,OAASP,IACC,MAAAQ,EAAMC,EAAyB,OAC9BC,EAAYC,GAAiBC,EAAS,IACtCC,EAAaC,GAAkBF,EAAS,IACxCG,EAAQC,GAAaJ,EAASK,EAAQC,QAAQ,KAC9CC,EAAWC,GAAgBR,EAA6B,SACxDS,EAAQC,GAAaV,EAAS,KAC9BW,EAAQC,GAAaZ,EAAS,KAC9Ba,EAAcC,GAAmBd,EAASK,EAAQU,MAEnDC,EAAalB,EAAaG,GAUxBgB,aAAAA,GAAiBC,EACrBf,EACAI,GAVqB,CACrBY,EACAC,KAEAhB,EAAUe,GACVX,EAAaY,EAAa,IAS9B,OAAAC,GAAU,KACNP,EACIT,EAAQU,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,EAAAC,EAAA,CAAAnC,SAAA,CAAAkC,EAAC,QAAA,CACGE,MAAO,CACHC,QAAS,OACTC,IAAK,OACLC,WAAY,MACZC,eAAgB,QAGpBxC,SAAA,CAAAF,EAAC2C,EAAA,CACGC,MAAO,MACPC,MAAO5B,EACP6B,YAAa,MACbC,SAAWC,GAAM9B,EAAU8B,EAAEC,OAAOJ,SAExC7C,EAACkD,EAAA,CACGC,MAAO,CACH,CAAEP,MAAO,gBAAiBC,MAAO,IACjC,UACA,aACA,WAEJD,MAAO,SACPjD,KAAM,SACNkD,MAAO1B,EACP4B,SAAWC,GAAM5B,EAAU4B,EAAEC,OAAOJ,SAGxC7C,EAACoD,EAAA,CACGC,QAAS,KACLnC,EAAU,IACVE,EAAU,GAAE,EAEnBlB,SAAA,oBAILF,EAAC,MAAI,CAAAsC,MAAO,CAAEgB,MAAO,SACjBpD,SAAAkC,EAACrD,EAAO,IAAGa,EACPM,SAAA,CAAAF,EAACd,EAAU,CAAAqE,QAAQ,EACfrD,SAAAF,EAACX,GACIa,SAAQW,EAAAC,QACJqB,MAAM,EAAG,GACTqB,KAAI,CAACC,EAAQC,IACV1D,EAACb,EAAA,CAEGwE,MAAI,KACAlC,EAAagC,GAEhBvD,SAAAuD,GAJIC,SASzB1D,EAACZ,GACIc,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,CACdyD,MAAAA,EAAUC,OAAOP,EAAE,IACnBQ,EAAUD,OAAON,EAAE,IAEzB,MAAkB,QAAdhD,EACOqD,EAAUE,EAGdA,EAAUF,CAAA,CAGd,OAAA,CAAA,IAEVZ,KAAI,CAACzB,EAAKwC,IACPnC,EAACoC,EAAA,CAGGC,WAAW,EAEXC,mBACKC,EACI,CAAAzE,SAAA,CAAAW,EAAQC,QAAQ0C,KACb,CAACC,EAAQmB,IACL7C,EAAIyB,KACA,CACIqB,EACAN,IAEAK,IACIL,GACAnC,EAACC,EAAA,CAKGnC,SAAA,CAAAF,EAAC8E,GAEO5E,SAERuD,IACCzD,EAAA+E,EAAA,CACI7E,SAAK2E,EAAAG,qBATNT,OAe5BvE,EAAC8E,GAAgB5E,SAEjB,cACC6E,EACG,CAAA7E,SAAAF,EAACiF,EAAA,CACGC,UAAQ,EACRjC,OAAQ,SACRkC,KAAM,IACTjF,SAAA,uBAIJ6E,EACG,CAAA7E,SAAAF,EAACiF,EAAA,CACGG,SAAU,GAAGrD,EAAI,MAAM,IAAIkC,KAAKlC,EAAI,IAAYsD,uBAChDF,KAAM,IACTjF,SAAA,kBAObA,SAAA,CAAAF,EAACV,EACG,CAAAY,SAAAF,EAACiF,EAAA,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,EAACV,EAAA,CAEG,UACIuB,EAAQC,QACJwE,GAIPpF,WAAK8E,kBAPDM,KAUjBtF,EAACuF,GAA6BrF,SAE9B,mBA9EKqE,KAkFjBvE,EAACX,EACG,CAAAa,SAAAF,EAACV,GAAUkG,QAAS,GAAItF,SAExB,gCAIXuF,EACG,CAAAvF,SAAAF,EAACX,GACGa,SAACF,EAAAV,EAAA,CAAUkG,QAAS,GAChBtF,SAAAF,EAAC0F,EAAA,CACGpF,WAAAA,EACAqF,kBAAmB9E,EAAQU,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/es/components/table/stories/tableFiltering.stories.d.ts

@@ -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/es/components/table/stories/tableFiltering.stories.js

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

package/build/es/components/table/stories/tableFiltering.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tableFiltering.stories.js","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":"u7BAsBA,MAAMA,EAAO,CACTC,MAAO,oBACPC,UAAWC,EACXC,cAAe,CACXC,aAAAA,EACAC,UAAAA,EACAC,YAAAA,EACAC,UAAAA,EACAC,SAAAA,EACAC,UAAAA,GAEJC,WAAY,CACRC,OAAQ,YAEZC,KAAM,CAAC,aAMEC,EAAwB,CACjCC,KAAM,qBACNC,KAAM,CACFC,gBAAgB,EAChBC,WAAW,EACXC,QACIC,EAACf,EAAa,CAAAgB,QAAM,EAACC,SAA2B,gCAEpDA,SAAU,IAEdC,OAASP,IACC,MAACQ,EAAQC,GAAaC,EAAS,KAC9BC,EAAQC,GAAaF,EAAS,KAC9BG,EAAcC,GAAmBJ,EAASK,EAAQC,MAEzD,OAAAC,GAAU,KACNH,EACIC,EAAQC,KACHE,QAAQC,GACLA,EACKC,WACAC,cACAC,SAASd,EAAOa,iBAExBH,QAAQC,GACLA,EAAI,GACCC,WACAC,cACAC,SAASX,EAAOU,iBAEjC,GACD,CAACb,EAAQG,MAGP,MAAI,CAAAY,MAAO,CAACC,MAAO,SAChBlB,SAAA,CAAAmB,EAAC,QAAA,CACGF,MAAO,CACHG,QAAS,OACTC,IAAK,OACLC,WAAY,MACZC,eAAgB,QAGpBvB,SAAA,CAAAF,EAAC0B,EAAA,CACGC,MAAO,MACPC,MAAOxB,EACPyB,YAAa,MACbC,SAAWC,GAAM1B,EAAU0B,EAAEC,OAAOJ,SAExC5B,EAACiC,EAAA,CACGC,MAAO,CACH,CAACP,MAAO,gBAAiBC,MAAO,IAChC,UACA,aACA,WAEJD,MAAO,SACPhC,KAAM,SACNiC,MAAOrB,EACPuB,SAAWC,GAAMvB,EAAUuB,EAAEC,OAAOJ,SAGxC5B,EAACmC,EAAA,CACGC,QAAS,KACL/B,EAAU,IACVG,EAAU,GAAE,EAEnBN,SAAA,oBAILmB,EAACtC,EAAO,IAAGa,EACPM,SAAA,CAACF,EAAAd,EAAA,CAAUmD,QAAQ,EACfnC,SAAAF,EAACX,GACIa,SAAQS,EAAA2B,QAAQC,MAAM,GAAGC,KAAI,CAACC,EAAQC,MAClCvD,EAAwB,CAAAwD,MAAI,EACxBzC,SADauC,GAAAC,SAM9B1C,EAACZ,EACI,CAAAc,SAAwB,IAAxBO,EAAamC,OACVnC,EAAa+B,KAAI,CAACzB,EAAK8B,IACnBxB,EAAChC,EACG,CAAAa,SAAA,CAAAF,EAACV,EACG,CAAAY,SAAAF,EAAC8C,EAAA,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,EAACV,EAAA,CAEG,UAASqB,EAAQ2B,QAAQc,GAExBlD,WAAKmD,kBAHDD,OAbFP,KAsBlB7C,EAAAX,EAAA,CACGa,SAACF,EAAAV,EAAA,CAAUgE,QAAS,GAAIpD,SAExB,mCAKpB"}

package/build/{cjs/components/accordion/stories/AccordionItem.stories.d.cts → es/components/table/stories/tablePagination.stories.d.ts}

@@ -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').AccordionItemProps>;
+    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 AccordionItem: Story;
+export declare const TablePaginationStory: Story;

package/build/es/components/table/stories/tablePagination.stories.js

@@ -0,0 +1,2 @@
+import{jsxs as e,jsx as a}from"react/jsx-runtime";import"react";import{Link as o}from"../../link/Link.js";import{Table as r}from"../Table.js";import{TableBody as t}from"../TableBody.js";import{TableCaption as n}from"../TableCaption.js";import{TableCell as i}from"../TableCell.js";import{TableFooter as l}from"../TableFooter.js";import{TableHead as s}from"../TableHead.js";import{TableHeader as m}from"../TableHeader.js";import{TablePagination as p}from"../TablePagination.js";import{TableRow as d}from"../TableRow.js";import{c}from"../../../../paginated-table-data-ZMeh4d0Y.js";import{faktura as g}from"./data.js";/* empty css                         *//* empty css                         *//* empty css                         */const b={title:"Komponenter/Table/TablePagination",component:p,parameters:{layout:"centered"},tags:["autodocs"]},T={name:"TablePagination",args:{labels:{next:"Neste side",previous:"Forrige side",rowsPerPage:"Fakturaer per side"},activePage:0,totalNumberOfRows:g.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:g.rows.length,max:g.rows.length}},rowsPerPage:{control:{type:"number",min:-1,max:g.rows.length}},withGoToPage:{control:"boolean",description:"Du kan også velge å endre teksten ved siden av input-feltet med en optional goToPageLabel-prop."}},render:b=>{const T=(b.activePage||0)*b.rowsPerPage,P=g.rows.slice(T,T+b.rowsPerPage);return e(r,{caption:a(n,{children:"Eksempel på paginering"}),children:[a(s,{sticky:!0,children:a(d,{children:g.columns.slice(0,5).map(((e,o)=>a(m,{bold:!0,children:e},o)))})}),a(t,{children:P.map(((r,t)=>e(d,{children:[a(i,{children:a(o,{download:`${r[3]} ${new Date(r[0]).toLocaleDateString()}`,href:"#",children:new Date(r[0]).toLocaleDateString()})}),r.slice(1,5).map(((e,o)=>a(i,{"data-th":c[o],children:e.toLocaleString()},o)))]},t)))}),a(l,{children:a(d,{children:a(i,{colSpan:99,children:a(p,{...b})})})})]})}};export{T as TablePaginationStory,b as default};
+//# sourceMappingURL=tablePagination.stories.js.map

package/build/es/components/table/stories/tablePagination.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tablePagination.stories.js","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":"2tBAmBA,MAAMA,EAAO,CACTC,MAAO,oCACPC,UAAWC,EACXC,WAAY,CACRC,OAAQ,YAEZC,KAAM,CAAC,aAMEC,EAA8B,CACvCC,KAAM,kBACNC,KAAM,CACFC,OAAQ,CACJC,KAAM,aACNC,SAAU,eACVC,YAAa,sBAEjBC,WAAY,EACZC,kBAAmBC,EAAQC,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,EAAQC,KAAKC,OAClBY,IAAKd,EAAQC,KAAKC,SAG1BL,YAAa,CACTc,QAAS,CACLC,KAAM,SACNC,KAAK,EACLC,IAAKd,EAAQC,KAAKC,SAG1BI,aAAc,CACVK,QAAS,UACTI,YACI,oGAIZC,OAASvB,IACCwB,MAAAA,GAAcxB,EAAKK,YAAc,GAAKL,EAAKI,YAE3CqB,EAAclB,EAAQC,KAAKkB,MAC7BF,EACAA,EAAaxB,EAAKI,aAIlB,OAAAuB,EAACC,EAAA,CACGC,QAAUC,EAAAC,EAAA,CAAaC,SAAsB,2BAE7CA,SAAA,CAACF,EAAAG,EAAA,CAAUC,QAAQ,EACfF,SAAAF,EAACK,GACIH,SAAQzB,EAAA6B,QAAQV,MAAM,EAAG,GAAGW,KAAI,CAACC,EAAQC,IACtCT,EAACU,EAAwB,CAAAC,MAAI,EACxBT,SADaM,GAAAC,SAM9BT,EAACY,GACIV,SAAYP,EAAAY,KAAI,CAACM,EAAKC,MAClBT,EACG,CAAAH,SAAA,CAAAF,EAACe,EACG,CAAAb,SAAAF,EAACgB,EAAA,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,EAACe,EAAA,CAEG,UAAST,EAAQgB,GAEhBpB,WAAKqB,kBAHDD,OAbFR,OAsBtBd,EAAAwB,EAAA,CACGtB,SAACF,EAAAK,EAAA,CACGH,WAACa,EAAU,CAAAU,QAAS,GAChBvB,SAAAF,EAACpC,EAAiB,IAAGM,YAIrC"}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/build/es/components/toast/Toast.js

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

package/build/es/components/toast/Toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.js","sources":["../../../../src/components/toast/Toast.tsx"],"sourcesContent":["import { type AriaToastProps, useToast } from \"@react-aria/toast\";\nimport type { QueuedToast, ToastState } from \"@react-stately/toast\";\nimport clsx from \"clsx\";\nimport React, { useEffect, useRef } from \"react\";\nimport { useBrowserPreferences } from \"../../hooks/useBrowserPreferences/useBrowserPreferences.js\";\nimport { Button } from \"../button/Button.js\";\nimport { Countdown } from \"../countdown/Countdown.js\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport { CloseIcon } from \"../icon/icons/CloseIcon.js\";\nimport { ErrorIcon } from \"../icon/icons/ErrorIcon.js\";\nimport { InfoIcon } from \"../icon/icons/InfoIcon.js\";\nimport { SuccessIcon } from \"../icon/icons/SuccessIcon.js\";\nimport { WarningIcon } from \"../icon/icons/WarningIcon.js\";\nimport type { ToastContent, ToastOptions } from \"./types.js\";\n\nexport interface ToastProps<T extends ToastContent> extends AriaToastProps<T> {\n    className?: string;\n    state: ToastState<T>;\n    toast: QueuedToast<T> & ToastOptions;\n}\n\nconst getIcon = (messageType?: \"error\" | \"info\" | \"success\" | \"warning\") => {\n    switch (messageType) {\n        case \"error\":\n            return <ErrorIcon className=\"jkl-toast__icon\" />;\n        case \"info\":\n            return <InfoIcon className=\"jkl-toast__icon\" />;\n        case \"success\":\n            return <SuccessIcon className=\"jkl-toast__icon\" />;\n        case \"warning\":\n            return <WarningIcon className=\"jkl-toast__icon\" />;\n        default:\n            return null;\n    }\n};\n\nexport function Toast<T extends ToastContent>({\n    className,\n    state,\n    ...props\n}: ToastProps<T>) {\n    const ref = useRef(null);\n    const { toastProps, titleProps } = useToast(props, state, ref);\n\n    const content =\n        typeof props.toast.content === \"string\"\n            ? props.toast.content\n            : props.toast.content.content;\n    const title =\n        typeof props.toast.content === \"string\"\n            ? undefined\n            : props.toast.content.title;\n\n    // @ts-ignore Proxy for å sjekke om timeren er pauset: https://github.com/adobe/react-spectrum/blob/b1545c0d225b12672fb6a4e7b787268591d66b90/packages/%40react-stately/toast/src/useToastState.ts#L222\n    const isPaused = props.toast.timer?.timerId == null;\n\n    const { prefersReducedMotion } = useBrowserPreferences();\n\n    useEffect(() => {\n        if (prefersReducedMotion && props.toast.animation === \"exiting\") {\n            // If user has prefers-reduced-motion the exit animation won't run and our\n            // onAnimationEnd callback won't be invoked. In this case, remove the toast\n            // manually.\n            state.remove(props.toast.key);\n        }\n    }, [prefersReducedMotion, props.toast.animation, props.toast.key, state]);\n\n    return (\n        <div\n            {...toastProps}\n            ref={ref}\n            className={clsx(\n                \"jkl-toast\",\n                {\n                    \"jkl-toast--info\": props.toast.variant === \"info\",\n                    \"jkl-toast--error\": props.toast.variant === \"error\",\n                    \"jkl-toast--warning\": props.toast.variant === \"warning\",\n                    \"jkl-toast--success\": props.toast.variant === \"success\",\n                },\n                className,\n            )}\n            data-animation={props.toast.animation}\n            onAnimationEnd={() => {\n                // Remove the toast when the exiting animation completes.\n                if (props.toast.animation === \"exiting\") {\n                    state.remove(props.toast.key);\n                }\n            }}\n        >\n            <span className=\"jkl-toast__progress\">\n                {props.toast.timeout ? (\n                    <Countdown\n                        from={props.toast.timeout}\n                        isPaused={isPaused}\n                        onAnimationEnd={(e) => {\n                            // Avoid triggering the toast's onAnimationEnd handler so we still get our exit animation\n                            e.stopPropagation();\n                        }}\n                    />\n                ) : null}\n            </span>\n            {getIcon(props.toast.variant)}\n            <div {...titleProps} className=\"jkl-toast__content\">\n                {title && <p className=\"jkl-toast__title\">{title}</p>}\n                <p className=\"jkl-toast__message\">{content}</p>\n                {props.toast.action && (\n                    <div className=\"jkl-toast__action\">\n                        <Button\n                            variant=\"secondary\"\n                            density=\"compact\"\n                            onClick={props.toast.action.onClick}\n                        >\n                            {props.toast.action.label}\n                        </Button>\n                    </div>\n                )}\n            </div>\n            <IconButton\n                data-theme={!props.toast.variant ? undefined : \"light\"}\n                aria-label=\"Lukk varsel\"\n                className=\"jkl-toast__dismiss-button\"\n                onClick={() => {\n                    state.close(props.toast.key);\n                }}\n            >\n                <CloseIcon />\n            </IconButton>\n        </div>\n    );\n}\n"],"names":["getIcon","messageType","jsx","ErrorIcon","className","InfoIcon","SuccessIcon","WarningIcon","Toast","state","props","ref","useRef","toastProps","titleProps","useToast","content","toast","title","isPaused","_a","timer","timerId","prefersReducedMotion","useBrowserPreferences","useEffect","animation","remove","key","jsxs","clsx","variant","onAnimationEnd","children","timeout","Countdown","from","e","stopPropagation","action","Button","density","onClick","label","IconButton","close","CloseIcon"],"mappings":"otBAqBA,MAAMA,EAAWC,IACb,OAAQA,GACJ,IAAK,QACM,OAAAC,EAACC,EAAU,CAAAC,UAAU,oBAChC,IAAK,OACM,OAAAF,EAACG,EAAS,CAAAD,UAAU,oBAC/B,IAAK,UACM,OAAAF,EAACI,EAAY,CAAAF,UAAU,oBAClC,IAAK,UACM,OAAAF,EAACK,EAAY,CAAAH,UAAU,oBAClC,QACW,OAAA,KAAA,EAIZ,SAASI,GACZJ,UAAAA,EACAK,MAAAA,KACGC,UAEGC,MAAAA,EAAMC,EAAO,OACXC,WAAAA,EAAYC,WAAAA,GAAeC,EAASL,EAAOD,EAAOE,GAEpDK,EAC6B,iBAAxBN,EAAMO,MAAMD,QACbN,EAAMO,MAAMD,QACZN,EAAMO,MAAMD,QAAQA,QACxBE,EAC6B,iBAAxBR,EAAMO,MAAMD,aACb,EACAN,EAAMO,MAAMD,QAAQE,MAGxBC,EAAyC,OAA9B,OAAAC,EAAAV,EAAMO,MAAMI,YAAZ,EAAAD,EAAmBE,UAE5BC,qBAAAA,GAAyBC,IAEjC,OAAAC,GAAU,KACFF,GAAkD,YAA1Bb,EAAMO,MAAMS,WAI9BjB,EAAAkB,OAAOjB,EAAMO,MAAMW,IAAG,GAEjC,CAACL,EAAsBb,EAAMO,MAAMS,UAAWhB,EAAMO,MAAMW,IAAKnB,IAG9DoB,EAAC,MAAA,IACOhB,EACJF,IAAAA,EACAP,UAAW0B,EACP,YACA,CACI,kBAA2C,SAAxBpB,EAAMO,MAAMc,QAC/B,mBAA4C,UAAxBrB,EAAMO,MAAMc,QAChC,qBAA8C,YAAxBrB,EAAMO,MAAMc,QAClC,qBAA8C,YAAxBrB,EAAMO,MAAMc,SAEtC3B,GAEJ,iBAAgBM,EAAMO,MAAMS,UAC5BM,eAAgB,KAEkB,YAA1BtB,EAAMO,MAAMS,WACNjB,EAAAkB,OAAOjB,EAAMO,MAAMW,IAAG,EAIpCK,SAAA,CAAA/B,EAAC,OAAK,CAAAE,UAAU,sBACX6B,SAAAvB,EAAMO,MAAMiB,QACThC,EAACiC,EAAA,CACGC,KAAM1B,EAAMO,MAAMiB,QAClBf,SAAAA,EACAa,eAAiBK,IAEbA,EAAEC,iBAAgB,IAG1B,OAEPtC,EAAQU,EAAMO,MAAMc,SACpBF,EAAA,MAAA,IAAQf,EAAYV,UAAU,qBAC1B6B,SAAA,CAAAf,GAAUhB,EAAA,IAAA,CAAEE,UAAU,mBAAoB6B,SAAMf,IAChDhB,EAAA,IAAA,CAAEE,UAAU,qBAAsB6B,SAAQjB,IAC1CN,EAAMO,MAAMsB,QACRrC,EAAA,MAAA,CAAIE,UAAU,oBACX6B,SAAA/B,EAACsC,EAAA,CACGT,QAAQ,YACRU,QAAQ,UACRC,QAAShC,EAAMO,MAAMsB,OAAOG,QAE3BT,SAAAvB,EAAMO,MAAMsB,OAAOI,aAKpCzC,EAAC0C,EAAA,CACG,aAAalC,EAAMO,MAAMc,QAAsB,aAAZ,EACnC,aAAW,cACX3B,UAAU,4BACVsC,QAAS,KACCjC,EAAAoC,MAAMnC,EAAMO,MAAMW,IAAG,EAG/BK,WAACa,EAAU,CAAA,OAI3B"}
+{"version":3,"file":"Toast.js","sources":["../../../../src/components/toast/Toast.tsx"],"sourcesContent":["import { type AriaToastProps, useToast } from \"@react-aria/toast\";\nimport type { QueuedToast, ToastState } from \"@react-stately/toast\";\nimport clsx from \"clsx\";\nimport React, { useEffect, useRef } from \"react\";\nimport { useBrowserPreferences } from \"../../hooks/useBrowserPreferences/useBrowserPreferences.js\";\nimport { Button } from \"../button/Button.js\";\nimport { Countdown } from \"../countdown/Countdown.js\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport { CloseIcon } from \"../icon/icons/CloseIcon.js\";\nimport { ErrorIcon } from \"../icon/icons/ErrorIcon.js\";\nimport { InfoIcon } from \"../icon/icons/InfoIcon.js\";\nimport { SuccessIcon } from \"../icon/icons/SuccessIcon.js\";\nimport { WarningIcon } from \"../icon/icons/WarningIcon.js\";\nimport type { ToastContent, ToastOptions } from \"./types.js\";\n\nexport interface ToastProps<T extends ToastContent> extends AriaToastProps<T> {\n    className?: string;\n    state: ToastState<T>;\n    toast: QueuedToast<T> & ToastOptions;\n}\n\nconst getIcon = (messageType?: \"error\" | \"info\" | \"success\" | \"warning\") => {\n    switch (messageType) {\n        case \"error\":\n            return <ErrorIcon className=\"jkl-toast__icon\" />;\n        case \"info\":\n            return <InfoIcon className=\"jkl-toast__icon\" />;\n        case \"success\":\n            return <SuccessIcon className=\"jkl-toast__icon\" />;\n        case \"warning\":\n            return <WarningIcon className=\"jkl-toast__icon\" />;\n        default:\n            return null;\n    }\n};\n\nexport function Toast<T extends ToastContent>({\n    className,\n    state,\n    ...props\n}: ToastProps<T>) {\n    const ref = useRef(null);\n    const { toastProps, titleProps } = useToast(props, state, ref);\n\n    const content =\n        typeof props.toast.content === \"string\"\n            ? props.toast.content\n            : props.toast.content.content;\n    const title =\n        typeof props.toast.content === \"string\"\n            ? undefined\n            : props.toast.content.title;\n\n    // @ts-ignore Proxy for å sjekke om timeren er pauset: https://github.com/adobe/react-spectrum/blob/b1545c0d225b12672fb6a4e7b787268591d66b90/packages/%40react-stately/toast/src/useToastState.ts#L222\n    const isPaused = props.toast.timer?.timerId == null;\n\n    const { prefersReducedMotion } = useBrowserPreferences();\n\n    useEffect(() => {\n        if (prefersReducedMotion && props.toast.animation === \"exiting\") {\n            // If user has prefers-reduced-motion the exit animation won't run and our\n            // onAnimationEnd callback won't be invoked. In this case, remove the toast\n            // manually.\n            state.remove(props.toast.key);\n        }\n    }, [prefersReducedMotion, props.toast.animation, props.toast.key, state]);\n\n    return (\n        <div\n            {...toastProps}\n            ref={ref}\n            className={clsx(\n                \"jkl-toast\",\n                {\n                    \"jkl-toast--info\": props.toast.variant === \"info\",\n                    \"jkl-toast--error\": props.toast.variant === \"error\",\n                    \"jkl-toast--warning\": props.toast.variant === \"warning\",\n                    \"jkl-toast--success\": props.toast.variant === \"success\",\n                },\n                className,\n            )}\n            data-animation={props.toast.animation}\n            onAnimationEnd={() => {\n                // Remove the toast when the exiting animation completes.\n                if (props.toast.animation === \"exiting\") {\n                    state.remove(props.toast.key);\n                }\n            }}\n        >\n            <span className=\"jkl-toast__progress\">\n                {props.toast.timeout ? (\n                    <Countdown\n                        from={props.toast.timeout}\n                        isPaused={isPaused}\n                        onAnimationEnd={(e) => {\n                            // Avoid triggering the toast's onAnimationEnd handler so we still get our exit animation\n                            e.stopPropagation();\n                        }}\n                    />\n                ) : null}\n            </span>\n            {getIcon(props.toast.variant)}\n            <div {...titleProps} className=\"jkl-toast__content\">\n                {title && <p className=\"jkl-toast__title\">{title}</p>}\n                <p className=\"jkl-toast__message\">{content}</p>\n                {props.toast.action && (\n                    <div className=\"jkl-toast__action\">\n                        <Button\n                            variant=\"secondary\"\n                            density=\"compact\"\n                            onClick={props.toast.action.onClick}\n                        >\n                            {props.toast.action.label}\n                        </Button>\n                    </div>\n                )}\n            </div>\n            <IconButton\n                data-theme={!props.toast.variant ? undefined : \"light\"}\n                aria-label=\"Lukk varsel\"\n                className=\"jkl-toast__dismiss-button\"\n                onClick={() => {\n                    state.close(props.toast.key);\n                }}\n            >\n                <CloseIcon />\n            </IconButton>\n        </div>\n    );\n}\n"],"names":["getIcon","messageType","jsx","ErrorIcon","className","InfoIcon","SuccessIcon","WarningIcon","Toast","state","props","ref","useRef","toastProps","titleProps","useToast","content","toast","title","isPaused","timer","timerId","prefersReducedMotion","useBrowserPreferences","useEffect","animation","remove","key","jsxs","clsx","variant","onAnimationEnd","children","timeout","Countdown","from","e","stopPropagation","action","Button","density","onClick","label","IconButton","close","CloseIcon"],"mappings":"otBAqBA,MAAMA,EAAWC,IACb,OAAQA,GACJ,IAAK,QACM,OAAAC,EAACC,EAAU,CAAAC,UAAU,oBAChC,IAAK,OACM,OAAAF,EAACG,EAAS,CAAAD,UAAU,oBAC/B,IAAK,UACM,OAAAF,EAACI,EAAY,CAAAF,UAAU,oBAClC,IAAK,UACM,OAAAF,EAACK,EAAY,CAAAH,UAAU,oBAClC,QACW,OAAA,KAAA,EAIZ,SAASI,GACZJ,UAAAA,EACAK,MAAAA,KACGC,IAEGC,MAAAA,EAAMC,EAAO,OACXC,WAAAA,EAAYC,WAAAA,GAAeC,EAASL,EAAOD,EAAOE,GAEpDK,EAC6B,iBAAxBN,EAAMO,MAAMD,QACbN,EAAMO,MAAMD,QACZN,EAAMO,MAAMD,QAAQA,QACxBE,EAC6B,iBAAxBR,EAAMO,MAAMD,aACb,EACAN,EAAMO,MAAMD,QAAQE,MAGxBC,EAAyC,MAA9BT,EAAMO,MAAMG,OAAOC,SAE5BC,qBAAAA,GAAyBC,IAEjC,OAAAC,GAAU,KACFF,GAAkD,YAA1BZ,EAAMO,MAAMQ,WAI9BhB,EAAAiB,OAAOhB,EAAMO,MAAMU,IAAG,GAEjC,CAACL,EAAsBZ,EAAMO,MAAMQ,UAAWf,EAAMO,MAAMU,IAAKlB,IAG9DmB,EAAC,MAAA,IACOf,EACJF,IAAAA,EACAP,UAAWyB,EACP,YACA,CACI,kBAA2C,SAAxBnB,EAAMO,MAAMa,QAC/B,mBAA4C,UAAxBpB,EAAMO,MAAMa,QAChC,qBAA8C,YAAxBpB,EAAMO,MAAMa,QAClC,qBAA8C,YAAxBpB,EAAMO,MAAMa,SAEtC1B,GAEJ,iBAAgBM,EAAMO,MAAMQ,UAC5BM,eAAgB,KAEkB,YAA1BrB,EAAMO,MAAMQ,WACNhB,EAAAiB,OAAOhB,EAAMO,MAAMU,IAAG,EAIpCK,SAAA,CAAA9B,EAAC,OAAK,CAAAE,UAAU,sBACX4B,SAAAtB,EAAMO,MAAMgB,QACT/B,EAACgC,EAAA,CACGC,KAAMzB,EAAMO,MAAMgB,QAClBd,SAAAA,EACAY,eAAiBK,IAEbA,EAAEC,iBAAgB,IAG1B,OAEPrC,EAAQU,EAAMO,MAAMa,SACpBF,EAAA,MAAA,IAAQd,EAAYV,UAAU,qBAC1B4B,SAAA,CAAAd,GAAUhB,EAAA,IAAA,CAAEE,UAAU,mBAAoB4B,SAAMd,IAChDhB,EAAA,IAAA,CAAEE,UAAU,qBAAsB4B,SAAQhB,IAC1CN,EAAMO,MAAMqB,QACRpC,EAAA,MAAA,CAAIE,UAAU,oBACX4B,SAAA9B,EAACqC,EAAA,CACGT,QAAQ,YACRU,QAAQ,UACRC,QAAS/B,EAAMO,MAAMqB,OAAOG,QAE3BT,SAAAtB,EAAMO,MAAMqB,OAAOI,aAKpCxC,EAACyC,EAAA,CACG,aAAajC,EAAMO,MAAMa,QAAsB,aAAZ,EACnC,aAAW,cACX1B,UAAU,4BACVqC,QAAS,KACChC,EAAAmC,MAAMlC,EAAMO,MAAMU,IAAG,EAG/BK,WAACa,EAAU,CAAA,OAI3B"}

package/build/es/components/toast/toastContext.js

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{ToastQueue as o}from"@react-stately/toast";import{createContext as s,useContext as a,useState as i}from"react";import{ToastRegion as r}from"./ToastRegion.js";const n=s({add:()=>"missing-provider",close:()=>{}}),m=()=>a(n),u=({children:s,maxVisibleToasts:a=5,placement:m="center"})=>{const[u]=i(new o({maxVisibleToasts:a,hasExitAnimation:!0}));return e(n.Provider,{value:{close:u.close.bind(u),add:(e,t)=>{let o=5e3;return"number"==typeof(null==t?void 0:t.timeout)?o=t.timeout:(null===(null==t?void 0:t.timeout)||"off"===(null==t?void 0:t.timeout))&&(o=void 0),u.add(e,{...t,timeout:o})}},children:[s,t(r,{queue:u,placement:m})]})};export{u as ToastProvider,m as useToast};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{ToastQueue as o}from"@react-stately/toast";import{createContext as s,useContext as a,useState as i}from"react";import{ToastRegion as r}from"./ToastRegion.js";const m=s({add:()=>"missing-provider",close:()=>{}}),n=()=>a(m),u=({children:s,maxVisibleToasts:a=5,placement:n="center"})=>{const[u]=i(new o({maxVisibleToasts:a,hasExitAnimation:!0}));return e(m.Provider,{value:{close:u.close.bind(u),add:(e,t)=>{let o=5e3;return"number"==typeof t?.timeout?o=t.timeout:(null===t?.timeout||"off"===t?.timeout)&&(o=void 0),u.add(e,{...t,timeout:o})}},children:[s,t(r,{queue:u,placement:n})]})};export{u as ToastProvider,n as useToast};
 //# sourceMappingURL=toastContext.js.map