@fremtind/jokul 0.44.7 → 0.45.0

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

@@ -15,20 +15,5 @@ export { TableRow } from './TableRow.cjs';
 export { ExpandableTableRow } from './ExpandableTableRow.cjs';
 export { ExpandableTableRowController } from './ExpandableTableRowController.cjs';
 export { useSortableTableHeader } from './utils.cjs';
-export type { DataTableProps } from './DataTable.cjs';
-export type { TableProps } from './Table.cjs';
-export type { TableBodyProps } from './TableBody.cjs';
-export type { TableCaptionProps } from './TableCaption.cjs';
-export type { TableCellProps } from './TableCell.cjs';
-export type { TableColumnProps } from './TableColumn.cjs';
-export type { TableColumnGroupProps } from './TableColumnGroup.cjs';
-export type { TableContextProviderProps } from './tableContext.cjs';
-export type { TableSectionContextProviderProps } from './tableSectionContext.cjs';
-export type { TableFooterProps } from './TableFooter.cjs';
-export type { TableHeadProps } from './TableHead.cjs';
-export type { TableHeaderProps, TableSortDirection } from './TableHeader.cjs';
-export type { TablePaginationProps } from './TablePagination.cjs';
-export type { TableRowProps } from './TableRow.cjs';
-export type { ExpandableTableRowProps } from './ExpandableTableRow.cjs';
-export type { ExpandableTableRowControllerProps } from './ExpandableTableRowController.cjs';
+export type { DataTableProps, TableProps, TableBodyProps, TableCaptionProps, TableCellProps, TableColumnProps, TableColumnGroupProps, TableContextProviderProps, TableSectionContextProviderProps, TableFooterProps, TableHeadProps, TableHeaderProps, TablePaginationProps, TableRowProps, ExpandableTableRowProps, ExpandableTableRowControllerProps, } from './types.cjs';
 export type { TableSortProps } from './utils.cjs';

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

@@ -1 +1 @@
-{"version":3,"file":"tableContext.cjs","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    setHasStickyHead: (hasStcikyHead: boolean) => void;\n};\n\nconst tableContext = createContext<TableContext>({\n    density: undefined,\n    collapseToList: false,\n    setHasStickyHead: () => {},\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> = ({\n    state,\n    children,\n}) => <tableContext.Provider value={state}>{children}</tableContext.Provider>;\n"],"names":["tableContext","createContext","density","collapseToList","setHasStickyHead","state","children","Provider","value","useContext"],"mappings":"wIASMA,EAAeC,EAAAA,cAA4B,CAC7CC,aAAS,EACTC,gBAAgB,EAChBC,iBAAkB,sCASmD,EACrEC,MAAAA,EACAC,SAAAA,WACGN,EAAaO,SAAb,CAAsBC,MAAOH,EAAQC,SAAAA,4BATb,IAAoBG,EAAAA,WAAWT"}
+{"version":3,"file":"tableContext.cjs","sources":["../../../../src/components/table/tableContext.tsx"],"sourcesContent":["import React, { createContext, useContext } from \"react\";\nimport { TableContext, TableContextProviderProps } from \"./types.js\";\n\nconst tableContext = createContext<TableContext>({\n    density: undefined,\n    collapseToList: false,\n    setHasStickyHead: () => {},\n});\n\nexport const useTableContext = (): TableContext => useContext(tableContext);\n\nexport const TableContextProvider: React.FC<TableContextProviderProps> = ({\n    state,\n    children,\n}) => <tableContext.Provider value={state}>{children}</tableContext.Provider>;\n"],"names":["tableContext","createContext","density","collapseToList","setHasStickyHead","state","children","Provider","value","useContext"],"mappings":"wIAGMA,EAAeC,EAAAA,cAA4B,CAC7CC,aAAS,EACTC,gBAAgB,EAChBC,iBAAkB,sCAKmD,EACrEC,MAAAA,EACAC,SAAAA,WACGN,EAAaO,SAAb,CAAsBC,MAAOH,EAAQC,SAAAA,4BALb,IAAoBG,EAAAA,WAAWT"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"tableSectionContext.cjs","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 =>\n    useContext(tableSectionContext);\n\nexport interface TableSectionContextProviderProps extends WithChildren {\n    state: TableSectionContext;\n}\n\nexport const TableSectionContextProvider: React.FC<\n    TableSectionContextProviderProps\n> = ({ state, children }) => (\n    <tableSectionContext.Provider value={state}>\n        {children}\n    </tableSectionContext.Provider>\n);\n"],"names":["tableSectionContext","createContext","isTableHead","isTableBody","isTableFooter","state","children","jsx","Provider","value","useContext"],"mappings":"wIASMA,EAAsBC,EAAAA,cAAmC,CAC3DC,aAAa,EACbC,aAAa,EACbC,eAAe,wCAYf,EAAGC,MAAAA,EAAOC,SAAAA,KACTC,EAAAA,IAAAP,EAAoBQ,SAApB,CAA6BC,MAAOJ,EAChCC,SAAAA,mCAX6B,IAClCI,EAAAA,WAAWV"}
+{"version":3,"file":"tableSectionContext.cjs","sources":["../../../../src/components/table/tableSectionContext.tsx"],"sourcesContent":["import React, { createContext, useContext } from \"react\";\nimport {\n    TableSectionContext,\n    TableSectionContextProviderProps,\n} from \"./types.js\";\n\nconst tableSectionContext = createContext<TableSectionContext>({\n    isTableHead: false,\n    isTableBody: false,\n    isTableFooter: false,\n});\n\nexport const useTableSectionContext = (): TableSectionContext =>\n    useContext(tableSectionContext);\n\nexport const TableSectionContextProvider: React.FC<\n    TableSectionContextProviderProps\n> = ({ state, children }) => (\n    <tableSectionContext.Provider value={state}>\n        {children}\n    </tableSectionContext.Provider>\n);\n"],"names":["tableSectionContext","createContext","isTableHead","isTableBody","isTableFooter","state","children","jsx","Provider","value","useContext"],"mappings":"wIAMMA,EAAsBC,EAAAA,cAAmC,CAC3DC,aAAa,EACbC,aAAa,EACbC,eAAe,wCAQf,EAAGC,MAAAA,EAAOC,SAAAA,KACTC,EAAAA,IAAAP,EAAoBQ,SAApB,CAA6BC,MAAOJ,EAChCC,SAAAA,mCAP6B,IAClCI,EAAAA,WAAWV"}

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

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

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

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=types.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

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

