@fremtind/jokul 0.62.3 → 0.62.5

package/build/cjs/components/link/Link.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("../../../clsx-E3yX_9sL.cjs"),r=require("react"),s=require("../icon/icons/OpenInNewIcon.cjs"),c=r.forwardRef((function(c,i){const{external:a=!1,className:l="",children:t,as:o="a",...d}=c,j=o,u=r.useId();return e.jsxs(j,{ref:i,className:n.clsx("jkl-link",l,{}),"aria-describedby":a?u:void 0,...d,children:[e.jsx("span",{className:"jkl-link__content",children:t}),(a||"_blank"===d.target)&&e.jsx(s.OpenInNewIcon,{variant:"small",className:"jkl-link__icon"}),a&&e.jsx("span",{hidden:!0,id:u,children:"Ekstern lenke"})]})}));exports.Link=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../../../clsx-E3yX_9sL.cjs"),n=require("react"),s=n.forwardRef((function(s,l){const{external:t=!1,className:a="",children:i,as:c="a",...d}=s,o=c,k=n.useId();return e.jsxs(o,{ref:l,className:r.clsx("jkl-link",a,{"jkl-link--external":t}),"aria-describedby":t?k:void 0,...d,children:[e.jsx("span",{className:"jkl-link__content",children:i}),(t||"_blank"===d.target)&&e.jsx("span",{hidden:!0,id:k,children:"Ekstern lenke"})]})}));exports.Link=s;
 //# sourceMappingURL=Link.cjs.map

