@sikt/sds-tabs 3.0.3 → 3.0.4

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.
 
+## [3.0.4](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-tabs@3.0.3...@sikt/sds-tabs@3.0.4) (2025-02-24)
+
+### Bug Fixes
+
+- **deps:** update @sikt/sds-core@4.2.1 ([936180f](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/936180f14a710552f5045cd7a4eba2bc76c383a3))
+- make required props non nullable ([9b26a28](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/9b26a28bfdc7af1a8f1a0d8350a028240c350669))
+- **tab:** badge visibility set to always strong ([518b91c](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/518b91cef6c1aeba016b509968f42ecc776da45e))
+
 ## [3.0.3](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-tabs@3.0.2...@sikt/sds-tabs@3.0.3) (2024-12-09)
 
 ### Bug Fixes

package/dist/index.d.mts

@@ -13,7 +13,7 @@ declare const Tabs: ({ defaultIndex, onChange, isSelectOnFocus, children, classN
 
 interface TabListProps extends HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
-    "aria-label": string;
+    "aria-label": NonNullable<string>;
     className?: string;
 }
 declare const TabList: ({ children, "aria-label": ariaLabel, className, ...rest }: TabListProps) => react_jsx_runtime.JSX.Element;

package/dist/index.d.ts

@@ -13,7 +13,7 @@ declare const Tabs: ({ defaultIndex, onChange, isSelectOnFocus, children, classN
 
 interface TabListProps extends HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
-    "aria-label": string;
+    "aria-label": NonNullable<string>;
     className?: string;
 }
 declare const TabList: ({ children, "aria-label": ariaLabel, className, ...rest }: TabListProps) => react_jsx_runtime.JSX.Element;

package/dist/index.js

@@ -1 +1 @@
-"use strict";var e=require("clsx/lite"),s=require("react"),n=require("react/jsx-runtime"),a=Object.defineProperty,t=Object.defineProperties,l=Object.getOwnPropertyDescriptors,r=Object.getOwnPropertySymbols,c=Object.prototype.hasOwnProperty,i=Object.prototype.propertyIsEnumerable,d=(e,s,n)=>s in e?a(e,s,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[s]=n,o=(e,s)=>{for(var n in s||(s={}))c.call(s,n)&&d(e,n,s[n]);if(r)for(var n of r(s))i.call(s,n)&&d(e,n,s[n]);return e},b=(e,s)=>t(e,l(s)),u=(e,s)=>{var n={};for(var a in e)c.call(e,a)&&s.indexOf(a)<0&&(n[a]=e[a]);if(null!=e&&r)for(var a of r(e))s.indexOf(a)<0&&i.call(e,a)&&(n[a]=e[a]);return n},x=s.createContext(null),m=s.forwardRef(((a,t)=>{var l=a,{children:r,className:c,icon:i,badge:d,href:x,isSelected:m}=l,h=u(l,["children","className","icon","badge","href","isSelected"]);return n.jsxs("a",b(o({className:e.clsx("sds-tabs__tab","sds-tab-link",m&&"sds-tab-link--selected",c),href:x,ref:t},h),{children:[i&&n.jsx("div",{className:"sds-tabs__tab-icon",children:i}),r,d&&n.jsx("div",{className:"sds-tabs__tab-badge",children:m?s.isValidElement(d)&&s.cloneElement(d,{visibility:"strong"}):d})]}))}));m.displayName="TabLink",exports.Tab=a=>{var t=a,{children:l,className:r,icon:c,badge:i}=t,d=u(t,["children","className","icon","badge"]);const{index:m}=d,h=s.useContext(x);if(!h)return console.warn("TabContext missing. Component needs to be used inside <Tabs>"),null;const{id:f,count:p,isSelectOnFocus:v,selectedIndex:g,setSelectedIndex:y,setPreviousIndex:N}=h,j=m===g,C=e=>{v&&(N(g),y(e))};return n.jsxs("button",b(o({className:e.clsx("sds-tabs__tab",r),role:"tab","aria-selected":j,"aria-controls":"panel-".concat(f,"-").concat(m),id:"tab-".concat(f,"-").concat(m),tabIndex:j?0:-1,onClick:()=>{N(g),y(m)},onKeyDown:e=>{var s,n;const a=p-1,t=e.currentTarget,l=null==(s=t.parentElement)?void 0:s.firstChild,r=null==(n=t.parentElement)?void 0:n.lastChild;if("ArrowLeft"===e.key){const e=t.previousSibling;m>0?e.focus():r.focus(),C(g>0?g-1:a)}else if("ArrowRight"===e.key){const e=t.nextSibling;m<a?e.focus():l.focus(),C(g<a?g+1:0)}else"Home"===e.key?(l.focus(),C(0)):"End"===e.key?(r.focus(),C(a)):"Enter"!==e.key&&"Space"!==e.code||y(m)}},d),{children:[c&&n.jsx("span",{className:"sds-tabs__tab-icon",children:c}),l,i&&n.jsx("span",{className:"sds-tabs__tab-badge",children:j?s.isValidElement(i)&&s.cloneElement(i,{visibility:"strong"}):i})]}))},exports.TabLink=m,exports.TabList=a=>{var t=a,{children:l,"aria-label":r,className:c}=t,i=u(t,["children","aria-label","className"]);const d=s.Children.toArray(l);return n.jsx("div",b(o({className:e.clsx("sds-tabs__tab-list",c),role:"tablist","aria-label":r},i),{children:s.Children.map(d,((e,a)=>{if(s.isValidElement(e))return n.jsx(n.Fragment,{children:s.cloneElement(e,{index:a})})}))}))},exports.TabPanel=a=>{var t=a,{children:l,className:r}=t,c=u(t,["children","className"]);const{index:i}=c,d=s.useContext(x);if(!d)return console.warn("TabContext missing. Component needs to be used inside <Tabs>"),null;const{id:m,selectedIndex:h}=d,f=i===h;return n.jsx("div",b(o({className:e.clsx("sds-tabs__tab-panel",r),id:"panel-".concat(m,"-").concat(i),role:"tabpanel",tabIndex:f?void 0:-1,"aria-labelledby":"tab-".concat(m,"-").concat(i),hidden:!f},c),{children:l}))},exports.Tabs=a=>{var t=a,{defaultIndex:l=0,onChange:r,isSelectOnFocus:c=!1,children:i,className:d}=t,m=u(t,["defaultIndex","onChange","isSelectOnFocus","children","className"]);const[h,f]=s.useState(l),[p,v]=s.useState(l),g=s.useId();s.useEffect((()=>{r&&p!==h&&r(h)}),[r,h]);const y=s.Children.toArray(i),N=y.length-1;return n.jsx(x.Provider,{value:{id:g,count:N,isSelectOnFocus:c,selectedIndex:h,setSelectedIndex:f,setPreviousIndex:v},children:n.jsx("div",b(o({className:e.clsx("sds-tabs",d)},m),{children:s.Children.map(y,((e,a)=>s.isValidElement(e)&&a>0?n.jsx(n.Fragment,{children:s.cloneElement(e,{index:a-1})}):e))}))})};//# sourceMappingURL=index.js.map
+"use strict";var e=require("clsx/lite"),s=require("react"),n=require("react/jsx-runtime"),a=Object.defineProperty,t=Object.defineProperties,l=Object.getOwnPropertyDescriptors,r=Object.getOwnPropertySymbols,c=Object.prototype.hasOwnProperty,i=Object.prototype.propertyIsEnumerable,d=(e,s,n)=>s in e?a(e,s,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[s]=n,o=(e,s)=>{for(var n in s||(s={}))c.call(s,n)&&d(e,n,s[n]);if(r)for(var n of r(s))i.call(s,n)&&d(e,n,s[n]);return e},b=(e,s)=>t(e,l(s)),u=(e,s)=>{var n={};for(var a in e)c.call(e,a)&&s.indexOf(a)<0&&(n[a]=e[a]);if(null!=e&&r)for(var a of r(e))s.indexOf(a)<0&&i.call(e,a)&&(n[a]=e[a]);return n},x=s.createContext(null),m=s.forwardRef(((a,t)=>{var l=a,{children:r,className:c,icon:i,badge:d,href:x,isSelected:m}=l,h=u(l,["children","className","icon","badge","href","isSelected"]);return n.jsxs("a",b(o({className:e.clsx("sds-tabs__tab","sds-tab-link",m&&"sds-tab-link--selected",c),href:x,ref:t},h),{children:[i&&n.jsx("div",{className:"sds-tabs__tab-icon",children:i}),r,d&&n.jsx("div",{className:"sds-tabs__tab-badge",children:m?s.isValidElement(d)&&s.cloneElement(d,{visibility:"strong"}):d})]}))}));m.displayName="TabLink",exports.Tab=a=>{var t=a,{children:l,className:r,icon:c,badge:i}=t,d=u(t,["children","className","icon","badge"]);const{index:m}=d,h=s.useContext(x);if(!h)return console.warn("TabContext missing. Component needs to be used inside <Tabs>"),null;const{id:f,count:p,isSelectOnFocus:v,selectedIndex:g,setSelectedIndex:y,setPreviousIndex:N}=h,j=m===g,C=e=>{v&&(N(g),y(e))};return n.jsxs("button",b(o({className:e.clsx("sds-tabs__tab",r),role:"tab","aria-selected":j,"aria-controls":"panel-".concat(f,"-").concat(m),id:"tab-".concat(f,"-").concat(m),tabIndex:j?0:-1,onClick:()=>{N(g),y(m)},onKeyDown:e=>{var s,n;const a=p-1,t=e.currentTarget,l=null==(s=t.parentElement)?void 0:s.firstChild,r=null==(n=t.parentElement)?void 0:n.lastChild;if("ArrowLeft"===e.key){const e=t.previousSibling;m>0?e.focus():r.focus(),C(g>0?g-1:a)}else if("ArrowRight"===e.key){const e=t.nextSibling;m<a?e.focus():l.focus(),C(g<a?g+1:0)}else"Home"===e.key?(l.focus(),C(0)):"End"===e.key?(r.focus(),C(a)):"Enter"!==e.key&&"Space"!==e.code||y(m)}},d),{children:[c&&n.jsx("span",{className:"sds-tabs__tab-icon",children:c}),l,i&&n.jsx("span",{className:"sds-tabs__tab-badge",children:s.isValidElement(i)&&s.cloneElement(i,{visibility:"strong"})})]}))},exports.TabLink=m,exports.TabList=a=>{var t=a,{children:l,"aria-label":r,className:c}=t,i=u(t,["children","aria-label","className"]);const d=s.Children.toArray(l);return n.jsx("div",b(o({className:e.clsx("sds-tabs__tab-list",c),role:"tablist","aria-label":r},i),{children:s.Children.map(d,((e,a)=>{if(s.isValidElement(e))return n.jsx(n.Fragment,{children:s.cloneElement(e,{index:a})})}))}))},exports.TabPanel=a=>{var t=a,{children:l,className:r}=t,c=u(t,["children","className"]);const{index:i}=c,d=s.useContext(x);if(!d)return console.warn("TabContext missing. Component needs to be used inside <Tabs>"),null;const{id:m,selectedIndex:h}=d,f=i===h;return n.jsx("div",b(o({className:e.clsx("sds-tabs__tab-panel",r),id:"panel-".concat(m,"-").concat(i),role:"tabpanel",tabIndex:f?void 0:-1,"aria-labelledby":"tab-".concat(m,"-").concat(i),hidden:!f},c),{children:l}))},exports.Tabs=a=>{var t=a,{defaultIndex:l=0,onChange:r,isSelectOnFocus:c=!1,children:i,className:d}=t,m=u(t,["defaultIndex","onChange","isSelectOnFocus","children","className"]);const[h,f]=s.useState(l),[p,v]=s.useState(l),g=s.useId();s.useEffect((()=>{r&&p!==h&&r(h)}),[r,p,h]);const y=s.Children.toArray(i),N=y.length-1;return n.jsx(x.Provider,{value:{id:g,count:N,isSelectOnFocus:c,selectedIndex:h,setSelectedIndex:f,setPreviousIndex:v},children:n.jsx("div",b(o({className:e.clsx("sds-tabs",d)},m),{children:s.Children.map(y,((e,a)=>s.isValidElement(e)&&a>0?n.jsx(n.Fragment,{children:s.cloneElement(e,{index:a-1})}):e))}))})};//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Tabs.tsx","../src/TabList.tsx","../src/Tab.tsx","../src/TabPanel.tsx","../src/TabLink.tsx"],"names":["createContext","useState","useId","useEffect","Children","jsx","clsx","isValidElement","Fragment","cloneElement","useContext","index","_a","_b","jsxs","forwardRef"],"mappings":"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","file":"index.js","sourcesContent":["import { clsx } from \"clsx/lite\";\nimport {\n  Children,\n  HTMLAttributes,\n  ReactElement,\n  ReactNode,\n  cloneElement,\n  createContext,\n  isValidElement,\n  useEffect,\n  useId,\n  useState,\n} from \"react\";\nimport \"./tabs.pcss\";\nimport { TabPanelProps } from \"./TabPanel\";\n\nexport interface TabsContextType {\n  id: string;\n  count: number;\n  isSelectOnFocus: boolean;\n  selectedIndex: number;\n  setSelectedIndex: (index: number) => void;\n  setPreviousIndex: (index: number) => void;\n}\n\nexport const TabsContext = createContext<TabsContextType | null>(null);\n\nexport interface TabsProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  defaultIndex?: number;\n  isSelectOnFocus?: boolean;\n  onChange?: (index: number) => void;\n  children: ReactNode;\n  className?: string;\n}\n\nexport const Tabs = ({\n  defaultIndex = 0,\n  onChange,\n  isSelectOnFocus = false,\n  children,\n  className,\n  ...rest\n}: TabsProps) => {\n  const [selectedIndex, setSelectedIndex] = useState(defaultIndex);\n  const [previousIndex, setPreviousIndex] = useState(defaultIndex);\n  const id = useId();\n\n  useEffect(() => {\n    if (onChange && previousIndex !== selectedIndex) {\n      onChange(selectedIndex);\n    }\n  }, [onChange, selectedIndex]);\n\n  const arrayChildren = Children.toArray(children);\n  const count = arrayChildren.length - 1;\n\n  return (\n    <TabsContext.Provider\n      value={{\n        id,\n        count,\n        isSelectOnFocus,\n        selectedIndex,\n        setSelectedIndex,\n        setPreviousIndex,\n      }}\n    >\n      <div className={clsx(\"sds-tabs\", className)} {...rest}>\n        {Children.map(arrayChildren, (child, index) => {\n          if (isValidElement(child) && index > 0) {\n            return (\n              <>\n                {cloneElement(\n                  child as ReactElement<TabPanelProps & { index: number }>,\n                  {\n                    index: index - 1,\n                  },\n                )}\n              </>\n            );\n          } else {\n            return child;\n          }\n        })}\n      </div>\n    </TabsContext.Provider>\n  );\n};\n","import { clsx } from \"clsx/lite\";\nimport {\n  Children,\n  HTMLAttributes,\n  ReactElement,\n  ReactNode,\n  cloneElement,\n  isValidElement,\n} from \"react\";\nimport { TabProps } from \"./Tab\";\n\nexport interface TabListProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n  \"aria-label\": string;\n  className?: string;\n}\n\nexport const TabList = ({\n  children,\n  \"aria-label\": ariaLabel,\n  className,\n  ...rest\n}: TabListProps) => {\n  const arrayChildren = Children.toArray(children);\n\n  return (\n    <div\n      className={clsx(\"sds-tabs__tab-list\", className)}\n      role=\"tablist\"\n      aria-label={ariaLabel}\n      {...rest}\n    >\n      {Children.map(arrayChildren, (child, index) => {\n        if (isValidElement(child)) {\n          return (\n            <>\n              {cloneElement(\n                child as ReactElement<TabProps & { index: number }>,\n                {\n                  index,\n                },\n              )}\n            </>\n          );\n        }\n      })}\n    </div>\n  );\n};\n","import { type BadgeProps } from \"@sikt/sds-badge\";\nimport { clsx } from \"clsx/lite\";\nimport {\n  HTMLAttributes,\n  KeyboardEvent,\n  ReactElement,\n  ReactNode,\n  cloneElement,\n  isValidElement,\n  useContext,\n  PropsWithChildren,\n} from \"react\";\nimport { TabsContext } from \"./Tabs\";\n\nexport interface TabProps extends HTMLAttributes<HTMLButtonElement> {\n  children: ReactNode;\n  className?: string;\n  icon?: ReactNode;\n  badge?: ReactNode;\n}\n\nexport const Tab = ({\n  children,\n  className,\n  icon,\n  badge,\n  ...rest\n}: TabProps) => {\n  const { index } = rest as { index: number };\n  const context = useContext(TabsContext);\n\n  if (!context) {\n    console.warn(\n      \"TabContext missing. Component needs to be used inside <Tabs>\",\n    );\n    return null;\n  }\n\n  const {\n    id,\n    count,\n    isSelectOnFocus,\n    selectedIndex,\n    setSelectedIndex,\n    setPreviousIndex,\n  } = context;\n\n  const isSelected = index === selectedIndex;\n  const handleSelect = (index: number) => {\n    if (isSelectOnFocus) {\n      setPreviousIndex(selectedIndex);\n      setSelectedIndex(index);\n    }\n  };\n  const handleKeyPress = (event: KeyboardEvent<HTMLButtonElement>) => {\n    const firstIndex = 0;\n    const lastIndex = count - 1;\n    const currentTarget = event.currentTarget;\n    const firstChild = currentTarget.parentElement?.firstChild as HTMLElement;\n    const lastChild = currentTarget.parentElement?.lastChild as HTMLElement;\n\n    if (event.key === \"ArrowLeft\") {\n      const previousSibling = currentTarget.previousSibling as HTMLElement;\n      if (index > firstIndex) {\n        previousSibling.focus();\n      } else {\n        lastChild.focus();\n      }\n\n      handleSelect(selectedIndex > firstIndex ? selectedIndex - 1 : lastIndex);\n    } else if (event.key === \"ArrowRight\") {\n      const nextSibling = currentTarget.nextSibling as HTMLElement;\n      if (index < lastIndex) {\n        nextSibling.focus();\n      } else {\n        firstChild.focus();\n      }\n\n      handleSelect(selectedIndex < lastIndex ? selectedIndex + 1 : firstIndex);\n    } else if (event.key === \"Home\") {\n      firstChild.focus();\n      handleSelect(firstIndex);\n    } else if (event.key === \"End\") {\n      lastChild.focus();\n      handleSelect(lastIndex);\n    } else if (event.key === \"Enter\" || event.code === \"Space\") {\n      setSelectedIndex(index);\n    }\n  };\n\n  return (\n    <button\n      className={clsx(\"sds-tabs__tab\", className)}\n      role=\"tab\"\n      aria-selected={isSelected}\n      aria-controls={`panel-${id}-${index}`}\n      id={`tab-${id}-${index}`}\n      tabIndex={isSelected ? 0 : -1}\n      onClick={() => {\n        setPreviousIndex(selectedIndex);\n        setSelectedIndex(index);\n      }}\n      onKeyDown={handleKeyPress}\n      {...rest}\n    >\n      {icon && <span className=\"sds-tabs__tab-icon\">{icon}</span>}\n      {children}\n      {badge && (\n        <span className=\"sds-tabs__tab-badge\">\n          {isSelected\n            ? isValidElement(badge) &&\n              cloneElement(\n                badge as ReactElement<PropsWithChildren<BadgeProps>>,\n                {\n                  visibility: \"strong\",\n                },\n              )\n            : badge}\n        </span>\n      )}\n    </button>\n  );\n};\n","import { clsx } from \"clsx/lite\";\nimport { ReactNode, useContext } from \"react\";\nimport { TabsContext } from \"./Tabs\";\n\nexport interface TabPanelProps {\n  children: ReactNode;\n  className?: string;\n}\n\nexport const TabPanel = ({ children, className, ...rest }: TabPanelProps) => {\n  const { index } = rest as { index: number };\n  const context = useContext(TabsContext);\n\n  if (!context) {\n    console.warn(\n      \"TabContext missing. Component needs to be used inside <Tabs>\",\n    );\n    return null;\n  }\n\n  const { id, selectedIndex } = context;\n\n  const isSelected = index === selectedIndex;\n  return (\n    <div\n      className={clsx(\"sds-tabs__tab-panel\", className)}\n      id={`panel-${id}-${index}`}\n      role=\"tabpanel\"\n      tabIndex={isSelected ? undefined : -1}\n      aria-labelledby={`tab-${id}-${index}`}\n      hidden={!isSelected}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n};\n","import { type BadgeProps } from \"@sikt/sds-badge\";\nimport { clsx } from \"clsx/lite\";\nimport {\n  AnchorHTMLAttributes,\n  ReactElement,\n  ReactNode,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  PropsWithChildren,\n} from \"react\";\nimport \"./tab-link.pcss\";\n\nexport interface TabLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {\n  children: ReactNode;\n  className?: string;\n  icon?: ReactNode;\n  badge?: ReactNode;\n  isSelected?: boolean;\n}\n\nexport const TabLink = forwardRef<HTMLAnchorElement, TabLinkProps>(\n  (\n    {\n      children,\n      className,\n      icon,\n      badge,\n      href,\n      isSelected,\n      ...rest\n    }: TabLinkProps,\n    ref,\n  ) => {\n    return (\n      <a\n        className={clsx(\n          \"sds-tabs__tab\",\n          \"sds-tab-link\",\n          isSelected && \"sds-tab-link--selected\",\n          className,\n        )}\n        href={href}\n        ref={ref}\n        {...rest}\n      >\n        {icon && <div className=\"sds-tabs__tab-icon\">{icon}</div>}\n        {children}\n        {badge && (\n          <div className=\"sds-tabs__tab-badge\">\n            {isSelected\n              ? isValidElement(badge) &&\n                cloneElement(\n                  badge as ReactElement<PropsWithChildren<BadgeProps>>,\n                  { visibility: \"strong\" },\n                )\n              : badge}\n          </div>\n        )}\n      </a>\n    );\n  },\n);\n\nTabLink.displayName = \"TabLink\";\n"]}
+{"version":3,"sources":["../src/Tabs.tsx","../src/TabList.tsx","../src/Tab.tsx","../src/TabPanel.tsx","../src/TabLink.tsx"],"names":["createContext","useState","useId","useEffect","Children","jsx","clsx","isValidElement","Fragment","cloneElement","useContext","index","_a","_b","jsxs","forwardRef"],"mappings":"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","file":"index.js","sourcesContent":["import { clsx } from \"clsx/lite\";\nimport {\n  Children,\n  HTMLAttributes,\n  ReactElement,\n  ReactNode,\n  cloneElement,\n  createContext,\n  isValidElement,\n  useEffect,\n  useId,\n  useState,\n} from \"react\";\nimport \"./tabs.pcss\";\nimport { TabPanelProps } from \"./TabPanel\";\n\nexport interface TabsContextType {\n  id: string;\n  count: number;\n  isSelectOnFocus: boolean;\n  selectedIndex: number;\n  setSelectedIndex: (index: number) => void;\n  setPreviousIndex: (index: number) => void;\n}\n\nexport const TabsContext = createContext<TabsContextType | null>(null);\n\nexport interface TabsProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  defaultIndex?: number;\n  isSelectOnFocus?: boolean;\n  onChange?: (index: number) => void;\n  children: ReactNode;\n  className?: string;\n}\n\nexport const Tabs = ({\n  defaultIndex = 0,\n  onChange,\n  isSelectOnFocus = false,\n  children,\n  className,\n  ...rest\n}: TabsProps) => {\n  const [selectedIndex, setSelectedIndex] = useState(defaultIndex);\n  const [previousIndex, setPreviousIndex] = useState(defaultIndex);\n  const id = useId();\n\n  useEffect(() => {\n    if (onChange && previousIndex !== selectedIndex) {\n      onChange(selectedIndex);\n    }\n  }, [onChange, previousIndex, selectedIndex]);\n\n  const arrayChildren = Children.toArray(children);\n  const count = arrayChildren.length - 1;\n\n  return (\n    <TabsContext.Provider\n      value={{\n        id,\n        count,\n        isSelectOnFocus,\n        selectedIndex,\n        setSelectedIndex,\n        setPreviousIndex,\n      }}\n    >\n      <div className={clsx(\"sds-tabs\", className)} {...rest}>\n        {Children.map(arrayChildren, (child, index) => {\n          if (isValidElement(child) && index > 0) {\n            return (\n              <>\n                {cloneElement(\n                  child as ReactElement<TabPanelProps & { index: number }>,\n                  {\n                    index: index - 1,\n                  },\n                )}\n              </>\n            );\n          } else {\n            return child;\n          }\n        })}\n      </div>\n    </TabsContext.Provider>\n  );\n};\n","import { clsx } from \"clsx/lite\";\nimport {\n  Children,\n  HTMLAttributes,\n  ReactElement,\n  ReactNode,\n  cloneElement,\n  isValidElement,\n} from \"react\";\nimport { TabProps } from \"./Tab\";\n\nexport interface TabListProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n  \"aria-label\": NonNullable<string>;\n  className?: string;\n}\n\nexport const TabList = ({\n  children,\n  \"aria-label\": ariaLabel,\n  className,\n  ...rest\n}: TabListProps) => {\n  const arrayChildren = Children.toArray(children);\n\n  return (\n    <div\n      className={clsx(\"sds-tabs__tab-list\", className)}\n      role=\"tablist\"\n      aria-label={ariaLabel}\n      {...rest}\n    >\n      {Children.map(arrayChildren, (child, index) => {\n        if (isValidElement(child)) {\n          return (\n            <>\n              {cloneElement(\n                child as ReactElement<TabProps & { index: number }>,\n                {\n                  index,\n                },\n              )}\n            </>\n          );\n        }\n      })}\n    </div>\n  );\n};\n","import { type BadgeProps } from \"@sikt/sds-badge\";\nimport { clsx } from \"clsx/lite\";\nimport {\n  HTMLAttributes,\n  KeyboardEvent,\n  ReactElement,\n  ReactNode,\n  cloneElement,\n  isValidElement,\n  useContext,\n  PropsWithChildren,\n} from \"react\";\nimport { TabsContext } from \"./Tabs\";\n\nexport interface TabProps extends HTMLAttributes<HTMLButtonElement> {\n  children: ReactNode;\n  className?: string;\n  icon?: ReactNode;\n  badge?: ReactNode;\n}\n\nexport const Tab = ({\n  children,\n  className,\n  icon,\n  badge,\n  ...rest\n}: TabProps) => {\n  const { index } = rest as { index: number };\n  const context = useContext(TabsContext);\n\n  if (!context) {\n    console.warn(\n      \"TabContext missing. Component needs to be used inside <Tabs>\",\n    );\n    return null;\n  }\n\n  const {\n    id,\n    count,\n    isSelectOnFocus,\n    selectedIndex,\n    setSelectedIndex,\n    setPreviousIndex,\n  } = context;\n\n  const isSelected = index === selectedIndex;\n  const handleSelect = (index: number) => {\n    if (isSelectOnFocus) {\n      setPreviousIndex(selectedIndex);\n      setSelectedIndex(index);\n    }\n  };\n  const handleKeyPress = (event: KeyboardEvent<HTMLButtonElement>) => {\n    const firstIndex = 0;\n    const lastIndex = count - 1;\n    const currentTarget = event.currentTarget;\n    const firstChild = currentTarget.parentElement?.firstChild as HTMLElement;\n    const lastChild = currentTarget.parentElement?.lastChild as HTMLElement;\n\n    if (event.key === \"ArrowLeft\") {\n      const previousSibling = currentTarget.previousSibling as HTMLElement;\n      if (index > firstIndex) {\n        previousSibling.focus();\n      } else {\n        lastChild.focus();\n      }\n\n      handleSelect(selectedIndex > firstIndex ? selectedIndex - 1 : lastIndex);\n    } else if (event.key === \"ArrowRight\") {\n      const nextSibling = currentTarget.nextSibling as HTMLElement;\n      if (index < lastIndex) {\n        nextSibling.focus();\n      } else {\n        firstChild.focus();\n      }\n\n      handleSelect(selectedIndex < lastIndex ? selectedIndex + 1 : firstIndex);\n    } else if (event.key === \"Home\") {\n      firstChild.focus();\n      handleSelect(firstIndex);\n    } else if (event.key === \"End\") {\n      lastChild.focus();\n      handleSelect(lastIndex);\n    } else if (event.key === \"Enter\" || event.code === \"Space\") {\n      setSelectedIndex(index);\n    }\n  };\n\n  return (\n    <button\n      className={clsx(\"sds-tabs__tab\", className)}\n      role=\"tab\"\n      aria-selected={isSelected}\n      aria-controls={`panel-${id}-${index}`}\n      id={`tab-${id}-${index}`}\n      tabIndex={isSelected ? 0 : -1}\n      onClick={() => {\n        setPreviousIndex(selectedIndex);\n        setSelectedIndex(index);\n      }}\n      onKeyDown={handleKeyPress}\n      {...rest}\n    >\n      {icon && <span className=\"sds-tabs__tab-icon\">{icon}</span>}\n      {children}\n      {badge && (\n        <span className=\"sds-tabs__tab-badge\">\n          {isValidElement(badge) &&\n            cloneElement(badge as ReactElement<PropsWithChildren<BadgeProps>>, {\n              visibility: \"strong\",\n            })}\n        </span>\n      )}\n    </button>\n  );\n};\n","import { clsx } from \"clsx/lite\";\nimport { ReactNode, useContext } from \"react\";\nimport { TabsContext } from \"./Tabs\";\n\nexport interface TabPanelProps {\n  children: ReactNode;\n  className?: string;\n}\n\nexport const TabPanel = ({ children, className, ...rest }: TabPanelProps) => {\n  const { index } = rest as { index: number };\n  const context = useContext(TabsContext);\n\n  if (!context) {\n    console.warn(\n      \"TabContext missing. Component needs to be used inside <Tabs>\",\n    );\n    return null;\n  }\n\n  const { id, selectedIndex } = context;\n\n  const isSelected = index === selectedIndex;\n  return (\n    <div\n      className={clsx(\"sds-tabs__tab-panel\", className)}\n      id={`panel-${id}-${index}`}\n      role=\"tabpanel\"\n      tabIndex={isSelected ? undefined : -1}\n      aria-labelledby={`tab-${id}-${index}`}\n      hidden={!isSelected}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n};\n","import { type BadgeProps } from \"@sikt/sds-badge\";\nimport { clsx } from \"clsx/lite\";\nimport {\n  AnchorHTMLAttributes,\n  ReactElement,\n  ReactNode,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  PropsWithChildren,\n} from \"react\";\nimport \"./tab-link.pcss\";\n\nexport interface TabLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {\n  children: ReactNode;\n  className?: string;\n  icon?: ReactNode;\n  badge?: ReactNode;\n  isSelected?: boolean;\n}\n\nexport const TabLink = forwardRef<HTMLAnchorElement, TabLinkProps>(\n  (\n    {\n      children,\n      className,\n      icon,\n      badge,\n      href,\n      isSelected,\n      ...rest\n    }: TabLinkProps,\n    ref,\n  ) => {\n    return (\n      <a\n        className={clsx(\n          \"sds-tabs__tab\",\n          \"sds-tab-link\",\n          isSelected && \"sds-tab-link--selected\",\n          className,\n        )}\n        href={href}\n        ref={ref}\n        {...rest}\n      >\n        {icon && <div className=\"sds-tabs__tab-icon\">{icon}</div>}\n        {children}\n        {badge && (\n          <div className=\"sds-tabs__tab-badge\">\n            {isSelected\n              ? isValidElement(badge) &&\n                cloneElement(\n                  badge as ReactElement<PropsWithChildren<BadgeProps>>,\n                  { visibility: \"strong\" },\n                )\n              : badge}\n          </div>\n        )}\n      </a>\n    );\n  },\n);\n\nTabLink.displayName = \"TabLink\";\n"]}

package/dist/index.mjs

@@ -1 +1 @@
-import{clsx as e}from"clsx/lite";import{createContext as a,forwardRef as n,isValidElement as s,cloneElement as t,useState as r,useId as l,useEffect as c,Children as i,useContext as o}from"react";import{jsxs as d,jsx as b,Fragment as u}from"react/jsx-runtime";var m=Object.defineProperty,f=Object.defineProperties,h=Object.getOwnPropertyDescriptors,p=Object.getOwnPropertySymbols,v=Object.prototype.hasOwnProperty,x=Object.prototype.propertyIsEnumerable,g=(e,a,n)=>a in e?m(e,a,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[a]=n,y=(e,a)=>{for(var n in a||(a={}))v.call(a,n)&&g(e,n,a[n]);if(p)for(var n of p(a))x.call(a,n)&&g(e,n,a[n]);return e},N=(e,a)=>f(e,h(a)),_=(e,a)=>{var n={};for(var s in e)v.call(e,s)&&a.indexOf(s)<0&&(n[s]=e[s]);if(null!=e&&p)for(var s of p(e))a.indexOf(s)<0&&x.call(e,s)&&(n[s]=e[s]);return n},O=a(null),I=a=>{var n=a,{defaultIndex:o=0,onChange:d,isSelectOnFocus:m=!1,children:f,className:h}=n,p=_(n,["defaultIndex","onChange","isSelectOnFocus","children","className"]);const[v,x]=r(o),[g,I]=r(o),S=l();c((()=>{d&&g!==v&&d(v)}),[d,v]);const k=i.toArray(f),w=k.length-1;return b(O.Provider,{value:{id:S,count:w,isSelectOnFocus:m,selectedIndex:v,setSelectedIndex:x,setPreviousIndex:I},children:b("div",N(y({className:e("sds-tabs",h)},p),{children:i.map(k,((e,a)=>s(e)&&a>0?b(u,{children:t(e,{index:a-1})}):e))}))})},S=a=>{var n=a,{children:r,"aria-label":l,className:c}=n,o=_(n,["children","aria-label","className"]);const d=i.toArray(r);return b("div",N(y({className:e("sds-tabs__tab-list",c),role:"tablist","aria-label":l},o),{children:i.map(d,((e,a)=>{if(s(e))return b(u,{children:t(e,{index:a})})}))}))},k=a=>{var n=a,{children:r,className:l,icon:c,badge:i}=n,u=_(n,["children","className","icon","badge"]);const{index:m}=u,f=o(O);if(!f)return console.warn("TabContext missing. Component needs to be used inside <Tabs>"),null;const{id:h,count:p,isSelectOnFocus:v,selectedIndex:x,setSelectedIndex:g,setPreviousIndex:I}=f,S=m===x,k=e=>{v&&(I(x),g(e))};return d("button",N(y({className:e("sds-tabs__tab",l),role:"tab","aria-selected":S,"aria-controls":"panel-".concat(h,"-").concat(m),id:"tab-".concat(h,"-").concat(m),tabIndex:S?0:-1,onClick:()=>{I(x),g(m)},onKeyDown:e=>{var a,n;const s=p-1,t=e.currentTarget,r=null==(a=t.parentElement)?void 0:a.firstChild,l=null==(n=t.parentElement)?void 0:n.lastChild;if("ArrowLeft"===e.key){const e=t.previousSibling;m>0?e.focus():l.focus(),k(x>0?x-1:s)}else if("ArrowRight"===e.key){const e=t.nextSibling;m<s?e.focus():r.focus(),k(x<s?x+1:0)}else"Home"===e.key?(r.focus(),k(0)):"End"===e.key?(l.focus(),k(s)):"Enter"!==e.key&&"Space"!==e.code||g(m)}},u),{children:[c&&b("span",{className:"sds-tabs__tab-icon",children:c}),r,i&&b("span",{className:"sds-tabs__tab-badge",children:S?s(i)&&t(i,{visibility:"strong"}):i})]}))},w=a=>{var n=a,{children:s,className:t}=n,r=_(n,["children","className"]);const{index:l}=r,c=o(O);if(!c)return console.warn("TabContext missing. Component needs to be used inside <Tabs>"),null;const{id:i,selectedIndex:d}=c,u=l===d;return b("div",N(y({className:e("sds-tabs__tab-panel",t),id:"panel-".concat(i,"-").concat(l),role:"tabpanel",tabIndex:u?void 0:-1,"aria-labelledby":"tab-".concat(i,"-").concat(l),hidden:!u},r),{children:s}))},C=n(((a,n)=>{var r=a,{children:l,className:c,icon:i,badge:o,href:u,isSelected:m}=r,f=_(r,["children","className","icon","badge","href","isSelected"]);return d("a",N(y({className:e("sds-tabs__tab","sds-tab-link",m&&"sds-tab-link--selected",c),href:u,ref:n},f),{children:[i&&b("div",{className:"sds-tabs__tab-icon",children:i}),l,o&&b("div",{className:"sds-tabs__tab-badge",children:m?s(o)&&t(o,{visibility:"strong"}):o})]}))}));C.displayName="TabLink";export{k as Tab,C as TabLink,S as TabList,w as TabPanel,I as Tabs};//# sourceMappingURL=index.mjs.map
+import{clsx as e}from"clsx/lite";import{createContext as a,forwardRef as n,isValidElement as s,cloneElement as t,useState as r,useId as l,useEffect as c,Children as i,useContext as o}from"react";import{jsxs as d,jsx as b,Fragment as u}from"react/jsx-runtime";var m=Object.defineProperty,f=Object.defineProperties,h=Object.getOwnPropertyDescriptors,p=Object.getOwnPropertySymbols,v=Object.prototype.hasOwnProperty,x=Object.prototype.propertyIsEnumerable,g=(e,a,n)=>a in e?m(e,a,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[a]=n,y=(e,a)=>{for(var n in a||(a={}))v.call(a,n)&&g(e,n,a[n]);if(p)for(var n of p(a))x.call(a,n)&&g(e,n,a[n]);return e},N=(e,a)=>f(e,h(a)),_=(e,a)=>{var n={};for(var s in e)v.call(e,s)&&a.indexOf(s)<0&&(n[s]=e[s]);if(null!=e&&p)for(var s of p(e))a.indexOf(s)<0&&x.call(e,s)&&(n[s]=e[s]);return n},O=a(null),I=a=>{var n=a,{defaultIndex:o=0,onChange:d,isSelectOnFocus:m=!1,children:f,className:h}=n,p=_(n,["defaultIndex","onChange","isSelectOnFocus","children","className"]);const[v,x]=r(o),[g,I]=r(o),S=l();c((()=>{d&&g!==v&&d(v)}),[d,g,v]);const k=i.toArray(f),w=k.length-1;return b(O.Provider,{value:{id:S,count:w,isSelectOnFocus:m,selectedIndex:v,setSelectedIndex:x,setPreviousIndex:I},children:b("div",N(y({className:e("sds-tabs",h)},p),{children:i.map(k,((e,a)=>s(e)&&a>0?b(u,{children:t(e,{index:a-1})}):e))}))})},S=a=>{var n=a,{children:r,"aria-label":l,className:c}=n,o=_(n,["children","aria-label","className"]);const d=i.toArray(r);return b("div",N(y({className:e("sds-tabs__tab-list",c),role:"tablist","aria-label":l},o),{children:i.map(d,((e,a)=>{if(s(e))return b(u,{children:t(e,{index:a})})}))}))},k=a=>{var n=a,{children:r,className:l,icon:c,badge:i}=n,u=_(n,["children","className","icon","badge"]);const{index:m}=u,f=o(O);if(!f)return console.warn("TabContext missing. Component needs to be used inside <Tabs>"),null;const{id:h,count:p,isSelectOnFocus:v,selectedIndex:x,setSelectedIndex:g,setPreviousIndex:I}=f,S=m===x,k=e=>{v&&(I(x),g(e))};return d("button",N(y({className:e("sds-tabs__tab",l),role:"tab","aria-selected":S,"aria-controls":"panel-".concat(h,"-").concat(m),id:"tab-".concat(h,"-").concat(m),tabIndex:S?0:-1,onClick:()=>{I(x),g(m)},onKeyDown:e=>{var a,n;const s=p-1,t=e.currentTarget,r=null==(a=t.parentElement)?void 0:a.firstChild,l=null==(n=t.parentElement)?void 0:n.lastChild;if("ArrowLeft"===e.key){const e=t.previousSibling;m>0?e.focus():l.focus(),k(x>0?x-1:s)}else if("ArrowRight"===e.key){const e=t.nextSibling;m<s?e.focus():r.focus(),k(x<s?x+1:0)}else"Home"===e.key?(r.focus(),k(0)):"End"===e.key?(l.focus(),k(s)):"Enter"!==e.key&&"Space"!==e.code||g(m)}},u),{children:[c&&b("span",{className:"sds-tabs__tab-icon",children:c}),r,i&&b("span",{className:"sds-tabs__tab-badge",children:s(i)&&t(i,{visibility:"strong"})})]}))},w=a=>{var n=a,{children:s,className:t}=n,r=_(n,["children","className"]);const{index:l}=r,c=o(O);if(!c)return console.warn("TabContext missing. Component needs to be used inside <Tabs>"),null;const{id:i,selectedIndex:d}=c,u=l===d;return b("div",N(y({className:e("sds-tabs__tab-panel",t),id:"panel-".concat(i,"-").concat(l),role:"tabpanel",tabIndex:u?void 0:-1,"aria-labelledby":"tab-".concat(i,"-").concat(l),hidden:!u},r),{children:s}))},C=n(((a,n)=>{var r=a,{children:l,className:c,icon:i,badge:o,href:u,isSelected:m}=r,f=_(r,["children","className","icon","badge","href","isSelected"]);return d("a",N(y({className:e("sds-tabs__tab","sds-tab-link",m&&"sds-tab-link--selected",c),href:u,ref:n},f),{children:[i&&b("div",{className:"sds-tabs__tab-icon",children:i}),l,o&&b("div",{className:"sds-tabs__tab-badge",children:m?s(o)&&t(o,{visibility:"strong"}):o})]}))}));C.displayName="TabLink";export{k as Tab,C as TabLink,S as TabList,w as TabPanel,I as Tabs};//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Tabs.tsx","../src/TabList.tsx","../src/Tab.tsx","../src/TabPanel.tsx","../src/TabLink.tsx"],"names":["Children","jsx","clsx","isValidElement","Fragment","cloneElement","index","_a","_b","useContext","jsxs"],"mappings":"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","file":"index.mjs","sourcesContent":["import { clsx } from \"clsx/lite\";\nimport {\n  Children,\n  HTMLAttributes,\n  ReactElement,\n  ReactNode,\n  cloneElement,\n  createContext,\n  isValidElement,\n  useEffect,\n  useId,\n  useState,\n} from \"react\";\nimport \"./tabs.pcss\";\nimport { TabPanelProps } from \"./TabPanel\";\n\nexport interface TabsContextType {\n  id: string;\n  count: number;\n  isSelectOnFocus: boolean;\n  selectedIndex: number;\n  setSelectedIndex: (index: number) => void;\n  setPreviousIndex: (index: number) => void;\n}\n\nexport const TabsContext = createContext<TabsContextType | null>(null);\n\nexport interface TabsProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  defaultIndex?: number;\n  isSelectOnFocus?: boolean;\n  onChange?: (index: number) => void;\n  children: ReactNode;\n  className?: string;\n}\n\nexport const Tabs = ({\n  defaultIndex = 0,\n  onChange,\n  isSelectOnFocus = false,\n  children,\n  className,\n  ...rest\n}: TabsProps) => {\n  const [selectedIndex, setSelectedIndex] = useState(defaultIndex);\n  const [previousIndex, setPreviousIndex] = useState(defaultIndex);\n  const id = useId();\n\n  useEffect(() => {\n    if (onChange && previousIndex !== selectedIndex) {\n      onChange(selectedIndex);\n    }\n  }, [onChange, selectedIndex]);\n\n  const arrayChildren = Children.toArray(children);\n  const count = arrayChildren.length - 1;\n\n  return (\n    <TabsContext.Provider\n      value={{\n        id,\n        count,\n        isSelectOnFocus,\n        selectedIndex,\n        setSelectedIndex,\n        setPreviousIndex,\n      }}\n    >\n      <div className={clsx(\"sds-tabs\", className)} {...rest}>\n        {Children.map(arrayChildren, (child, index) => {\n          if (isValidElement(child) && index > 0) {\n            return (\n              <>\n                {cloneElement(\n                  child as ReactElement<TabPanelProps & { index: number }>,\n                  {\n                    index: index - 1,\n                  },\n                )}\n              </>\n            );\n          } else {\n            return child;\n          }\n        })}\n      </div>\n    </TabsContext.Provider>\n  );\n};\n","import { clsx } from \"clsx/lite\";\nimport {\n  Children,\n  HTMLAttributes,\n  ReactElement,\n  ReactNode,\n  cloneElement,\n  isValidElement,\n} from \"react\";\nimport { TabProps } from \"./Tab\";\n\nexport interface TabListProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n  \"aria-label\": string;\n  className?: string;\n}\n\nexport const TabList = ({\n  children,\n  \"aria-label\": ariaLabel,\n  className,\n  ...rest\n}: TabListProps) => {\n  const arrayChildren = Children.toArray(children);\n\n  return (\n    <div\n      className={clsx(\"sds-tabs__tab-list\", className)}\n      role=\"tablist\"\n      aria-label={ariaLabel}\n      {...rest}\n    >\n      {Children.map(arrayChildren, (child, index) => {\n        if (isValidElement(child)) {\n          return (\n            <>\n              {cloneElement(\n                child as ReactElement<TabProps & { index: number }>,\n                {\n                  index,\n                },\n              )}\n            </>\n          );\n        }\n      })}\n    </div>\n  );\n};\n","import { type BadgeProps } from \"@sikt/sds-badge\";\nimport { clsx } from \"clsx/lite\";\nimport {\n  HTMLAttributes,\n  KeyboardEvent,\n  ReactElement,\n  ReactNode,\n  cloneElement,\n  isValidElement,\n  useContext,\n  PropsWithChildren,\n} from \"react\";\nimport { TabsContext } from \"./Tabs\";\n\nexport interface TabProps extends HTMLAttributes<HTMLButtonElement> {\n  children: ReactNode;\n  className?: string;\n  icon?: ReactNode;\n  badge?: ReactNode;\n}\n\nexport const Tab = ({\n  children,\n  className,\n  icon,\n  badge,\n  ...rest\n}: TabProps) => {\n  const { index } = rest as { index: number };\n  const context = useContext(TabsContext);\n\n  if (!context) {\n    console.warn(\n      \"TabContext missing. Component needs to be used inside <Tabs>\",\n    );\n    return null;\n  }\n\n  const {\n    id,\n    count,\n    isSelectOnFocus,\n    selectedIndex,\n    setSelectedIndex,\n    setPreviousIndex,\n  } = context;\n\n  const isSelected = index === selectedIndex;\n  const handleSelect = (index: number) => {\n    if (isSelectOnFocus) {\n      setPreviousIndex(selectedIndex);\n      setSelectedIndex(index);\n    }\n  };\n  const handleKeyPress = (event: KeyboardEvent<HTMLButtonElement>) => {\n    const firstIndex = 0;\n    const lastIndex = count - 1;\n    const currentTarget = event.currentTarget;\n    const firstChild = currentTarget.parentElement?.firstChild as HTMLElement;\n    const lastChild = currentTarget.parentElement?.lastChild as HTMLElement;\n\n    if (event.key === \"ArrowLeft\") {\n      const previousSibling = currentTarget.previousSibling as HTMLElement;\n      if (index > firstIndex) {\n        previousSibling.focus();\n      } else {\n        lastChild.focus();\n      }\n\n      handleSelect(selectedIndex > firstIndex ? selectedIndex - 1 : lastIndex);\n    } else if (event.key === \"ArrowRight\") {\n      const nextSibling = currentTarget.nextSibling as HTMLElement;\n      if (index < lastIndex) {\n        nextSibling.focus();\n      } else {\n        firstChild.focus();\n      }\n\n      handleSelect(selectedIndex < lastIndex ? selectedIndex + 1 : firstIndex);\n    } else if (event.key === \"Home\") {\n      firstChild.focus();\n      handleSelect(firstIndex);\n    } else if (event.key === \"End\") {\n      lastChild.focus();\n      handleSelect(lastIndex);\n    } else if (event.key === \"Enter\" || event.code === \"Space\") {\n      setSelectedIndex(index);\n    }\n  };\n\n  return (\n    <button\n      className={clsx(\"sds-tabs__tab\", className)}\n      role=\"tab\"\n      aria-selected={isSelected}\n      aria-controls={`panel-${id}-${index}`}\n      id={`tab-${id}-${index}`}\n      tabIndex={isSelected ? 0 : -1}\n      onClick={() => {\n        setPreviousIndex(selectedIndex);\n        setSelectedIndex(index);\n      }}\n      onKeyDown={handleKeyPress}\n      {...rest}\n    >\n      {icon && <span className=\"sds-tabs__tab-icon\">{icon}</span>}\n      {children}\n      {badge && (\n        <span className=\"sds-tabs__tab-badge\">\n          {isSelected\n            ? isValidElement(badge) &&\n              cloneElement(\n                badge as ReactElement<PropsWithChildren<BadgeProps>>,\n                {\n                  visibility: \"strong\",\n                },\n              )\n            : badge}\n        </span>\n      )}\n    </button>\n  );\n};\n","import { clsx } from \"clsx/lite\";\nimport { ReactNode, useContext } from \"react\";\nimport { TabsContext } from \"./Tabs\";\n\nexport interface TabPanelProps {\n  children: ReactNode;\n  className?: string;\n}\n\nexport const TabPanel = ({ children, className, ...rest }: TabPanelProps) => {\n  const { index } = rest as { index: number };\n  const context = useContext(TabsContext);\n\n  if (!context) {\n    console.warn(\n      \"TabContext missing. Component needs to be used inside <Tabs>\",\n    );\n    return null;\n  }\n\n  const { id, selectedIndex } = context;\n\n  const isSelected = index === selectedIndex;\n  return (\n    <div\n      className={clsx(\"sds-tabs__tab-panel\", className)}\n      id={`panel-${id}-${index}`}\n      role=\"tabpanel\"\n      tabIndex={isSelected ? undefined : -1}\n      aria-labelledby={`tab-${id}-${index}`}\n      hidden={!isSelected}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n};\n","import { type BadgeProps } from \"@sikt/sds-badge\";\nimport { clsx } from \"clsx/lite\";\nimport {\n  AnchorHTMLAttributes,\n  ReactElement,\n  ReactNode,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  PropsWithChildren,\n} from \"react\";\nimport \"./tab-link.pcss\";\n\nexport interface TabLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {\n  children: ReactNode;\n  className?: string;\n  icon?: ReactNode;\n  badge?: ReactNode;\n  isSelected?: boolean;\n}\n\nexport const TabLink = forwardRef<HTMLAnchorElement, TabLinkProps>(\n  (\n    {\n      children,\n      className,\n      icon,\n      badge,\n      href,\n      isSelected,\n      ...rest\n    }: TabLinkProps,\n    ref,\n  ) => {\n    return (\n      <a\n        className={clsx(\n          \"sds-tabs__tab\",\n          \"sds-tab-link\",\n          isSelected && \"sds-tab-link--selected\",\n          className,\n        )}\n        href={href}\n        ref={ref}\n        {...rest}\n      >\n        {icon && <div className=\"sds-tabs__tab-icon\">{icon}</div>}\n        {children}\n        {badge && (\n          <div className=\"sds-tabs__tab-badge\">\n            {isSelected\n              ? isValidElement(badge) &&\n                cloneElement(\n                  badge as ReactElement<PropsWithChildren<BadgeProps>>,\n                  { visibility: \"strong\" },\n                )\n              : badge}\n          </div>\n        )}\n      </a>\n    );\n  },\n);\n\nTabLink.displayName = \"TabLink\";\n"]}
+{"version":3,"sources":["../src/Tabs.tsx","../src/TabList.tsx","../src/Tab.tsx","../src/TabPanel.tsx","../src/TabLink.tsx"],"names":["Children","jsx","clsx","isValidElement","Fragment","cloneElement","index","_a","_b","useContext","jsxs"],"mappings":"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","file":"index.mjs","sourcesContent":["import { clsx } from \"clsx/lite\";\nimport {\n  Children,\n  HTMLAttributes,\n  ReactElement,\n  ReactNode,\n  cloneElement,\n  createContext,\n  isValidElement,\n  useEffect,\n  useId,\n  useState,\n} from \"react\";\nimport \"./tabs.pcss\";\nimport { TabPanelProps } from \"./TabPanel\";\n\nexport interface TabsContextType {\n  id: string;\n  count: number;\n  isSelectOnFocus: boolean;\n  selectedIndex: number;\n  setSelectedIndex: (index: number) => void;\n  setPreviousIndex: (index: number) => void;\n}\n\nexport const TabsContext = createContext<TabsContextType | null>(null);\n\nexport interface TabsProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  defaultIndex?: number;\n  isSelectOnFocus?: boolean;\n  onChange?: (index: number) => void;\n  children: ReactNode;\n  className?: string;\n}\n\nexport const Tabs = ({\n  defaultIndex = 0,\n  onChange,\n  isSelectOnFocus = false,\n  children,\n  className,\n  ...rest\n}: TabsProps) => {\n  const [selectedIndex, setSelectedIndex] = useState(defaultIndex);\n  const [previousIndex, setPreviousIndex] = useState(defaultIndex);\n  const id = useId();\n\n  useEffect(() => {\n    if (onChange && previousIndex !== selectedIndex) {\n      onChange(selectedIndex);\n    }\n  }, [onChange, previousIndex, selectedIndex]);\n\n  const arrayChildren = Children.toArray(children);\n  const count = arrayChildren.length - 1;\n\n  return (\n    <TabsContext.Provider\n      value={{\n        id,\n        count,\n        isSelectOnFocus,\n        selectedIndex,\n        setSelectedIndex,\n        setPreviousIndex,\n      }}\n    >\n      <div className={clsx(\"sds-tabs\", className)} {...rest}>\n        {Children.map(arrayChildren, (child, index) => {\n          if (isValidElement(child) && index > 0) {\n            return (\n              <>\n                {cloneElement(\n                  child as ReactElement<TabPanelProps & { index: number }>,\n                  {\n                    index: index - 1,\n                  },\n                )}\n              </>\n            );\n          } else {\n            return child;\n          }\n        })}\n      </div>\n    </TabsContext.Provider>\n  );\n};\n","import { clsx } from \"clsx/lite\";\nimport {\n  Children,\n  HTMLAttributes,\n  ReactElement,\n  ReactNode,\n  cloneElement,\n  isValidElement,\n} from \"react\";\nimport { TabProps } from \"./Tab\";\n\nexport interface TabListProps extends HTMLAttributes<HTMLDivElement> {\n  children: ReactNode;\n  \"aria-label\": NonNullable<string>;\n  className?: string;\n}\n\nexport const TabList = ({\n  children,\n  \"aria-label\": ariaLabel,\n  className,\n  ...rest\n}: TabListProps) => {\n  const arrayChildren = Children.toArray(children);\n\n  return (\n    <div\n      className={clsx(\"sds-tabs__tab-list\", className)}\n      role=\"tablist\"\n      aria-label={ariaLabel}\n      {...rest}\n    >\n      {Children.map(arrayChildren, (child, index) => {\n        if (isValidElement(child)) {\n          return (\n            <>\n              {cloneElement(\n                child as ReactElement<TabProps & { index: number }>,\n                {\n                  index,\n                },\n              )}\n            </>\n          );\n        }\n      })}\n    </div>\n  );\n};\n","import { type BadgeProps } from \"@sikt/sds-badge\";\nimport { clsx } from \"clsx/lite\";\nimport {\n  HTMLAttributes,\n  KeyboardEvent,\n  ReactElement,\n  ReactNode,\n  cloneElement,\n  isValidElement,\n  useContext,\n  PropsWithChildren,\n} from \"react\";\nimport { TabsContext } from \"./Tabs\";\n\nexport interface TabProps extends HTMLAttributes<HTMLButtonElement> {\n  children: ReactNode;\n  className?: string;\n  icon?: ReactNode;\n  badge?: ReactNode;\n}\n\nexport const Tab = ({\n  children,\n  className,\n  icon,\n  badge,\n  ...rest\n}: TabProps) => {\n  const { index } = rest as { index: number };\n  const context = useContext(TabsContext);\n\n  if (!context) {\n    console.warn(\n      \"TabContext missing. Component needs to be used inside <Tabs>\",\n    );\n    return null;\n  }\n\n  const {\n    id,\n    count,\n    isSelectOnFocus,\n    selectedIndex,\n    setSelectedIndex,\n    setPreviousIndex,\n  } = context;\n\n  const isSelected = index === selectedIndex;\n  const handleSelect = (index: number) => {\n    if (isSelectOnFocus) {\n      setPreviousIndex(selectedIndex);\n      setSelectedIndex(index);\n    }\n  };\n  const handleKeyPress = (event: KeyboardEvent<HTMLButtonElement>) => {\n    const firstIndex = 0;\n    const lastIndex = count - 1;\n    const currentTarget = event.currentTarget;\n    const firstChild = currentTarget.parentElement?.firstChild as HTMLElement;\n    const lastChild = currentTarget.parentElement?.lastChild as HTMLElement;\n\n    if (event.key === \"ArrowLeft\") {\n      const previousSibling = currentTarget.previousSibling as HTMLElement;\n      if (index > firstIndex) {\n        previousSibling.focus();\n      } else {\n        lastChild.focus();\n      }\n\n      handleSelect(selectedIndex > firstIndex ? selectedIndex - 1 : lastIndex);\n    } else if (event.key === \"ArrowRight\") {\n      const nextSibling = currentTarget.nextSibling as HTMLElement;\n      if (index < lastIndex) {\n        nextSibling.focus();\n      } else {\n        firstChild.focus();\n      }\n\n      handleSelect(selectedIndex < lastIndex ? selectedIndex + 1 : firstIndex);\n    } else if (event.key === \"Home\") {\n      firstChild.focus();\n      handleSelect(firstIndex);\n    } else if (event.key === \"End\") {\n      lastChild.focus();\n      handleSelect(lastIndex);\n    } else if (event.key === \"Enter\" || event.code === \"Space\") {\n      setSelectedIndex(index);\n    }\n  };\n\n  return (\n    <button\n      className={clsx(\"sds-tabs__tab\", className)}\n      role=\"tab\"\n      aria-selected={isSelected}\n      aria-controls={`panel-${id}-${index}`}\n      id={`tab-${id}-${index}`}\n      tabIndex={isSelected ? 0 : -1}\n      onClick={() => {\n        setPreviousIndex(selectedIndex);\n        setSelectedIndex(index);\n      }}\n      onKeyDown={handleKeyPress}\n      {...rest}\n    >\n      {icon && <span className=\"sds-tabs__tab-icon\">{icon}</span>}\n      {children}\n      {badge && (\n        <span className=\"sds-tabs__tab-badge\">\n          {isValidElement(badge) &&\n            cloneElement(badge as ReactElement<PropsWithChildren<BadgeProps>>, {\n              visibility: \"strong\",\n            })}\n        </span>\n      )}\n    </button>\n  );\n};\n","import { clsx } from \"clsx/lite\";\nimport { ReactNode, useContext } from \"react\";\nimport { TabsContext } from \"./Tabs\";\n\nexport interface TabPanelProps {\n  children: ReactNode;\n  className?: string;\n}\n\nexport const TabPanel = ({ children, className, ...rest }: TabPanelProps) => {\n  const { index } = rest as { index: number };\n  const context = useContext(TabsContext);\n\n  if (!context) {\n    console.warn(\n      \"TabContext missing. Component needs to be used inside <Tabs>\",\n    );\n    return null;\n  }\n\n  const { id, selectedIndex } = context;\n\n  const isSelected = index === selectedIndex;\n  return (\n    <div\n      className={clsx(\"sds-tabs__tab-panel\", className)}\n      id={`panel-${id}-${index}`}\n      role=\"tabpanel\"\n      tabIndex={isSelected ? undefined : -1}\n      aria-labelledby={`tab-${id}-${index}`}\n      hidden={!isSelected}\n      {...rest}\n    >\n      {children}\n    </div>\n  );\n};\n","import { type BadgeProps } from \"@sikt/sds-badge\";\nimport { clsx } from \"clsx/lite\";\nimport {\n  AnchorHTMLAttributes,\n  ReactElement,\n  ReactNode,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  PropsWithChildren,\n} from \"react\";\nimport \"./tab-link.pcss\";\n\nexport interface TabLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {\n  children: ReactNode;\n  className?: string;\n  icon?: ReactNode;\n  badge?: ReactNode;\n  isSelected?: boolean;\n}\n\nexport const TabLink = forwardRef<HTMLAnchorElement, TabLinkProps>(\n  (\n    {\n      children,\n      className,\n      icon,\n      badge,\n      href,\n      isSelected,\n      ...rest\n    }: TabLinkProps,\n    ref,\n  ) => {\n    return (\n      <a\n        className={clsx(\n          \"sds-tabs__tab\",\n          \"sds-tab-link\",\n          isSelected && \"sds-tab-link--selected\",\n          className,\n        )}\n        href={href}\n        ref={ref}\n        {...rest}\n      >\n        {icon && <div className=\"sds-tabs__tab-icon\">{icon}</div>}\n        {children}\n        {badge && (\n          <div className=\"sds-tabs__tab-badge\">\n            {isSelected\n              ? isValidElement(badge) &&\n                cloneElement(\n                  badge as ReactElement<PropsWithChildren<BadgeProps>>,\n                  { visibility: \"strong\" },\n                )\n              : badge}\n          </div>\n        )}\n      </a>\n    );\n  },\n);\n\nTabLink.displayName = \"TabLink\";\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikt/sds-tabs",
-  "version": "3.0.3",
+  "version": "3.0.4",
   "license": "UNLICENSED",
   "homepage": "https://designsystem.sikt.no/",
   "repository": {
@@ -35,7 +35,7 @@
     "build": "tsup"
   },
   "dependencies": {
-    "@sikt/sds-core": "^4.1.1"
+    "@sikt/sds-core": "^4.2.1"
   },
   "peerDependencies": {
     "@types/react": "^18.0.0 || ^19.0.0",