@entur/tab 1.0.0-alpha.0 → 1.0.0-next.1

package/dist/tab.cjs.js

@@ -0,0 +1,199 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const utils = require("@entur/utils");
+const jsxRuntime = require("react/jsx-runtime");
+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(
+    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
+      ),
+      onClick: () => {
+        if (!disabled) onSelect(tabIndex);
+      },
+      ...rest,
+      children
+    }
+  );
+};
+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,
+  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(
+    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,
+      children
+    }
+  );
+};
+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,
+    {
+      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(
+    Element,
+    {
+      role: "tablist",
+      tabIndex: -1,
+      ref: tabListRef,
+      className: classNames("eds-tab-list", className, {
+        "eds-tab-list--width-fluid": width === "fluid"
+      }),
+      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
+        }
+      ))
+    }
+  );
+};
+utils.warnAboutMissingStyles("tab");
+exports.Tab = Tab;
+exports.TabList = TabList;
+exports.TabPanel = TabPanel;
+exports.TabPanels = TabPanels;
+exports.Tabs = Tabs;
+//# sourceMappingURL=tab.cjs.js.map

package/dist/tab.cjs.js.map

@@ -0,0 +1 @@
+{"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,90 +1,199 @@
-import { warnAboutMissingStyles } from '@entur/utils';
-import React from 'react';
-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 classNames from 'classnames';
-
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
+import { warnAboutMissingStyles } from "@entur/utils";
+import { jsx } from "react/jsx-runtime";
+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(
+    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
+      ),
+      onClick: () => {
+        if (!disabled) onSelect(tabIndex);
+      },
+      ...rest,
+      children
     }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-  return target;
-}
-
-var _excluded$4 = ["className", "removeActiveLine"];
-var Tab = function Tab(_ref) {
-  var className = _ref.className,
-    _ref$removeActiveLine = _ref.removeActiveLine,
-    removeActiveLine = _ref$removeActiveLine === void 0 ? false : _ref$removeActiveLine,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
-  return React.createElement(Tab$1, _extends({
-    className: classNames('eds-tab', {
-      'eds-tab--remove-active-line': removeActiveLine
-    }, className)
-  }, rest));
+  );
 };
-
-var _excluded$3 = ["className"];
-var Tabs = function Tabs(_ref) {
-  var className = _ref.className,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
-  return React.createElement(Tabs$1, _extends({
-    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,
+  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(
+    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,
+      children
+    }
+  );
 };
-
-var _excluded$2 = ["className"];
-var TabPanel = function TabPanel(_ref) {
-  var className = _ref.className,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
-  return React.createElement(TabPanel$1, _extends({
-    className: classNames('eds-tab-panel', className)
-  }, rest, {
-    tabIndex: undefined
-  }));
+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,
+    {
+      value: {
+        tabIndex: idx,
+        tabId: `${tabsId}-tab-${idx}`,
+        panelId: `${tabsId}-panel-${idx}`,
+        keepMounted
+      },
+      children: child
+    }
+  )) });
 };
-
-var _excluded$1 = ["className"];
-var TabPanels = function TabPanels(_ref) {
-  var className = _ref.className,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
-  return React.createElement(TabPanels$1, _extends({
-    className: classNames('eds-tab-panels', className)
-  }, rest));
+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(
+    Element,
+    {
+      role: "tablist",
+      tabIndex: -1,
+      ref: tabListRef,
+      className: classNames("eds-tab-list", className, {
+        "eds-tab-list--width-fluid": width === "fluid"
+      }),
+      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
+        }
+      ))
+    }
+  );
 };