@@ -0,0 +1,157 @@
+import { default as React, ChangeEventHandler, ColgroupHTMLAttributes, ColHTMLAttributes, HTMLAttributes, TableHTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from 'react';
+import { Density, WithChildren } from '../../core/types.cjs';
+import { TableSortProps } from './utils.cjs';
+export interface DataTableProps extends TableHTMLAttributes<HTMLTableElement> {
+    /** Beskrivelse av tabellen for skjermlesere */
+    caption?: string;
+    density?: Density;
+    collapseToList?: boolean;
+    rows: React.ReactNode[][];
+    columns: string[];
+    emptyTableText?: string;
+    /**
+     * 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";
+}
+export interface TableProps extends TableHTMLAttributes<HTMLTableElement> {
+    density?: Density;
+    /** Bryt ned til en stablet listevisning på små skjermer. NB: husk å sette `data-th` på hver celle! */
+    collapseToList?: boolean;
+    /** Setter width: 100% */
+    fullWidth?: boolean;
+}
+export interface TableBodyProps extends HTMLAttributes<HTMLTableSectionElement> {
+}
+export interface TableCaptionProps extends HTMLAttributes<HTMLTableCaptionElement> {
+    /** Skjuler caption visuelt */
+    srOnly?: boolean;
+}
+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";
+}
+export interface TableColumnProps extends ColHTMLAttributes<HTMLTableColElement> {
+}
+export interface TableColumnGroupProps extends ColgroupHTMLAttributes<HTMLTableColElement> {
+}
+export interface TableFooterProps extends HTMLAttributes<HTMLTableSectionElement> {
+}
+export interface TableHeadProps extends HTMLAttributes<HTMLTableSectionElement> {
+    srOnly?: boolean;
+    sticky?: boolean;
+}
+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;
+}
+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;
+    };
+}
+interface ClickableRowProps {
+    markClickedRows?: boolean;
+    /** Lar deg kontrollere radens tilstand untenfra */
+    isClicked?: boolean;
+    onClick: (e: React.MouseEvent<HTMLTableRowElement, MouseEvent> | React.KeyboardEvent<HTMLTableRowElement>) => void;
+}
+export interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {
+    /**
+     * Gir raden interaktivitet og en click-handler.
+     */
+    clickable?: ClickableRowProps;
+}
+export type TableSectionContext = {
+    isTableHead: boolean;
+    isTableBody: boolean;
+    isTableFooter: boolean;
+};
+export interface TableSectionContextProviderProps extends WithChildren {
+    state: TableSectionContext;
+}
+export interface ExpandableTableRowProps extends TableRowProps {
+    expandedChildren: React.ReactNode;
+    /**
+     * Setter bredden på raden som blir åpnet
+     * @default 100
+     */
+    colSpan?: number;
+    /**
+     * Om du ønsker en controlled komponent. Hvis du ikke setter denne vil komponenten håndtere state selv.
+     */
+    isOpen?: boolean;
+    onToggle?: (isOpen: boolean) => void;
+}
+export interface ExpandableTableRowControllerProps extends TableCellProps {
+    /** Settes automatisk av ExpandableTableRow */
+    isOpen?: boolean;
+    /** Settes automatisk av ExpandableTableRow */
+    onClick?: () => void;
+}
+export type TableContext = {
+    density?: Density;
+    collapseToList: boolean;
+    setHasStickyHead: (hasStcikyHead: boolean) => void;
+};
+export interface TableContextProviderProps extends WithChildren {
+    state: TableContext;
+}
+export {};

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

