@fremtind/jokul 0.24.0 → 0.25.0

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

@@ -1 +1 @@
-{"version":3,"file":"TableBody.js","sources":["../../../../src/components/table/TableBody.tsx"],"sourcesContent":["import React, { forwardRef, HTMLAttributes } from \"react\";\nimport { TableSectionContextProvider } from \"./tableSectionContext\";\n\nexport interface TableBodyProps extends HTMLAttributes<HTMLTableSectionElement> {}\n\nconst TableBody = forwardRef<HTMLTableSectionElement, TableBodyProps>((props, ref) => {\n    return (\n        <TableSectionContextProvider state={{ isTableHead: false, isTableBody: true, isTableFooter: false }}>\n            <tbody {...props} ref={ref} />\n        </TableSectionContextProvider>\n    );\n});\n\nTableBody.displayName = \"TableBody\";\n\nexport { TableBody };\n"],"names":["TableBody","forwardRef","props","ref","TableSectionContextProvider","state","isTableHead","isTableBody","isTableFooter","children","jsx","displayName"],"mappings":"kJAKA,MAAMA,EAAYC,GAAoD,CAACC,EAAOC,MAErEC,EAA4B,CAAAC,MAAO,CAAEC,aAAa,EAAOC,aAAa,EAAMC,eAAe,GACxFC,SAACC,EAAA,QAAA,IAAUR,EAAOC,IAAAA,QAK9BH,EAAUW,YAAc"}
+{"version":3,"file":"TableBody.js","sources":["../../../../src/components/table/TableBody.tsx"],"sourcesContent":["import React, { forwardRef, HTMLAttributes } from \"react\";\nimport { TableSectionContextProvider } from \"./tableSectionContext.js\";\n\nexport interface TableBodyProps extends HTMLAttributes<HTMLTableSectionElement> {}\n\nconst TableBody = forwardRef<HTMLTableSectionElement, TableBodyProps>((props, ref) => {\n    return (\n        <TableSectionContextProvider state={{ isTableHead: false, isTableBody: true, isTableFooter: false }}>\n            <tbody {...props} ref={ref} />\n        </TableSectionContextProvider>\n    );\n});\n\nTableBody.displayName = \"TableBody\";\n\nexport { TableBody };\n"],"names":["TableBody","forwardRef","props","ref","TableSectionContextProvider","state","isTableHead","isTableBody","isTableFooter","children","jsx","displayName"],"mappings":"kJAKA,MAAMA,EAAYC,GAAoD,CAACC,EAAOC,MAErEC,EAA4B,CAAAC,MAAO,CAAEC,aAAa,EAAOC,aAAa,EAAMC,eAAe,GACxFC,SAACC,EAAA,QAAA,IAAUR,EAAOC,IAAAA,QAK9BH,EAAUW,YAAc"}

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

@@ -0,0 +1,17 @@
+import { default as React, TdHTMLAttributes } from 'react';
+import { Density } from '../../core/types.js';
+export interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {
+    density?: Density;
+    /**
+     * Velg mellom venstrejustering og høyrejustering av innholdet. Typisk skal innholdet være venstrejustert, men for eksempel summer er høyrejustert.
+     * @default "left"
+     */
+    align?: "left" | "center" | "right";
+    /**
+     * Velg mellom vertikal sentrering av innholdet eller toppjustering. Typisk skal innholdet være toppjustert, men dersom raden har knapper kan midtstilling fungere bedre.
+     * @default "top"
+     */
+    verticalAlign?: "center" | "top";
+}
+declare const TableCell: React.ForwardRefExoticComponent<TableCellProps & React.RefAttributes<HTMLTableCellElement>>;
+export { TableCell };

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

@@ -1 +1 @@
-{"version":3,"file":"TableCell.js","sources":["../../../../src/components/table/TableCell.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, TdHTMLAttributes } from \"react\";\nimport { Density } from \"../..\";\nimport { useTableContext } from \"./tableContext\";\n\nexport interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {\n    density?: Density;\n    /**\n     * Velg mellom venstrejustering og høyrejustering av innholdet. Typisk skal innholdet være venstrejustert, men for eksempel summer er høyrejustert.\n     * @default \"left\"\n     */\n    align?: \"left\" | \"center\" | \"right\";\n    /**\n     * Velg mellom vertikal sentrering av innholdet eller toppjustering. Typisk skal innholdet være toppjustert, men dersom raden har knapper kan midtstilling fungere bedre.\n     * @default \"top\"\n     */\n    verticalAlign?: \"center\" | \"top\";\n}\n\nconst TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(\n    ({ align = \"left\", verticalAlign = \"top\", className, density, ...rest }, ref) => {\n        const { density: contextDensity } = useTableContext();\n        return (\n            <td\n                className={clsx(\"jkl-table-cell\", className, {\n                    [\"jkl-table-cell--align-right\"]: align === \"right\",\n                    [\"jkl-table-cell--align-center\"]: align === \"center\",\n                    [\"jkl-table-cell--vertical-align-center\"]: verticalAlign === \"center\",\n                })}\n                {...rest}\n                data-density={density || contextDensity}\n                ref={ref}\n            />\n        );\n    },\n);\n\nTableCell.displayName = \"TableCell\";\n\nexport { TableCell };\n"],"names":["TableCell","forwardRef","align","verticalAlign","className","density","rest","ref","contextDensity","useTableContext","jsx","clsx","displayName"],"mappings":"6KAmBA,MAAMA,EAAYC,GACd,EAAGC,MAAAA,EAAQ,OAAQC,cAAAA,EAAgB,MAAOC,UAAAA,EAAWC,QAAAA,KAAYC,GAAQC,KACrE,MAAQF,QAASG,GAAmBC,IAEhC,OAAAC,EAAC,KAAA,CACGN,UAAWO,EAAK,iBAAkBP,EAAW,CACxC,8BAA0C,UAAVF,EAChC,+BAA2C,WAAVA,EACjC,wCAA4D,WAAlBC,OAE3CG,EACJ,eAAcD,GAAWG,EACzBD,IAAAA,GAAA,IAMhBP,EAAUY,YAAc"}
+{"version":3,"file":"TableCell.js","sources":["../../../../src/components/table/TableCell.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, TdHTMLAttributes } from \"react\";\nimport { Density } from \"../../core/types.js\";\nimport { useTableContext } from \"./tableContext.js\";\n\nexport interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {\n    density?: Density;\n    /**\n     * Velg mellom venstrejustering og høyrejustering av innholdet. Typisk skal innholdet være venstrejustert, men for eksempel summer er høyrejustert.\n     * @default \"left\"\n     */\n    align?: \"left\" | \"center\" | \"right\";\n    /**\n     * Velg mellom vertikal sentrering av innholdet eller toppjustering. Typisk skal innholdet være toppjustert, men dersom raden har knapper kan midtstilling fungere bedre.\n     * @default \"top\"\n     */\n    verticalAlign?: \"center\" | \"top\";\n}\n\nconst TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(\n    ({ align = \"left\", verticalAlign = \"top\", className, density, ...rest }, ref) => {\n        const { density: contextDensity } = useTableContext();\n        return (\n            <td\n                className={clsx(\"jkl-table-cell\", className, {\n                    [\"jkl-table-cell--align-right\"]: align === \"right\",\n                    [\"jkl-table-cell--align-center\"]: align === \"center\",\n                    [\"jkl-table-cell--vertical-align-center\"]: verticalAlign === \"center\",\n                })}\n                {...rest}\n                data-density={density || contextDensity}\n                ref={ref}\n            />\n        );\n    },\n);\n\nTableCell.displayName = \"TableCell\";\n\nexport { TableCell };\n"],"names":["TableCell","forwardRef","align","verticalAlign","className","density","rest","ref","contextDensity","useTableContext","jsx","clsx","displayName"],"mappings":"6KAmBA,MAAMA,EAAYC,GACd,EAAGC,MAAAA,EAAQ,OAAQC,cAAAA,EAAgB,MAAOC,UAAAA,EAAWC,QAAAA,KAAYC,GAAQC,KACrE,MAAQF,QAASG,GAAmBC,IAEhC,OAAAC,EAAC,KAAA,CACGN,UAAWO,EAAK,iBAAkBP,EAAW,CACxC,8BAA0C,UAAVF,EAChC,+BAA2C,WAAVA,EACjC,wCAA4D,WAAlBC,OAE3CG,EACJ,eAAcD,GAAWG,EACzBD,IAAAA,GAAA,IAMhBP,EAAUY,YAAc"}

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

@@ -1 +1 @@
-{"version":3,"file":"TableFooter.js","sources":["../../../../src/components/table/TableFooter.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, HTMLAttributes } from \"react\";\nimport { TableSectionContextProvider } from \"./tableSectionContext\";\n\nexport interface TableFooterProps extends HTMLAttributes<HTMLTableSectionElement> {}\n\nconst TableFooter = forwardRef<HTMLTableSectionElement, TableFooterProps>(({ className, ...rest }, ref) => {\n    return (\n        <TableSectionContextProvider state={{ isTableHead: false, isTableBody: false, isTableFooter: true }}>\n            <tfoot className={clsx(\"jkl-table-foot\", className)} {...rest} ref={ref} />\n        </TableSectionContextProvider>\n    );\n});\n\nTableFooter.displayName = \"TableFooter\";\n\nexport { TableFooter };\n"],"names":["TableFooter","forwardRef","className","rest","ref","jsx","TableSectionContextProvider","state","isTableHead","isTableBody","isTableFooter","children","clsx","displayName"],"mappings":"gMAMM,MAAAA,EAAcC,GAAsD,EAAGC,UAAAA,KAAcC,GAAQC,IAE3FC,EAACC,GAA4BC,MAAO,CAAEC,aAAa,EAAOC,aAAa,EAAOC,eAAe,GACzFC,SAACN,EAAA,QAAA,CAAMH,UAAWU,EAAK,iBAAkBV,MAAgBC,EAAMC,IAAAA,QAK3EJ,EAAYa,YAAc"}
+{"version":3,"file":"TableFooter.js","sources":["../../../../src/components/table/TableFooter.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, HTMLAttributes } from \"react\";\nimport { TableSectionContextProvider } from \"./tableSectionContext.js\";\n\nexport interface TableFooterProps extends HTMLAttributes<HTMLTableSectionElement> {}\n\nconst TableFooter = forwardRef<HTMLTableSectionElement, TableFooterProps>(({ className, ...rest }, ref) => {\n    return (\n        <TableSectionContextProvider state={{ isTableHead: false, isTableBody: false, isTableFooter: true }}>\n            <tfoot className={clsx(\"jkl-table-foot\", className)} {...rest} ref={ref} />\n        </TableSectionContextProvider>\n    );\n});\n\nTableFooter.displayName = \"TableFooter\";\n\nexport { TableFooter };\n"],"names":["TableFooter","forwardRef","className","rest","ref","jsx","TableSectionContextProvider","state","isTableHead","isTableBody","isTableFooter","children","clsx","displayName"],"mappings":"gMAMM,MAAAA,EAAcC,GAAsD,EAAGC,UAAAA,KAAcC,GAAQC,IAE3FC,EAACC,GAA4BC,MAAO,CAAEC,aAAa,EAAOC,aAAa,EAAOC,eAAe,GACzFC,SAACN,EAAA,QAAA,CAAMH,UAAWU,EAAK,iBAAkBV,MAAgBC,EAAMC,IAAAA,QAK3EJ,EAAYa,YAAc"}

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

@@ -1 +1 @@
-{"version":3,"file":"TableHead.js","sources":["../../../../src/components/table/TableHead.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, HTMLAttributes } from \"react\";\nimport { TableSectionContextProvider } from \"./tableSectionContext\";\n\nexport interface TableHeadProps extends HTMLAttributes<HTMLTableSectionElement> {\n    srOnly?: boolean;\n    sticky?: boolean;\n}\n\nconst TableHead = forwardRef<HTMLTableSectionElement, TableHeadProps>(({ className, srOnly, sticky, ...rest }, ref) => {\n    return (\n        <TableSectionContextProvider state={{ isTableHead: true, isTableBody: false, isTableFooter: false }}>\n            <thead\n                className={clsx(\"jkl-table-head\", className, {\n                    [\"jkl-table-head--sr-only\"]: srOnly,\n                    [\"jkl-table-head--sticky\"]: sticky,\n                })}\n                {...rest}\n                ref={ref}\n            />\n        </TableSectionContextProvider>\n    );\n});\n\nTableHead.displayName = \"TableHead\";\n\nexport { TableHead };\n"],"names":["TableHead","forwardRef","className","srOnly","sticky","rest","ref","jsx","TableSectionContextProvider","state","isTableHead","isTableBody","isTableFooter","children","clsx","displayName"],"mappings":"gMASM,MAAAA,EAAYC,GAAoD,EAAGC,UAAAA,EAAWC,OAAAA,EAAQC,OAAAA,KAAWC,GAAQC,IAEvGC,EAACC,EAA4B,CAAAC,MAAO,CAAEC,aAAa,EAAMC,aAAa,EAAOC,eAAe,GACxFC,SAAAN,EAAC,QAAA,CACGL,UAAWY,EAAK,iBAAkBZ,EAAW,CACxC,0BAA4BC,EAC5B,yBAA2BC,OAE5BC,EACJC,IAAAA,QAMhBN,EAAUe,YAAc"}
+{"version":3,"file":"TableHead.js","sources":["../../../../src/components/table/TableHead.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, HTMLAttributes } from \"react\";\nimport { TableSectionContextProvider } from \"./tableSectionContext.js\";\n\nexport interface TableHeadProps extends HTMLAttributes<HTMLTableSectionElement> {\n    srOnly?: boolean;\n    sticky?: boolean;\n}\n\nconst TableHead = forwardRef<HTMLTableSectionElement, TableHeadProps>(({ className, srOnly, sticky, ...rest }, ref) => {\n    return (\n        <TableSectionContextProvider state={{ isTableHead: true, isTableBody: false, isTableFooter: false }}>\n            <thead\n                className={clsx(\"jkl-table-head\", className, {\n                    [\"jkl-table-head--sr-only\"]: srOnly,\n                    [\"jkl-table-head--sticky\"]: sticky,\n                })}\n                {...rest}\n                ref={ref}\n            />\n        </TableSectionContextProvider>\n    );\n});\n\nTableHead.displayName = \"TableHead\";\n\nexport { TableHead };\n"],"names":["TableHead","forwardRef","className","srOnly","sticky","rest","ref","jsx","TableSectionContextProvider","state","isTableHead","isTableBody","isTableFooter","children","clsx","displayName"],"mappings":"gMASM,MAAAA,EAAYC,GAAoD,EAAGC,UAAAA,EAAWC,OAAAA,EAAQC,OAAAA,KAAWC,GAAQC,IAEvGC,EAACC,EAA4B,CAAAC,MAAO,CAAEC,aAAa,EAAMC,aAAa,EAAOC,eAAe,GACxFC,SAAAN,EAAC,QAAA,CACGL,UAAWY,EAAK,iBAAkBZ,EAAW,CACxC,0BAA4BC,EAC5B,yBAA2BC,OAE5BC,EACJC,IAAAA,QAMhBN,EAAUe,YAAc"}

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

