@fremtind/jokul 0.64.0 → 0.64.1

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?24:38)}})]})};
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../../../clsx-E3yX_9sL.cjs"),t=require("react");exports.TabList=({children:l,className:n,...i})=>{const{activeIndex:s,setActiveIndex:a,tabIDs:o,tabPanelIDs:c,...u}=i,d=t.useRef(null),f=t.useRef(null),b=t.useCallback((e=>{var r,t,l;if("ArrowLeft"===e.key){const l=e.currentTarget,n=e.currentTarget.previousSibling;n?n.focus():(null==(t=null==(r=l.parentElement)?void 0:r.lastChild)?void 0:t.previousSibling).focus()}if("ArrowRight"===e.key){const r=e.currentTarget,t=e.currentTarget.nextSibling;t&&"BUTTON"===t.nodeName?t.focus():(null==(l=r.parentElement)?void 0:l.firstChild).focus()}}),[]);return e.jsx("div",{role:"tablist",ref:d,...u,className:r.clsx("jkl-tablist",n),children:t.Children.map(l,((e,r)=>{const l=s===r;return t.isValidElement(e)?t.cloneElement(e,{onKeyDown:b,tabIndex:l?void 0:-1,ref:l?f:void 0,onClick:()=>a(r),"aria-selected":l,"aria-controls":c[r],id:o[r]}):null}))})};
 //# 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\" ? 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"}