-
-var _excluded = ["className", "width"];
-var TabList = function TabList(_ref) {
-  var className = _ref.className,
-    width = _ref.width,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-  return React.createElement(TabList$1, _extends({
-    className: classNames('eds-tab-list', className, {
-      'eds-tab-list--width-fluid': width === 'fluid'
-    })
-  }, rest));
+warnAboutMissingStyles("tab");
+export {
+  Tab,
+  TabList,
+  TabPanel,
+  TabPanels,
+  Tabs
 };
-
-warnAboutMissingStyles('tab');
-
-export { Tab, TabList, TabPanel, TabPanels, Tabs };
 //# sourceMappingURL=tab.esm.js.map

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":["Tab","className","removeActiveLine","rest","_excluded","React","ReachTab","classNames","Tabs","createElement","ReachTabs","TabPanel","ReachTabPanel","tabIndex","undefined","TabPanels","ReachTabPanels","TabList","width","ReachTabList","warnAboutMissingStyles"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeaA,IAAAA,GAAG,GAAuB,SAA1BA,GAAG,CAIX,IAAA,EAAA;EAAA,IAHHC,SAAS,QAATA,SAAS;AAAA,IAAA,qBAAA,GAAA,IAAA,CACTC,gBAAgB;AAAhBA,IAAAA,gBAAgB,sCAAG,KAAK,GAAA,qBAAA;IACrBC,IAAI,GAAA,6BAAA,CAAA,IAAA,EAAAC,WAAA,CAAA,CAAA;AAEP,EAAA,OACEC,oBAACC,KAAQ,EAAA,QAAA,CAAA;AACPL,IAAAA,SAAS,EAAEM,UAAU,CACnB,SAAS,EACT;AAAE,MAAA,6BAA6B,EAAEL,gBAAAA;KAAkB,EACnDD,SAAS,CAAA;AACV,GAAA,EACGE,IAAI,CACR,CAAA,CAAA;AAEN;;;ACXaK,IAAAA,IAAI,GAAwB,SAA5BA,IAAI,CAAmD,IAAA,EAAA;EAAA,IAAxBP,SAAS,QAATA,SAAS;IAAKE,IAAI,GAAA,6BAAA,CAAA,IAAA,EAAAC,WAAA,CAAA,CAAA;AAC5D,EAAA,OAAOC,KAAC,CAAAI,aAAA,CAAAC,MAAS,EAAA,QAAA,CAAA;AAACT,IAAAA,SAAS,EAAEM,UAAU,CAAC,UAAU,EAAEN,SAAS,CAAA;AAAC,GAAA,EAAME,IAAI,CAAI,CAAA,CAAA;AAC9E;;;ACTaQ,IAAAA,QAAQ,GAA4B,SAApCA,QAAQ,CAAuD,IAAA,EAAA;EAAA,IAAxBV,SAAS,QAATA,SAAS;IAAKE,IAAI,GAAA,6BAAA,CAAA,IAAA,EAAAC,WAAA,CAAA,CAAA;AACpE,EAAA,OACEC,oBAACO,UAAa,EAAA,QAAA,CAAA;AACZX,IAAAA,SAAS,EAAEM,UAAU,CAAC,eAAe,EAAEN,SAAS,CAAA;AAAC,GAAA,EAC7CE,IAAI,EAAA;AACRU,IAAAA,QAAQ,EAAEC,SAAAA;GACV,CAAA,CAAA,CAAA;AAEN;;;ACRaC,IAAAA,SAAS,GAA6B,SAAtCA,SAAS,CAAwD,IAAA,EAAA;EAAA,IAAxBd,SAAS,QAATA,SAAS;IAAKE,IAAI,GAAA,6BAAA,CAAA,IAAA,EAAAC,WAAA,CAAA,CAAA;AACtE,EAAA,OACEC,KAAC,CAAAI,aAAA,CAAAO,WAAc,EAAA,QAAA,CAAA;AACbf,IAAAA,SAAS,EAAEM,UAAU,CAAC,gBAAgB,EAAEN,SAAS,CAAA;AAAC,GAAA,EAC9CE,IAAI,CACR,CAAA,CAAA;AAEN;;;ACNac,IAAAA,OAAO,GAA2B,SAAlCA,OAAO,CAIf,IAAA,EAAA;EAAA,IAHHhB,SAAS,QAATA,SAAS;AACTiB,IAAAA,KAAK,QAALA,KAAK;IACFf,IAAI,GAAA,6BAAA,CAAA,IAAA,EAAA,SAAA,CAAA,CAAA;AAEP,EAAA,OACEE,KAAC,CAAAI,aAAA,CAAAU,SAAY,EAAA,QAAA,CAAA;AACXlB,IAAAA,SAAS,EAAEM,UAAU,CAAC,cAAc,EAAEN,SAAS,EAAE;MAC/C,2BAA2B,EAAEiB,KAAK,KAAK,OAAA;KACxC,CAAA;AAAC,GAAA,EACEf,IAAI,CACR,CAAA,CAAA;AAEN;;ACvBAiB,sBAAsB,CAAC,KAAK,CAAC;;;;"}
+{"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,35 +1,57 @@
 {
   "name": "@entur/tab",
-  "version": "1.0.0-alpha.0",
+  "version": "1.0.0-next.1",
   "license": "EUPL-1.2",
-  "main": "dist/index.js",
+  "main": "dist/tab.cjs.js",
   "module": "dist/tab.esm.js",
-  "typings": "dist/index.d.ts",
+  "types": "dist/index.d.ts",
   "files": [
     "dist"
   ],
   "repository": {
     "type": "git",
-    "url": "https://bitbucket.org/enturas/design-system.git",
+    "url": "https://github.com/entur/design-system.git",
     "directory": "packages/tab"
   },
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
-    "start": "dts watch --noClean",
-    "build": "dts build",
-    "lint": "dts lint src"
+    "start": "vite build --watch",
+    "build": "vite build",
+    "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.11.1",
-    "@entur/utils": "^0.9.5",
-    "@reach/tabs": "^0.18.0",
-    "classnames": "^2.3.1"
+    "@entur/tokens": "^4.0.0-next.0",
+    "@entur/utils": "^1.0.0-next.1",
+    "classnames": "^2.5.1"
   },
-  "gitHead": "46d0a52a33d2b59431ab6c60385ec2759c74dc59"
+  "devDependencies": {
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "14.6.1",
+    "@vitejs/plugin-react": "^5.0.1",
+    "jest": "^29.0.0",
+    "jest-environment-jsdom": "^29.0.0",
+    "ts-jest": "^29.0.0",
+    "typescript": "^5.9.2",
+    "vite": "^7.3.2",
+    "vite-plugin-dts": "^4.5.4"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/tab.esm.js",
+      "require": "./dist/tab.cjs.js",
+      "default": "./dist/tab.esm.js"
+    },
+    "./styles": "./dist/styles.css",
+    "./dist/styles.css": "./dist/styles.css",
+    "./package.json": "./package.json"
+  },
+  "gitHead": "0696d63a328007af9797bc57b63c8e1c65ecfa5a"
 }

package/dist/index.js

@@ -1,8 +0,0 @@
-
-'use strict'
-
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./tab.cjs.production.min.js')
-} else {
-  module.exports = require('./tab.cjs.development.js')
-}