package/build/cjs/components/link/Link.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Link.cjs","sources":["../../../../src/components/link/Link.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport React, { useId } from \"react\";\nimport { PolymorphicRef } from \"../../utilities/polymorphism/polymorphism.js\";\nimport { OpenInNewIcon } from \"../icon/icons/OpenInNewIcon.js\";\nimport { LinkProps } from \"./types.js\";\n\ntype LinkComponent = <ElementType extends React.ElementType = \"a\">(\n    props: LinkProps<ElementType>,\n) => React.ReactElement | null;\n\nexport const Link = React.forwardRef(function Link<\n    ElementType extends React.ElementType = \"a\",\n>(props: LinkProps<ElementType>, ref?: PolymorphicRef<ElementType>) {\n    const {\n        external = false,\n        className = \"\",\n        children,\n        as = \"a\",\n        ...rest\n    } = props;\n    const Component = as;\n\n    const srId = useId();\n\n    return (\n        <Component\n            ref={ref}\n            className={clsx(\"jkl-link\", className, {})}\n            aria-describedby={external ? srId : undefined}\n            {...rest}\n        >\n            <span className=\"jkl-link__content\">{children}</span>\n            {(external || rest.target === \"_blank\") && (\n                <OpenInNewIcon variant=\"small\" className=\"jkl-link__icon\" />\n            )}\n            {external && (\n                <span hidden={true} id={srId}>\n                    Ekstern lenke\n                </span>\n            )}\n        </Component>\n    );\n}) as LinkComponent;\n"],"names":["Link","React","forwardRef","props","ref","external","className","children","as","rest","Component","srId","useId","jsxs","clsx","jsx","target","OpenInNewIcon","variant","hidden","id"],"mappings":"6NAUaA,EAAOC,EAAMC,YAAW,SAEnCC,EAA+BC,GACvB,MACFC,SAAAA,GAAW,EACXC,UAAAA,EAAY,GACZC,SAAAA,EACAC,GAAAA,EAAK,OACFC,GACHN,EACEO,EAAYF,EAEZG,EAAOC,EAAAA,QAGT,OAAAC,EAAAA,KAACH,EAAA,CACGN,IAAAA,EACAE,UAAWQ,EAAAA,KAAK,WAAYR,EAAW,CAAA,GACvC,mBAAkBD,EAAWM,OAAO,KAChCF,EAEJF,SAAA,CAACQ,EAAAA,IAAA,OAAA,CAAKT,UAAU,oBAAqBC,SAAAA,KACnCF,GAA4B,WAAhBI,EAAKO,eACdC,gBAAc,CAAAC,QAAQ,QAAQZ,UAAU,mBAE5CD,GACIU,EAAAA,IAAA,OAAA,CAAKI,QAAQ,EAAMC,GAAIT,EAAMJ,SAE9B,oBAIhB"}
+{"version":3,"file":"Link.cjs","sources":["../../../../src/components/link/Link.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport React, { useId } from \"react\";\nimport { PolymorphicRef } from \"../../utilities/polymorphism/polymorphism.js\";\nimport { LinkProps } from \"./types.js\";\n\ntype LinkComponent = <ElementType extends React.ElementType = \"a\">(\n    props: LinkProps<ElementType>,\n) => React.ReactElement | null;\n\nexport const Link = React.forwardRef(function Link<\n    ElementType extends React.ElementType = \"a\",\n>(props: LinkProps<ElementType>, ref?: PolymorphicRef<ElementType>) {\n    const {\n        external = false,\n        className = \"\",\n        children,\n        as = \"a\",\n        ...rest\n    } = props;\n    const Component = as;\n\n    const srId = useId();\n\n    return (\n        <Component\n            ref={ref}\n            className={clsx(\"jkl-link\", className, {\n                \"jkl-link--external\": external,\n            })}\n            aria-describedby={external ? srId : undefined}\n            {...rest}\n        >\n            <span className=\"jkl-link__content\">{children}</span>\n            {(external || rest.target === \"_blank\") && (\n                <span hidden={true} id={srId}>\n                    Ekstern lenke\n                </span>\n            )}\n        </Component>\n    );\n}) as LinkComponent;\n"],"names":["Link","React","forwardRef","props","ref","external","className","children","as","rest","Component","srId","useId","jsxs","clsx","jsx","target","hidden","id"],"mappings":"gLASaA,EAAOC,EAAMC,YAAW,SAEnCC,EAA+BC,GACvB,MACFC,SAAAA,GAAW,EACXC,UAAAA,EAAY,GACZC,SAAAA,EACAC,GAAAA,EAAK,OACFC,GACHN,EACEO,EAAYF,EAEZG,EAAOC,EAAAA,QAGT,OAAAC,EAAAA,KAACH,EAAA,CACGN,IAAAA,EACAE,UAAWQ,EAAAA,KAAK,WAAYR,EAAW,CACnC,qBAAsBD,IAE1B,mBAAkBA,EAAWM,OAAO,KAChCF,EAEJF,SAAA,CAACQ,EAAAA,IAAA,OAAA,CAAKT,UAAU,oBAAqBC,SAAAA,KACnCF,GAA4B,WAAhBI,EAAKO,SACfD,EAAAA,IAAC,QAAKE,QAAQ,EAAMC,GAAIP,EAAMJ,SAE9B,oBAIhB"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../../clsx-E3yX_9sL.cjs"),n=require("react"),r=require("./tabsContext.cjs");exports.TabList=({children:l,className:i,...s})=>{const{activeIndex:c,setActiveIndex:o,tabIDs:a,tabPanelIDs:u,...d}=s,{density:f}=r.useTabsContext(),[b,v]=n.useState(),[g,m]=n.useState(),x=n.useRef(null),p=n.useRef(null);n.useEffect((()=>{x.current&&v(x.current.getBoundingClientRect()),p.current&&m(p.current.getBoundingClientRect())}),[c,f]);const C=n.useCallback((e=>{var t,n,r;if("ArrowLeft"===e.key){const r=e.currentTarget,l=e.currentTarget.previousSibling;l?l.focus():(null==(n=null==(t=r.parentElement)?void 0:t.lastChild)?void 0:n.previousSibling).focus()}if("ArrowRight"===e.key){const t=e.currentTarget,n=e.currentTarget.nextSibling;n&&"BUTTON"===n.nodeName?n.focus():(null==(r=t.parentElement)?void 0:r.firstChild).focus()}}),[]);return e.jsxs("div",{role:"tablist",ref:x,...d,className:t.clsx("jkl-tablist",i),children:[n.Children.map(l,((e,t)=>{const r=c===t;return n.isValidElement(e)?n.cloneElement(e,{onKeyDown:C,tabIndex:r?void 0:-1,ref:r?p:void 0,onClick:()=>o(t),"aria-selected":r,"aria-controls":u[t],id:a[t]}):null})),e.jsx("span",{className:"jkl-tablist__indicator",style:{left:((null==g?void 0:g.left)||0)-((null==b?void 0:b.left)||0),bottom:-1,width:((null==g?void 0:g.width)||0)-("compact"===f?32:38)}})]})};
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../../clsx-E3yX_9sL.cjs"),n=require("react"),r=require("./tabsContext.cjs");exports.TabList=({children:l,className:i,...s})=>{const{activeIndex:c,setActiveIndex:o,tabIDs:a,tabPanelIDs:u,...d}=s,{density:f}=r.useTabsContext(),[b,v]=n.useState(),[g,m]=n.useState(),x=n.useRef(null),p=n.useRef(null);n.useEffect((()=>{x.current&&v(x.current.getBoundingClientRect()),p.current&&m(p.current.getBoundingClientRect())}),[c,f]);const C=n.useCallback((e=>{var t,n,r;if("ArrowLeft"===e.key){const r=e.currentTarget,l=e.currentTarget.previousSibling;l?l.focus():(null==(n=null==(t=r.parentElement)?void 0:t.lastChild)?void 0:n.previousSibling).focus()}if("ArrowRight"===e.key){const t=e.currentTarget,n=e.currentTarget.nextSibling;n&&"BUTTON"===n.nodeName?n.focus():(null==(r=t.parentElement)?void 0:r.firstChild).focus()}}),[]);return e.jsxs("div",{role:"tablist",ref:x,...d,className:t.clsx("jkl-tablist",i),children:[n.Children.map(l,((e,t)=>{const r=c===t;return n.isValidElement(e)?n.cloneElement(e,{onKeyDown:C,tabIndex:r?void 0:-1,ref:r?p:void 0,onClick:()=>o(t),"aria-selected":r,"aria-controls":u[t],id:a[t]}):null})),e.jsx("span",{className:"jkl-tablist__indicator",style:{left:((null==g?void 0:g.left)||0)-((null==b?void 0:b.left)||0),bottom:-1,width:((null==g?void 0:g.width)||0)-("compact"===f?24:38)}})]})};
 //# sourceMappingURL=TabList.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"TabList.cjs","sources":["../../../../src/components/tabs/TabList.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useCallback, 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"}
+{"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\" ? 24 : 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/stories/Tabs.stories.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime");;/* empty css                            */const a=require("../Tab.cjs"),r=require("../TabList.cjs"),s=require("../TabPanel.cjs"),l=require("../Tabs.cjs"),t={title:"Komponenter/Tabs/Tabs",component:l.Tabs,subcomponents:{TabList:r.TabList,TabPanel:s.TabPanel,Tab:a.Tab},argTypes:{defaultTab:{control:"number",table:{defaultValue:{summary:void 0}}}},tags:["autodocs"]},i={name:"Tabs",args:{children:e.jsx("p",{})},render:t=>e.jsxs(l.Tabs,{...t,children:[e.jsxs(r.TabList,{"aria-label":"Avtale-filter",children:[e.jsx(a.Tab,{children:"Alle avtaler"}),e.jsx(a.Tab,{children:"NICE"}),e.jsx(a.Tab,{children:"Prolife"})]}),e.jsx(s.TabPanel,{children:"Alle avtaler"}),e.jsx(s.TabPanel,{children:"NICE-avtaler"}),e.jsx(s.TabPanel,{children:"Prolife-avtaler"})]})};exports.TabsStory=i,exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime");;/* empty css                            */const a=require("../Tab.cjs"),r=require("../TabList.cjs"),s=require("../TabPanel.cjs"),l=require("../Tabs.cjs"),t={title:"Komponenter/Tabs/Tabs",component:l.Tabs,subcomponents:{TabList:r.TabList,TabPanel:s.TabPanel,Tab:a.Tab},argTypes:{defaultTab:{control:"number",table:{defaultValue:{summary:void 0}}}},tags:["autodocs"]},i={name:"Tabs",args:{children:e.jsx("p",{})},render:t=>e.jsx("div",{style:{maxWidth:"300px"},children:e.jsxs(l.Tabs,{...t,children:[e.jsxs(r.TabList,{"aria-label":"Avtale-filter",children:[e.jsx(a.Tab,{children:"Alle avtaler"}),e.jsx(a.Tab,{children:"NICE"}),e.jsx(a.Tab,{children:"Prolife"}),e.jsx(a.Tab,{children:"Paris"})]}),e.jsx(s.TabPanel,{children:"Alle avtaler"}),e.jsx(s.TabPanel,{children:"NICE-avtaler"}),e.jsx(s.TabPanel,{children:"Prolife-avtaler"}),e.jsx(s.TabPanel,{children:"Paris-avtaler"})]})})};exports.TabsStory=i,exports.default=t;
 //# sourceMappingURL=Tabs.stories.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.stories.cjs","sources":["../../../../../src/components/tabs/stories/Tabs.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport React from \"react\";\nimport \"../styles/_index.scss\";\nimport { Tab } from \"../Tab.js\";\nimport { TabList } from \"../TabList.js\";\nimport { TabPanel } from \"../TabPanel.js\";\nimport { Tabs } from \"../Tabs.js\";\n\nconst meta = {\n    title: \"Komponenter/Tabs/Tabs\",\n    component: Tabs,\n    subcomponents: {\n        TabList,\n        TabPanel,\n        Tab,\n    },\n    argTypes: {\n        defaultTab: {\n            control: \"number\",\n            table: {\n                defaultValue: {\n                    summary: undefined,\n                },\n            },\n        },\n    },\n    tags: [\"autodocs\"],\n} satisfies Meta<typeof Tabs>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const TabsStory: Story = {\n    name: \"Tabs\",\n    args: {\n        children: <p></p>,\n    },\n    render: (args) => (\n        <Tabs {...args}>\n            <TabList aria-label=\"Avtale-filter\">\n                <Tab>Alle avtaler</Tab>\n                <Tab>NICE</Tab>\n                <Tab>Prolife</Tab>\n            </TabList>\n\n            <TabPanel>Alle avtaler</TabPanel>\n\n            <TabPanel>NICE-avtaler</TabPanel>\n\n            <TabPanel>Prolife-avtaler</TabPanel>\n        </Tabs>\n    ),\n};\n"],"names":["meta","title","component","Tabs","subcomponents","TabList","TabPanel","Tab","argTypes","defaultTab","control","table","defaultValue","summary","tags","TabsStory","name","args","children","render","jsxs","jsx"],"mappings":"4SAQMA,EAAO,CACTC,MAAO,wBACPC,UAAWC,EAAAA,KACXC,cAAe,CAAAC,QACXA,EAAAA,QAAAC,SACAA,EAAAA,SAAAC,IACAA,EAAAA,KAEJC,SAAU,CACNC,WAAY,CACRC,QAAS,SACTC,MAAO,CACHC,aAAc,CACVC,aAAS,MAKzBC,KAAM,CAAC,aAMEC,EAAmB,CAC5BC,KAAM,OACNC,KAAM,CACFC,eAAW,IAAE,KAEjBC,OAASF,GACJG,EAAAA,KAAAjB,EAAAA,KAAA,IAASc,EACNC,SAAA,CAACE,EAAAA,KAAAf,EAAAA,QAAA,CAAQ,aAAW,gBAChBa,SAAA,CAAAG,EAAAA,IAACd,OAAIW,SAAY,iBACjBG,EAAAA,IAACd,OAAIW,SAAI,SACTG,EAAAA,IAACd,OAAIW,SAAO,eAGhBG,EAAAA,IAACf,YAASY,SAAY,iBAEtBG,EAAAA,IAACf,YAASY,SAAY,iBAEtBG,EAAAA,IAACf,YAASY,SAAe"}
+{"version":3,"file":"Tabs.stories.cjs","sources":["../../../../../src/components/tabs/stories/Tabs.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport React from \"react\";\nimport \"../styles/_index.scss\";\nimport { Tab } from \"../Tab.js\";\nimport { TabList } from \"../TabList.js\";\nimport { TabPanel } from \"../TabPanel.js\";\nimport { Tabs } from \"../Tabs.js\";\n\nconst meta = {\n    title: \"Komponenter/Tabs/Tabs\",\n    component: Tabs,\n    subcomponents: {\n        TabList,\n        TabPanel,\n        Tab,\n    },\n    argTypes: {\n        defaultTab: {\n            control: \"number\",\n            table: {\n                defaultValue: {\n                    summary: undefined,\n                },\n            },\n        },\n    },\n    tags: [\"autodocs\"],\n} satisfies Meta<typeof Tabs>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const TabsStory: Story = {\n    name: \"Tabs\",\n    args: {\n        children: <p></p>,\n    },\n    render: (args) => (\n        <div style={{ maxWidth: \"300px\" }}>\n            <Tabs {...args}>\n                <TabList aria-label=\"Avtale-filter\">\n                    <Tab>Alle avtaler</Tab>\n                    <Tab>NICE</Tab>\n                    <Tab>Prolife</Tab>\n                    <Tab>Paris</Tab>\n                </TabList>\n\n                <TabPanel>Alle avtaler</TabPanel>\n\n                <TabPanel>NICE-avtaler</TabPanel>\n\n                <TabPanel>Prolife-avtaler</TabPanel>\n\n                <TabPanel>Paris-avtaler</TabPanel>\n            </Tabs>\n        </div>\n    ),\n};\n"],"names":["meta","title","component","Tabs","subcomponents","TabList","TabPanel","Tab","argTypes","defaultTab","control","table","defaultValue","summary","tags","TabsStory","name","args","children","render","jsx","style","maxWidth","jsxs"],"mappings":"4SAQMA,EAAO,CACTC,MAAO,wBACPC,UAAWC,EAAAA,KACXC,cAAe,CAAAC,QACXA,EAAAA,QAAAC,SACAA,EAAAA,SAAAC,IACAA,EAAAA,KAEJC,SAAU,CACNC,WAAY,CACRC,QAAS,SACTC,MAAO,CACHC,aAAc,CACVC,aAAS,MAKzBC,KAAM,CAAC,aAMEC,EAAmB,CAC5BC,KAAM,OACNC,KAAM,CACFC,eAAW,IAAE,KAEjBC,OAASF,GACLG,EAAAA,IAAC,MAAI,CAAAC,MAAO,CAAEC,SAAU,SACpBJ,SAACK,EAAAA,KAAApB,EAAAA,KAAA,IAASc,EACNC,SAAA,CAACK,EAAAA,KAAAlB,EAAAA,QAAA,CAAQ,aAAW,gBAChBa,SAAA,CAAAE,EAAAA,IAACb,OAAIW,SAAY,iBACjBE,EAAAA,IAACb,OAAIW,SAAI,SACTE,EAAAA,IAACb,OAAIW,SAAO,YACZE,EAAAA,IAACb,OAAIW,SAAK,aAGdE,EAAAA,IAACd,YAASY,SAAY,iBAEtBE,EAAAA,IAACd,YAASY,SAAY,iBAEtBE,EAAAA,IAACd,YAASY,SAAe,oBAEzBE,EAAAA,IAACd,YAASY,SAAa"}

package/build/es/components/link/Link.js

@@ -1,2 +1,2 @@
-import{jsxs as n,jsx as s}from"react/jsx-runtime";import{c as e}from"../../../clsx-BeLtu-UY.js";import a,{useId as r}from"react";import{OpenInNewIcon as i}from"../icon/icons/OpenInNewIcon.js";const c=a.forwardRef((function(a,c){const{external:l=!1,className:o="",children:t,as:m="a",...d}=a,k=m,p=r();return n(k,{ref:c,className:e("jkl-link",o,{}),"aria-describedby":l?p:void 0,...d,children:[s("span",{className:"jkl-link__content",children:t}),(l||"_blank"===d.target)&&s(i,{variant:"small",className:"jkl-link__icon"}),l&&s("span",{hidden:!0,id:p,children:"Ekstern lenke"})]})}));export{c as Link};
+import{jsxs as e,jsx as r}from"react/jsx-runtime";import{c as s}from"../../../clsx-BeLtu-UY.js";import a,{useId as n}from"react";const i=a.forwardRef((function(a,i){const{external:l=!1,className:t="",children:c,as:o="a",...d}=a,k=o,m=n();return e(k,{ref:i,className:s("jkl-link",t,{"jkl-link--external":l}),"aria-describedby":l?m:void 0,...d,children:[r("span",{className:"jkl-link__content",children:c}),(l||"_blank"===d.target)&&r("span",{hidden:!0,id:m,children:"Ekstern lenke"})]})}));export{i as Link};
 //# sourceMappingURL=Link.js.map

package/build/es/components/link/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","sources":["../../../../src/components/link/Link.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport React, { useId } from \"react\";\nimport { PolymorphicRef } from \"../../utilities/polymorphism/polymorphism.js\";\nimport { OpenInNewIcon } from \"../icon/icons/OpenInNewIcon.js\";\nimport { LinkProps } from \"./types.js\";\n\ntype LinkComponent = <ElementType extends React.ElementType = \"a\">(\n    props: LinkProps<ElementType>,\n) => React.ReactElement | null;\n\nexport const Link = React.forwardRef(function Link<\n    ElementType extends React.ElementType = \"a\",\n>(props: LinkProps<ElementType>, ref?: PolymorphicRef<ElementType>) {\n    const {\n        external = false,\n        className = \"\",\n        children,\n        as = \"a\",\n        ...rest\n    } = props;\n    const Component = as;\n\n    const srId = useId();\n\n    return (\n        <Component\n            ref={ref}\n            className={clsx(\"jkl-link\", className, {})}\n            aria-describedby={external ? srId : undefined}\n            {...rest}\n        >\n            <span className=\"jkl-link__content\">{children}</span>\n            {(external || rest.target === \"_blank\") && (\n                <OpenInNewIcon variant=\"small\" className=\"jkl-link__icon\" />\n            )}\n            {external && (\n                <span hidden={true} id={srId}>\n                    Ekstern lenke\n                </span>\n            )}\n        </Component>\n    );\n}) as LinkComponent;\n"],"names":["Link","React","forwardRef","props","ref","external","className","children","as","rest","Component","srId","useId","jsxs","clsx","jsx","target","OpenInNewIcon","variant","hidden","id"],"mappings":"gMAUO,MAAMA,EAAOC,EAAMC,YAAW,SAEnCC,EAA+BC,GACvB,MACFC,SAAAA,GAAW,EACXC,UAAAA,EAAY,GACZC,SAAAA,EACAC,GAAAA,EAAK,OACFC,GACHN,EACEO,EAAYF,EAEZG,EAAOC,IAGT,OAAAC,EAACH,EAAA,CACGN,IAAAA,EACAE,UAAWQ,EAAK,WAAYR,EAAW,CAAA,GACvC,mBAAkBD,EAAWM,OAAO,KAChCF,EAEJF,SAAA,CAACQ,EAAA,OAAA,CAAKT,UAAU,oBAAqBC,SAAAA,KACnCF,GAA4B,WAAhBI,EAAKO,WACdC,EAAc,CAAAC,QAAQ,QAAQZ,UAAU,mBAE5CD,GACIU,EAAA,OAAA,CAAKI,QAAQ,EAAMC,GAAIT,EAAMJ,SAE9B,oBAIhB"}
+{"version":3,"file":"Link.js","sources":["../../../../src/components/link/Link.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport React, { useId } from \"react\";\nimport { PolymorphicRef } from \"../../utilities/polymorphism/polymorphism.js\";\nimport { LinkProps } from \"./types.js\";\n\ntype LinkComponent = <ElementType extends React.ElementType = \"a\">(\n    props: LinkProps<ElementType>,\n) => React.ReactElement | null;\n\nexport const Link = React.forwardRef(function Link<\n    ElementType extends React.ElementType = \"a\",\n>(props: LinkProps<ElementType>, ref?: PolymorphicRef<ElementType>) {\n    const {\n        external = false,\n        className = \"\",\n        children,\n        as = \"a\",\n        ...rest\n    } = props;\n    const Component = as;\n\n    const srId = useId();\n\n    return (\n        <Component\n            ref={ref}\n            className={clsx(\"jkl-link\", className, {\n                \"jkl-link--external\": external,\n            })}\n            aria-describedby={external ? srId : undefined}\n            {...rest}\n        >\n            <span className=\"jkl-link__content\">{children}</span>\n            {(external || rest.target === \"_blank\") && (\n                <span hidden={true} id={srId}>\n                    Ekstern lenke\n                </span>\n            )}\n        </Component>\n    );\n}) as LinkComponent;\n"],"names":["Link","React","forwardRef","props","ref","external","className","children","as","rest","Component","srId","useId","jsxs","clsx","jsx","target","hidden","id"],"mappings":"iIASO,MAAMA,EAAOC,EAAMC,YAAW,SAEnCC,EAA+BC,GACvB,MACFC,SAAAA,GAAW,EACXC,UAAAA,EAAY,GACZC,SAAAA,EACAC,GAAAA,EAAK,OACFC,GACHN,EACEO,EAAYF,EAEZG,EAAOC,IAGT,OAAAC,EAACH,EAAA,CACGN,IAAAA,EACAE,UAAWQ,EAAK,WAAYR,EAAW,CACnC,qBAAsBD,IAE1B,mBAAkBA,EAAWM,OAAO,KAChCF,EAEJF,SAAA,CAACQ,EAAA,OAAA,CAAKT,UAAU,oBAAqBC,SAAAA,KACnCF,GAA4B,WAAhBI,EAAKO,SACfD,EAAC,QAAKE,QAAQ,EAAMC,GAAIP,EAAMJ,SAE9B,oBAIhB"}

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

