@fremtind/jokul 0.61.0 → 0.62.0

package/build/cjs/components/table/DataTable.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("react"),a=require("./Table.cjs"),r=require("./TableBody.cjs"),i=require("./TableCaption.cjs"),s=require("./TableCell.cjs"),c=require("./TableHead.cjs"),t=require("./TableHeader.cjs"),n=require("./TableRow.cjs"),d=l.forwardRef((({caption:l,columns:d,emptyTableText:b,rows:o,verticalAlign:T,...j},u)=>e.jsxs(a.Table,{fullWidth:!0,...j,ref:u,children:[l&&e.jsx(i.TableCaption,{srOnly:!0,children:l}),e.jsx(c.TableHead,{children:e.jsx(n.TableRow,{children:d.map(((l,a)=>e.jsx(t.TableHeader,{density:"compact",bold:!0,children:l},a)))})}),e.jsxs(r.TableBody,{children:[0===o.length&&b&&e.jsx(n.TableRow,{children:e.jsx(s.TableCell,{colSpan:d.length,children:b})}),o.map(((l,a)=>e.jsx(n.TableRow,{children:l.map(((l,a)=>e.jsx(s.TableCell,{"data-th":d[a],verticalAlign:T,children:l},a)))},a)))]})]})));d.displayName="DataTable",exports.DataTable=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("react"),a=require("./Table.cjs"),r=require("./TableBody.cjs"),i=require("./TableCaption.cjs"),c=require("./TableCell.cjs"),s=require("./TableHead.cjs"),t=require("./TableHeader.cjs"),n=require("./TableRow.cjs"),d=l.forwardRef((({caption:l,columns:d,emptyTableText:b,rows:o,verticalAlign:T,...j},u)=>e.jsxs(a.Table,{caption:e.jsx(i.TableCaption,{srOnly:!0,children:l}),fullWidth:!0,...j,ref:u,children:[e.jsx(s.TableHead,{children:e.jsx(n.TableRow,{children:d.map(((l,a)=>e.jsx(t.TableHeader,{density:"compact",bold:!0,children:l},a)))})}),e.jsxs(r.TableBody,{children:[0===o.length&&b&&e.jsx(n.TableRow,{children:e.jsx(c.TableCell,{colSpan:d.length,children:b})}),o.map(((l,a)=>e.jsx(n.TableRow,{children:l.map(((l,a)=>e.jsx(c.TableCell,{"data-th":d[a],verticalAlign:T,children:l},a)))},a)))]})]})));d.displayName="DataTable",exports.DataTable=d;
 //# sourceMappingURL=DataTable.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"DataTable.cjs","sources":["../../../../src/components/table/DataTable.tsx"],"sourcesContent":["import React, { forwardRef } 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 { DataTableProps } from \"./types.js\";\n\nconst DataTable = forwardRef<HTMLTableElement, DataTableProps>(\n    (\n        { caption, columns, emptyTableText, rows, verticalAlign, ...rest },\n        ref,\n    ) => {\n        return (\n            <Table fullWidth={true} {...rest} ref={ref}>\n                {caption && <TableCaption srOnly>{caption}</TableCaption>}\n                <TableHead>\n                    <TableRow>\n                        {columns.map((column, index) => (\n                            <TableHeader key={index} density=\"compact\" bold>\n                                {column}\n                            </TableHeader>\n                        ))}\n                    </TableRow>\n                </TableHead>\n                <TableBody>\n                    {rows.length === 0 && emptyTableText && (\n                        <TableRow>\n                            <TableCell colSpan={columns.length}>\n                                {emptyTableText}\n                            </TableCell>\n                        </TableRow>\n                    )}\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                                    verticalAlign={verticalAlign}\n                                >\n                                    {cell}\n                                </TableCell>\n                            ))}\n                        </TableRow>\n                    ))}\n                </TableBody>\n            </Table>\n        );\n    },\n);\n\nDataTable.displayName = \"DataTable\";\n\nexport { DataTable };\n"],"names":["DataTable","forwardRef","caption","columns","emptyTableText","rows","verticalAlign","rest","ref","Table","fullWidth","children","jsx","TableCaption","srOnly","TableHead","TableRow","map","column","index","TableHeader","density","bold","TableBody","length","TableCell","colSpan","row","rowIndex","cell","cellIndex","displayName"],"mappings":"mVAUMA,EAAYC,EAAAA,YACd,EACMC,QAAAA,EAASC,QAAAA,EAASC,eAAAA,EAAgBC,KAAAA,EAAMC,cAAAA,KAAkBC,GAC5DC,WAGKC,EAAMA,MAAA,CAAAC,WAAW,KAAUH,EAAMC,IAAAA,EAC7BG,SAAA,CAAAT,GAAYU,EAAAA,IAAAC,eAAA,CAAaC,QAAM,EAAEH,SAAQT,UACzCa,EACGA,UAAA,CAAAJ,SAAAC,MAACI,EAAAA,UACIL,SAAQR,EAAAc,KAAI,CAACC,EAAQC,UACjBC,EAAAA,YAAwB,CAAAC,QAAQ,UAAUC,MAAI,EAC1CX,YADaQ,gBAM7BI,EAAAA,UACI,CAAAZ,SAAA,CAAgB,IAAXN,EAAAmB,QAAgBpB,GACjBQ,EAAAA,IAAAI,EAAAA,SAAA,CACGL,SAACC,EAAAA,IAAAa,EAAAA,UAAA,CAAUC,QAASvB,EAAQqB,OACvBb,SAAAP,MAIZC,EAAKY,KAAI,CAACU,EAAKC,IACXhB,EAAAA,IAAAI,EAAAA,SAAA,CACIL,SAAIgB,EAAAV,KAAI,CAACY,EAAMC,IACZlB,EAAAA,IAACa,EAAAA,UAAA,CAEG,UAAStB,EAAQ2B,GACjBxB,cAAAA,EAECK,SAAAkB,GAJIC,MAHFF,aAkBvC5B,EAAU+B,YAAc"}