@@ -1 +1 @@
-{"version":3,"file":"NavTab.cjs","sources":["../../../../src/components/tabs/NavTab.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n    type ElementType,\n    forwardRef,\n    useCallback,\n    type AnchorHTMLAttributes,\n} from \"react\";\n\nexport interface NavTabProps<T extends object = Record<string, unknown>>\n    extends AnchorHTMLAttributes<HTMLAnchorElement> {\n    /** Sett til true for den nåværende fanen. False på resten. */\n    \"aria-selected\": boolean;\n    className?: string;\n    id?: string;\n    /**\n     * Overstyr hvilken komponent som skal brukes, for eksempel hvis du har en Link-komponent fra en router.\n     * @default \"a\"\n     */\n    component?: ElementType;\n    /** Send inn custom props til `component`. Nyttig om routeren din har noe fancy custom greier. */\n    componentProps?: T;\n    /** Vanlig alternativ til `href` i routere. */\n    to?: string;\n    href?: string;\n    /**\n     * Hook for å kunne stoppe default oppførsel ved tastaturnavigasjon.\n     *\n     * Om default oppførsel ikke fungerer for deg og du mister tastaturfokus etter\n     * navigasjon kan du returnere `false` her og sørge for korrekt oppførsel selv.\n     */\n    onBeforeKeyboardNavigation?: (\n        from: HTMLAnchorElement,\n        to: HTMLAnchorElement,\n    ) => boolean | void;\n}\n\nexport const NavTab = forwardRef<HTMLAnchorElement, NavTabProps>(\n    (props, ref) => {\n        const {\n            component = \"a\",\n            \"aria-selected\": selected,\n            className,\n            componentProps = {},\n            onBeforeKeyboardNavigation: onBeforeNavigate,\n            ...rest\n        } = props;\n\n        const Component = component;\n\n        const navigate = useCallback(\n            (from: HTMLAnchorElement, to: HTMLAnchorElement) => {\n                if (onBeforeNavigate) {\n                    // Åpne for å stoppe selve navigeringen hvis det skulle være behov for å gjøre noe custom med fokus og navigasjon\n                    const doNavigate = onBeforeNavigate(from, to);\n                    if (doNavigate === false) {\n                        return;\n                    }\n                }\n\n                to.focus();\n                // Click brukes for å være router-agnostisk\n                to.click();\n            },\n            [onBeforeNavigate],\n        );\n\n        const handleOnKeyDown = useCallback(\n            (event: React.KeyboardEvent<HTMLAnchorElement>) => {\n                if (event.key === \"ArrowLeft\") {\n                    const current = event.currentTarget;\n                    const prev = event.currentTarget.previousSibling;\n\n                    if (prev) {\n                        navigate(current, prev as HTMLAnchorElement);\n                    } else {\n                        navigate(\n                            current,\n                            current.parentElement?.lastChild\n                                ?.previousSibling as HTMLAnchorElement,\n                        );\n                    }\n                }\n\n                if (event.key === \"ArrowRight\") {\n                    const current = event.currentTarget;\n                    const next = event.currentTarget.nextSibling;\n\n                    // skip the focus indicator element\n                    if (next && next.nodeName === \"A\") {\n                        navigate(current, next as HTMLAnchorElement);\n                    } else {\n                        navigate(\n                            current,\n                            current.parentElement\n                                ?.firstChild as HTMLAnchorElement,\n                        );\n                    }\n                }\n            },\n            [navigate],\n        );\n\n        return (\n            <Component\n                ref={ref}\n                {...rest}\n                {...componentProps}\n                role=\"tab\"\n                aria-selected={selected}\n                className={clsx(\"jkl-tab\", className)}\n                onKeyDown={handleOnKeyDown}\n                // En faneliste skal være én fokuserbar gruppe.\n                // Piltaster brukes for å veksle mellom faner.\n                // Bare den aktive fanen skal være fokuserbar med tastatur.\n                tabIndex={selected ? 0 : -1}\n            />\n        );\n    },\n);\n\nNavTab.displayName = \"NavTab\";\n"],"names":["NavTab","forwardRef","props","ref","component","selected","className","componentProps","onBeforeKeyboardNavigation","onBeforeNavigate","rest","Component","navigate","useCallback","from","to","focus","click","handleOnKeyDown","event","key","current","currentTarget","prev","previousSibling","_b","_a","parentElement","lastChild","next","nextSibling","nodeName","_c","firstChild","jsx","role","clsx","onKeyDown","tabIndex","displayName"],"mappings":"gLAoCaA,EAASC,EAAAA,YAClB,CAACC,EAAOC,KACE,MACFC,UAAAA,EAAY,IACZ,gBAAiBC,EACjBC,UAAAA,EACAC,eAAAA,EAAiB,CAAC,EAClBC,2BAA4BC,KACzBC,GACHR,EAEES,EAAYP,EAEZQ,EAAWC,EAAAA,aACb,CAACC,EAAyBC,KAClBN,IAGmB,IADAA,EAAiBK,EAAMC,KAM9CA,EAAGC,QAEHD,EAAGE,QAAM,GAEb,CAACR,IAGCS,EAAkBL,EAAAA,aACnBM,cACO,GAAc,cAAdA,EAAMC,IAAqB,CAC3B,MAAMC,EAAUF,EAAMG,cAChBC,EAAOJ,EAAMG,cAAcE,gBAG7BZ,EAASS,EADTE,IAKI,OAAAE,EAAA,OAAAC,EAAAL,EAAQM,sBAARD,EAAuBE,kBAAvBH,EACMD,iBAGlB,CAEI,GAAc,eAAdL,EAAMC,IAAsB,CAC5B,MAAMC,EAAUF,EAAMG,cAChBO,EAAOV,EAAMG,cAAcQ,YAG7BD,GAA0B,MAAlBA,EAAKE,SACbnB,EAASS,EAASQ,GAElBjB,EACIS,EACA,OAAAW,EAAAX,EAAQM,oBAARK,EAAAA,EACMC,WAGlB,IAEJ,CAACrB,IAID,OAAAsB,EAAAA,IAACvB,EAAA,CACGR,IAAAA,KACIO,KACAH,EACJ4B,KAAK,MACL,gBAAe9B,EACfC,UAAW8B,EAAAA,KAAK,UAAW9B,GAC3B+B,UAAWnB,EAIXoB,SAAUjC,EAAW,GAAI,GAAA,IAMzCL,EAAOuC,YAAc"}
+{"version":3,"file":"NavTab.cjs","sources":["../../../../src/components/tabs/NavTab.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, useCallback } from \"react\";\nimport { NavTabProps } from \"./types.js\";\n\nexport const NavTab = forwardRef<HTMLAnchorElement, NavTabProps>(\n    (props, ref) => {\n        const {\n            component = \"a\",\n            \"aria-selected\": selected,\n            className,\n            componentProps = {},\n            onBeforeKeyboardNavigation: onBeforeNavigate,\n            ...rest\n        } = props;\n\n        const Component = component;\n\n        const navigate = useCallback(\n            (from: HTMLAnchorElement, to: HTMLAnchorElement) => {\n                if (onBeforeNavigate) {\n                    // Åpne for å stoppe selve navigeringen hvis det skulle være behov for å gjøre noe custom med fokus og navigasjon\n                    const doNavigate = onBeforeNavigate(from, to);\n                    if (doNavigate === false) {\n                        return;\n                    }\n                }\n\n                to.focus();\n                // Click brukes for å være router-agnostisk\n                to.click();\n            },\n            [onBeforeNavigate],\n        );\n\n        const handleOnKeyDown = useCallback(\n            (event: React.KeyboardEvent<HTMLAnchorElement>) => {\n                if (event.key === \"ArrowLeft\") {\n                    const current = event.currentTarget;\n                    const prev = event.currentTarget.previousSibling;\n\n                    if (prev) {\n                        navigate(current, prev as HTMLAnchorElement);\n                    } else {\n                        navigate(\n                            current,\n                            current.parentElement?.lastChild\n                                ?.previousSibling as HTMLAnchorElement,\n                        );\n                    }\n                }\n\n                if (event.key === \"ArrowRight\") {\n                    const current = event.currentTarget;\n                    const next = event.currentTarget.nextSibling;\n\n                    // skip the focus indicator element\n                    if (next && next.nodeName === \"A\") {\n                        navigate(current, next as HTMLAnchorElement);\n                    } else {\n                        navigate(\n                            current,\n                            current.parentElement\n                                ?.firstChild as HTMLAnchorElement,\n                        );\n                    }\n                }\n            },\n            [navigate],\n        );\n\n        return (\n            <Component\n                ref={ref}\n                {...rest}\n                {...componentProps}\n                role=\"tab\"\n                aria-selected={selected}\n                className={clsx(\"jkl-tab\", className)}\n                onKeyDown={handleOnKeyDown}\n                // En faneliste skal være én fokuserbar gruppe.\n                // Piltaster brukes for å veksle mellom faner.\n                // Bare den aktive fanen skal være fokuserbar med tastatur.\n                tabIndex={selected ? 0 : -1}\n            />\n        );\n    },\n);\n\nNavTab.displayName = \"NavTab\";\n"],"names":["NavTab","forwardRef","props","ref","component","selected","className","componentProps","onBeforeKeyboardNavigation","onBeforeNavigate","rest","Component","navigate","useCallback","from","to","focus","click","handleOnKeyDown","event","key","current","currentTarget","prev","previousSibling","_b","_a","parentElement","lastChild","next","nextSibling","nodeName","_c","firstChild","jsx","role","clsx","onKeyDown","tabIndex","displayName"],"mappings":"gLAIaA,EAASC,EAAAA,YAClB,CAACC,EAAOC,KACE,MACFC,UAAAA,EAAY,IACZ,gBAAiBC,EACjBC,UAAAA,EACAC,eAAAA,EAAiB,CAAC,EAClBC,2BAA4BC,KACzBC,GACHR,EAEES,EAAYP,EAEZQ,EAAWC,EAAAA,aACb,CAACC,EAAyBC,KAClBN,IAGmB,IADAA,EAAiBK,EAAMC,KAM9CA,EAAGC,QAEHD,EAAGE,QAAM,GAEb,CAACR,IAGCS,EAAkBL,EAAAA,aACnBM,cACO,GAAc,cAAdA,EAAMC,IAAqB,CAC3B,MAAMC,EAAUF,EAAMG,cAChBC,EAAOJ,EAAMG,cAAcE,gBAG7BZ,EAASS,EADTE,IAKI,OAAAE,EAAA,OAAAC,EAAAL,EAAQM,sBAARD,EAAuBE,kBAAvBH,EACMD,iBAGlB,CAEI,GAAc,eAAdL,EAAMC,IAAsB,CAC5B,MAAMC,EAAUF,EAAMG,cAChBO,EAAOV,EAAMG,cAAcQ,YAG7BD,GAA0B,MAAlBA,EAAKE,SACbnB,EAASS,EAASQ,GAElBjB,EACIS,EACA,OAAAW,EAAAX,EAAQM,oBAARK,EAAAA,EACMC,WAGlB,IAEJ,CAACrB,IAID,OAAAsB,EAAAA,IAACvB,EAAA,CACGR,IAAAA,KACIO,KACAH,EACJ4B,KAAK,MACL,gBAAe9B,EACfC,UAAW8B,EAAAA,KAAK,UAAW9B,GAC3B+B,UAAWnB,EAIXoB,SAAUjC,EAAW,GAAI,GAAA,IAMzCL,EAAOuC,YAAc"}

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