@@ -1,2 +1,2 @@
-import{jsxs as t,jsx as e}from"react/jsx-runtime";import{c as n}from"../../../clsx-BeLtu-UY.js";import r,{useState as s,useRef as l,useEffect as i,useCallback as a}from"react";import{useTabsContext as o}from"./tabsContext.js";const c=({children:c,className:u,...d})=>{const{activeIndex:f,setActiveIndex:m,tabIDs:b,tabPanelIDs:v,...g}=d,{density:p}=o(),[x,C]=s(),[h,T]=s(),j=l(null),k=l(null);i((()=>{j.current&&C(j.current.getBoundingClientRect()),k.current&&T(k.current.getBoundingClientRect())}),[f,p]);const w=a((t=>{var e,n,r;if("ArrowLeft"===t.key){const r=t.currentTarget,s=t.currentTarget.previousSibling;s?s.focus():(null==(n=null==(e=r.parentElement)?void 0:e.lastChild)?void 0:n.previousSibling).focus()}if("ArrowRight"===t.key){const e=t.currentTarget,n=t.currentTarget.nextSibling;n&&"BUTTON"===n.nodeName?n.focus():(null==(r=e.parentElement)?void 0:r.firstChild).focus()}}),[]);return t("div",{role:"tablist",ref:j,...g,className:n("jkl-tablist",u),children:[r.Children.map(c,((t,e)=>{const n=f===e;return r.isValidElement(t)?r.cloneElement(t,{onKeyDown:w,tabIndex:n?void 0:-1,ref:n?k:void 0,onClick:()=>m(e),"aria-selected":n,"aria-controls":v[e],id:b[e]}):null})),e("span",{className:"jkl-tablist__indicator",style:{left:((null==h?void 0:h.left)||0)-((null==x?void 0:x.left)||0),bottom:-1,width:((null==h?void 0:h.width)||0)-("compact"===p?32:38)}})]})};export{c as TabList};
+import{jsxs as t,jsx as e}from"react/jsx-runtime";import{c as n}from"../../../clsx-BeLtu-UY.js";import r,{useState as s,useRef as l,useEffect as i,useCallback as a}from"react";import{useTabsContext as o}from"./tabsContext.js";const c=({children:c,className:u,...d})=>{const{activeIndex:f,setActiveIndex:m,tabIDs:b,tabPanelIDs:v,...g}=d,{density:p}=o(),[x,C]=s(),[h,T]=s(),j=l(null),k=l(null);i((()=>{j.current&&C(j.current.getBoundingClientRect()),k.current&&T(k.current.getBoundingClientRect())}),[f,p]);const w=a((t=>{var e,n,r;if("ArrowLeft"===t.key){const r=t.currentTarget,s=t.currentTarget.previousSibling;s?s.focus():(null==(n=null==(e=r.parentElement)?void 0:e.lastChild)?void 0:n.previousSibling).focus()}if("ArrowRight"===t.key){const e=t.currentTarget,n=t.currentTarget.nextSibling;n&&"BUTTON"===n.nodeName?n.focus():(null==(r=e.parentElement)?void 0:r.firstChild).focus()}}),[]);return t("div",{role:"tablist",ref:j,...g,className:n("jkl-tablist",u),children:[r.Children.map(c,((t,e)=>{const n=f===e;return r.isValidElement(t)?r.cloneElement(t,{onKeyDown:w,tabIndex:n?void 0:-1,ref:n?k:void 0,onClick:()=>m(e),"aria-selected":n,"aria-controls":v[e],id:b[e]}):null})),e("span",{className:"jkl-tablist__indicator",style:{left:((null==h?void 0:h.left)||0)-((null==x?void 0:x.left)||0),bottom:-1,width:((null==h?void 0:h.width)||0)-("compact"===p?24:38)}})]})};export{c as TabList};
 //# sourceMappingURL=TabList.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TabList.js","sources":["../../../../src/components/tabs/TabList.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useCallback, 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":["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":"kOAiBO,MAAMA,EAAU,EAAGC,SAAAA,EAAUC,UAAAA,KAAcC,MAE9C,MAAQC,YAAAA,EAAaC,eAAAA,EAAgBC,OAAAA,EAAQC,YAAAA,KAAgBC,GACzDL,GACIM,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,IAEjB,MAAMa,EAAiBC,GAClBC,cACOA,GAAc,cAAdA,EAAMC,IAAqB,CAC3B,MAAML,EAAUI,EAAME,cAChBC,EAAOH,EAAME,cAAcE,gBAE7BD,EACCA,EAAqBE,SAGlB,OAAAC,EAAA,OAAAC,EAAAX,EAAQY,oBAAR,EAAAD,EAAuBE,gBAAvBH,EAAAA,EACMF,iBACRC,OAEV,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,IAEJ,IAIA,OAAAU,EAAC,MAAA,CACGC,KAAK,UACLC,IAAKzB,KACDR,EACJN,UAAWwC,EAAK,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,IAAA,IAGVO,EAAC,OAAA,CACGpD,UAAU,yBACVqD,MAAO,CACHC,OAAO,MAAA1C,OAAAA,EAAAA,EAAY0C,OAAQ,KAAM,MAAA7C,OAAAA,EAAAA,EAAU6C,OAAQ,GACnDC,QAAQ,EACRC,QACK,MAAA5C,OAAAA,EAAAA,EAAY4C,QAAS,IACT,YAAZjD,EAAwB,GAAK,SAE1C"}