@@ -0,0 +1,22 @@
+import { default as React, ThHTMLAttributes } from 'react';
+import { Density } from '../../core/types.js';
+import { TableSortProps } from './utils.js';
+export type TableSortDirection = "asc" | "desc";
+export interface TableHeaderProps extends ThHTMLAttributes<HTMLTableCellElement> {
+    bold?: boolean;
+    density?: Density;
+    /**
+     * Velg mellom venstrejustering og høyrejustering av innholdet. Typisk skal header følge innholdet i radene.
+     * @default "left"
+     */
+    align?: "left" | "center" | "right";
+    /**
+     * Si om headeren gjelder for en kolonne eller en rad
+     * @default "col"
+     */
+    scope?: "col" | "row";
+    srOnly?: boolean;
+    sortable?: TableSortProps;
+}
+declare const TableHeader: React.ForwardRefExoticComponent<TableHeaderProps & React.RefAttributes<HTMLTableCellElement>>;
+export { TableHeader };

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

@@ -1 +1 @@
-{"version":3,"file":"TableHeader.js","sources":["../../../../src/components/table/TableHeader.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, MouseEventHandler, ThHTMLAttributes } from \"react\";\nimport { Density } from \"../..\";\nimport { ArrowVerticalAnimated } from \"../icon\";\nimport { useTableContext } from \"./tableContext\";\nimport { TableSortProps } from \"./utils\";\n\nexport type TableSortDirection = \"asc\" | \"desc\";\n\nexport interface TableHeaderProps extends ThHTMLAttributes<HTMLTableCellElement> {\n    bold?: boolean;\n    density?: Density;\n    /**\n     * Velg mellom venstrejustering og høyrejustering av innholdet. Typisk skal header følge innholdet i radene.\n     * @default \"left\"\n     */\n    align?: \"left\" | \"center\" | \"right\";\n    /**\n     * Si om headeren gjelder for en kolonne eller en rad\n     * @default \"col\"\n     */\n    scope?: \"col\" | \"row\";\n    srOnly?: boolean;\n    sortable?: TableSortProps;\n}\n\nconst TableHeader = forwardRef<HTMLTableCellElement, TableHeaderProps>((props, ref) => {\n    const {\n        bold = true,\n        density,\n        sortable,\n        className,\n        scope = \"col\",\n        srOnly,\n        align = \"left\",\n        children,\n        onClick,\n        ...rest\n    } = props;\n    const { density: contextDensity } = useTableContext();\n\n    const handleClick: MouseEventHandler<HTMLTableCellElement> = (e) => {\n        onClick?.(e);\n        sortable?.onClick();\n    };\n\n    return (\n        <th\n            className={clsx(\"jkl-table-header\", className, {\n                [\"jkl-table-header--bold\"]: bold,\n                [\"jkl-table-header--align-right\"]: align === \"right\",\n                [\"jkl-table-header--align-center\"]: align === \"center\",\n                [\"jkl-table-header--sr-only\"]: srOnly,\n                [\"jkl-table-header--sortable\"]: typeof sortable !== \"undefined\",\n            })}\n            scope={scope}\n            onClick={handleClick}\n            {...rest}\n            data-density={density || contextDensity}\n            ref={ref}\n        >\n            {children}\n            {sortable && (\n                <div\n                    className={clsx(\"jkl-table-header__arrows\", {\n                        \"jkl-table-header__arrows--active\": Boolean(sortable.direction),\n                    })}\n                >\n                    {sortable.direction && <ArrowVerticalAnimated pointingDown={sortable.direction === \"desc\"} bold />}\n                </div>\n            )}\n        </th>\n    );\n});\n\nTableHeader.displayName = \"TableHeader\";\n\nexport { TableHeader };\n"],"names":["TableHeader","forwardRef","props","ref","bold","density","sortable","className","scope","srOnly","align","children","onClick","rest","contextDensity","useTableContext","jsxs","clsx","e","jsx","direction","ArrowVerticalAnimated","pointingDown","displayName"],"mappings":"0hDA0BA,MAAMA,EAAcC,GAAmD,CAACC,EAAOC,KACrE,MACFC,KAAAA,GAAO,EACPC,QAAAA,EACAC,SAAAA,EACAC,UAAAA,EACAC,MAAAA,EAAQ,MACRC,OAAAA,EACAC,MAAAA,EAAQ,OACRC,SAAAA,EACAC,QAAAA,KACGC,GACHX,GACIG,QAASS,GAAmBC,IAQhC,OAAAC,EAAC,KAAA,CACGT,UAAWU,EAAK,mBAAoBV,EAAW,CAC1C,yBAA2BH,EAC3B,gCAA4C,UAAVM,EAClC,iCAA6C,WAAVA,EACnC,4BAA8BD,EAC9B,oCAAsCH,EAAa,MAExDE,MAAAA,EACAI,QAfsDM,IAC1D,MAAAN,GAAAA,EAAUM,GACV,MAAAZ,GAAAA,EAAUM,SAAA,KAcFC,EACJ,eAAcR,GAAWS,EACzBX,IAAAA,EAECQ,SAAA,CAAAA,EACAL,GACGa,EAAC,MAAA,CACGZ,UAAWU,EAAK,2BAA4B,CACxC,qCAA4CX,EAASc,YAGxDT,SAAAL,EAASc,WAAcD,EAAAE,EAAA,CAAsBC,aAAqC,SAAvBhB,EAASc,UAAsBhB,MAAI,QACnG,IAMhBJ,EAAYuB,YAAc"}
+{"version":3,"file":"TableHeader.js","sources":["../../../../src/components/table/TableHeader.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, MouseEventHandler, ThHTMLAttributes } from \"react\";\nimport { Density } from \"../../core/types.js\";\nimport { ArrowVerticalAnimated } from \"../icon/index.js\";\nimport { useTableContext } from \"./tableContext.js\";\nimport { TableSortProps } from \"./utils.js\";\n\nexport type TableSortDirection = \"asc\" | \"desc\";\n\nexport interface TableHeaderProps extends ThHTMLAttributes<HTMLTableCellElement> {\n    bold?: boolean;\n    density?: Density;\n    /**\n     * Velg mellom venstrejustering og høyrejustering av innholdet. Typisk skal header følge innholdet i radene.\n     * @default \"left\"\n     */\n    align?: \"left\" | \"center\" | \"right\";\n    /**\n     * Si om headeren gjelder for en kolonne eller en rad\n     * @default \"col\"\n     */\n    scope?: \"col\" | \"row\";\n    srOnly?: boolean;\n    sortable?: TableSortProps;\n}\n\nconst TableHeader = forwardRef<HTMLTableCellElement, TableHeaderProps>((props, ref) => {\n    const {\n        bold = true,\n        density,\n        sortable,\n        className,\n        scope = \"col\",\n        srOnly,\n        align = \"left\",\n        children,\n        onClick,\n        ...rest\n    } = props;\n    const { density: contextDensity } = useTableContext();\n\n    const handleClick: MouseEventHandler<HTMLTableCellElement> = (e) => {\n        onClick?.(e);\n        sortable?.onClick();\n    };\n\n    return (\n        <th\n            className={clsx(\"jkl-table-header\", className, {\n                [\"jkl-table-header--bold\"]: bold,\n                [\"jkl-table-header--align-right\"]: align === \"right\",\n                [\"jkl-table-header--align-center\"]: align === \"center\",\n                [\"jkl-table-header--sr-only\"]: srOnly,\n                [\"jkl-table-header--sortable\"]: typeof sortable !== \"undefined\",\n            })}\n            scope={scope}\n            onClick={handleClick}\n            {...rest}\n            data-density={density || contextDensity}\n            ref={ref}\n        >\n            {children}\n            {sortable && (\n                <div\n                    className={clsx(\"jkl-table-header__arrows\", {\n                        \"jkl-table-header__arrows--active\": Boolean(sortable.direction),\n                    })}\n                >\n                    {sortable.direction && <ArrowVerticalAnimated pointingDown={sortable.direction === \"desc\"} bold />}\n                </div>\n            )}\n        </th>\n    );\n});\n\nTableHeader.displayName = \"TableHeader\";\n\nexport { TableHeader };\n"],"names":["TableHeader","forwardRef","props","ref","bold","density","sortable","className","scope","srOnly","align","children","onClick","rest","contextDensity","useTableContext","jsxs","clsx","e","jsx","direction","ArrowVerticalAnimated","pointingDown","displayName"],"mappings":"0hDA0BA,MAAMA,EAAcC,GAAmD,CAACC,EAAOC,KACrE,MACFC,KAAAA,GAAO,EACPC,QAAAA,EACAC,SAAAA,EACAC,UAAAA,EACAC,MAAAA,EAAQ,MACRC,OAAAA,EACAC,MAAAA,EAAQ,OACRC,SAAAA,EACAC,QAAAA,KACGC,GACHX,GACIG,QAASS,GAAmBC,IAQhC,OAAAC,EAAC,KAAA,CACGT,UAAWU,EAAK,mBAAoBV,EAAW,CAC1C,yBAA2BH,EAC3B,gCAA4C,UAAVM,EAClC,iCAA6C,WAAVA,EACnC,4BAA8BD,EAC9B,oCAAsCH,EAAa,MAExDE,MAAAA,EACAI,QAfsDM,IAC1D,MAAAN,GAAAA,EAAUM,GACV,MAAAZ,GAAAA,EAAUM,SAAA,KAcFC,EACJ,eAAcR,GAAWS,EACzBX,IAAAA,EAECQ,SAAA,CAAAA,EACAL,GACGa,EAAC,MAAA,CACGZ,UAAWU,EAAK,2BAA4B,CACxC,qCAA4CX,EAASc,YAGxDT,SAAAL,EAASc,WAAcD,EAAAE,EAAA,CAAsBC,aAAqC,SAAvBhB,EAASc,UAAsBhB,MAAI,QACnG,IAMhBJ,EAAYuB,YAAc"}

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