@@ -1,25 +1,3 @@
-import { default as React, ElementType, AnchorHTMLAttributes } from 'react';
-export interface NavTabProps<T extends object = Record<string, unknown>> extends AnchorHTMLAttributes<HTMLAnchorElement> {
-    /** Sett til true for den nåværende fanen. False på resten. */
-    "aria-selected": boolean;
-    className?: string;
-    id?: string;
-    /**
-     * Overstyr hvilken komponent som skal brukes, for eksempel hvis du har en Link-komponent fra en router.
-     * @default "a"
-     */
-    component?: ElementType;
-    /** Send inn custom props til `component`. Nyttig om routeren din har noe fancy custom greier. */
-    componentProps?: T;
-    /** Vanlig alternativ til `href` i routere. */
-    to?: string;
-    href?: string;
-    /**
-     * Hook for å kunne stoppe default oppførsel ved tastaturnavigasjon.
-     *
-     * Om default oppførsel ikke fungerer for deg og du mister tastaturfokus etter
-     * navigasjon kan du returnere `false` her og sørge for korrekt oppførsel selv.
-     */
-    onBeforeKeyboardNavigation?: (from: HTMLAnchorElement, to: HTMLAnchorElement) => boolean | void;
-}
+import { default as React } from 'react';
+import { NavTabProps } from './types.cjs';
 export declare const NavTab: React.ForwardRefExoticComponent<NavTabProps<Record<string, unknown>> & React.RefAttributes<HTMLAnchorElement>>;

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Tab.cjs","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>(\n    (props, ref) => {\n        const classes = clsx(\"jkl-tab\", props.className);\n\n        return (\n            <button\n                role=\"tab\"\n                type=\"button\"\n                ref={ref}\n                {...props}\n                className={classes}\n            />\n        );\n    },\n);\n\nTab.displayName = \"Tab\";\n"],"names":["Tab","forwardRef","props","ref","classes","clsx","className","jsx","role","type","displayName"],"mappings":"6JAaaA,mBAAYC,YACrB,CAACC,EAAOC,KACJ,MAAMC,EAAUC,EAAAA,KAAK,UAAWH,EAAMI,WAGlC,OAAAC,EAAAA,IAAC,SAAA,CACGC,KAAK,MACLC,KAAK,SACLN,IAAAA,KACID,EACJI,UAAWF,GAAA,IAM3BJ,EAAIU,YAAc"}
+{"version":3,"file":"Tab.cjs","sources":["../../../../src/components/tabs/Tab.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\nimport { TabProps } from \"./types.js\";\n\n/**\n * En Tab til bruk som element i TabList. Ikke funksjonell utenfor et TabList element.\n *\n * Docs: https://jokul.fremtind.no/komponenter/tabs\n */\nexport const Tab = React.forwardRef<HTMLButtonElement, TabProps>(\n    (props, ref) => {\n        const classes = clsx(\"jkl-tab\", props.className);\n\n        return (\n            <button\n                role=\"tab\"\n                type=\"button\"\n                ref={ref}\n                {...props}\n                className={classes}\n            />\n        );\n    },\n);\n\nTab.displayName = \"Tab\";\n"],"names":["Tab","forwardRef","props","ref","classes","clsx","className","jsx","role","type","displayName"],"mappings":"6JASaA,mBAAYC,YACrB,CAACC,EAAOC,KACJ,MAAMC,EAAUC,EAAAA,KAAK,UAAWH,EAAMI,WAGlC,OAAAC,EAAAA,IAAC,SAAA,CACGC,KAAK,MACLC,KAAK,SACLN,IAAAA,KACID,EACJI,UAAWF,GAAA,IAM3BJ,EAAIU,YAAc"}

package/build/cjs/components/tabs/Tab.d.cts

@@ -1,8 +1,5 @@
 import { default as React } from 'react';
-import { WithChildren } from '../../core/types.cjs';
-export interface TabProps extends WithChildren {
-    className?: string;
-}
+import { TabProps } from './types.cjs';
 /**
  * En Tab til bruk som element i TabList. Ikke funksjonell utenfor et TabList element.
  *

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

@@ -1 +1 @@
-{"version":3,"file":"TabList.cjs","sources":["../../../../src/components/tabs/TabList.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useCallback, 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 } =\n        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(\n        (event: React.KeyboardEvent<HTMLButtonElement>) => {\n            if (event.key === \"ArrowLeft\") {\n                const current = event.currentTarget;\n                const prev = event.currentTarget.previousSibling;\n\n                if (prev) {\n                    (prev as HTMLElement).focus();\n                } else {\n                    (\n                        current.parentElement?.lastChild\n                            ?.previousSibling as HTMLElement\n                    ).focus();\n                }\n            }\n\n            if (event.key === \"ArrowRight\") {\n                const current = event.currentTarget;\n                const next = event.currentTarget.nextSibling;\n\n                // skip the focus indicator element\n                if (next && next.nodeName === \"BUTTON\") {\n                    (next as HTMLElement).focus();\n                } else {\n                    (current.parentElement?.firstChild as HTMLElement).focus();\n                }\n            }\n        },\n        [],\n    );\n\n    return (\n        <div\n            role=\"tablist\"\n            ref={tabsRef}\n            {...rest}\n            className={clsx(\"jkl-tablist\", className)}\n        >\n            {React.Children.map(children, (tab, tabIndex) => {\n                const isActive = activeIndex === tabIndex;\n\n                return React.isValidElement(tab)\n                    ? React.cloneElement<any>(tab, {\n                          onKeyDown: keyDownHandler,\n                          tabIndex: isActive ? undefined : -1,\n                          ref: isActive ? activeRef : undefined,\n                          onClick: () => setActiveIndex(tabIndex),\n                          \"aria-selected\": isActive,\n                          \"aria-controls\": tabPanelIDs[tabIndex],\n                          id: tabIDs[tabIndex],\n                      })\n                    : null;\n            })}\n\n            <span\n                className=\"jkl-tablist__indicator\"\n                style={{\n                    left: (activeRect?.left || 0) - (tabsRect?.left || 0),\n                    bottom: -1,\n                    width:\n                        (activeRect?.width || 0) -\n                        (density === \"compact\" ? 32 : 38),\n                }}\n            />\n        </div>\n    );\n};\n"],"names":["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":"+NAsBuB,EAAGA,SAAAA,EAAUC,UAAAA,KAAcC,MAE9C,MAAQC,YAAAA,EAAaC,eAAAA,EAAgBC,OAAAA,EAAQC,YAAAA,KAAgBC,GACzDL,GACIM,QAAAA,GAAYC,EAAAA,kBAEbC,EAAUC,GAAeC,EAAkBA,YAC3CC,EAAYC,GAAiBF,EAAkBA,WAEhDG,EAAUC,SAAuB,MACjCC,EAAYD,SAA0B,MAE5CE,EAAAA,WAAU,KACFH,EAAQI,SACIR,EAAAI,EAAQI,QAAQC,yBAE5BH,EAAUE,SACIL,EAAAG,EAAUE,QAAQC,wBAAuB,GAE5D,CAACjB,EAAaK,IAEjB,MAAMa,EAAiBC,EAAAA,aAClBC,cACO,GAAc,cAAdA,EAAMC,IAAqB,CAC3B,MAAML,EAAUI,EAAME,cAChBC,EAAOH,EAAME,cAAcE,gBAE7BD,EACCA,EAAqBE,SAGlB,OAAAC,EAAA,OAAAC,EAAAX,EAAQY,oBAAR,EAAAD,EAAuBE,kBAAvBH,EACMF,iBACRC,OAEV,CAEI,GAAc,eAAdL,EAAMC,IAAsB,CAC5B,MAAML,EAAUI,EAAME,cAChBQ,EAAOV,EAAME,cAAcS,YAG7BD,GAA0B,WAAlBA,EAAKE,SACZF,EAAqBL,SAErB,OAAAQ,EAAAjB,EAAQY,oBAAR,EAAAK,EAAuBC,YAA2BT,OAE3D,IAEJ,IAIA,OAAAU,EAAAA,KAAC,MAAA,CACGC,KAAK,UACLC,IAAKzB,KACDR,EACJN,UAAWwC,EAAAA,KAAK,cAAexC,GAE9BD,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,QAGVO,EAAAA,IAAC,OAAA,CACGpD,UAAU,yBACVqD,MAAO,CACHC,OAAO,MAAA1C,SAAAA,EAAY0C,OAAQ,KAAM,MAAA7C,OAAAA,EAAAA,EAAU6C,OAAQ,GACnDC,QACA,EAAAC,QACK,MAAA5C,OAAA,EAAAA,EAAY4C,QAAS,IACT,YAAZjD,EAAwB,GAAK,SAE1C"}
+{"version":3,"file":"TabList.cjs","sources":["../../../../src/components/tabs/TabList.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useCallback, useEffect, useRef, useState } from \"react\";\nimport { useTabsContext } from \"./tabsContext.js\";\nimport { TabListProps } from \"./types.js\";\n\nexport interface InjectedProps {\n    activeIndex: number;\n    setActiveIndex: React.Dispatch<React.SetStateAction<number>>;\n    tabIDs: string[];\n    tabPanelIDs: string[];\n}\n\n/**\n * Konteiner for elementer av typen Tab. Ikke funksjonell utenfor et Tabs element.\n *\n * Docs: https://jokul.fremtind.no/komponenter/tabs\n */\nexport const TabList = ({ children, className, ...injected }: TabListProps) => {\n    // props injected by Tabs\n    const { activeIndex, setActiveIndex, tabIDs, tabPanelIDs, ...rest } =\n        injected as TabListProps & InjectedProps;\n    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(\n        (event: React.KeyboardEvent<HTMLButtonElement>) => {\n            if (event.key === \"ArrowLeft\") {\n                const current = event.currentTarget;\n                const prev = event.currentTarget.previousSibling;\n\n                if (prev) {\n                    (prev as HTMLElement).focus();\n                } else {\n                    (\n                        current.parentElement?.lastChild\n                            ?.previousSibling as HTMLElement\n                    ).focus();\n                }\n            }\n\n            if (event.key === \"ArrowRight\") {\n                const current = event.currentTarget;\n                const next = event.currentTarget.nextSibling;\n\n                // skip the focus indicator element\n                if (next && next.nodeName === \"BUTTON\") {\n                    (next as HTMLElement).focus();\n                } else {\n                    (current.parentElement?.firstChild as HTMLElement).focus();\n                }\n            }\n        },\n        [],\n    );\n\n    return (\n        <div\n            role=\"tablist\"\n            ref={tabsRef}\n            {...rest}\n            className={clsx(\"jkl-tablist\", className)}\n        >\n            {React.Children.map(children, (tab, tabIndex) => {\n                const isActive = activeIndex === tabIndex;\n\n                return React.isValidElement(tab)\n                    ? React.cloneElement<any>(tab, {\n                          onKeyDown: keyDownHandler,\n                          tabIndex: isActive ? undefined : -1,\n                          ref: isActive ? activeRef : undefined,\n                          onClick: () => setActiveIndex(tabIndex),\n                          \"aria-selected\": isActive,\n                          \"aria-controls\": tabPanelIDs[tabIndex],\n                          id: tabIDs[tabIndex],\n                      })\n                    : null;\n            })}\n\n            <span\n                className=\"jkl-tablist__indicator\"\n                style={{\n                    left: (activeRect?.left || 0) - (tabsRect?.left || 0),\n                    bottom: -1,\n                    width:\n                        (activeRect?.width || 0) -\n                        (density === \"compact\" ? 32 : 38),\n                }}\n            />\n        </div>\n    );\n};\n"],"names":["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":"+NAiBuB,EAAGA,SAAAA,EAAUC,UAAAA,KAAcC,MAE9C,MAAQC,YAAAA,EAAaC,eAAAA,EAAgBC,OAAAA,EAAQC,YAAAA,KAAgBC,GACzDL,GACIM,QAAAA,GAAYC,EAAAA,kBAEbC,EAAUC,GAAeC,EAAkBA,YAC3CC,EAAYC,GAAiBF,EAAkBA,WAEhDG,EAAUC,SAAuB,MACjCC,EAAYD,SAA0B,MAE5CE,EAAAA,WAAU,KACFH,EAAQI,SACIR,EAAAI,EAAQI,QAAQC,yBAE5BH,EAAUE,SACIL,EAAAG,EAAUE,QAAQC,wBAAuB,GAE5D,CAACjB,EAAaK,IAEjB,MAAMa,EAAiBC,EAAAA,aAClBC,cACO,GAAc,cAAdA,EAAMC,IAAqB,CAC3B,MAAML,EAAUI,EAAME,cAChBC,EAAOH,EAAME,cAAcE,gBAE7BD,EACCA,EAAqBE,SAGlB,OAAAC,EAAA,OAAAC,EAAAX,EAAQY,oBAAR,EAAAD,EAAuBE,kBAAvBH,EACMF,iBACRC,OAEV,CAEI,GAAc,eAAdL,EAAMC,IAAsB,CAC5B,MAAML,EAAUI,EAAME,cAChBQ,EAAOV,EAAME,cAAcS,YAG7BD,GAA0B,WAAlBA,EAAKE,SACZF,EAAqBL,SAErB,OAAAQ,EAAAjB,EAAQY,oBAAR,EAAAK,EAAuBC,YAA2BT,OAE3D,IAEJ,IAIA,OAAAU,EAAAA,KAAC,MAAA,CACGC,KAAK,UACLC,IAAKzB,KACDR,EACJN,UAAWwC,EAAAA,KAAK,cAAexC,GAE9BD,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,QAGVO,EAAAA,IAAC,OAAA,CACGpD,UAAU,yBACVqD,MAAO,CACHC,OAAO,MAAA1C,SAAAA,EAAY0C,OAAQ,KAAM,MAAA7C,OAAAA,EAAAA,EAAU6C,OAAQ,GACnDC,QACA,EAAAC,QACK,MAAA5C,OAAA,EAAAA,EAAY4C,QAAS,IACT,YAAZjD,EAAwB,GAAK,SAE1C"}

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

@@ -1,9 +1,5 @@
 import { default as React } from 'react';
-import { WithChildren } from '../../core/types.cjs';
-export interface TabListProps extends WithChildren {
-    "aria-label"?: string;
-    className?: string;
-}
+import { TabListProps } from './types.cjs';
 export interface InjectedProps {
     activeIndex: number;
     setActiveIndex: React.Dispatch<React.SetStateAction<number>>;

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

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

package/build/cjs/components/tabs/TabPanel.d.cts

@@ -1,8 +1,5 @@
 import { default as React } from 'react';
-import { WithChildren } from '../../core/types.cjs';
-export interface TabPanelProps extends WithChildren {
-    className?: string;
-}
+import { TabPanelProps } from './types.cjs';
 /**
  * Konteiner for innhold i et tabbet brukergrensesnitt. Ikke funksjonell utenfor et Tabs element.
  *

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.cjs","sources":["../../../../../../node_modules/.pnpm/nanoid@3.3.8/node_modules/nanoid/index.browser.js","../../../../src/components/tabs/Tabs.tsx"],"sourcesContent":["// This file replaces `index.js` in bundlers like webpack or Rollup,\n// according to `browser` config in `package.json`.\n\nimport { urlAlphabet } from './url-alphabet/index.js'\n\nlet random = bytes => crypto.getRandomValues(new Uint8Array(bytes))\n\nlet customRandom = (alphabet, defaultSize, getRandom) => {\n  // First, a bitmask is necessary to generate the ID. The bitmask makes bytes\n  // values closer to the alphabet size. The bitmask calculates the closest\n  // `2^31 - 1` number, which exceeds the alphabet size.\n  // For example, the bitmask for the alphabet size 30 is 31 (00011111).\n  // `Math.clz32` is not used, because it is not available in browsers.\n  let mask = (2 << (Math.log(alphabet.length - 1) / Math.LN2)) - 1\n  // Though, the bitmask solution is not perfect since the bytes exceeding\n  // the alphabet size are refused. Therefore, to reliably generate the ID,\n  // the random bytes redundancy has to be satisfied.\n\n  // Note: every hardware random generator call is performance expensive,\n  // because the system call for entropy collection takes a lot of time.\n  // So, to avoid additional system calls, extra bytes are requested in advance.\n\n  // Next, a step determines how many random bytes to generate.\n  // The number of random bytes gets decided upon the ID size, mask,\n  // alphabet size, and magic number 1.6 (using 1.6 peaks at performance\n  // according to benchmarks).\n\n  // `-~f => Math.ceil(f)` if f is a float\n  // `-~i => i + 1` if i is an integer\n  let step = -~((1.6 * mask * defaultSize) / alphabet.length)\n\n  return (size = defaultSize) => {\n    let id = ''\n    while (true) {\n      let bytes = getRandom(step)\n      // A compact alternative for `for (var i = 0; i < step; i++)`.\n      let j = step | 0\n      while (j--) {\n        // Adding `|| ''` refuses a random byte that exceeds the alphabet size.\n        id += alphabet[bytes[j] & mask] || ''\n        if (id.length === size) return id\n      }\n    }\n  }\n}\n\nlet customAlphabet = (alphabet, size = 21) =>\n  customRandom(alphabet, size, random)\n\nlet nanoid = (size = 21) =>\n  crypto.getRandomValues(new Uint8Array(size)).reduce((id, byte) => {\n    // It is incorrect to use bytes exceeding the alphabet size.\n    // The following mask reduces the random byte in the 0-255 value\n    // range to the 0-63 value range. Therefore, adding hacks, such\n    // as empty string fallback or magic numbers, is unneccessary because\n    // the bitmask trims bytes down to the alphabet size.\n    byte &= 63\n    if (byte < 36) {\n      // `0-9a-z`\n      id += byte.toString(36)\n    } else if (byte < 62) {\n      // `A-Z`\n      id += (byte - 26).toString(36).toUpperCase()\n    } else if (byte > 62) {\n      id += '-'\n    } else {\n      id += '_'\n    }\n    return id\n  }, '')\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 = ({\n    onChange,\n    defaultTab,\n    density,\n    ...props\n}: TabsProps) => {\n    const [activeIndex, setActiveIndex] = useState(defaultTab ?? 0);\n\n    const previousTabIndex = usePreviousValue(activeIndex);\n\n    useEffect(() => {\n        if (\n            previousTabIndex !== undefined &&\n            previousTabIndex !== activeIndex &&\n            onChange\n        ) {\n            onChange(activeIndex);\n        }\n    }, [onChange, previousTabIndex, activeIndex]);\n\n    const [tabIDs, setTabIDs] = useState<string[]>([]);\n    const [tabPanelIDs, setTabPanelIds] = useState<string[]>([]);\n\n    const resolveIDs = useCallback(() => {\n        const tabList = React.Children.toArray(props.children)[0];\n\n        if (!React.isValidElement(tabList)) return;\n\n        React.Children.forEach(tabList.props.children, (tab) => {\n            if (!React.isValidElement(tab)) return;\n\n            setTabIDs((prev) => [...prev, `jkl-tab-${nanoid(8)}`]);\n            setTabPanelIds((prev) => [...prev, `jkl-tabpanel-${nanoid(8)}`]);\n        });\n    }, [props.children]);\n\n    const renderTabList = () => {\n        const tabList = React.Children.toArray(props.children)[0];\n\n        if (!React.isValidElement<TabListProps & InjectedProps>(tabList))\n            return;\n\n        return React.cloneElement<TabListProps & InjectedProps>(tabList, {\n            activeIndex,\n            setActiveIndex,\n            tabIDs,\n            tabPanelIDs,\n        });\n    };\n\n    const renderTabPanels = () => {\n        return React.Children.map(props.children, (child, childIndex) => {\n            if (\n                !React.isValidElement<\n                    TabPanelProps & React.HTMLAttributes<HTMLDivElement>\n                >(child) ||\n                childIndex === 0\n            )\n                return;\n\n            const tabPanelIndex = childIndex - 1;\n\n            return tabPanelIndex === activeIndex\n                ? React.cloneElement<\n                      TabPanelProps & React.HTMLAttributes<HTMLDivElement>\n                  >(child, {\n                      \"aria-labelledby\": tabIDs[tabPanelIndex],\n                      id: tabPanelIDs[tabPanelIndex],\n                  })\n                : null;\n        });\n    };\n\n    useEffect(() => {\n        resolveIDs();\n    }, [resolveIDs]);\n\n    return (\n        <TabsContextProvider state={{ density }}>\n            <div\n                {...props}\n                className={clsx(\"jkl-tabs\", props.className)}\n                data-density={density}\n            >\n                {renderTabList()}\n                {renderTabPanels()}\n            </div>\n        </TabsContextProvider>\n    );\n};\n"],"names":["nanoid","size","crypto","getRandomValues","Uint8Array","reduce","id","byte","toString","toUpperCase","onChange","defaultTab","density","props","activeIndex","setActiveIndex","useState","previousTabIndex","usePreviousValue","useEffect","tabIDs","setTabIDs","tabPanelIDs","setTabPanelIds","resolveIDs","useCallback","tabList","React","Children","toArray","children","isValidElement","forEach","tab","prev","jsx","TabsContextProvider","state","jsxs","className","clsx","cloneElement","renderTabList","map","child","childIndex","tabPanelIndex"],"mappings":"8QAiDA,IAAIA,EAAS,CAACC,EAAO,KACnBC,OAAOC,gBAAgB,IAAIC,WAAWH,IAAOI,QAAO,CAACC,EAAIC,IASrDD,IAHFC,GAAQ,IACG,GAEHA,EAAKC,SAAS,IACXD,EAAO,IAETA,EAAO,IAAIC,SAAS,IAAIC,cACtBF,EAAO,GACV,IAEA,KAGP,iBC/Ce,EAChBG,SAAAA,EACAC,WAAAA,EACAC,QAAAA,KACGC,MAEH,MAAOC,EAAaC,GAAkBC,EAAAA,SAASL,GAAc,GAEvDM,EAAmBC,mBAAiBJ,GAE1CK,EAAAA,WAAU,UAEmB,IAArBF,GACAA,IAAqBH,GACrBJ,GAEAA,EAASI,EAAW,GAEzB,CAACJ,EAAUO,EAAkBH,IAEhC,MAAOM,EAAQC,GAAaL,EAAAA,SAAmB,KACxCM,EAAaC,GAAkBP,EAAAA,SAAmB,IAEnDQ,EAAaC,EAAAA,aAAY,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,WAAWlC,EAAO,QACjCuB,GAACW,GAAS,IAAIA,EAAM,gBAAgBlC,EAAO,QAAK,GAClE,GACF,CAACa,EAAMiB,WAuCVX,OAAAA,EAAAA,WAAU,KACKK,MACZ,CAACA,IAGCW,EAAAA,IAAAC,EAAAA,oBAAA,CAAoBC,MAAO,CAAEzB,QAAAA,GAC1BkB,SAAAQ,EAAAA,KAAC,MAAA,IACOzB,EACJ0B,UAAWC,EAAAA,KAAK,WAAY3B,EAAM0B,WAClC,eAAc3B,EAEbkB,SAAA,CAhDS,MAClB,MAAMJ,EAAUC,EAAMC,SAASC,QAAQhB,EAAMiB,UAAU,GAEnD,GAACH,EAAMI,eAA6CL,GAGjD,OAAAC,EAAMc,aAA2Cf,EAAS,CAC7DZ,YAAAA,EACAC,eAAAA,EACAK,OAAAA,EACAE,YAAAA,GACH,EAqCsBoB,GAjChBf,EAAMC,SAASe,IAAI9B,EAAMiB,UAAU,CAACc,EAAOC,KAC9C,IACKlB,EAAMI,eAELa,IACa,IAAfC,EAEA,OAEJ,MAAMC,EAAgBD,EAAa,EAEnC,OAAOC,IAAkBhC,EACnBa,EAAMc,aAEJG,EAAO,CACL,kBAAmBxB,EAAO0B,GAC1BxC,GAAIgB,EAAYwB,KAEpB,YAkBV","x_google_ignoreList":[0]}
+{"version":3,"file":"Tabs.cjs","sources":["../../../../../../node_modules/.pnpm/nanoid@3.3.8/node_modules/nanoid/index.browser.js","../../../../src/components/tabs/Tabs.tsx"],"sourcesContent":["// This file replaces `index.js` in bundlers like webpack or Rollup,\n// according to `browser` config in `package.json`.\n\nimport { urlAlphabet } from './url-alphabet/index.js'\n\nlet random = bytes => crypto.getRandomValues(new Uint8Array(bytes))\n\nlet customRandom = (alphabet, defaultSize, getRandom) => {\n  // First, a bitmask is necessary to generate the ID. The bitmask makes bytes\n  // values closer to the alphabet size. The bitmask calculates the closest\n  // `2^31 - 1` number, which exceeds the alphabet size.\n  // For example, the bitmask for the alphabet size 30 is 31 (00011111).\n  // `Math.clz32` is not used, because it is not available in browsers.\n  let mask = (2 << (Math.log(alphabet.length - 1) / Math.LN2)) - 1\n  // Though, the bitmask solution is not perfect since the bytes exceeding\n  // the alphabet size are refused. Therefore, to reliably generate the ID,\n  // the random bytes redundancy has to be satisfied.\n\n  // Note: every hardware random generator call is performance expensive,\n  // because the system call for entropy collection takes a lot of time.\n  // So, to avoid additional system calls, extra bytes are requested in advance.\n\n  // Next, a step determines how many random bytes to generate.\n  // The number of random bytes gets decided upon the ID size, mask,\n  // alphabet size, and magic number 1.6 (using 1.6 peaks at performance\n  // according to benchmarks).\n\n  // `-~f => Math.ceil(f)` if f is a float\n  // `-~i => i + 1` if i is an integer\n  let step = -~((1.6 * mask * defaultSize) / alphabet.length)\n\n  return (size = defaultSize) => {\n    let id = ''\n    while (true) {\n      let bytes = getRandom(step)\n      // A compact alternative for `for (var i = 0; i < step; i++)`.\n      let j = step | 0\n      while (j--) {\n        // Adding `|| ''` refuses a random byte that exceeds the alphabet size.\n        id += alphabet[bytes[j] & mask] || ''\n        if (id.length === size) return id\n      }\n    }\n  }\n}\n\nlet customAlphabet = (alphabet, size = 21) =>\n  customRandom(alphabet, size, random)\n\nlet nanoid = (size = 21) =>\n  crypto.getRandomValues(new Uint8Array(size)).reduce((id, byte) => {\n    // It is incorrect to use bytes exceeding the alphabet size.\n    // The following mask reduces the random byte in the 0-255 value\n    // range to the 0-63 value range. Therefore, adding hacks, such\n    // as empty string fallback or magic numbers, is unneccessary because\n    // the bitmask trims bytes down to the alphabet size.\n    byte &= 63\n    if (byte < 36) {\n      // `0-9a-z`\n      id += byte.toString(36)\n    } else if (byte < 62) {\n      // `A-Z`\n      id += (byte - 26).toString(36).toUpperCase()\n    } else if (byte > 62) {\n      id += '-'\n    } else {\n      id += '_'\n    }\n    return id\n  }, '')\n\nexport { nanoid, customAlphabet, customRandom, urlAlphabet, random }\n","import clsx from \"clsx\";\nimport { nanoid } from \"nanoid\";\nimport React, { useCallback, useEffect, useState } from \"react\";\nimport { usePreviousValue } from \"../../hooks/usePreviousValue/usePreviousValue.js\";\nimport { InjectedProps } from \"./TabList.js\";\nimport { TabsContextProvider } from \"./tabsContext.js\";\nimport { TabListProps, TabPanelProps, TabsProps } from \"./types.js\";\n\n/**\n * Konteiner for et grensesnitt hvor man kan tabbe mellom innhold.\n * Må inneholde en TabList etterfulgt av en eller flere TabPanel.\n *\n * Docs: https://jokul.fremtind.no/komponenter/tabs\n */\nexport const Tabs = ({\n    onChange,\n    defaultTab,\n    density,\n    ...props\n}: TabsProps) => {\n    const [activeIndex, setActiveIndex] = useState(defaultTab ?? 0);\n\n    const previousTabIndex = usePreviousValue(activeIndex);\n\n    useEffect(() => {\n        if (\n            previousTabIndex !== undefined &&\n            previousTabIndex !== activeIndex &&\n            onChange\n        ) {\n            onChange(activeIndex);\n        }\n    }, [onChange, previousTabIndex, activeIndex]);\n\n    const [tabIDs, setTabIDs] = useState<string[]>([]);\n    const [tabPanelIDs, setTabPanelIds] = useState<string[]>([]);\n\n    const resolveIDs = useCallback(() => {\n        const tabList = React.Children.toArray(props.children)[0];\n\n        if (!React.isValidElement(tabList)) return;\n\n        React.Children.forEach(tabList.props.children, (tab) => {\n            if (!React.isValidElement(tab)) return;\n\n            setTabIDs((prev) => [...prev, `jkl-tab-${nanoid(8)}`]);\n            setTabPanelIds((prev) => [...prev, `jkl-tabpanel-${nanoid(8)}`]);\n        });\n    }, [props.children]);\n\n    const renderTabList = () => {\n        const tabList = React.Children.toArray(props.children)[0];\n\n        if (!React.isValidElement<TabListProps & InjectedProps>(tabList))\n            return;\n\n        return React.cloneElement<TabListProps & InjectedProps>(tabList, {\n            activeIndex,\n            setActiveIndex,\n            tabIDs,\n            tabPanelIDs,\n        });\n    };\n\n    const renderTabPanels = () => {\n        return React.Children.map(props.children, (child, childIndex) => {\n            if (\n                !React.isValidElement<\n                    TabPanelProps & React.HTMLAttributes<HTMLDivElement>\n                >(child) ||\n                childIndex === 0\n            )\n                return;\n\n            const tabPanelIndex = childIndex - 1;\n\n            return tabPanelIndex === activeIndex\n                ? React.cloneElement<\n                      TabPanelProps & React.HTMLAttributes<HTMLDivElement>\n                  >(child, {\n                      \"aria-labelledby\": tabIDs[tabPanelIndex],\n                      id: tabPanelIDs[tabPanelIndex],\n                  })\n                : null;\n        });\n    };\n\n    useEffect(() => {\n        resolveIDs();\n    }, [resolveIDs]);\n\n    return (\n        <TabsContextProvider state={{ density }}>\n            <div\n                {...props}\n                className={clsx(\"jkl-tabs\", props.className)}\n                data-density={density}\n            >\n                {renderTabList()}\n                {renderTabPanels()}\n            </div>\n        </TabsContextProvider>\n    );\n};\n"],"names":["nanoid","size","crypto","getRandomValues","Uint8Array","reduce","id","byte","toString","toUpperCase","onChange","defaultTab","density","props","activeIndex","setActiveIndex","useState","previousTabIndex","usePreviousValue","useEffect","tabIDs","setTabIDs","tabPanelIDs","setTabPanelIds","resolveIDs","useCallback","tabList","React","Children","toArray","children","isValidElement","forEach","tab","prev","jsx","TabsContextProvider","state","jsxs","className","clsx","cloneElement","renderTabList","map","child","childIndex","tabPanelIndex"],"mappings":"8QAiDA,IAAIA,EAAS,CAACC,EAAO,KACnBC,OAAOC,gBAAgB,IAAIC,WAAWH,IAAOI,QAAO,CAACC,EAAIC,IASrDD,IAHFC,GAAQ,IACG,GAEHA,EAAKC,SAAS,IACXD,EAAO,IAETA,EAAO,IAAIC,SAAS,IAAIC,cACtBF,EAAO,GACV,IAEA,KAGP,iBCvDe,EAChBG,SAAAA,EACAC,WAAAA,EACAC,QAAAA,KACGC,MAEH,MAAOC,EAAaC,GAAkBC,EAAAA,SAASL,GAAc,GAEvDM,EAAmBC,mBAAiBJ,GAE1CK,EAAAA,WAAU,UAEmB,IAArBF,GACAA,IAAqBH,GACrBJ,GAEAA,EAASI,EAAW,GAEzB,CAACJ,EAAUO,EAAkBH,IAEhC,MAAOM,EAAQC,GAAaL,EAAAA,SAAmB,KACxCM,EAAaC,GAAkBP,EAAAA,SAAmB,IAEnDQ,EAAaC,EAAAA,aAAY,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,WAAWlC,EAAO,QACjCuB,GAACW,GAAS,IAAIA,EAAM,gBAAgBlC,EAAO,QAAK,GAClE,GACF,CAACa,EAAMiB,WAuCVX,OAAAA,EAAAA,WAAU,KACKK,MACZ,CAACA,IAGCW,EAAAA,IAAAC,EAAAA,oBAAA,CAAoBC,MAAO,CAAEzB,QAAAA,GAC1BkB,SAAAQ,EAAAA,KAAC,MAAA,IACOzB,EACJ0B,UAAWC,EAAAA,KAAK,WAAY3B,EAAM0B,WAClC,eAAc3B,EAEbkB,SAAA,CAhDS,MAClB,MAAMJ,EAAUC,EAAMC,SAASC,QAAQhB,EAAMiB,UAAU,GAEnD,GAACH,EAAMI,eAA6CL,GAGjD,OAAAC,EAAMc,aAA2Cf,EAAS,CAC7DZ,YAAAA,EACAC,eAAAA,EACAK,OAAAA,EACAE,YAAAA,GACH,EAqCsBoB,GAjChBf,EAAMC,SAASe,IAAI9B,EAAMiB,UAAU,CAACc,EAAOC,KAC9C,IACKlB,EAAMI,eAELa,IACa,IAAfC,EAEA,OAEJ,MAAMC,EAAgBD,EAAa,EAEnC,OAAOC,IAAkBhC,EACnBa,EAAMc,aAEJG,EAAO,CACL,kBAAmBxB,EAAO0B,GAC1BxC,GAAIgB,EAAYwB,KAEpB,YAkBV","x_google_ignoreList":[0]}

package/build/cjs/components/tabs/Tabs.d.cts

@@ -1,11 +1,5 @@
 import { default as React } from 'react';
-import { Density, WithChildren } from '../../core/types.cjs';
-export interface TabsProps extends WithChildren {
-    className?: string;
-    density?: Density;
-    onChange?: (tabIndex: number) => void;
-    defaultTab?: number;
-}
+import { TabsProps } from './types.cjs';
 /**
  * Konteiner for et grensesnitt hvor man kan tabbe mellom innhold.
  * Må inneholde en TabList etterfulgt av en eller flere TabPanel.

package/build/cjs/components/tabs/index.d.cts

@@ -1,6 +1,7 @@
-export { NavTab, type NavTabProps } from './NavTab.cjs';
-export { NavTabs, type NavTabsProps } from './NavTabs.cjs';
-export { Tabs, type TabsProps } from './Tabs.cjs';
-export { TabList, type TabListProps } from './TabList.cjs';
-export { Tab, type TabProps } from './Tab.cjs';
-export { TabPanel, type TabPanelProps } from './TabPanel.cjs';
+export { NavTab } from './NavTab.cjs';
+export { NavTabs } from './NavTabs.cjs';
+export { Tabs } from './Tabs.cjs';
+export { TabList } from './TabList.cjs';
+export { Tab } from './Tab.cjs';
+export { TabPanel } from './TabPanel.cjs';
+export type { NavTabProps, NavTabsProps, TabsProps, TabListProps, TabProps, TabPanelProps, } from './types.cjs';

package/build/cjs/components/tabs/types.cjs

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=types.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

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

@@ -0,0 +1,47 @@
+import { AnchorHTMLAttributes, ElementType } from 'react';
+import { Density, WithChildren } from '../../core/types.cjs';
+export interface NavTabProps<T extends object = Record<string, unknown>> extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    /** Sett til true for den nåværende fanen. False på resten. */
+    "aria-selected": boolean;
+    className?: string;
+    id?: string;
+    /**
+     * Overstyr hvilken komponent som skal brukes, for eksempel hvis du har en Link-komponent fra en router.
+     * @default "a"
+     */
+    component?: ElementType;
+    /** Send inn custom props til `component`. Nyttig om routeren din har noe fancy custom greier. */
+    componentProps?: T;
+    /** Vanlig alternativ til `href` i routere. */
+    to?: string;
+    href?: string;
+    /**
+     * Hook for å kunne stoppe default oppførsel ved tastaturnavigasjon.
+     *
+     * Om default oppførsel ikke fungerer for deg og du mister tastaturfokus etter
+     * navigasjon kan du returnere `false` her og sørge for korrekt oppførsel selv.
+     */
+    onBeforeKeyboardNavigation?: (from: HTMLAnchorElement, to: HTMLAnchorElement) => boolean | void;
+}
+export interface NavTabsProps extends WithChildren {
+    "aria-label"?: string;
+    className?: string;
+    density?: Density;
+    id?: string;
+}
+export interface TabProps extends WithChildren {
+    className?: string;
+}
+export interface TabListProps extends WithChildren {
+    "aria-label"?: string;
+    className?: string;
+}
+export interface TabPanelProps extends WithChildren {
+    className?: string;
+}
+export interface TabsProps extends WithChildren {
+    className?: string;
+    density?: Density;
+    onChange?: (tabIndex: number) => void;
+    defaultTab?: number;
+}

package/build/cjs/components/tag/Tag.cjs.map

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

package/build/cjs/components/tag/Tag.d.cts

@@ -1,8 +1,5 @@
-import { default as React, HTMLAttributes } from 'react';
-import { Density } from '../../core/types.cjs';
-export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
-    density?: Density;
-}
+import { default as React } from 'react';
+import { TagProps } from './types.cjs';
 export declare const Tag: React.FC<TagProps>;
 export declare const InfoTag: React.FC<TagProps>;
 export declare const ErrorTag: React.FC<TagProps>;

package/build/cjs/components/tag/index.d.cts

@@ -1 +1,2 @@
-export { Tag, InfoTag, ErrorTag, WarningTag, SuccessTag, type TagProps, } from './Tag.cjs';
+export { Tag, InfoTag, ErrorTag, WarningTag, SuccessTag } from './Tag.cjs';
+export { type TagProps } from './types.cjs';

package/build/cjs/components/tag/types.cjs

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=types.cjs.map

package/build/cjs/components/tag/types.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

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

@@ -0,0 +1,5 @@
+import { HTMLAttributes } from 'react';
+import { Density } from '../../core/types.cjs';
+export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
+    density?: Density;
+}