+{"version":3,"file":"TabList.cjs","sources":["../../../../src/components/tabs/TabList.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useCallback, useRef } from \"react\";\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\n    const tabsRef = useRef<HTMLDivElement>(null);\n    const activeRef = useRef<HTMLButtonElement>(null);\n\n    const keyDownHandler = useCallback(\n        (event: React.KeyboardEvent<HTMLButtonElement>) => {\n            if (event.key === \"ArrowLeft\") {\n                const current = event.currentTarget;\n                const prev = event.currentTarget.previousSibling;\n\n                if (prev) {\n                    (prev as HTMLElement).focus();\n                } else {\n                    (\n                        current.parentElement?.lastChild\n                            ?.previousSibling as HTMLElement\n                    ).focus();\n                }\n            }\n\n            if (event.key === \"ArrowRight\") {\n                const current = event.currentTarget;\n                const next = event.currentTarget.nextSibling;\n\n                // skip the focus indicator element\n                if (next && next.nodeName === \"BUTTON\") {\n                    (next as HTMLElement).focus();\n                } else {\n                    (current.parentElement?.firstChild as HTMLElement).focus();\n                }\n            }\n        },\n        [],\n    );\n\n    return (\n        <div\n            role=\"tablist\"\n            ref={tabsRef}\n            {...rest}\n            className={clsx(\"jkl-tablist\", className)}\n        >\n            {React.Children.map(children, (tab, tabIndex) => {\n                const isActive = activeIndex === tabIndex;\n\n                return React.isValidElement(tab)\n                    ? React.cloneElement<any>(tab, {\n                          onKeyDown: keyDownHandler,\n                          tabIndex: isActive ? undefined : -1,\n                          ref: isActive ? activeRef : undefined,\n                          onClick: () => setActiveIndex(tabIndex),\n                          \"aria-selected\": isActive,\n                          \"aria-controls\": tabPanelIDs[tabIndex],\n                          id: tabIDs[tabIndex],\n                      })\n                    : null;\n            })}\n        </div>\n    );\n};\n"],"names":["children","className","injected","activeIndex","setActiveIndex","tabIDs","tabPanelIDs","rest","tabsRef","useRef","activeRef","keyDownHandler","useCallback","event","key","current","currentTarget","prev","previousSibling","focus","_b","_a","parentElement","lastChild","next","nextSibling","nodeName","_c","firstChild","jsx","role","ref","clsx","Children","map","tab","tabIndex","isActive","React","isValidElement","cloneElement","onKeyDown","onClick","id"],"mappings":"gMAgBuB,EAAGA,SAAAA,EAAUC,UAAAA,KAAcC,MAE9C,MAAQC,YAAAA,EAAaC,eAAAA,EAAgBC,OAAAA,EAAQC,YAAAA,KAAgBC,GACzDL,EAEEM,EAAUC,SAAuB,MACjCC,EAAYD,SAA0B,MAEtCE,EAAiBC,EAAAA,aAClBC,cACO,GAAc,cAAdA,EAAMC,IAAqB,CAC3B,MAAMC,EAAUF,EAAMG,cAChBC,EAAOJ,EAAMG,cAAcE,gBAE7BD,EACCA,EAAqBE,SAGlB,OAAAC,EAAA,OAAAC,EAAAN,EAAQO,oBAAR,EAAAD,EAAuBE,gBAAvB,EAAAH,EACMF,iBACRC,OAEV,CAEI,GAAc,eAAdN,EAAMC,IAAsB,CAC5B,MAAMC,EAAUF,EAAMG,cAChBQ,EAAOX,EAAMG,cAAcS,YAG7BD,GAA0B,WAAlBA,EAAKE,SACZF,EAAqBL,SAErB,OAAAQ,EAAAZ,EAAQO,sBAARK,EAAuBC,YAA2BT,OAE3D,IAEJ,IAIA,OAAAU,EAAAA,IAAC,MAAA,CACGC,KAAK,UACLC,IAAKvB,KACDD,EACJN,UAAW+B,EAAAA,KAAK,cAAe/B,GAE9BD,WAAMiC,SAASC,IAAIlC,GAAU,CAACmC,EAAKC,KAChC,MAAMC,EAAWlC,IAAgBiC,EAEjC,OAAOE,EAAMC,eAAeJ,GACtBG,EAAME,aAAkBL,EAAK,CACzBM,UAAW9B,EACXyB,SAAUC,OAAW,GAAY,EACjCN,IAAKM,EAAW3B,OAAY,EAC5BgC,QAAS,IAAMtC,EAAegC,GAC9B,gBAAiBC,EACjB,gBAAiB/B,EAAY8B,GAC7BO,GAAItC,EAAO+B,KAEf,SACT"}

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?24:38)}})]})};export{c as TabList};
+import{jsx as e}from"react/jsx-runtime";import{c as t}from"../../../clsx-BeLtu-UY.js";import r,{useRef as n,useCallback as l}from"react";const i=({children:i,className:s,...a})=>{const{activeIndex:o,setActiveIndex:c,tabIDs:u,tabPanelIDs:d,...m}=a,f=n(null),v=n(null),b=l((e=>{var t,r,n;if("ArrowLeft"===e.key){const n=e.currentTarget,l=e.currentTarget.previousSibling;l?l.focus():(null==(r=null==(t=n.parentElement)?void 0:t.lastChild)?void 0:r.previousSibling).focus()}if("ArrowRight"===e.key){const t=e.currentTarget,r=e.currentTarget.nextSibling;r&&"BUTTON"===r.nodeName?r.focus():(null==(n=t.parentElement)?void 0:n.firstChild).focus()}}),[]);return e("div",{role:"tablist",ref:f,...m,className:t("jkl-tablist",s),children:r.Children.map(i,((e,t)=>{const n=o===t;return r.isValidElement(e)?r.cloneElement(e,{onKeyDown:b,tabIndex:n?void 0:-1,ref:n?v:void 0,onClick:()=>c(t),"aria-selected":n,"aria-controls":d[t],id:u[t]}):null}))})};export{i as TabList};
 //# 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\" ? 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"}