@@ -0,0 +1,43 @@
+import { default as React, ChangeEventHandler } from 'react';
+import { Density } from '../../core/types.js';
+export interface TablePaginationProps {
+    className?: string;
+    id?: string;
+    density?: Density;
+    /**
+     * @default 0
+     */
+    activePage?: number;
+    /**
+     * Null eller negativt tall tolkes som "vis alle".
+     */
+    rowsPerPage: number;
+    rowsPerPageItems: Array<number | {
+        label: string;
+        value: number;
+    }>;
+    totalNumberOfRows: number;
+    /**
+     * Viser et valgfritt inputfelt for å hoppe raskt til en spesifik side.
+     * Du kan også sende inn en custom label hvis du ønsker det, ellers bruke
+     * true for default label
+     * @default false
+     */
+    withGoToPage?: boolean | {
+        gotoLabel: string;
+    };
+    onChange: (e: React.SyntheticEvent, toPage: number, fromPage: number) => void;
+    onChangeRowsPerPage: ChangeEventHandler<HTMLSelectElement>;
+    /**
+     * Dersom du ønsker å ha custom labels kan du sende inn disse. "rowsPerPage"
+     * vises alltid på skjerm mens "next" og "previous" brukes som hint til
+     * skjermlesere for ikon-knappene til Neste/Forrige side
+     * @default { rowsPerPage: "Rader per side", previous: "Forrige", next: "Neste" }
+     */
+    labels?: {
+        rowsPerPage: string;
+        previous: string;
+        next: string;
+    };
+}
+export declare const TablePagination: React.ForwardRefExoticComponent<TablePaginationProps & React.RefAttributes<HTMLDivElement>>;

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"TablePagination.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"TablePagination.js","sources":["../../../../src/components/table/TablePagination.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n    forwardRef,\n    useCallback,\n    useState,\n    type ChangeEventHandler,\n    type FC,\n    type MouseEventHandler,\n} from \"react\";\nimport { Density } from \"../../core/types.js\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { ChevronLeftIcon, ChevronRightIcon } from \"../icon/index.js\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport { NativeSelect } from \"../select/NativeSelect.js\";\nimport { TextInput } from \"../text-input/TextInput.js\";\nimport { useTableContext } from \"./tableContext.js\";\n\nexport interface TablePaginationProps {\n    className?: string;\n    id?: string;\n    density?: Density;\n    /**\n     * @default 0\n     */\n    activePage?: number;\n    /**\n     * Null eller negativt tall tolkes som \"vis alle\".\n     */\n    rowsPerPage: number;\n    rowsPerPageItems: Array<number | { label: string; value: number }>;\n    totalNumberOfRows: number;\n    /**\n     * Viser et valgfritt inputfelt for å hoppe raskt til en spesifik side.\n     * Du kan også sende inn en custom label hvis du ønsker det, ellers bruke\n     * true for default label\n     * @default false\n     */\n    withGoToPage?: boolean | { gotoLabel: string };\n    onChange: (e: React.SyntheticEvent, toPage: number, fromPage: number) => void;\n    onChangeRowsPerPage: ChangeEventHandler<HTMLSelectElement>;\n    /**\n     * Dersom du ønsker å ha custom labels kan du sende inn disse. \"rowsPerPage\"\n     * vises alltid på skjerm mens \"next\" og \"previous\" brukes som hint til\n     * skjermlesere for ikon-knappene til Neste/Forrige side\n     * @default { rowsPerPage: \"Rader per side\", previous: \"Forrige\", next: \"Neste\" }\n     */\n    labels?: {\n        rowsPerPage: string;\n        previous: string;\n        next: string;\n    };\n}\n\nfunction clamp(min: number, num: number, max: number): number {\n    if (num < min) {\n        return min;\n    } else if (num > max) {\n        return max;\n    }\n    return num;\n}\n\nexport const TablePagination = forwardRef<HTMLDivElement, TablePaginationProps>((props, ref) => {\n    const {\n        activePage = 0,\n        totalNumberOfRows,\n        rowsPerPage,\n        rowsPerPageItems,\n        className,\n        density,\n        id: idProp,\n        withGoToPage = false,\n        onChange,\n        onChangeRowsPerPage,\n        labels = {\n            rowsPerPage: \"Rader per side\",\n            previous: \"Forrige\",\n            next: \"Neste\",\n        },\n        ...rest\n    } = props;\n\n    const id = useId(idProp || \"jkl-table-pagination\", { generateSuffix: !idProp });\n    const { density: contextDensity } = useTableContext();\n\n    const showAll = rowsPerPage <= 0;\n    const numberOfPages = showAll ? 1 : Math.ceil(totalNumberOfRows / rowsPerPage);\n\n    const [currentPage, setCurrentPage] = useState(clamp(0, activePage, numberOfPages - 1));\n\n    const onPageClick: MouseEventHandler<HTMLButtonElement> = useCallback(\n        (e) => {\n            const toPage = Number.parseInt(e.currentTarget.dataset[\"number\"] as string);\n            onChange(e, toPage, currentPage);\n            setCurrentPage(toPage);\n            setPagePickerValue(String(toPage + 1));\n        },\n        [onChange, setCurrentPage, currentPage],\n    );\n\n    const [pagePickerValue, setPagePickerValue] = useState(String(currentPage + 1));\n    const onPageChange: ChangeEventHandler<HTMLInputElement> = useCallback(\n        (e) => {\n            setPagePickerValue(e.target.value);\n            try {\n                const toPage = Number.parseInt(e.target.value) - 1;\n                if (Number.isNaN(toPage)) {\n                    return;\n                }\n\n                if (toPage >= 0 && toPage < numberOfPages) {\n                    onChange(e, toPage, currentPage);\n                    setCurrentPage(toPage);\n                }\n            } catch {\n                return;\n            }\n        },\n        [onChange, setPagePickerValue, setCurrentPage, currentPage, numberOfPages],\n    );\n\n    const onPrevious: MouseEventHandler<HTMLButtonElement> = useCallback(\n        (e) => {\n            if (currentPage === 0) {\n                // TODO: skal dette være en no-op i stedet?\n                onChange(e, currentPage, currentPage);\n                return;\n            }\n            const toPage = currentPage - 1;\n            onChange(e, toPage, currentPage);\n            setCurrentPage(toPage);\n            setPagePickerValue(String(toPage + 1));\n        },\n        [onChange, setCurrentPage, currentPage],\n    );\n\n    const onNext: MouseEventHandler<HTMLButtonElement> = useCallback(\n        (e) => {\n            if (currentPage === numberOfPages - 1) {\n                // TODO: skal dette være en no-op i stedet?\n                onChange(e, currentPage, currentPage);\n                return;\n            }\n            const toPage = currentPage + 1;\n            onChange(e, toPage, currentPage);\n            setCurrentPage(toPage);\n            setPagePickerValue(String(toPage + 1));\n        },\n        [onChange, setCurrentPage, numberOfPages, currentPage],\n    );\n\n    return (\n        <div\n            className={clsx(\"jkl-table-pagination\", className)}\n            {...rest}\n            id={id}\n            data-density={density || contextDensity}\n            ref={ref}\n        >\n            <div className=\"jkl-table-pagination__left\">\n                <div className=\"jkl-table-pagination__picker jkl-table-pagination__picker--rows\">\n                    <span className=\"jkl-table-pagination__picker-label\" aria-hidden=\"true\">\n                        {labels.rowsPerPage}:\n                    </span>\n                    <NativeSelect\n                        className=\"jkl-table-pagination__picker-input\"\n                        label={labels.rowsPerPage}\n                        labelProps={{ srOnly: true }}\n                        name={`${id}-rows-per-page`}\n                        items={rowsPerPageItems.map((i) =>\n                            typeof i === \"number\" ? String(i) : { label: i.label, value: String(i.value) },\n                        )}\n                        value={String(rowsPerPage)}\n                        onChange={onChangeRowsPerPage}\n                        width=\"min(8rem, 100%)\"\n                        inline\n                    />\n                </div>\n            </div>\n            <div className=\"jkl-table-pagination__right\">\n                {numberOfPages !== 1 && (\n                    <nav className=\"jkl-table-pagination__nav\">\n                        {withGoToPage && (\n                            <div className=\"jkl-table-pagination__picker jkl-table-pagination__picker--page\">\n                                <span className=\"jkl-table-pagination__picker-label\" aria-hidden=\"true\">\n                                    {typeof withGoToPage === \"object\" ? withGoToPage.gotoLabel : \"Gå til side\"}:\n                                </span>\n                                {/* onChange først ved enter/submit */}\n                                <TextInput\n                                    className=\"jkl-table-pagination__picker-input\"\n                                    label={typeof withGoToPage === \"object\" ? withGoToPage.gotoLabel : \"Gå til side\"}\n                                    labelProps={{ srOnly: true }}\n                                    name={`${id}-go-to-page`}\n                                    value={pagePickerValue}\n                                    width=\"min(4rem, 100%)\"\n                                    onChange={onPageChange}\n                                    aria-invalid={\n                                        pagePickerValue && pagePickerValue !== String(currentPage + 1)\n                                            ? \"true\"\n                                            : undefined\n                                    }\n                                />\n                            </div>\n                        )}\n                        <ul>\n                            <li>\n                                <IconButton\n                                    className=\"jkl-table-pagination__previous\"\n                                    title={labels.previous}\n                                    onClick={onPrevious}\n                                >\n                                    <ChevronLeftIcon />\n                                </IconButton>\n                            </li>\n                            <PaginationPages\n                                id={id}\n                                activePage={activePage}\n                                numberOfPages={numberOfPages}\n                                onPageClick={onPageClick}\n                            />\n                            <li>\n                                <IconButton className=\"jkl-table-pagination__next\" title={labels.next} onClick={onNext}>\n                                    <ChevronRightIcon />\n                                </IconButton>\n                            </li>\n                        </ul>\n                    </nav>\n                )}\n            </div>\n        </div>\n    );\n});\n\nconst PaginationPages: FC<{\n    id: string;\n    activePage: number;\n    numberOfPages: number;\n    onPageClick: MouseEventHandler;\n}> = ({ id, activePage, numberOfPages, onPageClick }) => {\n    if (numberOfPages <= 7) {\n        return (\n            <>\n                {Array.from({ length: numberOfPages }).map((_, i) => (\n                    <li key={`${id}-page-${i}`}>\n                        <button\n                            className={clsx(\"jkl-table-pagination__page\", {\n                                \"jkl-table-pagination__page--active\": activePage === i,\n                            })}\n                            type=\"button\"\n                            data-number={i}\n                            onClick={onPageClick}\n                        >\n                            {i + 1}\n                        </button>\n                    </li>\n                ))}\n            </>\n        );\n    }\n\n    const showStartEllipsis = activePage > 3 && numberOfPages > 7;\n    const showEndEllipsis = activePage < numberOfPages - 4 && numberOfPages > 7;\n\n    const startEllipsis = Math.min(Math.max(activePage - 2, 1), numberOfPages - 6);\n    const centerPageNumberStart = Math.min(startEllipsis + 1, numberOfPages - 5);\n    const centerPageNumber = Math.min(centerPageNumberStart + 1, numberOfPages - 4);\n    const centerPageNumberEnd = Math.min(centerPageNumberStart + 2, numberOfPages - 3);\n    const endEllipsis = Math.min(centerPageNumberStart + 3, numberOfPages - 2);\n\n    return (\n        <>\n            <li>\n                <PaginationPageButton isActive={activePage === 0} number={0} onClick={onPageClick} />\n            </li>\n            <li>\n                {showStartEllipsis ? (\n                    <span className=\"jkl-table-pagination__ellipsis\" aria-hidden>\n                        {\"...\"}\n                    </span>\n                ) : (\n                    <PaginationPageButton\n                        isActive={activePage === startEllipsis}\n                        number={startEllipsis}\n                        onClick={onPageClick}\n                    />\n                )}\n            </li>\n            <li>\n                <PaginationPageButton\n                    isActive={activePage === centerPageNumberStart}\n                    number={centerPageNumberStart}\n                    onClick={onPageClick}\n                />\n            </li>\n            <li>\n                <PaginationPageButton\n                    isActive={activePage === centerPageNumber}\n                    number={centerPageNumber}\n                    onClick={onPageClick}\n                />\n            </li>\n            <li>\n                <PaginationPageButton\n                    isActive={activePage === centerPageNumberEnd}\n                    number={centerPageNumberEnd}\n                    onClick={onPageClick}\n                />\n            </li>\n            <li>\n                {showEndEllipsis ? (\n                    <span className=\"jkl-table-pagination__ellipsis\" aria-hidden>\n                        {\"...\"}\n                    </span>\n                ) : (\n                    <PaginationPageButton\n                        isActive={activePage === endEllipsis}\n                        number={endEllipsis}\n                        onClick={onPageClick}\n                    />\n                )}\n            </li>\n            <li>\n                <PaginationPageButton\n                    isActive={activePage === numberOfPages - 1}\n                    number={numberOfPages - 1}\n                    onClick={onPageClick}\n                />\n            </li>\n        </>\n    );\n};\n\nconst PaginationPageButton: FC<{\n    isActive: boolean;\n    number: number;\n    onClick: MouseEventHandler;\n}> = ({ isActive, number, onClick, ...rest }) => (\n    <button\n        className={clsx(\"jkl-table-pagination__page\", {\n            \"jkl-table-pagination__page--active\": isActive,\n        })}\n        type=\"button\"\n        data-number={number}\n        onClick={onClick}\n        {...rest}\n    >\n        {number + 1}\n    </button>\n);\n\nTablePagination.displayName = \"TablePagination\";\n"],"names":["TablePagination","forwardRef","props","ref","activePage","totalNumberOfRows","rowsPerPage","rowsPerPageItems","className","density","id","idProp","withGoToPage","onChange","onChangeRowsPerPage","labels","previous","next","rest","useId","generateSuffix","contextDensity","useTableContext","numberOfPages","Math","ceil","currentPage","setCurrentPage","useState","min","num","max","clamp","onPageClick","useCallback","e","toPage","Number","parseInt","currentTarget","dataset","number","setPagePickerValue","String","pagePickerValue","onPageChange","target","value","isNaN","onPrevious","onNext","jsxs","clsx","children","jsx","NativeSelect","label","labelProps","srOnly","name","items","map","i","width","inline","gotoLabel","TextInput","IconButton","title","onClick","ChevronLeftIcon","PaginationPages","ChevronRightIcon","Fragment","Array","from","length","_","type","showStartEllipsis","showEndEllipsis","startEllipsis","centerPageNumberStart","centerPageNumber","centerPageNumberEnd","endEllipsis","PaginationPageButton","isActive","displayName"],"mappings":"yzDA8DO,MAAMA,EAAkBC,GAAiD,CAACC,EAAOC,KAC9E,MACFC,WAAAA,EAAa,EACbC,kBAAAA,EACAC,YAAAA,EACAC,iBAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,GAAIC,EACJC,aAAAA,GAAe,EACfC,SAAAA,EACAC,oBAAAA,EACAC,OAAAA,EAAS,CACLT,YAAa,iBACbU,SAAU,UACVC,KAAM,YAEPC,GACHhB,EAEEQ,EAAKS,EAAMR,GAAU,uBAAwB,CAAES,gBAAiBT,KAC9DF,QAASY,GAAmBC,IAG9BC,EADUjB,GAAe,EACC,EAAIkB,KAAKC,KAAKpB,EAAoBC,IAE3DoB,EAAaC,GAAkBC,EAnC1C,SAAeC,EAAaC,EAAaC,GACrC,OAAID,EAAMD,EACCA,EACAC,EAAMC,EACNA,EAEJD,CACX,CA4BmDE,CAAM,EAAG5B,EAAYmB,EAAgB,IAE9EU,EAAoDC,GACrDC,IACG,MAAMC,EAASC,OAAOC,SAASH,EAAEI,cAAcC,QAAQC,QAC9C5B,EAAAsB,EAAGC,EAAQV,GACpBC,EAAeS,GACIM,EAAAC,OAAOP,EAAS,GAAE,GAEzC,CAACvB,EAAUc,EAAgBD,KAGxBkB,EAAiBF,GAAsBd,EAASe,OAAOjB,EAAc,IACtEmB,EAAqDX,GACtDC,IACsBO,EAAAP,EAAEW,OAAOC,OACxB,IACA,MAAMX,EAASC,OAAOC,SAASH,EAAEW,OAAOC,OAAS,EAC7C,GAAAV,OAAOW,MAAMZ,GACb,OAGAA,GAAU,GAAKA,EAASb,IACfV,EAAAsB,EAAGC,EAAQV,GACpBC,EAAeS,GACnB,CACI,MACJ,MACJ,IAEJ,CAACvB,EAAU6B,EAAoBf,EAAgBD,EAAaH,IAG1D0B,EAAmDf,GACpDC,IACG,GAAoB,IAAhBT,EAGA,YADSb,EAAAsB,EAAGT,EAAaA,GAG7B,MAAMU,EAASV,EAAc,EACpBb,EAAAsB,EAAGC,EAAQV,GACpBC,EAAeS,GACIM,EAAAC,OAAOP,EAAS,GAAE,GAEzC,CAACvB,EAAUc,EAAgBD,IAGzBwB,EAA+ChB,GAChDC,IACOT,GAAAA,IAAgBH,EAAgB,EAGhC,YADSV,EAAAsB,EAAGT,EAAaA,GAG7B,MAAMU,EAASV,EAAc,EACpBb,EAAAsB,EAAGC,EAAQV,GACpBC,EAAeS,GACIM,EAAAC,OAAOP,EAAS,GAAE,GAEzC,CAACvB,EAAUc,EAAgBJ,EAAeG,IAI1C,OAAAyB,EAAC,MAAA,CACG3C,UAAW4C,EAAK,uBAAwB5C,MACpCU,EACJR,GAAAA,EACA,eAAcD,GAAWY,EACzBlB,IAAAA,EAEAkD,SAAA,CAAAC,EAAC,OAAI9C,UAAU,6BACX6C,SAACF,EAAA,MAAA,CAAI3C,UAAU,kEACX6C,SAAA,CAAAF,EAAC,OAAK,CAAA3C,UAAU,qCAAqC,cAAY,OAC5D6C,SAAA,CAAOtC,EAAAT,YAAY,OAExBgD,EAACC,EAAA,CACG/C,UAAU,qCACVgD,MAAOzC,EAAOT,YACdmD,WAAY,CAAEC,QAAQ,GACtBC,KAAM,GAAGjD,kBACTkD,MAAOrD,EAAiBsD,KAAKC,GACZ,iBAANA,EAAiBnB,OAAOmB,GAAK,CAAEN,MAAOM,EAAEN,MAAOT,MAAOJ,OAAOmB,EAAEf,UAE1EA,MAAOJ,OAAOrC,GACdO,SAAUC,EACViD,MAAM,kBACNC,QAAM,SAIlBV,EAAC,OAAI9C,UAAU,8BACV6C,SAAkB,OACfF,EAAC,MAAI,CAAA3C,UAAU,4BACV6C,SAAA,CACGzC,GAAAuC,EAAC,MAAI,CAAA3C,UAAU,kEACX6C,SAAA,CAAAF,EAAC,OAAK,CAAA3C,UAAU,qCAAqC,cAAY,OAC5D6C,SAAA,CAAwB,iBAAjBzC,EAA4BA,EAAaqD,UAAY,cAAc,OAG/EX,EAACY,EAAA,CACG1D,UAAU,qCACVgD,MAA+B,iBAAjB5C,EAA4BA,EAAaqD,UAAY,cACnER,WAAY,CAAEC,QAAQ,GACtBC,KAAM,GAAGjD,eACTqC,MAAOH,EACPmB,MAAM,kBACNlD,SAAUgC,EACV,eACID,GAAmBA,IAAoBD,OAAOjB,EAAc,GACtD,YACA,SAKrB,KACG,CAAA2B,SAAA,CAAAC,EAAC,KACG,CAAAD,SAAAC,EAACa,EAAA,CACG3D,UAAU,iCACV4D,MAAOrD,EAAOC,SACdqD,QAASpB,EAETI,WAACiB,EAAgB,QAGzBhB,EAACiB,EAAA,CACG7D,GAAAA,EACAN,WAAAA,EACAmB,cAAAA,EACAU,YAAAA,IAEHqB,EAAA,KAAA,CACGD,SAACC,EAAAa,EAAA,CAAW3D,UAAU,6BAA6B4D,MAAOrD,EAAOE,KAAMoD,QAASnB,EAC5EG,SAACC,EAAAkB,EAAA,CAAA,iBAMzB,IAKND,EAKD,EAAG7D,GAAAA,EAAIN,WAAAA,EAAYmB,cAAAA,EAAeU,YAAAA,MACnC,GAAIV,GAAiB,EAGR,OAAA+B,EAAAmB,EAAA,CAAApB,SAAAqB,MAAMC,KAAK,CAAEC,OAAQrD,IAAiBsC,KAAI,CAACgB,EAAGf,MAC1C,KACG,CAAAT,SAAAC,EAAC,SAAA,CACG9C,UAAW4C,EAAK,6BAA8B,CAC1C,qCAAsChD,IAAe0D,IAEzDgB,KAAK,SACL,cAAahB,EACbO,QAASpC,EAERoB,SAAIS,EAAA,KATJ,GAAGpD,UAAWoD,SAiBjCiB,MAAAA,EAAoB3E,EAAa,GAAKmB,EAAgB,EACtDyD,EAAkB5E,EAAamB,EAAgB,GAAKA,EAAgB,EAEpE0D,EAAgBzD,KAAKK,IAAIL,KAAKO,IAAI3B,EAAa,EAAG,GAAImB,EAAgB,GACtE2D,EAAwB1D,KAAKK,IAAIoD,EAAgB,EAAG1D,EAAgB,GACpE4D,EAAmB3D,KAAKK,IAAIqD,EAAwB,EAAG3D,EAAgB,GACvE6D,EAAsB5D,KAAKK,IAAIqD,EAAwB,EAAG3D,EAAgB,GAC1E8D,EAAc7D,KAAKK,IAAIqD,EAAwB,EAAG3D,EAAgB,GAExE,OAEQ4B,EAAAsB,EAAA,CAAApB,SAAA,CAACC,EAAA,KAAA,CACGD,SAACC,EAAAgC,EAAA,CAAqBC,SAAyB,IAAfnF,EAAkBqC,OAAQ,EAAG4B,QAASpC,MAE1EqB,EAAC,KACI,CAAAD,SAAA0B,EACIzB,EAAA,OAAA,CAAK9C,UAAU,iCAAiC,eAAW,EACvD6C,SAAA,QAGLC,EAACgC,EAAA,CACGC,SAAUnF,IAAe6E,EACzBxC,OAAQwC,EACRZ,QAASpC,QAIpB,KACG,CAAAoB,SAAAC,EAACgC,EAAA,CACGC,SAAUnF,IAAe8E,EACzBzC,OAAQyC,EACRb,QAASpC,QAGhB,KACG,CAAAoB,SAAAC,EAACgC,EAAA,CACGC,SAAUnF,IAAe+E,EACzB1C,OAAQ0C,EACRd,QAASpC,QAGhB,KACG,CAAAoB,SAAAC,EAACgC,EAAA,CACGC,SAAUnF,IAAegF,EACzB3C,OAAQ2C,EACRf,QAASpC,MAGjBqB,EAAC,KACI,CAAAD,SAAA2B,EACI1B,EAAA,OAAA,CAAK9C,UAAU,iCAAiC,eAAW,EACvD6C,SAAA,QAGLC,EAACgC,EAAA,CACGC,SAAUnF,IAAeiF,EACzB5C,OAAQ4C,EACRhB,QAASpC,QAIpB,KACG,CAAAoB,SAAAC,EAACgC,EAAA,CACGC,SAAUnF,IAAemB,EAAgB,EACzCkB,OAAQlB,EAAgB,EACxB8C,QAASpC,QAGrB,EAIFqD,EAID,EAAGC,SAAAA,EAAU9C,OAAAA,EAAQ4B,QAAAA,KAAYnD,KAClCoC,EAAC,SAAA,CACG9C,UAAW4C,EAAK,6BAA8B,CAC1C,qCAAsCmC,IAE1CT,KAAK,SACL,cAAarC,EACb4B,QAAAA,KACInD,EAEHmC,SAASZ,EAAA,IAIlBzC,EAAgBwF,YAAc"}

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