+{"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 { 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\" ? 24 : 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":"kOAiBO,MAAMA,EAAU,EAAGC,SAAAA,EAAUC,UAAAA,KAAcC,MAE9C,MAAQC,YAAAA,EAAaC,eAAAA,EAAgBC,OAAAA,EAAQC,YAAAA,KAAgBC,GACzDL,GACIM,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,IAEjB,MAAMa,EAAiBC,GAClBC,cACOA,GAAc,cAAdA,EAAMC,IAAqB,CAC3B,MAAML,EAAUI,EAAME,cAChBC,EAAOH,EAAME,cAAcE,gBAE7BD,EACCA,EAAqBE,SAGlB,OAAAC,EAAA,OAAAC,EAAAX,EAAQY,oBAAR,EAAAD,EAAuBE,gBAAvBH,EAAAA,EACMF,iBACRC,OAEV,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,IAEJ,IAIA,OAAAU,EAAC,MAAA,CACGC,KAAK,UACLC,IAAKzB,KACDR,EACJN,UAAWwC,EAAK,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,IAAA,IAGVO,EAAC,OAAA,CACGpD,UAAU,yBACVqD,MAAO,CACHC,OAAO,MAAA1C,OAAAA,EAAAA,EAAY0C,OAAQ,KAAM,MAAA7C,OAAAA,EAAAA,EAAU6C,OAAQ,GACnDC,QAAQ,EACRC,QACK,MAAA5C,OAAAA,EAAAA,EAAY4C,QAAS,IACT,YAAZjD,EAAwB,GAAK,SAE1C"}

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

