@entur/tab 0.7.1 → 1.0.0-next.0

package/dist/Tab.d.ts

@@ -5,8 +5,8 @@ export type TabProps = {
     /** Om taben er disabled eller ikke */
     disabled?: boolean;
     /** HTML-elementet eller React-komponenten som lager komponenten */
-    as?: keyof JSX.IntrinsicElements | any;
+    as?: keyof JSX.IntrinsicElements | React.ElementType;
     removeActiveLine?: boolean;
-    [key: string]: any;
-};
-export declare const Tab: React.FC<TabProps>;
+    className?: string;
+} & Omit<React.ComponentPropsWithoutRef<'button'>, 'children' | 'disabled'>;
+export declare const Tab: ({ className, removeActiveLine, as, disabled, children, ...rest }: TabProps) => import("react/jsx-runtime").JSX.Element;

package/dist/TabList.d.ts

@@ -3,8 +3,12 @@ export type TabListProps = {
     /** Tab-komponenter */
     children: React.ReactNode;
     /** HTML-elementet eller React-komponenten som lager komponenten */
-    as?: keyof JSX.IntrinsicElements | any;
+    as?: keyof JSX.IntrinsicElements | React.ElementType;
     width?: 'fluid';
-    [key: string]: any;
-};
-export declare const TabList: React.FC<TabListProps>;
+    className?: string;
+    /** Tilgjengelig navn på tab-listen (dersom det ikke finnes en synlig overskrift) */
+    'aria-label'?: string;
+    /** ID til elementet som navngir tab-listen */
+    'aria-labelledby'?: string;
+} & Omit<React.ComponentPropsWithoutRef<'div'>, 'children'>;
+export declare const TabList: ({ className, width, as, children, ...rest }: TabListProps) => import("react/jsx-runtime").JSX.Element;

package/dist/TabPanel.d.ts

@@ -1,9 +1,9 @@
 import { default as React } from 'react';
 export type TabPanelProps = {
-    /** Overskriften til taben */
-    children: React.ReactNode;
+    /** Innholdet i tab-panelet */
+    children?: React.ReactNode;
     /** HTML-elementet eller React-komponenten som lager komponenten */
-    as?: keyof JSX.IntrinsicElements | any;
-    [key: string]: any;
-};
-export declare const TabPanel: React.FC<TabPanelProps>;
+    as?: keyof JSX.IntrinsicElements | React.ElementType;
+    className?: string;
+} & Omit<React.ComponentPropsWithoutRef<'div'>, 'children'>;
+export declare const TabPanel: ({ className, as, children, ...rest }: TabPanelProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/TabPanels.d.ts

@@ -3,7 +3,9 @@ export type TabPanelsProps = {
     /** Tab-panelene */
     children: React.ReactNode;
     /** HTML-elementet eller React-komponenten som lager komponenten */
-    as?: keyof JSX.IntrinsicElements | any;
-    [key: string]: any;
-};
-export declare const TabPanels: React.FC<TabPanelsProps>;
+    as?: keyof JSX.IntrinsicElements | React.ElementType;
+    /** Behold alle panel-noder i DOM (skjult med hidden-attributt) i stedet for å avmontere */
+    keepMounted?: boolean;
+    className?: string;
+} & Omit<React.ComponentPropsWithoutRef<'div'>, 'children'>;
+export declare const TabPanels: ({ className, as, keepMounted, children, ...rest }: TabPanelsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Tabs.d.ts

@@ -1,15 +1,15 @@
 import { default as React } from 'react';
 export type TabsProps = {
-    /** Overskriften til taben */
+    /** Tab-innholdet */
     children: React.ReactNode;
     /** Kalles når taben endres */
     onChange?: (index: number) => void;
     /** Hvilken tab som skal være åpen by default */
     defaultIndex?: number;
-    /** Den åpne indexen */
+    /** Den åpne indexen (kontrollert) */
     index?: number;
     /** HTML-elementet eller React-komponenten som lager komponenten */
-    as?: keyof JSX.IntrinsicElements | any;
-    [key: string]: any;
-};
-export declare const Tabs: React.FC<TabsProps>;
+    as?: keyof JSX.IntrinsicElements | React.ElementType;
+    className?: string;
+} & Omit<React.ComponentPropsWithoutRef<'div'>, 'children' | 'onChange'>;
+export declare const Tabs: ({ className, index, defaultIndex, onChange, as, children, ...rest }: TabsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/TabsContext.d.ts

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+export type TabsContextValue = {
+    selectedIndex: number;
+    onSelect: (index: number) => void;
+    tabsId: string;
+};
+export declare const TabsContext: React.Context<TabsContextValue>;
+export type TabItemContextValue = {
+    tabIndex: number;
+    tabId: string;
+    panelId: string;
+};
+export declare const TabItemContext: React.Context<TabItemContextValue | null>;
+export type TabPanelItemContextValue = {
+    tabIndex: number;
+    tabId: string;
+    panelId: string;
+    keepMounted: boolean;
+};
+export declare const TabPanelItemContext: React.Context<TabPanelItemContextValue | null>;

package/dist/styles.css

@@ -186,7 +186,6 @@
 }
 
 :root{
-  --reach-tabs:1;
   --eds-tab:1;
 }
 
@@ -237,6 +236,18 @@
   color:#181c56;
   color:var(--components-tab-standard-text);
   cursor:pointer;
+  display:-webkit-inline-box;
+  display:-webkit-inline-flex;
+  display:-moz-inline-box;
+  display:inline-flex;
+  -webkit-box-align:center;
+  -webkit-align-items:center;
+     -moz-box-align:center;
+          align-items:center;
+  -webkit-box-pack:center;
+  -webkit-justify-content:center;
+     -moz-box-pack:center;
+          justify-content:center;
   font-family:inherit;
   font-size:inherit;
   height:3rem;
@@ -331,7 +342,7 @@
 .eds-tab--remove-active-line[aria-selected=true]::before{
   background:transparent;
 }