@@ -1 +1 @@
-{"version":3,"file":"TableRow.js","sources":["../../../../src/components/table/TableRow.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, HTMLAttributes, useEffect, useState } from \"react\";\nimport { useTableContext } from \"./tableContext\";\nimport { useTableSectionContext } from \"./tableSectionContext\";\n\nexport interface ClickableRowProps {\n    markClickedRows?: boolean;\n    /** Lar deg kontrollere radens tilstand untenfra */\n    isClicked?: boolean;\n    onClick: (e: React.MouseEvent<HTMLTableRowElement, MouseEvent> | React.KeyboardEvent<HTMLTableRowElement>) => void;\n}\n\nexport interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {\n    /**\n     * Gir raden interaktivitet og en click-handler.\n     */\n    clickable?: ClickableRowProps;\n}\n\nconst TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(({ className, clickable, children, ...rest }, ref) => {\n    const { density } = useTableContext();\n    const { isTableBody } = useTableSectionContext();\n\n    const [clicked, setClicked] = useState(clickable?.isClicked || false);\n\n    useEffect(() => {\n        setClicked((prev) => (clickable?.isClicked !== undefined ? clickable.isClicked : prev));\n    }, [clickable?.isClicked]);\n\n    if (isTableBody && clickable) {\n        return (\n            <tr\n                onClick={function handleOnClick(e) {\n                    setClicked(!clicked);\n                    clickable.onClick(e);\n                }}\n                onKeyPress={function handleKeyPress(e) {\n                    if (e.key === \" \" || e.key === \"Enter\") {\n                        e.preventDefault();\n                        setClicked(!clicked);\n                        clickable.onClick(e);\n                    }\n                }}\n                data-testid=\"jkl-clickable-table-row\"\n                className={clsx(\"jkl-table-row\", \"jkl-table-row--clickable\", className, {\n                    [\"jkl-table-row--clicked\"]: clickable?.markClickedRows && clicked,\n                })}\n                aria-label=\"Klikkbar rad\"\n                aria-pressed={clickable?.markClickedRows ? (clicked ? \"true\" : \"false\") : undefined}\n                tabIndex={0}\n                {...rest}\n                data-density={density}\n                ref={ref}\n            >\n                {children}\n            </tr>\n        );\n    }\n\n    return (\n        <tr className={clsx(\"jkl-table-row\", className)} {...rest} ref={ref} data-density={density}>\n            {children}\n        </tr>\n    );\n});\n\nTableRow.displayName = \"TableRow\";\n\nexport { TableRow };\n"],"names":["TableRow","forwardRef","className","clickable","children","rest","ref","density","useTableContext","isTableBody","useTableSectionContext","clicked","setClicked","useState","isClicked","useEffect","prev","jsx","onClick","e","onKeyPress","key","preventDefault","clsx","markClickedRows","tabIndex","displayName"],"mappings":"4QAmBM,MAAAA,EAAWC,GAA+C,EAAGC,UAAAA,EAAWC,UAAAA,EAAWC,SAAAA,KAAaC,GAAQC,KACpG,MAAEC,QAAAA,GAAYC,KACZC,YAAAA,GAAgBC,KAEjBC,EAASC,GAAcC,GAAS,MAAAV,OAAA,EAAAA,EAAWW,aAAa,GAM/D,OAJAC,GAAU,KACNH,GAAYI,QAAmC,KAAzB,MAAAb,OAAA,EAAAA,EAAWW,WAA0BX,EAAUW,UAAYE,GAAK,GACvF,CAAC,MAAAb,OAAAA,EAAAA,EAAWW,YAIPG,EAAC,KAFLR,GAAeN,EAEV,CACGe,QAAS,SAAuBC,GAC5BP,GAAYD,GACZR,EAAUe,QAAQC,EACtB,EACAC,WAAY,SAAwBD,IAClB,MAAVA,EAAEE,KAAyB,UAAVF,EAAEE,OACnBF,EAAEG,iBACFV,GAAYD,GACZR,EAAUe,QAAQC,GAE1B,EACA,cAAY,0BACZjB,UAAWqB,EAAK,gBAAiB,2BAA4BrB,EAAW,CACnE,0BAA2B,MAAAC,OAAAA,EAAAA,EAAWqB,kBAAmBb,IAE9D,aAAW,eACX,eAAc,MAAAR,GAAAA,EAAWqB,gBAAmBb,EAAU,OAAS,aAAW,EAC1Ec,SAAU,KACNpB,EACJ,eAAcE,EACdD,IAAAA,EAECF,SAAAA,GAMR,CAAGF,UAAWqB,EAAK,gBAAiBrB,MAAgBG,EAAMC,IAAAA,EAAU,eAAcC,EAC9EH,SAAAA,GACL,IAIRJ,EAAS0B,YAAc"}
+{"version":3,"file":"TableRow.js","sources":["../../../../src/components/table/TableRow.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, HTMLAttributes, useEffect, useState } from \"react\";\nimport { useTableContext } from \"./tableContext.js\";\nimport { useTableSectionContext } from \"./tableSectionContext.js\";\n\nexport interface ClickableRowProps {\n    markClickedRows?: boolean;\n    /** Lar deg kontrollere radens tilstand untenfra */\n    isClicked?: boolean;\n    onClick: (e: React.MouseEvent<HTMLTableRowElement, MouseEvent> | React.KeyboardEvent<HTMLTableRowElement>) => void;\n}\n\nexport interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {\n    /**\n     * Gir raden interaktivitet og en click-handler.\n     */\n    clickable?: ClickableRowProps;\n}\n\nconst TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(({ className, clickable, children, ...rest }, ref) => {\n    const { density } = useTableContext();\n    const { isTableBody } = useTableSectionContext();\n\n    const [clicked, setClicked] = useState(clickable?.isClicked || false);\n\n    useEffect(() => {\n        setClicked((prev) => (clickable?.isClicked !== undefined ? clickable.isClicked : prev));\n    }, [clickable?.isClicked]);\n\n    if (isTableBody && clickable) {\n        return (\n            <tr\n                onClick={function handleOnClick(e) {\n                    setClicked(!clicked);\n                    clickable.onClick(e);\n                }}\n                onKeyPress={function handleKeyPress(e) {\n                    if (e.key === \" \" || e.key === \"Enter\") {\n                        e.preventDefault();\n                        setClicked(!clicked);\n                        clickable.onClick(e);\n                    }\n                }}\n                data-testid=\"jkl-clickable-table-row\"\n                className={clsx(\"jkl-table-row\", \"jkl-table-row--clickable\", className, {\n                    [\"jkl-table-row--clicked\"]: clickable?.markClickedRows && clicked,\n                })}\n                aria-label=\"Klikkbar rad\"\n                aria-pressed={clickable?.markClickedRows ? (clicked ? \"true\" : \"false\") : undefined}\n                tabIndex={0}\n                {...rest}\n                data-density={density}\n                ref={ref}\n            >\n                {children}\n            </tr>\n        );\n    }\n\n    return (\n        <tr className={clsx(\"jkl-table-row\", className)} {...rest} ref={ref} data-density={density}>\n            {children}\n        </tr>\n    );\n});\n\nTableRow.displayName = \"TableRow\";\n\nexport { TableRow };\n"],"names":["TableRow","forwardRef","className","clickable","children","rest","ref","density","useTableContext","isTableBody","useTableSectionContext","clicked","setClicked","useState","isClicked","useEffect","prev","jsx","onClick","e","onKeyPress","key","preventDefault","clsx","markClickedRows","tabIndex","displayName"],"mappings":"4QAmBM,MAAAA,EAAWC,GAA+C,EAAGC,UAAAA,EAAWC,UAAAA,EAAWC,SAAAA,KAAaC,GAAQC,KACpG,MAAEC,QAAAA,GAAYC,KACZC,YAAAA,GAAgBC,KAEjBC,EAASC,GAAcC,GAAS,MAAAV,OAAA,EAAAA,EAAWW,aAAa,GAM/D,OAJAC,GAAU,KACNH,GAAYI,QAAmC,KAAzB,MAAAb,OAAA,EAAAA,EAAWW,WAA0BX,EAAUW,UAAYE,GAAK,GACvF,CAAC,MAAAb,OAAAA,EAAAA,EAAWW,YAIPG,EAAC,KAFLR,GAAeN,EAEV,CACGe,QAAS,SAAuBC,GAC5BP,GAAYD,GACZR,EAAUe,QAAQC,EACtB,EACAC,WAAY,SAAwBD,IAClB,MAAVA,EAAEE,KAAyB,UAAVF,EAAEE,OACnBF,EAAEG,iBACFV,GAAYD,GACZR,EAAUe,QAAQC,GAE1B,EACA,cAAY,0BACZjB,UAAWqB,EAAK,gBAAiB,2BAA4BrB,EAAW,CACnE,0BAA2B,MAAAC,OAAAA,EAAAA,EAAWqB,kBAAmBb,IAE9D,aAAW,eACX,eAAc,MAAAR,GAAAA,EAAWqB,gBAAmBb,EAAU,OAAS,aAAW,EAC1Ec,SAAU,KACNpB,EACJ,eAAcE,EACdD,IAAAA,EAECF,SAAAA,GAMR,CAAGF,UAAWqB,EAAK,gBAAiBrB,MAAgBG,EAAMC,IAAAA,EAAU,eAAcC,EAC9EH,SAAAA,GACL,IAIRJ,EAAS0B,YAAc"}

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