+{"version":3,"file":"DataTable.cjs","sources":["../../../../src/components/table/DataTable.tsx"],"sourcesContent":["import React, { forwardRef } 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 { DataTableProps } from \"./types.js\";\n\nconst DataTable = forwardRef<HTMLTableElement, DataTableProps>(\n    (\n        { caption, columns, emptyTableText, rows, verticalAlign, ...rest },\n        ref,\n    ) => {\n        return (\n            <Table\n                caption={<TableCaption srOnly>{caption}</TableCaption>}\n                fullWidth={true}\n                {...rest}\n                ref={ref}\n            >\n                <TableHead>\n                    <TableRow>\n                        {columns.map((column, index) => (\n                            <TableHeader key={index} density=\"compact\" bold>\n                                {column}\n                            </TableHeader>\n                        ))}\n                    </TableRow>\n                </TableHead>\n                <TableBody>\n                    {rows.length === 0 && emptyTableText && (\n                        <TableRow>\n                            <TableCell colSpan={columns.length}>\n                                {emptyTableText}\n                            </TableCell>\n                        </TableRow>\n                    )}\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                                    verticalAlign={verticalAlign}\n                                >\n                                    {cell}\n                                </TableCell>\n                            ))}\n                        </TableRow>\n                    ))}\n                </TableBody>\n            </Table>\n        );\n    },\n);\n\nDataTable.displayName = \"DataTable\";\n\nexport { DataTable };\n"],"names":["DataTable","forwardRef","caption","columns","emptyTableText","rows","verticalAlign","rest","ref","jsxs","Table","jsx","TableCaption","srOnly","children","fullWidth","TableHead","TableRow","map","column","index","TableHeader","density","bold","TableBody","length","TableCell","colSpan","row","rowIndex","cell","cellIndex","displayName"],"mappings":"mVAUMA,EAAYC,EAAAA,YACd,EACMC,QAAAA,EAASC,QAAAA,EAASC,eAAAA,EAAgBC,KAAAA,EAAMC,cAAAA,KAAkBC,GAC5DC,IAGIC,EAAAA,KAACC,EAAAA,MAAA,CACGR,QAASS,EAAAA,IAACC,eAAa,CAAAC,QAAM,EAAEC,SAAQZ,IACvCa,WAAW,KACPR,EACJC,IAAAA,EAEAM,SAAA,CAAAH,EAAAA,IAACK,aACGF,SAACH,MAAAM,EAAAA,SAAA,CACIH,WAAQI,KAAI,CAACC,EAAQC,IAClBT,MAACU,EAAAA,YAAwB,CAAAC,QAAQ,UAAUC,MAAI,EAC1CT,YADaM,gBAM7BI,EAAAA,UACI,CAAAV,SAAA,CAAgB,IAAXT,EAAAoB,QAAgBrB,GACjBO,EAAAA,IAAAM,EAAAA,SAAA,CACGH,SAACH,EAAAA,IAAAe,EAAAA,UAAA,CAAUC,QAASxB,EAAQsB,OACvBX,SAAAV,MAIZC,EAAKa,KAAI,CAACU,EAAKC,IACXlB,EAAAA,IAAAM,EAAAA,SAAA,CACIH,SAAIc,EAAAV,KAAI,CAACY,EAAMC,IACZpB,EAAAA,IAACe,EAAAA,UAAA,CAEG,UAASvB,EAAQ4B,GACjBzB,cAAAA,EAECQ,SAAAgB,GAJIC,MAHFF,aAkBvC7B,EAAUgC,YAAc"}

package/build/cjs/components/table/Table.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../../clsx-E3yX_9sL.cjs"),l=require("react"),s=require("./tableContext.cjs"),a=l.forwardRef((({className:a,density:r,collapseToList:i=!1,fullWidth:o=!1,tabIndex:c,...d},n)=>{const[b,u]=l.useState(!1);return e.jsx(s.TableContextProvider,{state:{density:r,collapseToList:i,setHasStickyHead:u},children:e.jsx("table",{className:t.clsx("jkl-table",a,{"jkl-table--full-width":o,"jkl-table--collapse-to-list":i}),...d,tabIndex:b?0:c,ref:n})})}));a.displayName="Table",exports.Table=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../../clsx-E3yX_9sL.cjs"),l=require("react"),s=require("./tableContext.cjs"),a=l.forwardRef((({className:a,caption:r,children:i,density:c,collapseToList:o=!1,fullWidth:n=!1,tabIndex:d,...b},u)=>{const[x,j]=l.useState(!1);return e.jsx(s.TableContextProvider,{state:{density:c,collapseToList:o,setHasStickyHead:j},children:e.jsxs("table",{className:t.clsx("jkl-table",a,{"jkl-table--full-width":n,"jkl-table--collapse-to-list":o}),...b,tabIndex:x?0:d,ref:u,children:[r,i]})})}));a.displayName="Table",exports.Table=a;
 //# sourceMappingURL=Table.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Table.cjs","sources":["../../../../src/components/table/Table.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, useState } from \"react\";\nimport { TableContextProvider } from \"./tableContext.js\";\nimport { TableProps } from \"./types.js\";\n\nconst Table = forwardRef<HTMLTableElement, TableProps>(\n    (\n        {\n            className,\n            density,\n            collapseToList = false,\n            fullWidth = false,\n            tabIndex,\n            ...rest\n        },\n        ref,\n    ) => {\n        const [hasStickyHead, setHasStickyHead] = useState<boolean>(false);\n\n        return (\n            <TableContextProvider\n                state={{ density, collapseToList, setHasStickyHead }}\n            >\n                <table\n                    className={clsx(\"jkl-table\", className, {\n                        [\"jkl-table--full-width\"]: fullWidth,\n                        [\"jkl-table--collapse-to-list\"]: collapseToList,\n                    })}\n                    {...rest}\n                    // For content in a scrollable table to be accessible with keyboard\n                    // navigation we need to set tabIndex\n                    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n                    tabIndex={hasStickyHead ? 0 : tabIndex}\n                    ref={ref}\n                />\n            </TableContextProvider>\n        );\n    },\n);\n\nTable.displayName = \"Table\";\n\nexport { Table };\n"],"names":["Table","forwardRef","className","density","collapseToList","fullWidth","tabIndex","rest","ref","hasStickyHead","setHasStickyHead","useState","jsx","TableContextProvider","state","children","clsx","displayName"],"mappings":"gNAKMA,EAAQC,EAAAA,YACV,EAEQC,UAAAA,EACAC,QAAAA,EACAC,eAAAA,GAAiB,EACjBC,UAAAA,GAAY,EACZC,SAAAA,KACGC,GAEPC,KAEA,MAAOC,EAAeC,GAAoBC,YAAkB,GAGxD,OAAAC,EAAAA,IAACC,EAAAA,qBAAA,CACGC,MAAO,CAAEX,QAAAA,EAASC,eAAAA,EAAgBM,iBAAAA,GAElCK,SAAAH,EAAAA,IAAC,QAAA,CACGV,UAAWc,EAAAA,KAAK,YAAad,EAAW,CACnC,wBAA0BG,EAC1B,8BAAgCD,OAEjCG,EAIJD,SAAUG,EAAgB,EAAIH,EAC9BE,IAAAA,KACJ,IAMhBR,EAAMiB,YAAc"}