-.eds-tab[disabled]{
+.eds-tab[disabled], .eds-tab[aria-disabled=true]{
   background:#cfd2d4;
   background:var(--components-tab-standard-fill-disabled);
   border-color:none;
@@ -339,7 +350,7 @@
   color:var(--components-tab-standard-text-disabled);
   cursor:not-allowed;
 }
-.eds-contrast .eds-tab[disabled]{
+.eds-contrast .eds-tab[disabled], .eds-contrast .eds-tab[aria-disabled=true]{
   background:rgba(84, 86, 140, 0.4);
   background:var(--components-tab-contrast-fill-disabled);
   border-color:none;

package/dist/tab.cjs.js

@@ -2,59 +2,191 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const utils = require("@entur/utils");
 const jsxRuntime = require("react/jsx-runtime");
-const tabs = require("@reach/tabs");
+const React = require("react");
 const classNames = require("classnames");
+const TabsContext = React.createContext({
+  selectedIndex: 0,
+  onSelect: () => void 0,
+  tabsId: ""
+});
+const TabItemContext = React.createContext(
+  null
+);
+const TabPanelItemContext = React.createContext(null);
 const Tab = ({
   className,
   removeActiveLine = false,
+  as,
+  disabled = false,
+  children,
   ...rest
 }) => {
+  const { selectedIndex, onSelect } = React.useContext(TabsContext);
+  const itemContext = React.useContext(TabItemContext);
+  const tabIndex = itemContext?.tabIndex ?? 0;
+  const isSelected = selectedIndex === tabIndex;
+  const Element = as || "button";
   return /* @__PURE__ */ jsxRuntime.jsx(
-    tabs.Tab,
+    Element,
     {
+      role: "tab",
+      type: as ? void 0 : "button",
+      id: itemContext?.tabId,
+      "aria-selected": isSelected,
+      "aria-controls": itemContext?.panelId,
+      tabIndex: isSelected ? 0 : -1,
+      disabled: disabled || void 0,
+      "aria-disabled": disabled || void 0,
       className: classNames(
         "eds-tab",
         { "eds-tab--remove-active-line": removeActiveLine },
         className
       ),
-      ...rest
+      onClick: () => {
+        if (!disabled) onSelect(tabIndex);
+      },
+      ...rest,
+      children
     }
   );
 };
-const Tabs = ({ className, ...rest }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(tabs.Tabs, { className: classNames("eds-tabs", className), ...rest });
+const Tabs = ({
+  className,
+  index,
+  defaultIndex,
+  onChange,
+  as,
+  children,
+  ...rest
+}) => {
+  const [internalIndex, setInternalIndex] = React.useState(defaultIndex ?? 0);
+  const isControlled = index !== void 0;
+  const selectedIndex = isControlled ? index : internalIndex;
+  const tabsId = React.useId();
+  const onSelect = React.useCallback(
+    (i) => {
+      if (!isControlled) {
+        setInternalIndex(i);
+      }
+      onChange?.(i);
+    },
+    [isControlled, onChange]
+  );
+  const Element = as || "div";
+  return /* @__PURE__ */ jsxRuntime.jsx(TabsContext.Provider, { value: { selectedIndex, onSelect, tabsId }, children: /* @__PURE__ */ jsxRuntime.jsx(Element, { className: classNames("eds-tabs", className), ...rest, children }) });
 };
-const TabPanel = ({ className, ...rest }) => {
+const TabPanel = ({
+  className,
+  as,
+  children,
+  ...rest
+}) => {
+  const { selectedIndex } = React.useContext(TabsContext);
+  const itemContext = React.useContext(TabPanelItemContext);
+  const tabIndex = itemContext?.tabIndex ?? 0;
+  const keepMounted = itemContext?.keepMounted ?? false;
+  const isSelected = selectedIndex === tabIndex;
+  const isHiddenButMounted = keepMounted && !isSelected;
+  if (!isSelected && !keepMounted) return null;
+  const Element = as || "div";
   return /* @__PURE__ */ jsxRuntime.jsx(
-    tabs.TabPanel,
+    Element,
     {
+      role: "tabpanel",
+      id: itemContext?.panelId,
+      "aria-labelledby": itemContext?.tabId,
+      tabIndex: isSelected ? 0 : -1,
+      hidden: isHiddenButMounted || void 0,
       className: classNames("eds-tab-panel", className),
       ...rest,
-      tabIndex: void 0
+      children
     }
   );
 };
-const TabPanels = ({ className, ...rest }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    tabs.TabPanels,
+const TabPanels = ({
+  className,
+  as,
+  keepMounted = false,
+  children,
+  ...rest
+}) => {
+  const { tabsId } = React.useContext(TabsContext);
+  const Element = as || "div";
+  return /* @__PURE__ */ jsxRuntime.jsx(Element, { className: classNames("eds-tab-panels", className), ...rest, children: React.Children.map(children, (child, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+    TabPanelItemContext.Provider,
     {
-      className: classNames("eds-tab-panels", className),
-      ...rest
+      value: {
+        tabIndex: idx,
+        tabId: `${tabsId}-tab-${idx}`,
+        panelId: `${tabsId}-panel-${idx}`,
+        keepMounted
+      },
+      children: child
     }
-  );
+  )) });
 };
 const TabList = ({
   className,
   width,
+  as,
+  children,
   ...rest
 }) => {
+  const { tabsId } = React.useContext(TabsContext);
+  const tabListRef = React.useRef(null);
+  const handleKeyDown = React.useCallback((e) => {
+    const tabs = tabListRef.current?.querySelectorAll(
+      '[role="tab"]:not([disabled])'
+    );
+    if (!tabs || tabs.length === 0) return;
+    const currentIndex = Array.from(tabs).findIndex(
+      (tab) => tab === document.activeElement
+    );
+    if (currentIndex === -1) return;
+    let nextIndex;
+    switch (e.key) {
+      case "ArrowRight":
+        nextIndex = (currentIndex + 1) % tabs.length;
+        break;
+      case "ArrowLeft":
+        nextIndex = (currentIndex - 1 + tabs.length) % tabs.length;
+        break;
+      case "Home":
+        nextIndex = 0;
+        break;
+      case "End":
+        nextIndex = tabs.length - 1;
+        break;
+    }
+    if (nextIndex !== void 0) {
+      e.preventDefault();
+      tabs[nextIndex].focus();
+      tabs[nextIndex].click();
+    }
+  }, []);
+  const Element = as || "div";
   return /* @__PURE__ */ jsxRuntime.jsx(
-    tabs.TabList,
+    Element,
     {
+      role: "tablist",
+      tabIndex: -1,
+      ref: tabListRef,
       className: classNames("eds-tab-list", className, {
         "eds-tab-list--width-fluid": width === "fluid"
       }),
-      ...rest
+      onKeyDown: handleKeyDown,
+      ...rest,
+      children: React.Children.map(children, (child, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+        TabItemContext.Provider,
+        {
+          value: {
+            tabIndex: idx,
+            tabId: `${tabsId}-tab-${idx}`,
+            panelId: `${tabsId}-panel-${idx}`
+          },
+          children: child
+        }
+      ))
     }
   );
 };

package/dist/tab.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab.cjs.js","sources":["../src/Tab.tsx","../src/Tabs.tsx","../src/TabPanel.tsx","../src/TabPanels.tsx","../src/TabList.tsx","../src/index.tsx"],"sourcesContent":["import React from 'react';\nimport { Tab as ReachTab } from '@reach/tabs';\nimport classNames from 'classnames';\n\nexport type TabProps = {\n  /** Overskriften til taben */\n  children: React.ReactNode;\n  /** Om taben er disabled eller ikke */\n  disabled?: boolean;\n  /** HTML-elementet eller React-komponenten som lager komponenten */\n  as?: keyof JSX.IntrinsicElements | any;\n  removeActiveLine?: boolean;\n  [key: string]: any;\n};\n\nexport const Tab: React.FC<TabProps> = ({\n  className,\n  removeActiveLine = false,\n  ...rest\n}) => {\n  return (\n    <ReachTab\n      className={classNames(\n        'eds-tab',\n        { 'eds-tab--remove-active-line': removeActiveLine },\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n","import React from 'react';\nimport { Tabs as ReachTabs } from '@reach/tabs';\nimport classNames from 'classnames';\n\nexport type TabsProps = {\n  /** Overskriften til taben */\n  children: React.ReactNode;\n  /** Kalles når taben endres */\n  onChange?: (index: number) => void;\n  /** Hvilken tab som skal være åpen by default */\n  defaultIndex?: number;\n  /** Den åpne indexen */\n  index?: number;\n  /** HTML-elementet eller React-komponenten som lager komponenten */\n  as?: keyof JSX.IntrinsicElements | any;\n\n  [key: string]: any;\n};\n\nexport const Tabs: React.FC<TabsProps> = ({ className, ...rest }) => {\n  return <ReachTabs className={classNames('eds-tabs', className)} {...rest} />;\n};\n","import React from 'react';\nimport { TabPanel as ReachTabPanel } from '@reach/tabs';\nimport classNames from 'classnames';\n\nexport type TabPanelProps = {\n  /** Overskriften til taben */\n  children: React.ReactNode;\n  /** HTML-elementet eller React-komponenten som lager komponenten */\n  as?: keyof JSX.IntrinsicElements | any;\n  [key: string]: any;\n};\n\nexport const TabPanel: React.FC<TabPanelProps> = ({ className, ...rest }) => {\n  return (\n    <ReachTabPanel\n      className={classNames('eds-tab-panel', className)}\n      {...rest}\n      tabIndex={undefined}\n    />\n  );\n};\n","import React from 'react';\nimport { TabPanels as ReachTabPanels } from '@reach/tabs';\nimport classNames from 'classnames';\n\nexport type TabPanelsProps = {\n  /** Tab-panelene */\n  children: React.ReactNode;\n  /** HTML-elementet eller React-komponenten som lager komponenten */\n  as?: keyof JSX.IntrinsicElements | any;\n  [key: string]: any;\n};\n\nexport const TabPanels: React.FC<TabPanelsProps> = ({ className, ...rest }) => {\n  return (\n    <ReachTabPanels\n      className={classNames('eds-tab-panels', className)}\n      {...rest}\n    />\n  );\n};\n","import React from 'react';\nimport { TabList as ReachTabList } from '@reach/tabs';\nimport classNames from 'classnames';\n\nexport type TabListProps = {\n  /** Tab-komponenter */\n  children: React.ReactNode;\n  /** HTML-elementet eller React-komponenten som lager komponenten */\n  as?: keyof JSX.IntrinsicElements | any;\n  width?: 'fluid';\n  [key: string]: any;\n};\n\nexport const TabList: React.FC<TabListProps> = ({\n  className,\n  width,\n  ...rest\n}) => {\n  return (\n    <ReachTabList\n      className={classNames('eds-tab-list', className, {\n        'eds-tab-list--width-fluid': width === 'fluid',\n      })}\n      {...rest}\n    />\n  );\n};\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('tab');\n\nexport * from './Tab';\nexport * from './Tabs';\nexport * from './TabPanel';\nexport * from './TabPanels';\nexport * from './TabList';\n"],"names":["jsx","ReachTab","ReachTabs","ReachTabPanel","ReachTabPanels","ReachTabList","warnAboutMissingStyles"],"mappings":";;;;;;AAeO,MAAM,MAA0B,CAAC;AAAA,EACtC;AAAA,EACA,mBAAmB;AAAA,EACnB,GAAG;AACL,MAAM;AACJ,SACEA,2BAAAA;AAAAA,IAACC,KAAAA;AAAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,EAAE,+BAA+B,iBAAA;AAAA,QACjC;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;ACXO,MAAM,OAA4B,CAAC,EAAE,WAAW,GAAG,WAAW;AACnE,SAAOD,2BAAAA,IAACE,aAAU,WAAW,WAAW,YAAY,SAAS,GAAI,GAAG,MAAM;AAC5E;ACTO,MAAM,WAAoC,CAAC,EAAE,WAAW,GAAG,WAAW;AAC3E,SACEF,2BAAAA;AAAAA,IAACG,KAAAA;AAAAA,IAAA;AAAA,MACC,WAAW,WAAW,iBAAiB,SAAS;AAAA,MAC/C,GAAG;AAAA,MACJ,UAAU;AAAA,IAAA;AAAA,EAAA;AAGhB;ACRO,MAAM,YAAsC,CAAC,EAAE,WAAW,GAAG,WAAW;AAC7E,SACEH,2BAAAA;AAAAA,IAACI,KAAAA;AAAAA,IAAA;AAAA,MACC,WAAW,WAAW,kBAAkB,SAAS;AAAA,MAChD,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;ACNO,MAAM,UAAkC,CAAC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,SACEJ,2BAAAA;AAAAA,IAACK,KAAAA;AAAAA,IAAA;AAAA,MACC,WAAW,WAAW,gBAAgB,WAAW;AAAA,QAC/C,6BAA6B,UAAU;AAAA,MAAA,CACxC;AAAA,MACA,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;ACvBAC,MAAAA,uBAAuB,KAAK;;;;;;"}
+{"version":3,"file":"tab.cjs.js","sources":["../src/TabsContext.tsx","../src/Tab.tsx","../src/Tabs.tsx","../src/TabPanel.tsx","../src/TabPanels.tsx","../src/TabList.tsx","../src/index.tsx"],"sourcesContent":["import React from 'react';\n\nexport type TabsContextValue = {\n  selectedIndex: number;\n  onSelect: (index: number) => void;\n  tabsId: string;\n};\n\nexport const TabsContext = React.createContext<TabsContextValue>({\n  selectedIndex: 0,\n  onSelect: () => undefined,\n  tabsId: '',\n});\n\nexport type TabItemContextValue = {\n  tabIndex: number;\n  tabId: string;\n  panelId: string;\n};\n\nexport const TabItemContext = React.createContext<TabItemContextValue | null>(\n  null,\n);\n\nexport type TabPanelItemContextValue = {\n  tabIndex: number;\n  tabId: string;\n  panelId: string;\n  keepMounted: boolean;\n};\n\nexport const TabPanelItemContext =\n  React.createContext<TabPanelItemContextValue | null>(null);\n","import React, { useContext } from 'react';\nimport classNames from 'classnames';\n\nimport { TabItemContext, TabsContext } from './TabsContext';\n\nexport type TabProps = {\n  /** Overskriften til taben */\n  children: React.ReactNode;\n  /** Om taben er disabled eller ikke */\n  disabled?: boolean;\n  /** HTML-elementet eller React-komponenten som lager komponenten */\n  as?: keyof JSX.IntrinsicElements | React.ElementType;\n  removeActiveLine?: boolean;\n  className?: string;\n} & Omit<React.ComponentPropsWithoutRef<'button'>, 'children' | 'disabled'>;\n\nexport const Tab = ({\n  className,\n  removeActiveLine = false,\n  as,\n  disabled = false,\n  children,\n  ...rest\n}: TabProps) => {\n  const { selectedIndex, onSelect } = useContext(TabsContext);\n  const itemContext = useContext(TabItemContext);\n  const tabIndex = itemContext?.tabIndex ?? 0;\n  const isSelected = selectedIndex === tabIndex;\n  const Element: React.ElementType = as || 'button';\n\n  return (\n    <Element\n      role=\"tab\"\n      type={as ? undefined : 'button'}\n      id={itemContext?.tabId}\n      aria-selected={isSelected}\n      aria-controls={itemContext?.panelId}\n      tabIndex={isSelected ? 0 : -1}\n      disabled={disabled || undefined}\n      aria-disabled={disabled || undefined}\n      className={classNames(\n        'eds-tab',\n        { 'eds-tab--remove-active-line': removeActiveLine },\n        className,\n      )}\n      onClick={() => {\n        if (!disabled) onSelect(tabIndex);\n      }}\n      {...rest}\n    >\n      {children}\n    </Element>\n  );\n};\n","import React, { useCallback, useId, useState } from 'react';\nimport classNames from 'classnames';\n\nimport { TabsContext } from './TabsContext';\n\nexport type TabsProps = {\n  /** Tab-innholdet */\n  children: React.ReactNode;\n  /** Kalles når taben endres */\n  onChange?: (index: number) => void;\n  /** Hvilken tab som skal være åpen by default */\n  defaultIndex?: number;\n  /** Den åpne indexen (kontrollert) */\n  index?: number;\n  /** HTML-elementet eller React-komponenten som lager komponenten */\n  as?: keyof JSX.IntrinsicElements | React.ElementType;\n  className?: string;\n} & Omit<React.ComponentPropsWithoutRef<'div'>, 'children' | 'onChange'>;\n\nexport const Tabs = ({\n  className,\n  index,\n  defaultIndex,\n  onChange,\n  as,\n  children,\n  ...rest\n}: TabsProps) => {\n  const [internalIndex, setInternalIndex] = useState(defaultIndex ?? 0);\n  const isControlled = index !== undefined;\n  const selectedIndex = isControlled ? index : internalIndex;\n  const tabsId = useId();\n\n  const onSelect = useCallback(\n    (i: number) => {\n      if (!isControlled) {\n        setInternalIndex(i);\n      }\n      onChange?.(i);\n    },\n    [isControlled, onChange],\n  );\n\n  const Element: React.ElementType = as || 'div';\n\n  return (\n    <TabsContext.Provider value={{ selectedIndex, onSelect, tabsId }}>\n      <Element className={classNames('eds-tabs', className)} {...rest}>\n        {children}\n      </Element>\n    </TabsContext.Provider>\n  );\n};\n","import React, { useContext } from 'react';\nimport classNames from 'classnames';\n\nimport { TabPanelItemContext, TabsContext } from './TabsContext';\n\nexport type TabPanelProps = {\n  /** Innholdet i tab-panelet */\n  children?: React.ReactNode;\n  /** HTML-elementet eller React-komponenten som lager komponenten */\n  as?: keyof JSX.IntrinsicElements | React.ElementType;\n  className?: string;\n} & Omit<React.ComponentPropsWithoutRef<'div'>, 'children'>;\n\nexport const TabPanel = ({\n  className,\n  as,\n  children,\n  ...rest\n}: TabPanelProps) => {\n  const { selectedIndex } = useContext(TabsContext);\n  const itemContext = useContext(TabPanelItemContext);\n  const tabIndex = itemContext?.tabIndex ?? 0;\n  const keepMounted = itemContext?.keepMounted ?? false;\n\n  const isSelected = selectedIndex === tabIndex;\n  const isHiddenButMounted = keepMounted && !isSelected;\n\n  if (!isSelected && !keepMounted) return null;\n\n  const Element: React.ElementType = as || 'div';\n\n  return (\n    <Element\n      role=\"tabpanel\"\n      id={itemContext?.panelId}\n      aria-labelledby={itemContext?.tabId}\n      tabIndex={isSelected ? 0 : -1}\n      hidden={isHiddenButMounted || undefined}\n      className={classNames('eds-tab-panel', className)}\n      {...rest}\n    >\n      {children}\n    </Element>\n  );\n};\n","import React, { useContext } from 'react';\nimport classNames from 'classnames';\n\nimport { TabPanelItemContext, TabsContext } from './TabsContext';\n\nexport type TabPanelsProps = {\n  /** Tab-panelene */\n  children: React.ReactNode;\n  /** HTML-elementet eller React-komponenten som lager komponenten */\n  as?: keyof JSX.IntrinsicElements | React.ElementType;\n  /** Behold alle panel-noder i DOM (skjult med hidden-attributt) i stedet for å avmontere */\n  keepMounted?: boolean;\n  className?: string;\n} & Omit<React.ComponentPropsWithoutRef<'div'>, 'children'>;\n\nexport const TabPanels = ({\n  className,\n  as,\n  keepMounted = false,\n  children,\n  ...rest\n}: TabPanelsProps) => {\n  const { tabsId } = useContext(TabsContext);\n\n  const Element: React.ElementType = as || 'div';\n\n  return (\n    <Element className={classNames('eds-tab-panels', className)} {...rest}>\n      {React.Children.map(children, (child, idx) => (\n        <TabPanelItemContext.Provider\n          value={{\n            tabIndex: idx,\n            tabId: `${tabsId}-tab-${idx}`,\n            panelId: `${tabsId}-panel-${idx}`,\n            keepMounted,\n          }}\n        >\n          {child}\n        </TabPanelItemContext.Provider>\n      ))}\n    </Element>\n  );\n};\n","import React, { useCallback, useContext, useRef } from 'react';\nimport classNames from 'classnames';\n\nimport { TabItemContext, TabsContext } from './TabsContext';\n\nexport type TabListProps = {\n  /** Tab-komponenter */\n  children: React.ReactNode;\n  /** HTML-elementet eller React-komponenten som lager komponenten */\n  as?: keyof JSX.IntrinsicElements | React.ElementType;\n  width?: 'fluid';\n  className?: string;\n  /** Tilgjengelig navn på tab-listen (dersom det ikke finnes en synlig overskrift) */\n  'aria-label'?: string;\n  /** ID til elementet som navngir tab-listen */\n  'aria-labelledby'?: string;\n} & Omit<React.ComponentPropsWithoutRef<'div'>, 'children'>;\n\nexport const TabList = ({\n  className,\n  width,\n  as,\n  children,\n  ...rest\n}: TabListProps) => {\n  const { tabsId } = useContext(TabsContext);\n  const tabListRef = useRef<HTMLElement>(null);\n\n  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {\n    const tabs = tabListRef.current?.querySelectorAll<HTMLElement>(\n      '[role=\"tab\"]:not([disabled])',\n    );\n    if (!tabs || tabs.length === 0) return;\n\n    const currentIndex = Array.from(tabs).findIndex(\n      tab => tab === document.activeElement,\n    );\n    if (currentIndex === -1) return;\n\n    let nextIndex: number | undefined;\n    switch (e.key) {\n      case 'ArrowRight':\n        nextIndex = (currentIndex + 1) % tabs.length;\n        break;\n      case 'ArrowLeft':\n        nextIndex = (currentIndex - 1 + tabs.length) % tabs.length;\n        break;\n      case 'Home':\n        nextIndex = 0;\n        break;\n      case 'End':\n        nextIndex = tabs.length - 1;\n        break;\n    }\n\n    if (nextIndex !== undefined) {\n      e.preventDefault();\n      tabs[nextIndex].focus();\n      tabs[nextIndex].click();\n    }\n  }, []);\n\n  const Element: React.ElementType = as || 'div';\n\n  return (\n    <Element\n      role=\"tablist\"\n      tabIndex={-1}\n      ref={tabListRef}\n      className={classNames('eds-tab-list', className, {\n        'eds-tab-list--width-fluid': width === 'fluid',\n      })}\n      onKeyDown={handleKeyDown}\n      {...rest}\n    >\n      {React.Children.map(children, (child, idx) => (\n        <TabItemContext.Provider\n          value={{\n            tabIndex: idx,\n            tabId: `${tabsId}-tab-${idx}`,\n            panelId: `${tabsId}-panel-${idx}`,\n          }}\n        >\n          {child}\n        </TabItemContext.Provider>\n      ))}\n    </Element>\n  );\n};\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('tab');\n\nexport * from './Tab';\nexport * from './Tabs';\nexport * from './TabPanel';\nexport * from './TabPanels';\nexport * from './TabList';\n"],"names":["useContext","jsx","useState","useId","useCallback","useRef","warnAboutMissingStyles"],"mappings":"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"}

package/dist/tab.esm.js

@@ -1,58 +1,190 @@
 import { warnAboutMissingStyles } from "@entur/utils";
 import { jsx } from "react/jsx-runtime";
-import { Tab as Tab$1, Tabs as Tabs$1, TabPanel as TabPanel$1, TabPanels as TabPanels$1, TabList as TabList$1 } from "@reach/tabs";
+import React, { useContext, useState, useId, useCallback, useRef } from "react";
 import classNames from "classnames";
+const TabsContext = React.createContext({
+  selectedIndex: 0,
+  onSelect: () => void 0,
+  tabsId: ""
+});
+const TabItemContext = React.createContext(
+  null
+);
+const TabPanelItemContext = React.createContext(null);
 const Tab = ({
   className,
   removeActiveLine = false,
+  as,
+  disabled = false,
+  children,
   ...rest
 }) => {
+  const { selectedIndex, onSelect } = useContext(TabsContext);
+  const itemContext = useContext(TabItemContext);
+  const tabIndex = itemContext?.tabIndex ?? 0;
+  const isSelected = selectedIndex === tabIndex;
+  const Element = as || "button";
   return /* @__PURE__ */ jsx(
-    Tab$1,
+    Element,
     {
+      role: "tab",
+      type: as ? void 0 : "button",
+      id: itemContext?.tabId,
+      "aria-selected": isSelected,
+      "aria-controls": itemContext?.panelId,
+      tabIndex: isSelected ? 0 : -1,
+      disabled: disabled || void 0,
+      "aria-disabled": disabled || void 0,
       className: classNames(
         "eds-tab",
         { "eds-tab--remove-active-line": removeActiveLine },
         className
       ),
-      ...rest
+      onClick: () => {
+        if (!disabled) onSelect(tabIndex);
+      },
+      ...rest,
+      children
     }
   );
 };
-const Tabs = ({ className, ...rest }) => {
-  return /* @__PURE__ */ jsx(Tabs$1, { className: classNames("eds-tabs", className), ...rest });
+const Tabs = ({
+  className,
+  index,
+  defaultIndex,
+  onChange,
+  as,
+  children,
+  ...rest
+}) => {
+  const [internalIndex, setInternalIndex] = useState(defaultIndex ?? 0);
+  const isControlled = index !== void 0;
+  const selectedIndex = isControlled ? index : internalIndex;
+  const tabsId = useId();
+  const onSelect = useCallback(
+    (i) => {
+      if (!isControlled) {
+        setInternalIndex(i);
+      }
+      onChange?.(i);
+    },
+    [isControlled, onChange]
+  );
+  const Element = as || "div";
+  return /* @__PURE__ */ jsx(TabsContext.Provider, { value: { selectedIndex, onSelect, tabsId }, children: /* @__PURE__ */ jsx(Element, { className: classNames("eds-tabs", className), ...rest, children }) });
 };
-const TabPanel = ({ className, ...rest }) => {
+const TabPanel = ({
+  className,
+  as,
+  children,
+  ...rest
+}) => {
+  const { selectedIndex } = useContext(TabsContext);
+  const itemContext = useContext(TabPanelItemContext);
+  const tabIndex = itemContext?.tabIndex ?? 0;
+  const keepMounted = itemContext?.keepMounted ?? false;
+  const isSelected = selectedIndex === tabIndex;
+  const isHiddenButMounted = keepMounted && !isSelected;
+  if (!isSelected && !keepMounted) return null;
+  const Element = as || "div";
   return /* @__PURE__ */ jsx(
-    TabPanel$1,
+    Element,
     {
+      role: "tabpanel",
+      id: itemContext?.panelId,
+      "aria-labelledby": itemContext?.tabId,
+      tabIndex: isSelected ? 0 : -1,
+      hidden: isHiddenButMounted || void 0,
       className: classNames("eds-tab-panel", className),
       ...rest,
-      tabIndex: void 0
+      children
     }
   );
 };
-const TabPanels = ({ className, ...rest }) => {
-  return /* @__PURE__ */ jsx(
-    TabPanels$1,
+const TabPanels = ({
+  className,
+  as,
+  keepMounted = false,
+  children,
+  ...rest
+}) => {
+  const { tabsId } = useContext(TabsContext);
+  const Element = as || "div";
+  return /* @__PURE__ */ jsx(Element, { className: classNames("eds-tab-panels", className), ...rest, children: React.Children.map(children, (child, idx) => /* @__PURE__ */ jsx(
+    TabPanelItemContext.Provider,
     {
-      className: classNames("eds-tab-panels", className),
-      ...rest
+      value: {
+        tabIndex: idx,
+        tabId: `${tabsId}-tab-${idx}`,
+        panelId: `${tabsId}-panel-${idx}`,
+        keepMounted
+      },
+      children: child
     }
-  );
+  )) });
 };
 const TabList = ({
   className,
   width,
+  as,
+  children,
   ...rest
 }) => {
+  const { tabsId } = useContext(TabsContext);
+  const tabListRef = useRef(null);
+  const handleKeyDown = useCallback((e) => {
+    const tabs = tabListRef.current?.querySelectorAll(
+      '[role="tab"]:not([disabled])'
+    );
+    if (!tabs || tabs.length === 0) return;
+    const currentIndex = Array.from(tabs).findIndex(
+      (tab) => tab === document.activeElement
+    );
+    if (currentIndex === -1) return;
+    let nextIndex;
+    switch (e.key) {
+      case "ArrowRight":
+        nextIndex = (currentIndex + 1) % tabs.length;
+        break;
+      case "ArrowLeft":
+        nextIndex = (currentIndex - 1 + tabs.length) % tabs.length;
+        break;
+      case "Home":
+        nextIndex = 0;
+        break;
+      case "End":
+        nextIndex = tabs.length - 1;
+        break;
+    }
+    if (nextIndex !== void 0) {
+      e.preventDefault();
+      tabs[nextIndex].focus();
+      tabs[nextIndex].click();
+    }
+  }, []);
+  const Element = as || "div";
   return /* @__PURE__ */ jsx(
-    TabList$1,
+    Element,
     {
+      role: "tablist",
+      tabIndex: -1,
+      ref: tabListRef,
       className: classNames("eds-tab-list", className, {
         "eds-tab-list--width-fluid": width === "fluid"
       }),
-      ...rest
+      onKeyDown: handleKeyDown,
+      ...rest,
+      children: React.Children.map(children, (child, idx) => /* @__PURE__ */ jsx(
+        TabItemContext.Provider,
+        {
+          value: {
+            tabIndex: idx,
+            tabId: `${tabsId}-tab-${idx}`,
+            panelId: `${tabsId}-panel-${idx}`
+          },
+          children: child
+        }
+      ))
     }
   );
 };

package/dist/tab.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab.esm.js","sources":["../src/Tab.tsx","../src/Tabs.tsx","../src/TabPanel.tsx","../src/TabPanels.tsx","../src/TabList.tsx","../src/index.tsx"],"sourcesContent":["import React from 'react';\nimport { Tab as ReachTab } from '@reach/tabs';\nimport classNames from 'classnames';\n\nexport type TabProps = {\n  /** Overskriften til taben */\n  children: React.ReactNode;\n  /** Om taben er disabled eller ikke */\n  disabled?: boolean;\n  /** HTML-elementet eller React-komponenten som lager komponenten */\n  as?: keyof JSX.IntrinsicElements | any;\n  removeActiveLine?: boolean;\n  [key: string]: any;\n};\n\nexport const Tab: React.FC<TabProps> = ({\n  className,\n  removeActiveLine = false,\n  ...rest\n}) => {\n  return (\n    <ReachTab\n      className={classNames(\n        'eds-tab',\n        { 'eds-tab--remove-active-line': removeActiveLine },\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n","import React from 'react';\nimport { Tabs as ReachTabs } from '@reach/tabs';\nimport classNames from 'classnames';\n\nexport type TabsProps = {\n  /** Overskriften til taben */\n  children: React.ReactNode;\n  /** Kalles når taben endres */\n  onChange?: (index: number) => void;\n  /** Hvilken tab som skal være åpen by default */\n  defaultIndex?: number;\n  /** Den åpne indexen */\n  index?: number;\n  /** HTML-elementet eller React-komponenten som lager komponenten */\n  as?: keyof JSX.IntrinsicElements | any;\n\n  [key: string]: any;\n};\n\nexport const Tabs: React.FC<TabsProps> = ({ className, ...rest }) => {\n  return <ReachTabs className={classNames('eds-tabs', className)} {...rest} />;\n};\n","import React from 'react';\nimport { TabPanel as ReachTabPanel } from '@reach/tabs';\nimport classNames from 'classnames';\n\nexport type TabPanelProps = {\n  /** Overskriften til taben */\n  children: React.ReactNode;\n  /** HTML-elementet eller React-komponenten som lager komponenten */\n  as?: keyof JSX.IntrinsicElements | any;\n  [key: string]: any;\n};\n\nexport const TabPanel: React.FC<TabPanelProps> = ({ className, ...rest }) => {\n  return (\n    <ReachTabPanel\n      className={classNames('eds-tab-panel', className)}\n      {...rest}\n      tabIndex={undefined}\n    />\n  );\n};\n","import React from 'react';\nimport { TabPanels as ReachTabPanels } from '@reach/tabs';\nimport classNames from 'classnames';\n\nexport type TabPanelsProps = {\n  /** Tab-panelene */\n  children: React.ReactNode;\n  /** HTML-elementet eller React-komponenten som lager komponenten */\n  as?: keyof JSX.IntrinsicElements | any;\n  [key: string]: any;\n};\n\nexport const TabPanels: React.FC<TabPanelsProps> = ({ className, ...rest }) => {\n  return (\n    <ReachTabPanels\n      className={classNames('eds-tab-panels', className)}\n      {...rest}\n    />\n  );\n};\n","import React from 'react';\nimport { TabList as ReachTabList } from '@reach/tabs';\nimport classNames from 'classnames';\n\nexport type TabListProps = {\n  /** Tab-komponenter */\n  children: React.ReactNode;\n  /** HTML-elementet eller React-komponenten som lager komponenten */\n  as?: keyof JSX.IntrinsicElements | any;\n  width?: 'fluid';\n  [key: string]: any;\n};\n\nexport const TabList: React.FC<TabListProps> = ({\n  className,\n  width,\n  ...rest\n}) => {\n  return (\n    <ReachTabList\n      className={classNames('eds-tab-list', className, {\n        'eds-tab-list--width-fluid': width === 'fluid',\n      })}\n      {...rest}\n    />\n  );\n};\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('tab');\n\nexport * from './Tab';\nexport * from './Tabs';\nexport * from './TabPanel';\nexport * from './TabPanels';\nexport * from './TabList';\n"],"names":["ReachTab","ReachTabs","ReachTabPanel","ReachTabPanels","ReachTabList"],"mappings":";;;;AAeO,MAAM,MAA0B,CAAC;AAAA,EACtC;AAAA,EACA,mBAAmB;AAAA,EACnB,GAAG;AACL,MAAM;AACJ,SACE;AAAA,IAACA;AAAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA,EAAE,+BAA+B,iBAAA;AAAA,QACjC;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;ACXO,MAAM,OAA4B,CAAC,EAAE,WAAW,GAAG,WAAW;AACnE,SAAO,oBAACC,UAAU,WAAW,WAAW,YAAY,SAAS,GAAI,GAAG,MAAM;AAC5E;ACTO,MAAM,WAAoC,CAAC,EAAE,WAAW,GAAG,WAAW;AAC3E,SACE;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,WAAW,WAAW,iBAAiB,SAAS;AAAA,MAC/C,GAAG;AAAA,MACJ,UAAU;AAAA,IAAA;AAAA,EAAA;AAGhB;ACRO,MAAM,YAAsC,CAAC,EAAE,WAAW,GAAG,WAAW;AAC7E,SACE;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,WAAW,WAAW,kBAAkB,SAAS;AAAA,MAChD,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;ACNO,MAAM,UAAkC,CAAC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,SACE;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,WAAW,WAAW,gBAAgB,WAAW;AAAA,QAC/C,6BAA6B,UAAU;AAAA,MAAA,CACxC;AAAA,MACA,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;ACvBA,uBAAuB,KAAK;"}
+{"version":3,"file":"tab.esm.js","sources":["../src/TabsContext.tsx","../src/Tab.tsx","../src/Tabs.tsx","../src/TabPanel.tsx","../src/TabPanels.tsx","../src/TabList.tsx","../src/index.tsx"],"sourcesContent":["import React from 'react';\n\nexport type TabsContextValue = {\n  selectedIndex: number;\n  onSelect: (index: number) => void;\n  tabsId: string;\n};\n\nexport const TabsContext = React.createContext<TabsContextValue>({\n  selectedIndex: 0,\n  onSelect: () => undefined,\n  tabsId: '',\n});\n\nexport type TabItemContextValue = {\n  tabIndex: number;\n  tabId: string;\n  panelId: string;\n};\n\nexport const TabItemContext = React.createContext<TabItemContextValue | null>(\n  null,\n);\n\nexport type TabPanelItemContextValue = {\n  tabIndex: number;\n  tabId: string;\n  panelId: string;\n  keepMounted: boolean;\n};\n\nexport const TabPanelItemContext =\n  React.createContext<TabPanelItemContextValue | null>(null);\n","import React, { useContext } from 'react';\nimport classNames from 'classnames';\n\nimport { TabItemContext, TabsContext } from './TabsContext';\n\nexport type TabProps = {\n  /** Overskriften til taben */\n  children: React.ReactNode;\n  /** Om taben er disabled eller ikke */\n  disabled?: boolean;\n  /** HTML-elementet eller React-komponenten som lager komponenten */\n  as?: keyof JSX.IntrinsicElements | React.ElementType;\n  removeActiveLine?: boolean;\n  className?: string;\n} & Omit<React.ComponentPropsWithoutRef<'button'>, 'children' | 'disabled'>;\n\nexport const Tab = ({\n  className,\n  removeActiveLine = false,\n  as,\n  disabled = false,\n  children,\n  ...rest\n}: TabProps) => {\n  const { selectedIndex, onSelect } = useContext(TabsContext);\n  const itemContext = useContext(TabItemContext);\n  const tabIndex = itemContext?.tabIndex ?? 0;\n  const isSelected = selectedIndex === tabIndex;\n  const Element: React.ElementType = as || 'button';\n\n  return (\n    <Element\n      role=\"tab\"\n      type={as ? undefined : 'button'}\n      id={itemContext?.tabId}\n      aria-selected={isSelected}\n      aria-controls={itemContext?.panelId}\n      tabIndex={isSelected ? 0 : -1}\n      disabled={disabled || undefined}\n      aria-disabled={disabled || undefined}\n      className={classNames(\n        'eds-tab',\n        { 'eds-tab--remove-active-line': removeActiveLine },\n        className,\n      )}\n      onClick={() => {\n        if (!disabled) onSelect(tabIndex);\n      }}\n      {...rest}\n    >\n      {children}\n    </Element>\n  );\n};\n","import React, { useCallback, useId, useState } from 'react';\nimport classNames from 'classnames';\n\nimport { TabsContext } from './TabsContext';\n\nexport type TabsProps = {\n  /** Tab-innholdet */\n  children: React.ReactNode;\n  /** Kalles når taben endres */\n  onChange?: (index: number) => void;\n  /** Hvilken tab som skal være åpen by default */\n  defaultIndex?: number;\n  /** Den åpne indexen (kontrollert) */\n  index?: number;\n  /** HTML-elementet eller React-komponenten som lager komponenten */\n  as?: keyof JSX.IntrinsicElements | React.ElementType;\n  className?: string;\n} & Omit<React.ComponentPropsWithoutRef<'div'>, 'children' | 'onChange'>;\n\nexport const Tabs = ({\n  className,\n  index,\n  defaultIndex,\n  onChange,\n  as,\n  children,\n  ...rest\n}: TabsProps) => {\n  const [internalIndex, setInternalIndex] = useState(defaultIndex ?? 0);\n  const isControlled = index !== undefined;\n  const selectedIndex = isControlled ? index : internalIndex;\n  const tabsId = useId();\n\n  const onSelect = useCallback(\n    (i: number) => {\n      if (!isControlled) {\n        setInternalIndex(i);\n      }\n      onChange?.(i);\n    },\n    [isControlled, onChange],\n  );\n\n  const Element: React.ElementType = as || 'div';\n\n  return (\n    <TabsContext.Provider value={{ selectedIndex, onSelect, tabsId }}>\n      <Element className={classNames('eds-tabs', className)} {...rest}>\n        {children}\n      </Element>\n    </TabsContext.Provider>\n  );\n};\n","import React, { useContext } from 'react';\nimport classNames from 'classnames';\n\nimport { TabPanelItemContext, TabsContext } from './TabsContext';\n\nexport type TabPanelProps = {\n  /** Innholdet i tab-panelet */\n  children?: React.ReactNode;\n  /** HTML-elementet eller React-komponenten som lager komponenten */\n  as?: keyof JSX.IntrinsicElements | React.ElementType;\n  className?: string;\n} & Omit<React.ComponentPropsWithoutRef<'div'>, 'children'>;\n\nexport const TabPanel = ({\n  className,\n  as,\n  children,\n  ...rest\n}: TabPanelProps) => {\n  const { selectedIndex } = useContext(TabsContext);\n  const itemContext = useContext(TabPanelItemContext);\n  const tabIndex = itemContext?.tabIndex ?? 0;\n  const keepMounted = itemContext?.keepMounted ?? false;\n\n  const isSelected = selectedIndex === tabIndex;\n  const isHiddenButMounted = keepMounted && !isSelected;\n\n  if (!isSelected && !keepMounted) return null;\n\n  const Element: React.ElementType = as || 'div';\n\n  return (\n    <Element\n      role=\"tabpanel\"\n      id={itemContext?.panelId}\n      aria-labelledby={itemContext?.tabId}\n      tabIndex={isSelected ? 0 : -1}\n      hidden={isHiddenButMounted || undefined}\n      className={classNames('eds-tab-panel', className)}\n      {...rest}\n    >\n      {children}\n    </Element>\n  );\n};\n","import React, { useContext } from 'react';\nimport classNames from 'classnames';\n\nimport { TabPanelItemContext, TabsContext } from './TabsContext';\n\nexport type TabPanelsProps = {\n  /** Tab-panelene */\n  children: React.ReactNode;\n  /** HTML-elementet eller React-komponenten som lager komponenten */\n  as?: keyof JSX.IntrinsicElements | React.ElementType;\n  /** Behold alle panel-noder i DOM (skjult med hidden-attributt) i stedet for å avmontere */\n  keepMounted?: boolean;\n  className?: string;\n} & Omit<React.ComponentPropsWithoutRef<'div'>, 'children'>;\n\nexport const TabPanels = ({\n  className,\n  as,\n  keepMounted = false,\n  children,\n  ...rest\n}: TabPanelsProps) => {\n  const { tabsId } = useContext(TabsContext);\n\n  const Element: React.ElementType = as || 'div';\n\n  return (\n    <Element className={classNames('eds-tab-panels', className)} {...rest}>\n      {React.Children.map(children, (child, idx) => (\n        <TabPanelItemContext.Provider\n          value={{\n            tabIndex: idx,\n            tabId: `${tabsId}-tab-${idx}`,\n            panelId: `${tabsId}-panel-${idx}`,\n            keepMounted,\n          }}\n        >\n          {child}\n        </TabPanelItemContext.Provider>\n      ))}\n    </Element>\n  );\n};\n","import React, { useCallback, useContext, useRef } from 'react';\nimport classNames from 'classnames';\n\nimport { TabItemContext, TabsContext } from './TabsContext';\n\nexport type TabListProps = {\n  /** Tab-komponenter */\n  children: React.ReactNode;\n  /** HTML-elementet eller React-komponenten som lager komponenten */\n  as?: keyof JSX.IntrinsicElements | React.ElementType;\n  width?: 'fluid';\n  className?: string;\n  /** Tilgjengelig navn på tab-listen (dersom det ikke finnes en synlig overskrift) */\n  'aria-label'?: string;\n  /** ID til elementet som navngir tab-listen */\n  'aria-labelledby'?: string;\n} & Omit<React.ComponentPropsWithoutRef<'div'>, 'children'>;\n\nexport const TabList = ({\n  className,\n  width,\n  as,\n  children,\n  ...rest\n}: TabListProps) => {\n  const { tabsId } = useContext(TabsContext);\n  const tabListRef = useRef<HTMLElement>(null);\n\n  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {\n    const tabs = tabListRef.current?.querySelectorAll<HTMLElement>(\n      '[role=\"tab\"]:not([disabled])',\n    );\n    if (!tabs || tabs.length === 0) return;\n\n    const currentIndex = Array.from(tabs).findIndex(\n      tab => tab === document.activeElement,\n    );\n    if (currentIndex === -1) return;\n\n    let nextIndex: number | undefined;\n    switch (e.key) {\n      case 'ArrowRight':\n        nextIndex = (currentIndex + 1) % tabs.length;\n        break;\n      case 'ArrowLeft':\n        nextIndex = (currentIndex - 1 + tabs.length) % tabs.length;\n        break;\n      case 'Home':\n        nextIndex = 0;\n        break;\n      case 'End':\n        nextIndex = tabs.length - 1;\n        break;\n    }\n\n    if (nextIndex !== undefined) {\n      e.preventDefault();\n      tabs[nextIndex].focus();\n      tabs[nextIndex].click();\n    }\n  }, []);\n\n  const Element: React.ElementType = as || 'div';\n\n  return (\n    <Element\n      role=\"tablist\"\n      tabIndex={-1}\n      ref={tabListRef}\n      className={classNames('eds-tab-list', className, {\n        'eds-tab-list--width-fluid': width === 'fluid',\n      })}\n      onKeyDown={handleKeyDown}\n      {...rest}\n    >\n      {React.Children.map(children, (child, idx) => (\n        <TabItemContext.Provider\n          value={{\n            tabIndex: idx,\n            tabId: `${tabsId}-tab-${idx}`,\n            panelId: `${tabsId}-panel-${idx}`,\n          }}\n        >\n          {child}\n        </TabItemContext.Provider>\n      ))}\n    </Element>\n  );\n};\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('tab');\n\nexport * from './Tab';\nexport * from './Tabs';\nexport * from './TabPanel';\nexport * from './TabPanels';\nexport * from './TabList';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@entur/tab",
-  "version": "0.7.1",
+  "version": "1.0.0-next.0",
   "license": "EUPL-1.2",
   "main": "dist/tab.cjs.js",
   "module": "dist/tab.esm.js",
@@ -22,18 +22,17 @@
     "test": "jest"
   },
   "peerDependencies": {
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
   },
   "dependencies": {
-    "@entur/tokens": "^3.24.0",
-    "@entur/utils": "^0.13.5",
-    "@reach/tabs": "^0.15.3",
+    "@entur/tokens": "^3.24.1-next.0",
+    "@entur/utils": "^1.0.0-next.0",
     "classnames": "^2.5.1"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "^10.4.9",
+    "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "14.6.1",
     "@vitejs/plugin-react": "^5.0.1",
     "jest": "^29.0.0",
@@ -43,5 +42,5 @@
     "vite": "^7.3.2",
     "vite-plugin-dts": "^4.5.4"
   },
-  "gitHead": "ac37425c6b442481549814941b317886e3a7defb"
+  "gitHead": "0f435bdeec98cc3cea1db7434b13b1f771a39a18"
 }