@@ -0,0 +1,34 @@
+export { DataTable } from './DataTable.js';
+export { Table } from './Table.js';
+export { TableBody } from './TableBody.js';
+export { TableCaption } from './TableCaption.js';
+export { TableCell } from './TableCell.js';
+export { TableColumn } from './TableColumn.js';
+export { TableColumnGroup } from './TableColumnGroup.js';
+export { useTableContext, TableContextProvider } from './tableContext.js';
+export { useTableSectionContext, TableSectionContextProvider } from './tableSectionContext.js';
+export { TableFooter } from './TableFooter.js';
+export { TableHead } from './TableHead.js';
+export { TableHeader } from './TableHeader.js';
+export { TablePagination } from './TablePagination.js';
+export { TableRow } from './TableRow.js';
+export { ExpandableTableRow } from './ExpandableTableRow.js';
+export { ExpandableTableRowController } from './ExpandableTableRowController.js';
+export { useSortableTableHeader } from './utils.js';
+export type { DataTableProps } from './DataTable.js';
+export type { TableProps } from './Table.js';
+export type { TableBodyProps } from './TableBody.js';
+export type { TableCaptionProps } from './TableCaption.js';
+export type { TableCellProps } from './TableCell.js';
+export type { TableColumnProps } from './TableColumn.js';
+export type { TableColumnGroupProps } from './TableColumnGroup.js';
+export type { TableContextProviderProps } from './tableContext.js';
+export type { TableSectionContextProviderProps } from './tableSectionContext.js';
+export type { TableFooterProps } from './TableFooter.js';
+export type { TableHeadProps } from './TableHead.js';
+export type { TableHeaderProps, TableSortDirection } from './TableHeader.js';
+export type { TablePaginationProps } from './TablePagination.js';
+export type { TableRowProps } from './TableRow.js';
+export type { ExpandableTableRowProps } from './ExpandableTableRow.js';
+export type { ExpandableTableRowControllerProps } from './ExpandableTableRowController.js';
+export type { TableSortProps } from './utils.js';

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

@@ -1,2 +1,2 @@
-import{DataTable as a}from"./DataTable.js";import{Table as e}from"./Table.js";import{TableBody as o}from"./TableBody.js";import{TableCaption as l}from"./TableCaption.js";import{TableCell as s}from"./TableCell.js";import{TableColumn as t}from"./TableColumn.js";import{TableColumnGroup as b}from"./TableColumnGroup.js";import{TableContextProvider as r,useTableContext as T}from"./tableContext.js";import{TableSectionContextProvider as m,useTableSectionContext as i}from"./tableSectionContext.js";import{TableFooter as n}from"./TableFooter.js";import{TableHead as p}from"./TableHead.js";import{TableHeader as C}from"./TableHeader.js";import{a as d,b as u,T as f}from"../../../ExpandableTableRow-8_2Qs86T.js";import{TableRow as j}from"./TableRow.js";import{useSortableTableHeader as x}from"./utils.js";export{a as DataTable,d as ExpandableTableRow,u as ExpandableTableRowController,e as Table,o as TableBody,l as TableCaption,s as TableCell,t as TableColumn,b as TableColumnGroup,r as TableContextProvider,n as TableFooter,p as TableHead,C as TableHeader,f as TablePagination,j as TableRow,m as TableSectionContextProvider,x as useSortableTableHeader,T as useTableContext,i as useTableSectionContext};
+import{DataTable as a}from"./DataTable.js";import{Table as e}from"./Table.js";import{TableBody as o}from"./TableBody.js";import{TableCaption as l}from"./TableCaption.js";import{TableCell as t}from"./TableCell.js";import{TableColumn as b}from"./TableColumn.js";import{TableColumnGroup as r}from"./TableColumnGroup.js";import{TableContextProvider as s,useTableContext as T}from"./tableContext.js";import{TableSectionContextProvider as m,useTableSectionContext as n}from"./tableSectionContext.js";import{TableFooter as i}from"./TableFooter.js";import{TableHead as p}from"./TableHead.js";import{TableHeader as C}from"./TableHeader.js";import{TablePagination as d}from"./TablePagination.js";import{TableRow as f}from"./TableRow.js";import{ExpandableTableRow as j}from"./ExpandableTableRow.js";import{ExpandableTableRowController as x}from"./ExpandableTableRowController.js";import{useSortableTableHeader as u}from"./utils.js";export{a as DataTable,j as ExpandableTableRow,x as ExpandableTableRowController,e as Table,o as TableBody,l as TableCaption,t as TableCell,b as TableColumn,r as TableColumnGroup,s as TableContextProvider,i as TableFooter,p as TableHead,C as TableHeader,d as TablePagination,f as TableRow,m as TableSectionContextProvider,u as useSortableTableHeader,T as useTableContext,n as useTableSectionContext};
 //# sourceMappingURL=index.js.map

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

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+import { Density, WithChildren } from '../../core/types.js';
+type TableContext = {
+    density?: Density;
+    collapseToList: boolean;
+};
+export declare const useTableContext: () => TableContext;
+export interface TableContextProviderProps extends WithChildren {
+    state: TableContext;
+}
+export declare const TableContextProvider: React.FC<TableContextProviderProps>;
+export {};

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

@@ -1 +1 @@
-{"version":3,"file":"tableContext.js","sources":["../../../../src/components/table/tableContext.tsx"],"sourcesContent":["import React, { createContext, useContext } from \"react\";\nimport { Density, WithChildren } from \"../..\";\n\ntype TableContext = {\n    density?: Density;\n    collapseToList: boolean;\n};\n\nconst tableContext = createContext<TableContext>({\n    density: undefined,\n    collapseToList: false,\n});\n\nexport const useTableContext = (): TableContext => useContext(tableContext);\n\nexport interface TableContextProviderProps extends WithChildren {\n    state: TableContext;\n}\n\nexport const TableContextProvider: React.FC<TableContextProviderProps> = ({ state, children }) => (\n    <tableContext.Provider value={state}>{children}</tableContext.Provider>\n);\n"],"names":["tableContext","createContext","density","collapseToList","useTableContext","useContext","TableContextProvider","state","children","jsx","Provider","value"],"mappings":"8FAQA,MAAMA,EAAeC,EAA4B,CAC7CC,aAAS,EACTC,gBAAgB,IAGPC,EAAkB,IAAoBC,EAAWL,GAMjDM,EAA4D,EAAGC,MAAAA,EAAOC,SAAAA,KAC9EC,EAAAT,EAAaU,SAAb,CAAsBC,MAAOJ,EAAQC,SAAAA"}
+{"version":3,"file":"tableContext.js","sources":["../../../../src/components/table/tableContext.tsx"],"sourcesContent":["import React, { createContext, useContext } from \"react\";\nimport { Density, WithChildren } from \"../../core/types.js\";\n\ntype TableContext = {\n    density?: Density;\n    collapseToList: boolean;\n};\n\nconst tableContext = createContext<TableContext>({\n    density: undefined,\n    collapseToList: false,\n});\n\nexport const useTableContext = (): TableContext => useContext(tableContext);\n\nexport interface TableContextProviderProps extends WithChildren {\n    state: TableContext;\n}\n\nexport const TableContextProvider: React.FC<TableContextProviderProps> = ({ state, children }) => (\n    <tableContext.Provider value={state}>{children}</tableContext.Provider>\n);\n"],"names":["tableContext","createContext","density","collapseToList","useTableContext","useContext","TableContextProvider","state","children","jsx","Provider","value"],"mappings":"8FAQA,MAAMA,EAAeC,EAA4B,CAC7CC,aAAS,EACTC,gBAAgB,IAGPC,EAAkB,IAAoBC,EAAWL,GAMjDM,EAA4D,EAAGC,MAAAA,EAAOC,SAAAA,KAC9EC,EAAAT,EAAaU,SAAb,CAAsBC,MAAOJ,EAAQC,SAAAA"}

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

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+import { WithChildren } from '../../core/types.js';
+type TableSectionContext = {
+    isTableHead: boolean;
+    isTableBody: boolean;
+    isTableFooter: boolean;
+};
+export declare const useTableSectionContext: () => TableSectionContext;
+export interface TableSectionContextProviderProps extends WithChildren {
+    state: TableSectionContext;
+}
+export declare const TableSectionContextProvider: React.FC<TableSectionContextProviderProps>;
+export {};

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

@@ -1 +1 @@
-{"version":3,"file":"tableSectionContext.js","sources":["../../../../src/components/table/tableSectionContext.tsx"],"sourcesContent":["import React, { createContext, useContext } from \"react\";\nimport { WithChildren } from \"../..\";\n\ntype TableSectionContext = {\n    isTableHead: boolean;\n    isTableBody: boolean;\n    isTableFooter: boolean;\n};\n\nconst tableSectionContext = createContext<TableSectionContext>({\n    isTableHead: false,\n    isTableBody: false,\n    isTableFooter: false,\n});\n\nexport const useTableSectionContext = (): TableSectionContext => useContext(tableSectionContext);\n\nexport interface TableSectionContextProviderProps extends WithChildren {\n    state: TableSectionContext;\n}\n\nexport const TableSectionContextProvider: React.FC<TableSectionContextProviderProps> = ({ state, children }) => (\n    <tableSectionContext.Provider value={state}>{children}</tableSectionContext.Provider>\n);\n"],"names":["tableSectionContext","createContext","isTableHead","isTableBody","isTableFooter","useTableSectionContext","useContext","TableSectionContextProvider","state","children","jsx","Provider","value"],"mappings":"8FASA,MAAMA,EAAsBC,EAAmC,CAC3DC,aAAa,EACbC,aAAa,EACbC,eAAe,IAGNC,EAAyB,IAA2BC,EAAWN,GAM/DO,EAA0E,EAAGC,MAAAA,EAAOC,SAAAA,KAC5FC,EAAAV,EAAoBW,SAApB,CAA6BC,MAAOJ,EAAQC,SAAAA"}
+{"version":3,"file":"tableSectionContext.js","sources":["../../../../src/components/table/tableSectionContext.tsx"],"sourcesContent":["import React, { createContext, useContext } from \"react\";\nimport { WithChildren } from \"../../core/types.js\";\n\ntype TableSectionContext = {\n    isTableHead: boolean;\n    isTableBody: boolean;\n    isTableFooter: boolean;\n};\n\nconst tableSectionContext = createContext<TableSectionContext>({\n    isTableHead: false,\n    isTableBody: false,\n    isTableFooter: false,\n});\n\nexport const useTableSectionContext = (): TableSectionContext => useContext(tableSectionContext);\n\nexport interface TableSectionContextProviderProps extends WithChildren {\n    state: TableSectionContext;\n}\n\nexport const TableSectionContextProvider: React.FC<TableSectionContextProviderProps> = ({ state, children }) => (\n    <tableSectionContext.Provider value={state}>{children}</tableSectionContext.Provider>\n);\n"],"names":["tableSectionContext","createContext","isTableHead","isTableBody","isTableFooter","useTableSectionContext","useContext","TableSectionContextProvider","state","children","jsx","Provider","value"],"mappings":"8FASA,MAAMA,EAAsBC,EAAmC,CAC3DC,aAAa,EACbC,aAAa,EACbC,eAAe,IAGNC,EAAyB,IAA2BC,EAAWN,GAM/DO,EAA0E,EAAGC,MAAAA,EAAOC,SAAAA,KAC5FC,EAAAV,EAAoBW,SAApB,CAA6BC,MAAOJ,EAAQC,SAAAA"}

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