+{"version":3,"file":"Table.cjs","sources":["../../../../src/components/table/Table.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, useState } from \"react\";\nimport { TableContextProvider } from \"./tableContext.js\";\nimport { TableProps } from \"./types.js\";\n\nconst Table = forwardRef<HTMLTableElement, TableProps>(\n    (\n        {\n            className,\n            caption,\n            children,\n            density,\n            collapseToList = false,\n            fullWidth = false,\n            tabIndex,\n            ...rest\n        },\n        ref,\n    ) => {\n        const [hasStickyHead, setHasStickyHead] = useState<boolean>(false);\n\n        return (\n            <TableContextProvider\n                state={{ density, collapseToList, setHasStickyHead }}\n            >\n                <table\n                    className={clsx(\"jkl-table\", className, {\n                        [\"jkl-table--full-width\"]: fullWidth,\n                        [\"jkl-table--collapse-to-list\"]: collapseToList,\n                    })}\n                    {...rest}\n                    // For content in a scrollable table to be accessible with keyboard\n                    // navigation we need to set tabIndex\n                    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n                    tabIndex={hasStickyHead ? 0 : tabIndex}\n                    ref={ref}\n                >\n                    {caption}\n                    {children}\n                </table>\n            </TableContextProvider>\n        );\n    },\n);\n\nTable.displayName = \"Table\";\n\nexport { Table };\n"],"names":["Table","forwardRef","className","caption","children","density","collapseToList","fullWidth","tabIndex","rest","ref","hasStickyHead","setHasStickyHead","useState","jsx","TableContextProvider","state","jsxs","clsx","displayName"],"mappings":"gNAKMA,EAAQC,EAAAA,YACV,EAEQC,UAAAA,EACAC,QAAAA,EACAC,SAAAA,EACAC,QAAAA,EACAC,eAAAA,GAAiB,EACjBC,UAAAA,GAAY,EACZC,SAAAA,KACGC,GAEPC,KAEA,MAAOC,EAAeC,GAAoBC,YAAkB,GAGxD,OAAAC,EAAAA,IAACC,EAAAA,qBAAA,CACGC,MAAO,CAAEX,QAAAA,EAASC,eAAAA,EAAgBM,iBAAAA,GAElCR,SAAAa,EAAAA,KAAC,QAAA,CACGf,UAAWgB,EAAAA,KAAK,YAAahB,EAAW,CACnC,wBAA0BK,EAC1B,8BAAgCD,OAEjCG,EAIJD,SAAUG,EAAgB,EAAIH,EAC9BE,IAAAA,EAECN,SAAA,CAAAD,EACAC,MACL,IAMhBJ,EAAMmB,YAAc"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),r=require("../Table.cjs"),a=require("../TableBody.cjs"),l=require("../TableCaption.cjs"),n=require("../TableCell.cjs"),t=require("../TableHead.cjs"),i=require("../TableHeader.cjs"),s=require("../TableRow.cjs"),d={title:"Komponenter/Table",component:r.Table,parameters:{layout:"centered"},tags:["autodocs"]},o=["Dato","Saksnummer","Kundenummer","Kundenavn","Milepæl","Følger saken"],b=[["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"]],c={render:d=>e.jsxs(r.Table,{fullWidth:!0,children:[e.jsx(l.TableCaption,{srOnly:!0,children:"Overskrift for skjermlesere"}),e.jsx(t.TableHead,{children:e.jsx(s.TableRow,{children:o.map(((r,a)=>e.jsx(i.TableHeader,{bold:!0,children:r},a)))})}),e.jsx(a.TableBody,{children:b.map(((r,a)=>e.jsx(s.TableRow,{children:r.map(((r,a)=>e.jsx(n.TableCell,{"data-th":o[a],align:[1,2].includes(a)?"right":"left",children:r},a)))},a)))})]})};exports.TableComponent=c,exports.default=d;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),r=require("../Table.cjs"),a=require("../TableBody.cjs"),l=require("../TableCaption.cjs"),n=require("../TableCell.cjs"),t=require("../TableHead.cjs"),i=require("../TableHeader.cjs"),s=require("../TableRow.cjs"),d={title:"Komponenter/Table",component:r.Table,parameters:{layout:"centered"},tags:["autodocs"]},o=["Dato","Saksnummer","Kundenummer","Kundenavn","Milepæl","Følger saken"],c={args:{caption:e.jsx(l.TableCaption,{srOnly:!0,children:"Overskrift for skjermlesere"}),children:e.jsxs(e.Fragment,{children:[e.jsx(t.TableHead,{children:e.jsx(s.TableRow,{children:o.map(((r,a)=>e.jsx(i.TableHeader,{bold:!0,children:r},a)))})}),e.jsx(a.TableBody,{children:[["24.02.2020","20-1234567","010203 99887","Ola Nordmann","Opprettet","Siri Saksbehandler"],["13.04.2019","20-8382811","010203 99887","Kari Nordkvinne","Opprettet","Siri Saksbehandler"],["31.07.2017","20-1111","010203 99887","Kari Nordkvinne","Opprettet","Per Persen"]].map(((r,a)=>e.jsx(s.TableRow,{children:r.map(((r,a)=>e.jsx(n.TableCell,{"data-th":o[a],align:[1,2].includes(a)?"right":"left",children:r},a)))},a)))})]})},render:a=>e.jsx(r.Table,{caption:a.caption,fullWidth:!0,children:a.children})};exports.TableComponent=c,exports.default=d;
 //# sourceMappingURL=table.stories.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"table.stories.cjs","sources":["../../../../../src/components/table/stories/table.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport { 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\";\nimport React from \"react\";\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    render: (args) => (\n        <Table fullWidth>\n            <TableCaption srOnly>Overskrift for skjermlesere</TableCaption>\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        </Table>\n    ),\n};\n"],"names":["meta","title","component","Table","parameters","layout","tags","columns","rows","TableComponent","render","args","jsxs","fullWidth","children","jsx","TableCaption","srOnly","TableHead","TableRow","map","column","index","TableHeader","bold","TableBody","row","rowIndex","cell","cellIndex","TableCell","align","includes"],"mappings":"mWAWMA,EAAO,CACTC,MAAO,oBACPC,UAAWC,EAAAA,MACXC,WAAY,CACRC,OAAQ,YAEZC,KAAM,CAAC,aAMLC,EAAU,CACZ,OACA,aACA,cACA,YACA,UACA,gBAGEC,EAAO,CACT,CACI,aACA,aACA,eACA,eACA,YACA,sBAEJ,CACI,aACA,aACA,eACA,kBACA,YACA,sBAEJ,CACI,aACA,UACA,eACA,kBACA,YACA,eAIKC,EAAwB,CACjCC,OAASC,GACJC,EAAAA,KAAAT,EAAAA,MAAA,CAAMU,WAAS,EACZC,SAAA,CAACC,EAAAA,IAAAC,EAAAA,aAAA,CAAaC,QAAM,EAACH,SAA2B,sCAC/CI,EAAAA,UACG,CAAAJ,SAAAC,EAAAA,IAACI,WACI,CAAAL,SAAAP,EAAQa,KAAI,CAACC,EAAQC,IAClBP,EAAAA,IAACQ,eAAwBC,MAAI,EACxBV,YADaQ,SAM7BP,EAAAA,IAAAU,EAAAA,UAAA,CACIX,SAAKN,EAAAY,KAAI,CAACM,EAAKC,IACZZ,EAAAA,IAACI,EACIA,SAAA,CAAAL,SAAAY,EAAIN,KAAI,CAACQ,EAAMC,IACZd,EAAAA,IAACe,EAAAA,UAAA,CAEG,UAASvB,EAAQsB,GACjBE,MACI,CAAC,EAAG,GAAGC,SAASH,GACV,QACA,OAGTf,SAAAc,GARIC,MAHFF"}