@@ -1,2 +1,2 @@
-import{jsx as a,jsxs as e}from"react/jsx-runtime";/* empty css                         */import{Tab as r}from"../Tab.js";import{TabList as s}from"../TabList.js";import{TabPanel as l}from"../TabPanel.js";import{Tabs as t}from"../Tabs.js";const o={title:"Komponenter/Tabs/Tabs",component:t,subcomponents:{TabList:s,TabPanel:l,Tab:r},argTypes:{defaultTab:{control:"number",table:{defaultValue:{summary:void 0}}}},tags:["autodocs"]},i={name:"Tabs",args:{children:a("p",{})},render:o=>e(t,{...o,children:[e(s,{"aria-label":"Avtale-filter",children:[a(r,{children:"Alle avtaler"}),a(r,{children:"NICE"}),a(r,{children:"Prolife"})]}),a(l,{children:"Alle avtaler"}),a(l,{children:"NICE-avtaler"}),a(l,{children:"Prolife-avtaler"})]})};export{i as TabsStory,o as default};
+import{jsx as a,jsxs as e}from"react/jsx-runtime";/* empty css                         */import{Tab as r}from"../Tab.js";import{TabList as l}from"../TabList.js";import{TabPanel as s}from"../TabPanel.js";import{Tabs as t}from"../Tabs.js";const i={title:"Komponenter/Tabs/Tabs",component:t,subcomponents:{TabList:l,TabPanel:s,Tab:r},argTypes:{defaultTab:{control:"number",table:{defaultValue:{summary:void 0}}}},tags:["autodocs"]},n={name:"Tabs",args:{children:a("p",{})},render:i=>a("div",{style:{maxWidth:"300px"},children:e(t,{...i,children:[e(l,{"aria-label":"Avtale-filter",children:[a(r,{children:"Alle avtaler"}),a(r,{children:"NICE"}),a(r,{children:"Prolife"}),a(r,{children:"Paris"})]}),a(s,{children:"Alle avtaler"}),a(s,{children:"NICE-avtaler"}),a(s,{children:"Prolife-avtaler"}),a(s,{children:"Paris-avtaler"})]})})};export{n as TabsStory,i as default};
 //# sourceMappingURL=Tabs.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.stories.js","sources":["../../../../../src/components/tabs/stories/Tabs.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport React from \"react\";\nimport \"../styles/_index.scss\";\nimport { Tab } from \"../Tab.js\";\nimport { TabList } from \"../TabList.js\";\nimport { TabPanel } from \"../TabPanel.js\";\nimport { Tabs } from \"../Tabs.js\";\n\nconst meta = {\n    title: \"Komponenter/Tabs/Tabs\",\n    component: Tabs,\n    subcomponents: {\n        TabList,\n        TabPanel,\n        Tab,\n    },\n    argTypes: {\n        defaultTab: {\n            control: \"number\",\n            table: {\n                defaultValue: {\n                    summary: undefined,\n                },\n            },\n        },\n    },\n    tags: [\"autodocs\"],\n} satisfies Meta<typeof Tabs>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const TabsStory: Story = {\n    name: \"Tabs\",\n    args: {\n        children: <p></p>,\n    },\n    render: (args) => (\n        <Tabs {...args}>\n            <TabList aria-label=\"Avtale-filter\">\n                <Tab>Alle avtaler</Tab>\n                <Tab>NICE</Tab>\n                <Tab>Prolife</Tab>\n            </TabList>\n\n            <TabPanel>Alle avtaler</TabPanel>\n\n            <TabPanel>NICE-avtaler</TabPanel>\n\n            <TabPanel>Prolife-avtaler</TabPanel>\n        </Tabs>\n    ),\n};\n"],"names":["meta","title","component","Tabs","subcomponents","TabList","TabPanel","Tab","argTypes","defaultTab","control","table","defaultValue","summary","tags","TabsStory","name","args","children","render","jsxs","jsx"],"mappings":"6OAQA,MAAMA,EAAO,CACTC,MAAO,wBACPC,UAAWC,EACXC,cAAe,CACXC,QAAAA,EACAC,SAAAA,EACAC,IAAAA,GAEJC,SAAU,CACNC,WAAY,CACRC,QAAS,SACTC,MAAO,CACHC,aAAc,CACVC,aAAS,MAKzBC,KAAM,CAAC,aAMEC,EAAmB,CAC5BC,KAAM,OACNC,KAAM,CACFC,WAAW,IAAE,KAEjBC,OAASF,GACJG,EAAAjB,EAAA,IAASc,EACNC,SAAA,CAACE,EAAAf,EAAA,CAAQ,aAAW,gBAChBa,SAAA,CAAAG,EAACd,GAAIW,SAAY,iBACjBG,EAACd,GAAIW,SAAI,SACTG,EAACd,GAAIW,SAAO,eAGhBG,EAACf,GAASY,SAAY,iBAEtBG,EAACf,GAASY,SAAY,iBAEtBG,EAACf,GAASY,SAAe"}