@@ -0,0 +1,10 @@
+import { TableSortDirection } from './TableHeader.js';
+export type TableSortProps = ReturnType<ReturnType<typeof useSortableTableHeader>["getSortProps"]>["sortable"];
+export declare const useSortableTableHeader: (activeSortKey: string, activeSortDirection: TableSortDirection, onChange: (newSortKey: string, newSortDirection: TableSortDirection) => void) => {
+    getSortProps: (sortKey: string) => {
+        sortable: {
+            onClick: () => void;
+            direction: TableSortDirection | undefined;
+        };
+    };
+};

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

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../../src/components/table/utils.ts"],"sourcesContent":["import { TableSortDirection } from \"./TableHeader\";\n\nexport type TableSortProps = ReturnType<ReturnType<typeof useSortableTableHeader>[\"getSortProps\"]>[\"sortable\"];\n\nexport const useSortableTableHeader = (\n    activeSortKey: string,\n    activeSortDirection: TableSortDirection,\n    onChange: (newSortKey: string, newSortDirection: TableSortDirection) => void,\n) => {\n    const calculateNewSortParameters = (sortKey: string): TableSortDirection => {\n        if (sortKey === activeSortKey && activeSortDirection === \"desc\") {\n            return \"asc\";\n        }\n\n        return \"desc\";\n    };\n\n    const handleClick = (sortKey: string) => {\n        const newSortParameters = calculateNewSortParameters(sortKey);\n        onChange(sortKey, newSortParameters);\n    };\n\n    const getSortProps = (sortKey: string) => {\n        return {\n            sortable: {\n                onClick: () => handleClick(sortKey),\n                direction: activeSortKey === sortKey ? activeSortDirection : undefined,\n            },\n        };\n    };\n\n    return {\n        getSortProps,\n    };\n};\n"],"names":["useSortableTableHeader","activeSortKey","activeSortDirection","onChange","calculateNewSortParameters","handleClick","sortKey","newSortParameters","getSortProps","sortable","onClick","direction"],"mappings":"AAIO,MAAMA,EAAyB,CAClCC,EACAC,EACAC,KAEMC,MAQAC,EAAeC,IACXC,MAAAA,EATyB,CAACD,GAC5BA,IAAYL,GAAyC,SAAxBC,EACtB,MAGJ,OAImBE,CAA2BE,GACrDH,EAASG,EAASC,EAAiB,EAYhC,MAAA,CACHC,aAVkBF,IACX,CACHG,SAAU,CACNC,QAAS,IAAML,EAAYC,GAC3BK,UAAWV,IAAkBK,EAAUJ,OAAsB,KAMrE"}
+{"version":3,"file":"utils.js","sources":["../../../../src/components/table/utils.ts"],"sourcesContent":["import { TableSortDirection } from \"./TableHeader.js\";\n\nexport type TableSortProps = ReturnType<ReturnType<typeof useSortableTableHeader>[\"getSortProps\"]>[\"sortable\"];\n\nexport const useSortableTableHeader = (\n    activeSortKey: string,\n    activeSortDirection: TableSortDirection,\n    onChange: (newSortKey: string, newSortDirection: TableSortDirection) => void,\n) => {\n    const calculateNewSortParameters = (sortKey: string): TableSortDirection => {\n        if (sortKey === activeSortKey && activeSortDirection === \"desc\") {\n            return \"asc\";\n        }\n\n        return \"desc\";\n    };\n\n    const handleClick = (sortKey: string) => {\n        const newSortParameters = calculateNewSortParameters(sortKey);\n        onChange(sortKey, newSortParameters);\n    };\n\n    const getSortProps = (sortKey: string) => {\n        return {\n            sortable: {\n                onClick: () => handleClick(sortKey),\n                direction: activeSortKey === sortKey ? activeSortDirection : undefined,\n            },\n        };\n    };\n\n    return {\n        getSortProps,\n    };\n};\n"],"names":["useSortableTableHeader","activeSortKey","activeSortDirection","onChange","calculateNewSortParameters","handleClick","sortKey","newSortParameters","getSortProps","sortable","onClick","direction"],"mappings":"AAIO,MAAMA,EAAyB,CAClCC,EACAC,EACAC,KAEMC,MAQAC,EAAeC,IACXC,MAAAA,EATyB,CAACD,GAC5BA,IAAYL,GAAyC,SAAxBC,EACtB,MAGJ,OAImBE,CAA2BE,GACrDH,EAASG,EAASC,EAAiB,EAYhC,MAAA,CACHC,aAVkBF,IACX,CACHG,SAAU,CACNC,QAAS,IAAML,EAAYC,GAC3BK,UAAWV,IAAkBK,EAAUJ,OAAsB,KAMrE"}

package/build/es/components/tabs/NavTabs.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { Density, WithChildren } from '../../core/types.js';
+export interface NavTabsProps extends WithChildren {
+    "aria-label"?: string;
+    className?: string;
+    density?: Density;
+    id?: string;
+}
+export declare const NavTabs: ({ "aria-label": ariaLabel, children, className, density, ...rest }: NavTabsProps) => React.JSX.Element;

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 { Density, WithChildren } from \"../..\";\n\nexport interface NavTabsProps extends WithChildren {\n    \"aria-label\"?: string;\n    className?: string;\n    density?: Density;\n    id?: string;\n}\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((navTab) => {\n        if (!React.isValidElement(navTab)) {\n            return false;\n        }\n        return navTab.props[\"aria-selected\"] === true;\n    });\n\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 {...rest} data-layout-density={density} className={clsx(\"jkl-tabs\", className)} ref={scrollRef}>\n            <div role=\"tablist\" aria-label={ariaLabel} ref={tablistRef} className=\"jkl-tablist\">\n                {React.Children.map(children, (child, index) => {\n                    return React.isValidElement(child)\n                        ? React.cloneElement<any>(child, {\n                              ref: selectedIndex === index ? activeRef : undefined,\n                          })\n                        : null;\n                })}\n                <span\n                    className=\"jkl-tablist__indicator\"\n                    style={{\n                        left: (activeRect?.left || 0) - (tabsRect?.left || 0) + (scrollRef.current?.scrollLeft || 0),\n                        bottom: -1,\n                        width: (activeRect?.width || 0) - (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":"+JAWO,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,WAAWC,KACzDJ,EAAMK,eAAeD,KAGe,IAAlCA,EAAOE,MAAM,mBAGxB,OAAAC,GAAU,KACFV,EAAWW,SACCjB,EAAAM,EAAWW,QAAQC,yBAE/BX,EAAUU,SACId,EAAAI,EAAUU,QAAQC,wBAAuB,GAE5D,CAACV,EAAeX,IAGfsB,EAAC,UAAQrB,EAAM,sBAAqBD,EAASD,UAAWwB,EAAK,WAAYxB,GAAYyB,IAAKjB,EACtFT,SAAA2B,EAAC,OAAIC,KAAK,UAAU,aAAY7B,EAAW2B,IAAKf,EAAYV,UAAU,cACjED,SAAA,CAAAc,EAAMC,SAASc,IAAI7B,GAAU,CAAC8B,EAAOC,IAC3BjB,EAAMK,eAAeW,GACtBhB,EAAMkB,aAAkBF,EAAO,CAC3BJ,IAAKb,IAAkBkB,EAAQnB,OAAY,IAE/C,OAEVY,EAAC,OAAA,CACGvB,UAAU,yBACVgC,MAAO,CACHC,OAAO,MAAA3B,OAAA,EAAAA,EAAY2B,OAAQ,KAAM,MAAA9B,OAAA,EAAAA,EAAU8B,OAAQ,KAAM,OAAAC,EAAA1B,EAAUa,cAAV,EAAAa,EAAmBC,aAAc,GAC1FC,QAAQ,EACRC,QAAQ,MAAA/B,OAAAA,EAAAA,EAAY+B,QAAS,IAAkB,YAAZpC,EAAwB,GAAK,WAIhF"}
+{"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 { Density, WithChildren } from \"../../core/types.js\";\n\nexport interface NavTabsProps extends WithChildren {\n    \"aria-label\"?: string;\n    className?: string;\n    density?: Density;\n    id?: string;\n}\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((navTab) => {\n        if (!React.isValidElement(navTab)) {\n            return false;\n        }\n        return navTab.props[\"aria-selected\"] === true;\n    });\n\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 {...rest} data-layout-density={density} className={clsx(\"jkl-tabs\", className)} ref={scrollRef}>\n            <div role=\"tablist\" aria-label={ariaLabel} ref={tablistRef} className=\"jkl-tablist\">\n                {React.Children.map(children, (child, index) => {\n                    return React.isValidElement(child)\n                        ? React.cloneElement<any>(child, {\n                              ref: selectedIndex === index ? activeRef : undefined,\n                          })\n                        : null;\n                })}\n                <span\n                    className=\"jkl-tablist__indicator\"\n                    style={{\n                        left: (activeRect?.left || 0) - (tabsRect?.left || 0) + (scrollRef.current?.scrollLeft || 0),\n                        bottom: -1,\n                        width: (activeRect?.width || 0) - (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":"+JAWO,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,WAAWC,KACzDJ,EAAMK,eAAeD,KAGe,IAAlCA,EAAOE,MAAM,mBAGxB,OAAAC,GAAU,KACFV,EAAWW,SACCjB,EAAAM,EAAWW,QAAQC,yBAE/BX,EAAUU,SACId,EAAAI,EAAUU,QAAQC,wBAAuB,GAE5D,CAACV,EAAeX,IAGfsB,EAAC,UAAQrB,EAAM,sBAAqBD,EAASD,UAAWwB,EAAK,WAAYxB,GAAYyB,IAAKjB,EACtFT,SAAA2B,EAAC,OAAIC,KAAK,UAAU,aAAY7B,EAAW2B,IAAKf,EAAYV,UAAU,cACjED,SAAA,CAAAc,EAAMC,SAASc,IAAI7B,GAAU,CAAC8B,EAAOC,IAC3BjB,EAAMK,eAAeW,GACtBhB,EAAMkB,aAAkBF,EAAO,CAC3BJ,IAAKb,IAAkBkB,EAAQnB,OAAY,IAE/C,OAEVY,EAAC,OAAA,CACGvB,UAAU,yBACVgC,MAAO,CACHC,OAAO,MAAA3B,OAAA,EAAAA,EAAY2B,OAAQ,KAAM,MAAA9B,OAAA,EAAAA,EAAU8B,OAAQ,KAAM,OAAAC,EAAA1B,EAAUa,cAAV,EAAAa,EAAmBC,aAAc,GAC1FC,QAAQ,EACRC,QAAQ,MAAA/B,OAAAA,EAAAA,EAAY+B,QAAS,IAAkB,YAAZpC,EAAwB,GAAK,WAIhF"}

package/build/es/components/tabs/Tab.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { WithChildren } from '../../core/types.js';
+export interface TabProps extends WithChildren {
+    className?: string;
+}
+/**
+ * En Tab til bruk som element i TabList. Ikke funksjonell utenfor et TabList element.
+ *
+ * Docs: https://jokul.fremtind.no/komponenter/tabs
+ */
+export declare const Tab: React.ForwardRefExoticComponent<TabProps & React.RefAttributes<HTMLButtonElement>>;

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

@@ -1 +1 @@
-{"version":3,"file":"Tab.js","sources":["../../../../src/components/tabs/Tab.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\nimport { WithChildren } from \"../..\";\n\nexport interface TabProps extends WithChildren {\n    className?: string;\n}\n\n/**\n * En Tab til bruk som element i TabList. Ikke funksjonell utenfor et TabList element.\n *\n * Docs: https://jokul.fremtind.no/komponenter/tabs\n */\nexport const Tab = React.forwardRef<HTMLButtonElement, TabProps>((props, ref) => {\n    const classes = clsx(\"jkl-tab\", props.className);\n\n    return <button role=\"tab\" type=\"button\" ref={ref} {...props} className={classes} />;\n});\n\nTab.displayName = \"Tab\";\n"],"names":["Tab","React","forwardRef","props","ref","classes","clsx","className","jsx","role","type","displayName"],"mappings":"2GAaO,MAAMA,EAAMC,EAAMC,YAAwC,CAACC,EAAOC,KACrE,MAAMC,EAAUC,EAAK,UAAWH,EAAMI,WAE/B,OAAAC,EAAC,SAAO,CAAAC,KAAK,MAAMC,KAAK,SAASN,IAAAA,KAAcD,EAAOI,UAAWF,GAAS,IAGrFL,EAAIW,YAAc"}
+{"version":3,"file":"Tab.js","sources":["../../../../src/components/tabs/Tab.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\nimport { WithChildren } from \"../../core/types.js\";\n\nexport interface TabProps extends WithChildren {\n    className?: string;\n}\n\n/**\n * En Tab til bruk som element i TabList. Ikke funksjonell utenfor et TabList element.\n *\n * Docs: https://jokul.fremtind.no/komponenter/tabs\n */\nexport const Tab = React.forwardRef<HTMLButtonElement, TabProps>((props, ref) => {\n    const classes = clsx(\"jkl-tab\", props.className);\n\n    return <button role=\"tab\" type=\"button\" ref={ref} {...props} className={classes} />;\n});\n\nTab.displayName = \"Tab\";\n"],"names":["Tab","React","forwardRef","props","ref","classes","clsx","className","jsx","role","type","displayName"],"mappings":"2GAaO,MAAMA,EAAMC,EAAMC,YAAwC,CAACC,EAAOC,KACrE,MAAMC,EAAUC,EAAK,UAAWH,EAAMI,WAE/B,OAAAC,EAAC,SAAO,CAAAC,KAAK,MAAMC,KAAK,SAASN,IAAAA,KAAcD,EAAOI,UAAWF,GAAS,IAGrFL,EAAIW,YAAc"}