+{"version":3,"file":"table.stories.cjs","sources":["../../../../../src/components/table/stories/table.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport React from \"react\";\nimport { Table } from \"../Table.js\";\nimport { TableBody } from \"../TableBody.js\";\nimport { TableCaption } from \"../TableCaption.js\";\nimport { TableCell } from \"../TableCell.js\";\nimport { TableHead } from \"../TableHead.js\";\nimport { TableHeader } from \"../TableHeader.js\";\nimport { TableRow } from \"../TableRow.js\";\nimport \"../styles/_index.scss\";\n\nconst meta = {\n    title: \"Komponenter/Table\",\n    component: Table,\n    parameters: {\n        layout: \"centered\",\n    },\n    tags: [\"autodocs\"],\n} satisfies Meta<typeof Table>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nconst columns = [\n    \"Dato\",\n    \"Saksnummer\",\n    \"Kundenummer\",\n    \"Kundenavn\",\n    \"Milepæl\",\n    \"Følger saken\",\n];\n\nconst rows = [\n    [\n        \"24.02.2020\",\n        \"20-1234567\",\n        \"010203 99887\",\n        \"Ola Nordmann\",\n        \"Opprettet\",\n        \"Siri Saksbehandler\",\n    ],\n    [\n        \"13.04.2019\",\n        \"20-8382811\",\n        \"010203 99887\",\n        \"Kari Nordkvinne\",\n        \"Opprettet\",\n        \"Siri Saksbehandler\",\n    ],\n    [\n        \"31.07.2017\",\n        \"20-1111\",\n        \"010203 99887\",\n        \"Kari Nordkvinne\",\n        \"Opprettet\",\n        \"Per Persen\",\n    ],\n];\n\nexport const TableComponent: Story = {\n    args: {\n        caption: (\n            <TableCaption srOnly>Overskrift for skjermlesere</TableCaption>\n        ),\n        children: (\n            <>\n                <TableHead>\n                    <TableRow>\n                        {columns.map((column, index) => (\n                            <TableHeader key={index} bold>\n                                {column}\n                            </TableHeader>\n                        ))}\n                    </TableRow>\n                </TableHead>\n                <TableBody>\n                    {rows.map((row, rowIndex) => (\n                        <TableRow key={rowIndex}>\n                            {row.map((cell, cellIndex) => (\n                                <TableCell\n                                    key={cellIndex}\n                                    data-th={columns[cellIndex]}\n                                    align={\n                                        [1, 2].includes(cellIndex)\n                                            ? \"right\"\n                                            : \"left\"\n                                    }\n                                >\n                                    {cell}\n                                </TableCell>\n                            ))}\n                        </TableRow>\n                    ))}\n                </TableBody>\n            </>\n        ),\n    },\n    render: (args) => (\n        <Table caption={args.caption} fullWidth>\n            {args.children}\n        </Table>\n    ),\n};\n"],"names":["meta","title","component","Table","parameters","layout","tags","columns","TableComponent","args","caption","jsx","TableCaption","srOnly","children","jsxs","Fragment","TableHead","TableRow","map","column","index","TableHeader","bold","TableBody","row","rowIndex","cell","cellIndex","TableCell","align","includes","render","fullWidth"],"mappings":"mWAWMA,EAAO,CACTC,MAAO,oBACPC,UAAWC,EAAAA,MACXC,WAAY,CACRC,OAAQ,YAEZC,KAAM,CAAC,aAMLC,EAAU,CACZ,OACA,aACA,cACA,YACA,UACA,gBA8BSC,EAAwB,CACjCC,KAAM,CACFC,QACIC,EAAAA,IAACC,eAAa,CAAAC,QAAM,EAACC,SAA2B,gCAEpDA,SAEQC,EAAAA,KAAAC,WAAA,CAAAF,SAAA,CAAAH,MAACM,EAAAA,WACGH,SAACH,EAAAA,IAAAO,WAAA,CACIJ,SAAQP,EAAAY,KAAI,CAACC,EAAQC,IACjBV,EAAAA,IAAAW,EAAAA,YAAA,CAAwBC,MAAI,EACxBT,SAAAM,GADaC,SAM7BV,EAAAA,IAAAa,EAAAA,UAAA,CACIV,SA5CR,CACT,CACI,aACA,aACA,eACA,eACA,YACA,sBAEJ,CACI,aACA,aACA,eACA,kBACA,YACA,sBAEJ,CACI,aACA,UACA,eACA,kBACA,YACA,eAqBkBK,KAAI,CAACM,EAAKC,IACZf,EAAAA,IAACO,EACIA,SAAA,CAAAJ,SAAAW,EAAIN,KAAI,CAACQ,EAAMC,IACZjB,EAAAA,IAACkB,EAAAA,UAAA,CAEG,UAAStB,EAAQqB,GACjBE,MACI,CAAC,EAAG,GAAGC,SAASH,GACV,QACA,OAGTd,SAAAa,GARIC,MAHFF,WAoBnCM,OAASvB,GACJE,EAAAA,IAAAR,EAAAA,MAAA,CAAMO,QAASD,EAAKC,QAASuB,WAAS,EAClCnB,SAAAL,EAAKK"}

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