+{"version":3,"file":"TabList.js","sources":["../../../../src/components/tabs/TabList.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useCallback, useRef } from \"react\";\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\n    const tabsRef = useRef<HTMLDivElement>(null);\n    const activeRef = useRef<HTMLButtonElement>(null);\n\n    const keyDownHandler = useCallback(\n        (event: React.KeyboardEvent<HTMLButtonElement>) => {\n            if (event.key === \"ArrowLeft\") {\n                const current = event.currentTarget;\n                const prev = event.currentTarget.previousSibling;\n\n                if (prev) {\n                    (prev as HTMLElement).focus();\n                } else {\n                    (\n                        current.parentElement?.lastChild\n                            ?.previousSibling as HTMLElement\n                    ).focus();\n                }\n            }\n\n            if (event.key === \"ArrowRight\") {\n                const current = event.currentTarget;\n                const next = event.currentTarget.nextSibling;\n\n                // skip the focus indicator element\n                if (next && next.nodeName === \"BUTTON\") {\n                    (next as HTMLElement).focus();\n                } else {\n                    (current.parentElement?.firstChild as HTMLElement).focus();\n                }\n            }\n        },\n        [],\n    );\n\n    return (\n        <div\n            role=\"tablist\"\n            ref={tabsRef}\n            {...rest}\n            className={clsx(\"jkl-tablist\", className)}\n        >\n            {React.Children.map(children, (tab, tabIndex) => {\n                const isActive = activeIndex === tabIndex;\n\n                return React.isValidElement(tab)\n                    ? React.cloneElement<any>(tab, {\n                          onKeyDown: keyDownHandler,\n                          tabIndex: isActive ? undefined : -1,\n                          ref: isActive ? activeRef : undefined,\n                          onClick: () => setActiveIndex(tabIndex),\n                          \"aria-selected\": isActive,\n                          \"aria-controls\": tabPanelIDs[tabIndex],\n                          id: tabIDs[tabIndex],\n                      })\n                    : null;\n            })}\n        </div>\n    );\n};\n"],"names":["TabList","children","className","injected","activeIndex","setActiveIndex","tabIDs","tabPanelIDs","rest","tabsRef","useRef","activeRef","keyDownHandler","useCallback","event","key","current","currentTarget","prev","previousSibling","focus","_b","_a","parentElement","lastChild","next","nextSibling","nodeName","_c","firstChild","jsx","role","ref","clsx","Children","map","tab","tabIndex","isActive","React","isValidElement","cloneElement","onKeyDown","onClick","id"],"mappings":"yIAgBO,MAAMA,EAAU,EAAGC,SAAAA,EAAUC,UAAAA,KAAcC,MAExC,MAAEC,YAAAA,EAAaC,eAAAA,EAAgBC,OAAAA,EAAQC,YAAAA,KAAgBC,GACzDL,EAEEM,EAAUC,EAAuB,MACjCC,EAAYD,EAA0B,MAEtCE,EAAiBC,GAClBC,cACOA,GAAc,cAAdA,EAAMC,IAAqB,CAC3B,MAAMC,EAAUF,EAAMG,cAChBC,EAAOJ,EAAMG,cAAcE,gBAE7BD,EACCA,EAAqBE,SAGlB,OAAAC,EAAA,OAAAC,EAAAN,EAAQO,oBAAR,EAAAD,EAAuBE,gBAAvBH,EAAAA,EACMF,iBACRC,OAEV,CAEIN,GAAc,eAAdA,EAAMC,IAAsB,CAC5B,MAAMC,EAAUF,EAAMG,cAChBQ,EAAOX,EAAMG,cAAcS,YAG7BD,GAA0B,WAAlBA,EAAKE,SACZF,EAAqBL,SAErB,OAAAQ,EAAAZ,EAAQO,oBAARK,EAAAA,EAAuBC,YAA2BT,OAE3D,IAEJ,IAIA,OAAAU,EAAC,MAAA,CACGC,KAAK,UACLC,IAAKvB,KACDD,EACJN,UAAW+B,EAAK,cAAe/B,GAE9BD,WAAMiC,SAASC,IAAIlC,GAAU,CAACmC,EAAKC,KAChC,MAAMC,EAAWlC,IAAgBiC,EAEjC,OAAOE,EAAMC,eAAeJ,GACtBG,EAAME,aAAkBL,EAAK,CACzBM,UAAW9B,EACXyB,SAAUC,OAAW,GAAY,EACjCN,IAAKM,EAAW3B,OAAY,EAC5BgC,QAAS,IAAMtC,EAAegC,GAC9B,gBAAiBC,EACjB,gBAAiB/B,EAAY8B,GAC7BO,GAAItC,EAAO+B,KAEf,IAAA,KACT"}