package/build/es/components/tabs/TabList.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+import { WithChildren } from '../../core/types.js';
+export interface TabListProps extends WithChildren {
+    "aria-label"?: string;
+    className?: string;
+}
+export interface InjectedProps {
+    activeIndex: number;
+    setActiveIndex: React.Dispatch<React.SetStateAction<number>>;
+    tabIDs: string[];
+    tabPanelIDs: string[];
+}
+/**
+ * Konteiner for elementer av typen Tab. Ikke funksjonell utenfor et Tabs element.
+ *
+ * Docs: https://jokul.fremtind.no/komponenter/tabs
+ */
+export declare const TabList: ({ children, className, ...injected }: TabListProps) => React.JSX.Element;

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, useEffect, useRef, useState } from \"react\";\nimport { WithChildren } from \"../..\";\nimport { useTabsContext } from \"./tabsContext\";\n\nexport interface TabListProps extends WithChildren {\n    \"aria-label\"?: string;\n    className?: string;\n}\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 } = injected as TabListProps & InjectedProps;\n    const { density } = useTabsContext();\n\n    const [tabsRect, setTabsRect] = useState<DOMRect>();\n    const [activeRect, setActiveRect] = useState<DOMRect>();\n\n    const tabsRef = useRef<HTMLDivElement>(null);\n    const activeRef = useRef<HTMLButtonElement>(null);\n\n    useEffect(() => {\n        if (tabsRef.current) {\n            setTabsRect(tabsRef.current.getBoundingClientRect());\n        }\n        if (activeRef.current) {\n            setActiveRect(activeRef.current.getBoundingClientRect());\n        }\n    }, [activeIndex, density]);\n\n    const keyDownHandler = useCallback((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                (current.parentElement?.lastChild?.previousSibling as HTMLElement).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    return (\n        <div role=\"tablist\" ref={tabsRef} {...rest} className={clsx(\"jkl-tablist\", className)}>\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\n            <span\n                className=\"jkl-tablist__indicator\"\n                style={{\n                    left: (activeRect?.left || 0) - (tabsRect?.left || 0),\n                    bottom: -1,\n                    width: (activeRect?.width || 0) - (density === \"compact\" ? 32 : 38),\n                }}\n            />\n        </div>\n    );\n};\n"],"names":["TabList","children","className","injected","activeIndex","setActiveIndex","tabIDs","tabPanelIDs","rest","density","useTabsContext","tabsRect","setTabsRect","useState","activeRect","setActiveRect","tabsRef","useRef","activeRef","useEffect","current","getBoundingClientRect","keyDownHandler","useCallback","event","key","currentTarget","prev","previousSibling","focus","_b","_a","parentElement","lastChild","next","nextSibling","nodeName","_c","firstChild","jsxs","role","ref","clsx","React","Children","map","tab","tabIndex","isActive","isValidElement","cloneElement","onKeyDown","onClick","id","jsx","style","left","bottom","width"],"mappings":"kOAsBO,MAAMA,EAAU,EAAGC,SAAAA,EAAUC,UAAAA,KAAcC,MAE9C,MAAQC,YAAAA,EAAaC,eAAAA,EAAgBC,OAAAA,EAAQC,YAAAA,KAAgBC,GAASL,GAC9DM,QAAAA,GAAYC,KAEbC,EAAUC,GAAeC,KACzBC,EAAYC,GAAiBF,IAE9BG,EAAUC,EAAuB,MACjCC,EAAYD,EAA0B,MAE5CE,GAAU,KACFH,EAAQI,SACIR,EAAAI,EAAQI,QAAQC,yBAE5BH,EAAUE,SACIL,EAAAG,EAAUE,QAAQC,wBAAuB,GAE5D,CAACjB,EAAaK,IAEXa,MAAAA,EAAiBC,GAAaC,cAC5BA,GAAc,cAAdA,EAAMC,IAAqB,CAC3B,MAAML,EAAUI,EAAME,cAChBC,EAAOH,EAAME,cAAcE,gBAE7BD,EACCA,EAAqBE,SAErB,OAAAC,EAAA,OAAAC,EAAAX,EAAQY,oBAAR,EAAAD,EAAuBE,gBAAvBH,EAAAA,EAAkCF,iBAAgCC,OAE3E,CAEIL,GAAc,eAAdA,EAAMC,IAAsB,CAC5B,MAAML,EAAUI,EAAME,cAChBQ,EAAOV,EAAME,cAAcS,YAG7BD,GAA0B,WAAlBA,EAAKE,SACZF,EAAqBL,SAErB,OAAAQ,EAAAjB,EAAQY,oBAARK,EAAAA,EAAuBC,YAA2BT,OAE3D,IACD,IAEH,OACKU,EAAA,MAAA,CAAIC,KAAK,UAAUC,IAAKzB,KAAaR,EAAMN,UAAWwC,EAAK,cAAexC,GACtED,SAAA,CAAA0C,EAAMC,SAASC,IAAI5C,GAAU,CAAC6C,EAAKC,KAChC,MAAMC,EAAW5C,IAAgB2C,EAEjC,OAAOJ,EAAMM,eAAeH,GACtBH,EAAMO,aAAkBJ,EAAK,CACzBK,UAAW7B,EACXyB,SAAUC,OAAW,GAAY,EACjCP,IAAKO,EAAW9B,OAAY,EAC5BkC,QAAS,IAAM/C,EAAe0C,GAC9B,gBAAiBC,EACjB,gBAAiBzC,EAAYwC,GAC7BM,GAAI/C,EAAOyC,KAEf,IAAA,IAGVO,EAAC,OAAA,CACGpD,UAAU,yBACVqD,MAAO,CACHC,OAAO,MAAA1C,OAAAA,EAAAA,EAAY0C,OAAQ,KAAM,MAAA7C,OAAAA,EAAAA,EAAU6C,OAAQ,GACnDC,QAAQ,EACRC,QAAQ,MAAA5C,OAAAA,EAAAA,EAAY4C,QAAS,IAAkB,YAAZjD,EAAwB,GAAK,SAG5E"}
+{"version":3,"file":"TabList.js","sources":["../../../../src/components/tabs/TabList.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useCallback, useEffect, useRef, useState } from \"react\";\nimport { WithChildren } from \"../../core/types.js\";\nimport { useTabsContext } from \"./tabsContext.js\";\n\nexport interface TabListProps extends WithChildren {\n    \"aria-label\"?: string;\n    className?: string;\n}\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 } = injected as TabListProps & InjectedProps;\n    const { density } = useTabsContext();\n\n    const [tabsRect, setTabsRect] = useState<DOMRect>();\n    const [activeRect, setActiveRect] = useState<DOMRect>();\n\n    const tabsRef = useRef<HTMLDivElement>(null);\n    const activeRef = useRef<HTMLButtonElement>(null);\n\n    useEffect(() => {\n        if (tabsRef.current) {\n            setTabsRect(tabsRef.current.getBoundingClientRect());\n        }\n        if (activeRef.current) {\n            setActiveRect(activeRef.current.getBoundingClientRect());\n        }\n    }, [activeIndex, density]);\n\n    const keyDownHandler = useCallback((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                (current.parentElement?.lastChild?.previousSibling as HTMLElement).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    return (\n        <div role=\"tablist\" ref={tabsRef} {...rest} className={clsx(\"jkl-tablist\", className)}>\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\n            <span\n                className=\"jkl-tablist__indicator\"\n                style={{\n                    left: (activeRect?.left || 0) - (tabsRect?.left || 0),\n                    bottom: -1,\n                    width: (activeRect?.width || 0) - (density === \"compact\" ? 32 : 38),\n                }}\n            />\n        </div>\n    );\n};\n"],"names":["TabList","children","className","injected","activeIndex","setActiveIndex","tabIDs","tabPanelIDs","rest","density","useTabsContext","tabsRect","setTabsRect","useState","activeRect","setActiveRect","tabsRef","useRef","activeRef","useEffect","current","getBoundingClientRect","keyDownHandler","useCallback","event","key","currentTarget","prev","previousSibling","focus","_b","_a","parentElement","lastChild","next","nextSibling","nodeName","_c","firstChild","jsxs","role","ref","clsx","React","Children","map","tab","tabIndex","isActive","isValidElement","cloneElement","onKeyDown","onClick","id","jsx","style","left","bottom","width"],"mappings":"kOAsBO,MAAMA,EAAU,EAAGC,SAAAA,EAAUC,UAAAA,KAAcC,MAE9C,MAAQC,YAAAA,EAAaC,eAAAA,EAAgBC,OAAAA,EAAQC,YAAAA,KAAgBC,GAASL,GAC9DM,QAAAA,GAAYC,KAEbC,EAAUC,GAAeC,KACzBC,EAAYC,GAAiBF,IAE9BG,EAAUC,EAAuB,MACjCC,EAAYD,EAA0B,MAE5CE,GAAU,KACFH,EAAQI,SACIR,EAAAI,EAAQI,QAAQC,yBAE5BH,EAAUE,SACIL,EAAAG,EAAUE,QAAQC,wBAAuB,GAE5D,CAACjB,EAAaK,IAEXa,MAAAA,EAAiBC,GAAaC,cAC5BA,GAAc,cAAdA,EAAMC,IAAqB,CAC3B,MAAML,EAAUI,EAAME,cAChBC,EAAOH,EAAME,cAAcE,gBAE7BD,EACCA,EAAqBE,SAErB,OAAAC,EAAA,OAAAC,EAAAX,EAAQY,oBAAR,EAAAD,EAAuBE,gBAAvBH,EAAAA,EAAkCF,iBAAgCC,OAE3E,CAEIL,GAAc,eAAdA,EAAMC,IAAsB,CAC5B,MAAML,EAAUI,EAAME,cAChBQ,EAAOV,EAAME,cAAcS,YAG7BD,GAA0B,WAAlBA,EAAKE,SACZF,EAAqBL,SAErB,OAAAQ,EAAAjB,EAAQY,oBAARK,EAAAA,EAAuBC,YAA2BT,OAE3D,IACD,IAEH,OACKU,EAAA,MAAA,CAAIC,KAAK,UAAUC,IAAKzB,KAAaR,EAAMN,UAAWwC,EAAK,cAAexC,GACtED,SAAA,CAAA0C,EAAMC,SAASC,IAAI5C,GAAU,CAAC6C,EAAKC,KAChC,MAAMC,EAAW5C,IAAgB2C,EAEjC,OAAOJ,EAAMM,eAAeH,GACtBH,EAAMO,aAAkBJ,EAAK,CACzBK,UAAW7B,EACXyB,SAAUC,OAAW,GAAY,EACjCP,IAAKO,EAAW9B,OAAY,EAC5BkC,QAAS,IAAM/C,EAAe0C,GAC9B,gBAAiBC,EACjB,gBAAiBzC,EAAYwC,GAC7BM,GAAI/C,EAAOyC,KAEf,IAAA,IAGVO,EAAC,OAAA,CACGpD,UAAU,yBACVqD,MAAO,CACHC,OAAO,MAAA1C,OAAAA,EAAAA,EAAY0C,OAAQ,KAAM,MAAA7C,OAAAA,EAAAA,EAAU6C,OAAQ,GACnDC,QAAQ,EACRC,QAAQ,MAAA5C,OAAAA,EAAAA,EAAY4C,QAAS,IAAkB,YAAZjD,EAAwB,GAAK,SAG5E"}

package/build/es/components/tabs/TabPanel.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { WithChildren } from '../../core/types.js';
+export interface TabPanelProps extends WithChildren {
+    className?: string;
+}
+/**
+ * Konteiner for innhold i et tabbet brukergrensesnitt. Ikke funksjonell utenfor et Tabs element.
+ *
+ * Docs: https://jokul.fremtind.no/komponenter/tabs
+ */
+export declare const TabPanel: ({ children, ...props }: TabPanelProps) => React.JSX.Element;

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

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