@@ -1,4 +1,4 @@
-import { default as React, ChangeEventHandler, ColgroupHTMLAttributes, ColHTMLAttributes, HTMLAttributes, TableHTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from 'react';
+import { default as React, ChangeEventHandler, ColgroupHTMLAttributes, ColHTMLAttributes, HTMLAttributes, ReactNode, TableHTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from 'react';
 import { Density, WithChildren } from '../../core/types.cjs';
 import { TableSortProps } from './utils.cjs';
 export interface DataTableProps extends TableHTMLAttributes<HTMLTableElement> {
@@ -16,6 +16,8 @@ export interface DataTableProps extends TableHTMLAttributes<HTMLTableElement> {
     verticalAlign?: "center" | "top";
 }
 export interface TableProps extends TableHTMLAttributes<HTMLTableElement> {
+    caption: ReactNode;
+    children: ReactNode;
     density?: Density;
     /** Bryt ned til en stablet listevisning på små skjermer. NB: husk å sette `data-th` på hver celle! */
     collapseToList?: boolean;

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

@@ -1,2 +1,2 @@
-import{jsxs as a,jsx as e}from"react/jsx-runtime";import{forwardRef as l}from"react";import{Table as r}from"./Table.js";import{TableBody as o}from"./TableBody.js";import{TableCaption as i}from"./TableCaption.js";import{TableCell as t}from"./TableCell.js";import{TableHead as s}from"./TableHead.js";import{TableHeader as m}from"./TableHeader.js";import{TableRow as n}from"./TableRow.js";const d=l((({caption:l,columns:d,emptyTableText:c,rows:p,verticalAlign:b,...T},h)=>a(r,{fullWidth:!0,...T,ref:h,children:[l&&e(i,{srOnly:!0,children:l}),e(s,{children:e(n,{children:d.map(((a,l)=>e(m,{density:"compact",bold:!0,children:a},l)))})}),a(o,{children:[0===p.length&&c&&e(n,{children:e(t,{colSpan:d.length,children:c})}),p.map(((a,l)=>e(n,{children:a.map(((a,l)=>e(t,{"data-th":d[l],verticalAlign:b,children:a},l)))},l)))]})]})));d.displayName="DataTable";export{d as DataTable};
+import{jsxs as a,jsx as e}from"react/jsx-runtime";import{forwardRef as l}from"react";import{Table as r}from"./Table.js";import{TableBody as o}from"./TableBody.js";import{TableCaption as i}from"./TableCaption.js";import{TableCell as t}from"./TableCell.js";import{TableHead as s}from"./TableHead.js";import{TableHeader as m}from"./TableHeader.js";import{TableRow as n}from"./TableRow.js";const d=l((({caption:l,columns:d,emptyTableText:c,rows:p,verticalAlign:b,...T},h)=>a(r,{caption:e(i,{srOnly:!0,children:l}),fullWidth:!0,...T,ref:h,children:[e(s,{children:e(n,{children:d.map(((a,l)=>e(m,{density:"compact",bold:!0,children:a},l)))})}),a(o,{children:[0===p.length&&c&&e(n,{children:e(t,{colSpan:d.length,children:c})}),p.map(((a,l)=>e(n,{children:a.map(((a,l)=>e(t,{"data-th":d[l],verticalAlign:b,children:a},l)))},l)))]})]})));d.displayName="DataTable";export{d as DataTable};
 //# sourceMappingURL=DataTable.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DataTable.js","sources":["../../../../src/components/table/DataTable.tsx"],"sourcesContent":["import React, { forwardRef } 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 { DataTableProps } from \"./types.js\";\n\nconst DataTable = forwardRef<HTMLTableElement, DataTableProps>(\n    (\n        { caption, columns, emptyTableText, rows, verticalAlign, ...rest },\n        ref,\n    ) => {\n        return (\n            <Table fullWidth={true} {...rest} ref={ref}>\n                {caption && <TableCaption srOnly>{caption}</TableCaption>}\n                <TableHead>\n                    <TableRow>\n                        {columns.map((column, index) => (\n                            <TableHeader key={index} density=\"compact\" bold>\n                                {column}\n                            </TableHeader>\n                        ))}\n                    </TableRow>\n                </TableHead>\n                <TableBody>\n                    {rows.length === 0 && emptyTableText && (\n                        <TableRow>\n                            <TableCell colSpan={columns.length}>\n                                {emptyTableText}\n                            </TableCell>\n                        </TableRow>\n                    )}\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                                    verticalAlign={verticalAlign}\n                                >\n                                    {cell}\n                                </TableCell>\n                            ))}\n                        </TableRow>\n                    ))}\n                </TableBody>\n            </Table>\n        );\n    },\n);\n\nDataTable.displayName = \"DataTable\";\n\nexport { DataTable };\n"],"names":["DataTable","forwardRef","caption","columns","emptyTableText","rows","verticalAlign","rest","ref","Table","fullWidth","children","jsx","TableCaption","srOnly","TableHead","TableRow","map","column","index","TableHeader","density","bold","TableBody","length","TableCell","colSpan","row","rowIndex","cell","cellIndex","displayName"],"mappings":"kYAUA,MAAMA,EAAYC,GACd,EACMC,QAAAA,EAASC,QAAAA,EAASC,eAAAA,EAAgBC,KAAAA,EAAMC,cAAAA,KAAkBC,GAC5DC,MAGKC,EAAM,CAAAC,WAAW,KAAUH,EAAMC,IAAAA,EAC7BG,SAAA,CAAAT,GAAYU,EAAAC,EAAA,CAAaC,QAAM,EAAEH,SAAQT,MACzCa,EACG,CAAAJ,SAAAC,EAACI,GACIL,SAAQR,EAAAc,KAAI,CAACC,EAAQC,MACjBC,EAAwB,CAAAC,QAAQ,UAAUC,MAAI,EAC1CX,YADaQ,WAM7BI,EACI,CAAAZ,SAAA,CAAgB,IAAXN,EAAAmB,QAAgBpB,GACjBQ,EAAAI,EAAA,CACGL,SAACC,EAAAa,EAAA,CAAUC,QAASvB,EAAQqB,OACvBb,SAAAP,MAIZC,EAAKY,KAAI,CAACU,EAAKC,IACXhB,EAAAI,EAAA,CACIL,SAAIgB,EAAAV,KAAI,CAACY,EAAMC,IACZlB,EAACa,EAAA,CAEG,UAAStB,EAAQ2B,GACjBxB,cAAAA,EAECK,SAAAkB,GAJIC,MAHFF,aAkBvC5B,EAAU+B,YAAc"}
+{"version":3,"file":"DataTable.js","sources":["../../../../src/components/table/DataTable.tsx"],"sourcesContent":["import React, { forwardRef } 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 { DataTableProps } from \"./types.js\";\n\nconst DataTable = forwardRef<HTMLTableElement, DataTableProps>(\n    (\n        { caption, columns, emptyTableText, rows, verticalAlign, ...rest },\n        ref,\n    ) => {\n        return (\n            <Table\n                caption={<TableCaption srOnly>{caption}</TableCaption>}\n                fullWidth={true}\n                {...rest}\n                ref={ref}\n            >\n                <TableHead>\n                    <TableRow>\n                        {columns.map((column, index) => (\n                            <TableHeader key={index} density=\"compact\" bold>\n                                {column}\n                            </TableHeader>\n                        ))}\n                    </TableRow>\n                </TableHead>\n                <TableBody>\n                    {rows.length === 0 && emptyTableText && (\n                        <TableRow>\n                            <TableCell colSpan={columns.length}>\n                                {emptyTableText}\n                            </TableCell>\n                        </TableRow>\n                    )}\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                                    verticalAlign={verticalAlign}\n                                >\n                                    {cell}\n                                </TableCell>\n                            ))}\n                        </TableRow>\n                    ))}\n                </TableBody>\n            </Table>\n        );\n    },\n);\n\nDataTable.displayName = \"DataTable\";\n\nexport { DataTable };\n"],"names":["DataTable","forwardRef","caption","columns","emptyTableText","rows","verticalAlign","rest","ref","jsxs","Table","jsx","TableCaption","srOnly","children","fullWidth","TableHead","TableRow","map","column","index","TableHeader","density","bold","TableBody","length","TableCell","colSpan","row","rowIndex","cell","cellIndex","displayName"],"mappings":"kYAUA,MAAMA,EAAYC,GACd,EACMC,QAAAA,EAASC,QAAAA,EAASC,eAAAA,EAAgBC,KAAAA,EAAMC,cAAAA,KAAkBC,GAC5DC,IAGIC,EAACC,EAAA,CACGR,QAASS,EAACC,EAAa,CAAAC,QAAM,EAAEC,SAAQZ,IACvCa,WAAW,KACPR,EACJC,IAAAA,EAEAM,SAAA,CAAAH,EAACK,GACGF,SAACH,EAAAM,EAAA,CACIH,WAAQI,KAAI,CAACC,EAAQC,IAClBT,EAACU,EAAwB,CAAAC,QAAQ,UAAUC,MAAI,EAC1CT,YADaM,WAM7BI,EACI,CAAAV,SAAA,CAAgB,IAAXT,EAAAoB,QAAgBrB,GACjBO,EAAAM,EAAA,CACGH,SAACH,EAAAe,EAAA,CAAUC,QAASxB,EAAQsB,OACvBX,SAAAV,MAIZC,EAAKa,KAAI,CAACU,EAAKC,IACXlB,EAAAM,EAAA,CACIH,SAAIc,EAAAV,KAAI,CAACY,EAAMC,IACZpB,EAACe,EAAA,CAEG,UAASvB,EAAQ4B,GACjBzB,cAAAA,EAECQ,SAAAgB,GAJIC,MAHFF,aAkBvC7B,EAAUgC,YAAc"}

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

@@ -1,2 +1,2 @@
-import{jsx as t}from"react/jsx-runtime";import{c as e}from"../../../clsx-BeLtu-UY.js";import{forwardRef as a,useState as s}from"react";import{TableContextProvider as l}from"./tableContext.js";const o=a((({className:a,density:o,collapseToList:r=!1,fullWidth:i=!1,tabIndex:c,...m},d)=>{const[n,b]=s(!1);return t(l,{state:{density:o,collapseToList:r,setHasStickyHead:b},children:t("table",{className:e("jkl-table",a,{"jkl-table--full-width":i,"jkl-table--collapse-to-list":r}),...m,tabIndex:n?0:c,ref:d})})}));o.displayName="Table";export{o as Table};
+import{jsx as t,jsxs as e}from"react/jsx-runtime";import{c as a}from"../../../clsx-BeLtu-UY.js";import{forwardRef as s,useState as l}from"react";import{TableContextProvider as o}from"./tableContext.js";const r=s((({className:s,caption:r,children:i,density:c,collapseToList:n=!1,fullWidth:d=!1,tabIndex:m,...b},p)=>{const[f,x]=l(!1);return t(o,{state:{density:c,collapseToList:n,setHasStickyHead:x},children:e("table",{className:a("jkl-table",s,{"jkl-table--full-width":d,"jkl-table--collapse-to-list":n}),...b,tabIndex:f?0:m,ref:p,children:[r,i]})})}));r.displayName="Table";export{r as Table};
 //# sourceMappingURL=Table.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sources":["../../../../src/components/table/Table.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, useState } from \"react\";\nimport { TableContextProvider } from \"./tableContext.js\";\nimport { TableProps } from \"./types.js\";\n\nconst Table = forwardRef<HTMLTableElement, TableProps>(\n    (\n        {\n            className,\n            density,\n            collapseToList = false,\n            fullWidth = false,\n            tabIndex,\n            ...rest\n        },\n        ref,\n    ) => {\n        const [hasStickyHead, setHasStickyHead] = useState<boolean>(false);\n\n        return (\n            <TableContextProvider\n                state={{ density, collapseToList, setHasStickyHead }}\n            >\n                <table\n                    className={clsx(\"jkl-table\", className, {\n                        [\"jkl-table--full-width\"]: fullWidth,\n                        [\"jkl-table--collapse-to-list\"]: collapseToList,\n                    })}\n                    {...rest}\n                    // For content in a scrollable table to be accessible with keyboard\n                    // navigation we need to set tabIndex\n                    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n                    tabIndex={hasStickyHead ? 0 : tabIndex}\n                    ref={ref}\n                />\n            </TableContextProvider>\n        );\n    },\n);\n\nTable.displayName = \"Table\";\n\nexport { Table };\n"],"names":["Table","forwardRef","className","density","collapseToList","fullWidth","tabIndex","rest","ref","hasStickyHead","setHasStickyHead","useState","jsx","TableContextProvider","state","children","clsx","displayName"],"mappings":"gMAKA,MAAMA,EAAQC,GACV,EAEQC,UAAAA,EACAC,QAAAA,EACAC,eAAAA,GAAiB,EACjBC,UAAAA,GAAY,EACZC,SAAAA,KACGC,GAEPC,KAEA,MAAOC,EAAeC,GAAoBC,GAAkB,GAGxD,OAAAC,EAACC,EAAA,CACGC,MAAO,CAAEX,QAAAA,EAASC,eAAAA,EAAgBM,iBAAAA,GAElCK,SAAAH,EAAC,QAAA,CACGV,UAAWc,EAAK,YAAad,EAAW,CACnC,wBAA0BG,EAC1B,8BAAgCD,OAEjCG,EAIJD,SAAUG,EAAgB,EAAIH,EAC9BE,IAAAA,KACJ,IAMhBR,EAAMiB,YAAc"}
+{"version":3,"file":"Table.js","sources":["../../../../src/components/table/Table.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, useState } from \"react\";\nimport { TableContextProvider } from \"./tableContext.js\";\nimport { TableProps } from \"./types.js\";\n\nconst Table = forwardRef<HTMLTableElement, TableProps>(\n    (\n        {\n            className,\n            caption,\n            children,\n            density,\n            collapseToList = false,\n            fullWidth = false,\n            tabIndex,\n            ...rest\n        },\n        ref,\n    ) => {\n        const [hasStickyHead, setHasStickyHead] = useState<boolean>(false);\n\n        return (\n            <TableContextProvider\n                state={{ density, collapseToList, setHasStickyHead }}\n            >\n                <table\n                    className={clsx(\"jkl-table\", className, {\n                        [\"jkl-table--full-width\"]: fullWidth,\n                        [\"jkl-table--collapse-to-list\"]: collapseToList,\n                    })}\n                    {...rest}\n                    // For content in a scrollable table to be accessible with keyboard\n                    // navigation we need to set tabIndex\n                    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n                    tabIndex={hasStickyHead ? 0 : tabIndex}\n                    ref={ref}\n                >\n                    {caption}\n                    {children}\n                </table>\n            </TableContextProvider>\n        );\n    },\n);\n\nTable.displayName = \"Table\";\n\nexport { Table };\n"],"names":["Table","forwardRef","className","caption","children","density","collapseToList","fullWidth","tabIndex","rest","ref","hasStickyHead","setHasStickyHead","useState","jsx","TableContextProvider","state","jsxs","clsx","displayName"],"mappings":"0MAKA,MAAMA,EAAQC,GACV,EAEQC,UAAAA,EACAC,QAAAA,EACAC,SAAAA,EACAC,QAAAA,EACAC,eAAAA,GAAiB,EACjBC,UAAAA,GAAY,EACZC,SAAAA,KACGC,GAEPC,KAEA,MAAOC,EAAeC,GAAoBC,GAAkB,GAGxD,OAAAC,EAACC,EAAA,CACGC,MAAO,CAAEX,QAAAA,EAASC,eAAAA,EAAgBM,iBAAAA,GAElCR,SAAAa,EAAC,QAAA,CACGf,UAAWgB,EAAK,YAAahB,EAAW,CACnC,wBAA0BK,EAC1B,8BAAgCD,OAEjCG,EAIJD,SAAUG,EAAgB,EAAIH,EAC9BE,IAAAA,EAECN,SAAA,CAAAD,EACAC,MACL,IAMhBJ,EAAMmB,YAAc"}

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

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as r}from"react/jsx-runtime";import{Table as a}from"../Table.js";import{TableBody as l}from"../TableBody.js";import{TableCaption as t}from"../TableCaption.js";import{TableCell as n}from"../TableCell.js";import{TableHead as o}from"../TableHead.js";import{TableHeader as s}from"../TableHeader.js";import{TableRow as i}from"../TableRow.js";const m={title:"Komponenter/Table",component:a,parameters:{layout:"centered"},tags:["autodocs"]},d=["Dato","Saksnummer","Kundenummer","Kundenavn","Milepæl","Følger saken"],p=[["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"]],b={render:m=>e(a,{fullWidth:!0,children:[r(t,{srOnly:!0,children:"Overskrift for skjermlesere"}),r(o,{children:r(i,{children:d.map(((e,a)=>r(s,{bold:!0,children:e},a)))})}),r(l,{children:p.map(((e,a)=>r(i,{children:e.map(((e,a)=>r(n,{"data-th":d[a],align:[1,2].includes(a)?"right":"left",children:e},a)))},a)))})]})};export{b as TableComponent,m as default};
+import{jsx as e,jsxs as a,Fragment as r}from"react/jsx-runtime";import{Table as l}from"../Table.js";import{TableBody as n}from"../TableBody.js";import{TableCaption as t}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:e(t,{srOnly:!0,children:"Overskrift for skjermlesere"}),children:a(r,{children:[e(i,{children:e(d,{children:p.map(((a,r)=>e(s,{bold:!0,children:a},r)))})}),e(n,{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(((a,r)=>e(d,{children:a.map(((a,r)=>e(o,{"data-th":p[r],align:[1,2].includes(r)?"right":"left",children:a},r)))},r)))})]})},render:a=>e(l,{caption:a.caption,fullWidth:!0,children:a.children})};export{c as TableComponent,m 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 { 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\";\nimport React from \"react\";\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    render: (args) => (\n        <Table fullWidth>\n            <TableCaption srOnly>Overskrift for skjermlesere</TableCaption>\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        </Table>\n    ),\n};\n"],"names":["meta","title","component","Table","parameters","layout","tags","columns","rows","TableComponent","render","args","jsxs","fullWidth","children","jsx","TableCaption","srOnly","TableHead","TableRow","map","column","index","TableHeader","bold","TableBody","row","rowIndex","cell","cellIndex","TableCell","align","includes"],"mappings":"sWAWA,MAAMA,EAAO,CACTC,MAAO,oBACPC,UAAWC,EACXC,WAAY,CACRC,OAAQ,YAEZC,KAAM,CAAC,aAMLC,EAAU,CACZ,OACA,aACA,cACA,YACA,UACA,gBAGEC,EAAO,CACT,CACI,aACA,aACA,eACA,eACA,YACA,sBAEJ,CACI,aACA,aACA,eACA,kBACA,YACA,sBAEJ,CACI,aACA,UACA,eACA,kBACA,YACA,eAIKC,EAAwB,CACjCC,OAASC,GACJC,EAAAT,EAAA,CAAMU,WAAS,EACZC,SAAA,CAACC,EAAAC,EAAA,CAAaC,QAAM,EAACH,SAA2B,kCAC/CI,EACG,CAAAJ,SAAAC,EAACI,EACI,CAAAL,SAAAP,EAAQa,KAAI,CAACC,EAAQC,IAClBP,EAACQ,GAAwBC,MAAI,EACxBV,YADaQ,SAM7BP,EAAAU,EAAA,CACIX,SAAKN,EAAAY,KAAI,CAACM,EAAKC,IACZZ,EAACI,EACI,CAAAL,SAAAY,EAAIN,KAAI,CAACQ,EAAMC,IACZd,EAACe,EAAA,CAEG,UAASvB,EAAQsB,GACjBE,MACI,CAAC,EAAG,GAAGC,SAASH,GACV,QACA,OAGTf,SAAAc,GARIC,MAHFF"}
+{"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":"oXAWA,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"}

package/build/es/components/table/types.d.ts

@@ -1,4 +1,4 @@
-import { default as React, ChangeEventHandler, ColgroupHTMLAttributes, ColHTMLAttributes, HTMLAttributes, TableHTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from 'react';
+import { default as React, ChangeEventHandler, ColgroupHTMLAttributes, ColHTMLAttributes, HTMLAttributes, ReactNode, TableHTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from 'react';
 import { Density, WithChildren } from '../../core/types.js';
 import { TableSortProps } from './utils.js';
 export interface DataTableProps extends TableHTMLAttributes<HTMLTableElement> {
@@ -16,6 +16,8 @@ export interface DataTableProps extends TableHTMLAttributes<HTMLTableElement> {
     verticalAlign?: "center" | "top";
 }
 export interface TableProps extends TableHTMLAttributes<HTMLTableElement> {
+    caption: ReactNode;
+    children: ReactNode;
     density?: Density;
     /** Bryt ned til en stablet listevisning på små skjermer. NB: husk å sette `data-th` på hver celle! */
     collapseToList?: boolean;