+{"version":3,"file":"Tabs.stories.js","sources":["../../../../../src/components/tabs/stories/Tabs.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport React from \"react\";\nimport \"../styles/_index.scss\";\nimport { Tab } from \"../Tab.js\";\nimport { TabList } from \"../TabList.js\";\nimport { TabPanel } from \"../TabPanel.js\";\nimport { Tabs } from \"../Tabs.js\";\n\nconst meta = {\n    title: \"Komponenter/Tabs/Tabs\",\n    component: Tabs,\n    subcomponents: {\n        TabList,\n        TabPanel,\n        Tab,\n    },\n    argTypes: {\n        defaultTab: {\n            control: \"number\",\n            table: {\n                defaultValue: {\n                    summary: undefined,\n                },\n            },\n        },\n    },\n    tags: [\"autodocs\"],\n} satisfies Meta<typeof Tabs>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const TabsStory: Story = {\n    name: \"Tabs\",\n    args: {\n        children: <p></p>,\n    },\n    render: (args) => (\n        <div style={{ maxWidth: \"300px\" }}>\n            <Tabs {...args}>\n                <TabList aria-label=\"Avtale-filter\">\n                    <Tab>Alle avtaler</Tab>\n                    <Tab>NICE</Tab>\n                    <Tab>Prolife</Tab>\n                    <Tab>Paris</Tab>\n                </TabList>\n\n                <TabPanel>Alle avtaler</TabPanel>\n\n                <TabPanel>NICE-avtaler</TabPanel>\n\n                <TabPanel>Prolife-avtaler</TabPanel>\n\n                <TabPanel>Paris-avtaler</TabPanel>\n            </Tabs>\n        </div>\n    ),\n};\n"],"names":["meta","title","component","Tabs","subcomponents","TabList","TabPanel","Tab","argTypes","defaultTab","control","table","defaultValue","summary","tags","TabsStory","name","args","children","render","jsx","style","maxWidth","jsxs"],"mappings":"6OAQA,MAAMA,EAAO,CACTC,MAAO,wBACPC,UAAWC,EACXC,cAAe,CACXC,QAAAA,EACAC,SAAAA,EACAC,IAAAA,GAEJC,SAAU,CACNC,WAAY,CACRC,QAAS,SACTC,MAAO,CACHC,aAAc,CACVC,aAAS,MAKzBC,KAAM,CAAC,aAMEC,EAAmB,CAC5BC,KAAM,OACNC,KAAM,CACFC,WAAW,IAAE,KAEjBC,OAASF,GACLG,EAAC,MAAI,CAAAC,MAAO,CAAEC,SAAU,SACpBJ,SAACK,EAAApB,EAAA,IAASc,EACNC,SAAA,CAACK,EAAAlB,EAAA,CAAQ,aAAW,gBAChBa,SAAA,CAAAE,EAACb,GAAIW,SAAY,iBACjBE,EAACb,GAAIW,SAAI,SACTE,EAACb,GAAIW,SAAO,YACZE,EAACb,GAAIW,SAAK,aAGdE,EAACd,GAASY,SAAY,iBAEtBE,EAACd,GAASY,SAAY,iBAEtBE,EAACd,GAASY,SAAe,oBAEzBE,EAACd,GAASY,SAAa"}