package/build/es/components/tabs/Tabs.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+import { Density, WithChildren } from '../../core/types.js';
+export interface TabsProps extends WithChildren {
+    className?: string;
+    density?: Density;
+    onChange?: (tabIndex: number) => void;
+    defaultTab?: number;
+}
+/**
+ * Konteiner for et grensesnitt hvor man kan tabbe mellom innhold.
+ * Må inneholde en TabList etterfulgt av en eller flere TabPanel.
+ *
+ * Docs: https://jokul.fremtind.no/komponenter/tabs
+ */
+export declare const Tabs: ({ onChange, defaultTab, density, ...props }: TabsProps) => React.JSX.Element;

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sources":["../../../../../../node_modules/.pnpm/nanoid@3.3.7/node_modules/nanoid/index.browser.js","../../../../src/components/tabs/Tabs.tsx"],"sourcesContent":["import { urlAlphabet } from './url-alphabet/index.js'\nlet random = bytes => crypto.getRandomValues(new Uint8Array(bytes))\nlet customRandom = (alphabet, defaultSize, getRandom) => {\n  let mask = (2 << (Math.log(alphabet.length - 1) / Math.LN2)) - 1\n  let step = -~((1.6 * mask * defaultSize) / alphabet.length)\n  return (size = defaultSize) => {\n    let id = ''\n    while (true) {\n      let bytes = getRandom(step)\n      let j = step\n      while (j--) {\n        id += alphabet[bytes[j] & mask] || ''\n        if (id.length === size) return id\n      }\n    }\n  }\n}\nlet customAlphabet = (alphabet, size = 21) =>\n  customRandom(alphabet, size, random)\nlet nanoid = (size = 21) =>\n  crypto.getRandomValues(new Uint8Array(size)).reduce((id, byte) => {\n    byte &= 63\n    if (byte < 36) {\n      id += byte.toString(36)\n    } else if (byte < 62) {\n      id += (byte - 26).toString(36).toUpperCase()\n    } else if (byte > 62) {\n      id += '-'\n    } else {\n      id += '_'\n    }\n    return id\n  }, '')\nexport { nanoid, customAlphabet, customRandom, urlAlphabet, random }\n","import clsx from \"clsx\";\nimport { nanoid } from \"nanoid\";\nimport React, { useState, useCallback, useEffect } from \"react\";\nimport { Density, WithChildren } from \"../..\";\nimport { usePreviousValue } from \"../../hooks\";\nimport { InjectedProps, TabListProps } from \"./TabList\";\nimport { TabPanelProps } from \"./TabPanel\";\nimport { TabsContextProvider } from \"./tabsContext\";\n\nexport interface TabsProps extends WithChildren {\n    className?: string;\n    density?: Density;\n    onChange?: (tabIndex: number) => void;\n    defaultTab?: number;\n}\n\n/**\n * Konteiner for et grensesnitt hvor man kan tabbe mellom innhold.\n * Må inneholde en TabList etterfulgt av en eller flere TabPanel.\n *\n * Docs: https://jokul.fremtind.no/komponenter/tabs\n */\nexport const Tabs = ({ onChange, defaultTab, density, ...props }: TabsProps) => {\n    const [activeIndex, setActiveIndex] = useState(defaultTab ?? 0);\n\n    const previousTabIndex = usePreviousValue(activeIndex);\n\n    useEffect(() => {\n        if (previousTabIndex !== undefined && previousTabIndex !== activeIndex && onChange) {\n            onChange(activeIndex);\n        }\n    }, [onChange, previousTabIndex, activeIndex]);\n\n    const [tabIDs, setTabIDs] = useState<string[]>([]);\n    const [tabPanelIDs, setTabPanelIds] = useState<string[]>([]);\n\n    const resolveIDs = useCallback(() => {\n        const tabList = React.Children.toArray(props.children)[0];\n\n        if (!React.isValidElement(tabList)) return;\n\n        React.Children.forEach(tabList.props.children, (tab) => {\n            if (!React.isValidElement(tab)) return;\n\n            setTabIDs((prev) => [...prev, `jkl-tab-${nanoid(8)}`]);\n            setTabPanelIds((prev) => [...prev, `jkl-tabpanel-${nanoid(8)}`]);\n        });\n    }, [props.children]);\n\n    const renderTabList = () => {\n        const tabList = React.Children.toArray(props.children)[0];\n\n        if (!React.isValidElement<TabListProps & InjectedProps>(tabList)) return;\n\n        return React.cloneElement<TabListProps & InjectedProps>(tabList, {\n            activeIndex,\n            setActiveIndex,\n            tabIDs,\n            tabPanelIDs,\n        });\n    };\n\n    const renderTabPanels = () => {\n        return React.Children.map(props.children, (child, childIndex) => {\n            if (!React.isValidElement<TabPanelProps & React.HTMLAttributes<HTMLDivElement>>(child) || childIndex === 0)\n                return;\n\n            const tabPanelIndex = childIndex - 1;\n\n            return tabPanelIndex === activeIndex\n                ? React.cloneElement<TabPanelProps & React.HTMLAttributes<HTMLDivElement>>(child, {\n                      \"aria-labelledby\": tabIDs[tabPanelIndex],\n                      id: tabPanelIDs[tabPanelIndex],\n                  })\n                : null;\n        });\n    };\n\n    useEffect(() => {\n        resolveIDs();\n    }, [resolveIDs]);\n\n    return (\n        <TabsContextProvider state={{ density }}>\n            <div {...props} className={clsx(\"jkl-tabs\", props.className)} data-density={density}>\n                {renderTabList()}\n                {renderTabPanels()}\n            </div>\n        </TabsContextProvider>\n    );\n};\n"],"names":["nanoid","size","crypto","getRandomValues","Uint8Array","reduce","id","byte","toString","toUpperCase","Tabs","onChange","defaultTab","density","props","activeIndex","setActiveIndex","useState","previousTabIndex","usePreviousValue","useEffect","tabIDs","setTabIDs","tabPanelIDs","setTabPanelIds","resolveIDs","useCallback","tabList","React","Children","toArray","children","isValidElement","forEach","tab","prev","TabsContextProvider","state","jsxs","className","clsx","cloneElement","renderTabList","map","child","childIndex","tabPanelIndex"],"mappings":"6XAmBA,IAAIA,EAAS,CAACC,EAAO,KACnBC,OAAOC,gBAAgB,IAAIC,WAAWH,IAAOI,QAAO,CAACC,EAAIC,IAGrDD,IAFFC,GAAQ,IACG,GACHA,EAAKC,SAAS,IACXD,EAAO,IACTA,EAAO,IAAIC,SAAS,IAAIC,cACtBF,EAAO,GACV,IAEA,KAGP,ICVQ,MAAAG,EAAO,EAAGC,SAAAA,EAAUC,WAAAA,EAAYC,QAAAA,KAAYC,MAC/C,MAACC,EAAaC,GAAkBC,EAASL,GAAc,GAEvDM,EAAmBC,EAAiBJ,GAE1CK,GAAU,UACmB,IAArBF,GAAkCA,IAAqBH,GAAeJ,GACtEA,EAASI,EAAW,GAEzB,CAACJ,EAAUO,EAAkBH,IAEhC,MAAOM,EAAQC,GAAaL,EAAmB,KACxCM,EAAaC,GAAkBP,EAAmB,IAEnDQ,EAAaC,GAAY,KAC3B,MAAMC,EAAUC,EAAMC,SAASC,QAAQhB,EAAMiB,UAAU,GAElDH,EAAMI,eAAeL,IAE1BC,EAAMC,SAASI,QAAQN,EAAQb,MAAMiB,UAAWG,IACvCN,EAAMI,eAAeE,KAEhBZ,GAACa,GAAS,IAAIA,EAAM,WAAWnC,EAAO,QACjCwB,GAACW,GAAS,IAAIA,EAAM,gBAAgBnC,EAAO,QAAK,GAClE,GACF,CAACc,EAAMiB,WA+BV,OAAAX,GAAU,KACKK,MACZ,CAACA,MAGCW,EAAoB,CAAAC,MAAO,CAAExB,QAAAA,GAC1BkB,SAACO,EAAA,MAAA,IAAQxB,EAAOyB,UAAWC,EAAK,WAAY1B,EAAMyB,WAAY,eAAc1B,EACvEkB,SAAA,CApCS,MAClB,MAAMJ,EAAUC,EAAMC,SAASC,QAAQhB,EAAMiB,UAAU,GAElDH,GAAAA,EAAMI,eAA6CL,GAEjDC,OAAAA,EAAMa,aAA2Cd,EAAS,CAC7DZ,YAAAA,EACAC,eAAAA,EACAK,OAAAA,EACAE,YAAAA,GACH,EA0BsBmB,GAtBhBd,EAAMC,SAASc,IAAI7B,EAAMiB,UAAU,CAACa,EAAOC,KAC9C,IAAKjB,EAAMI,eAAqEY,IAAyB,IAAfC,EACtF,OAEJ,MAAMC,EAAgBD,EAAa,EAEnC,OAAOC,IAAkB/B,EACnBa,EAAMa,aAAmEG,EAAO,CAC5E,kBAAmBvB,EAAOyB,GAC1BxC,GAAIiB,EAAYuB,KAEpB,IAAA,QAcV","x_google_ignoreList":[0]}
+{"version":3,"file":"Tabs.js","sources":["../../../../../../node_modules/.pnpm/nanoid@3.3.7/node_modules/nanoid/index.browser.js","../../../../src/components/tabs/Tabs.tsx"],"sourcesContent":["import { urlAlphabet } from './url-alphabet/index.js'\nlet random = bytes => crypto.getRandomValues(new Uint8Array(bytes))\nlet customRandom = (alphabet, defaultSize, getRandom) => {\n  let mask = (2 << (Math.log(alphabet.length - 1) / Math.LN2)) - 1\n  let step = -~((1.6 * mask * defaultSize) / alphabet.length)\n  return (size = defaultSize) => {\n    let id = ''\n    while (true) {\n      let bytes = getRandom(step)\n      let j = step\n      while (j--) {\n        id += alphabet[bytes[j] & mask] || ''\n        if (id.length === size) return id\n      }\n    }\n  }\n}\nlet customAlphabet = (alphabet, size = 21) =>\n  customRandom(alphabet, size, random)\nlet nanoid = (size = 21) =>\n  crypto.getRandomValues(new Uint8Array(size)).reduce((id, byte) => {\n    byte &= 63\n    if (byte < 36) {\n      id += byte.toString(36)\n    } else if (byte < 62) {\n      id += (byte - 26).toString(36).toUpperCase()\n    } else if (byte > 62) {\n      id += '-'\n    } else {\n      id += '_'\n    }\n    return id\n  }, '')\nexport { nanoid, customAlphabet, customRandom, urlAlphabet, random }\n","import clsx from \"clsx\";\nimport { nanoid } from \"nanoid\";\nimport React, { useState, useCallback, useEffect } from \"react\";\nimport { Density, WithChildren } from \"../../core/types.js\";\nimport { usePreviousValue } from \"../../hooks/usePreviousValue/usePreviousValue.js\";\nimport { InjectedProps, TabListProps } from \"./TabList.js\";\nimport { TabPanelProps } from \"./TabPanel.js\";\nimport { TabsContextProvider } from \"./tabsContext.js\";\n\nexport interface TabsProps extends WithChildren {\n    className?: string;\n    density?: Density;\n    onChange?: (tabIndex: number) => void;\n    defaultTab?: number;\n}\n\n/**\n * Konteiner for et grensesnitt hvor man kan tabbe mellom innhold.\n * Må inneholde en TabList etterfulgt av en eller flere TabPanel.\n *\n * Docs: https://jokul.fremtind.no/komponenter/tabs\n */\nexport const Tabs = ({ onChange, defaultTab, density, ...props }: TabsProps) => {\n    const [activeIndex, setActiveIndex] = useState(defaultTab ?? 0);\n\n    const previousTabIndex = usePreviousValue(activeIndex);\n\n    useEffect(() => {\n        if (previousTabIndex !== undefined && previousTabIndex !== activeIndex && onChange) {\n            onChange(activeIndex);\n        }\n    }, [onChange, previousTabIndex, activeIndex]);\n\n    const [tabIDs, setTabIDs] = useState<string[]>([]);\n    const [tabPanelIDs, setTabPanelIds] = useState<string[]>([]);\n\n    const resolveIDs = useCallback(() => {\n        const tabList = React.Children.toArray(props.children)[0];\n\n        if (!React.isValidElement(tabList)) return;\n\n        React.Children.forEach(tabList.props.children, (tab) => {\n            if (!React.isValidElement(tab)) return;\n\n            setTabIDs((prev) => [...prev, `jkl-tab-${nanoid(8)}`]);\n            setTabPanelIds((prev) => [...prev, `jkl-tabpanel-${nanoid(8)}`]);\n        });\n    }, [props.children]);\n\n    const renderTabList = () => {\n        const tabList = React.Children.toArray(props.children)[0];\n\n        if (!React.isValidElement<TabListProps & InjectedProps>(tabList)) return;\n\n        return React.cloneElement<TabListProps & InjectedProps>(tabList, {\n            activeIndex,\n            setActiveIndex,\n            tabIDs,\n            tabPanelIDs,\n        });\n    };\n\n    const renderTabPanels = () => {\n        return React.Children.map(props.children, (child, childIndex) => {\n            if (!React.isValidElement<TabPanelProps & React.HTMLAttributes<HTMLDivElement>>(child) || childIndex === 0)\n                return;\n\n            const tabPanelIndex = childIndex - 1;\n\n            return tabPanelIndex === activeIndex\n                ? React.cloneElement<TabPanelProps & React.HTMLAttributes<HTMLDivElement>>(child, {\n                      \"aria-labelledby\": tabIDs[tabPanelIndex],\n                      id: tabPanelIDs[tabPanelIndex],\n                  })\n                : null;\n        });\n    };\n\n    useEffect(() => {\n        resolveIDs();\n    }, [resolveIDs]);\n\n    return (\n        <TabsContextProvider state={{ density }}>\n            <div {...props} className={clsx(\"jkl-tabs\", props.className)} data-density={density}>\n                {renderTabList()}\n                {renderTabPanels()}\n            </div>\n        </TabsContextProvider>\n    );\n};\n"],"names":["nanoid","size","crypto","getRandomValues","Uint8Array","reduce","id","byte","toString","toUpperCase","Tabs","onChange","defaultTab","density","props","activeIndex","setActiveIndex","useState","previousTabIndex","usePreviousValue","useEffect","tabIDs","setTabIDs","tabPanelIDs","setTabPanelIds","resolveIDs","useCallback","tabList","React","Children","toArray","children","isValidElement","forEach","tab","prev","TabsContextProvider","state","jsxs","className","clsx","cloneElement","renderTabList","map","child","childIndex","tabPanelIndex"],"mappings":"+SAmBA,IAAIA,EAAS,CAACC,EAAO,KACnBC,OAAOC,gBAAgB,IAAIC,WAAWH,IAAOI,QAAO,CAACC,EAAIC,IAGrDD,IAFFC,GAAQ,IACG,GACHA,EAAKC,SAAS,IACXD,EAAO,IACTA,EAAO,IAAIC,SAAS,IAAIC,cACtBF,EAAO,GACV,IAEA,KAGP,ICVQ,MAAAG,EAAO,EAAGC,SAAAA,EAAUC,WAAAA,EAAYC,QAAAA,KAAYC,MAC/C,MAACC,EAAaC,GAAkBC,EAASL,GAAc,GAEvDM,EAAmBC,EAAiBJ,GAE1CK,GAAU,UACmB,IAArBF,GAAkCA,IAAqBH,GAAeJ,GACtEA,EAASI,EAAW,GAEzB,CAACJ,EAAUO,EAAkBH,IAEhC,MAAOM,EAAQC,GAAaL,EAAmB,KACxCM,EAAaC,GAAkBP,EAAmB,IAEnDQ,EAAaC,GAAY,KAC3B,MAAMC,EAAUC,EAAMC,SAASC,QAAQhB,EAAMiB,UAAU,GAElDH,EAAMI,eAAeL,IAE1BC,EAAMC,SAASI,QAAQN,EAAQb,MAAMiB,UAAWG,IACvCN,EAAMI,eAAeE,KAEhBZ,GAACa,GAAS,IAAIA,EAAM,WAAWnC,EAAO,QACjCwB,GAACW,GAAS,IAAIA,EAAM,gBAAgBnC,EAAO,QAAK,GAClE,GACF,CAACc,EAAMiB,WA+BV,OAAAX,GAAU,KACKK,MACZ,CAACA,MAGCW,EAAoB,CAAAC,MAAO,CAAExB,QAAAA,GAC1BkB,SAACO,EAAA,MAAA,IAAQxB,EAAOyB,UAAWC,EAAK,WAAY1B,EAAMyB,WAAY,eAAc1B,EACvEkB,SAAA,CApCS,MAClB,MAAMJ,EAAUC,EAAMC,SAASC,QAAQhB,EAAMiB,UAAU,GAElDH,GAAAA,EAAMI,eAA6CL,GAEjDC,OAAAA,EAAMa,aAA2Cd,EAAS,CAC7DZ,YAAAA,EACAC,eAAAA,EACAK,OAAAA,EACAE,YAAAA,GACH,EA0BsBmB,GAtBhBd,EAAMC,SAASc,IAAI7B,EAAMiB,UAAU,CAACa,EAAOC,KAC9C,IAAKjB,EAAMI,eAAqEY,IAAyB,IAAfC,EACtF,OAEJ,MAAMC,EAAgBD,EAAa,EAEnC,OAAOC,IAAkB/B,EACnBa,EAAMa,aAAmEG,EAAO,CAC5E,kBAAmBvB,EAAOyB,GAC1BxC,GAAIiB,EAAYuB,KAEpB,IAAA,QAcV","x_google_ignoreList":[0]}

package/build/es/components/tabs/index.d.ts

@@ -0,0 +1,6 @@
+export * from './NavTab.js';
+export * from './NavTabs.js';
+export * from './Tabs.js';
+export * from './TabList.js';
+export * from './Tab.js';
+export * from './TabPanel.js';