@digigov/ui 1.0.0-8ae63a77 → 1.0.0-a131264d

package/es/navigation/Tabs/__stories__/Default.js

@@ -1,10 +1,10 @@
-import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { SummaryList, SummaryListItem, SummaryListItemKey, SummaryListItemValue, SummaryListItemAction } from '@digigov/ui/content/SummaryList';
-import { Link } from '@digigov/ui/navigation/Link';
-import { Tabs, TabsHeading, TabsList, TabsListItem, TabsPanel, useTabs } from '@digigov/ui/navigation/Tabs';
-import { Heading } from '@digigov/ui/typography/Heading';
-import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
+import { SummaryList, SummaryListItem, SummaryListItemKey, SummaryListItemValue, SummaryListItemAction } from "../../../content/SummaryList";
+import { Link } from "../../Link";
+import { Tabs, TabsHeading, TabsList, TabsListItem, TabsPanel, useTabs } from "./..";
+import { Heading } from "../../../typography/Heading";
+import { VisuallyHidden } from "../../../utils/VisuallyHidden";
+import { Paragraph } from "../../../typography/Paragraph";
 
 var _ref = /*#__PURE__*/React.createElement(TabsHeading, {
   size: "md"
@@ -15,30 +15,40 @@ var _ref2 = /*#__PURE__*/React.createElement(Heading, {
   element: "h3"
 }, "\u03A3\u03C4\u03BF\u03B9\u03C7\u03B5\u03AF\u03B1 \u03C0\u03BF\u03BB\u03AF\u03C4\u03B7");
 
-var _ref3 = /*#__PURE__*/React.createElement(SummaryList, null, /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u038C\u03BD\u03BF\u03BC\u03B1"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "\u0393\u03B9\u03CE\u03C1\u03B3\u03BF\u03C2 \u03A0\u03B1\u03C0\u03B1\u03B4\u03CC\u03C0\u03BF\u03C5\u03BB\u03BF\u03C2"), /*#__PURE__*/React.createElement(SummaryListItemAction, null, /*#__PURE__*/React.createElement(Link, {
+var _ref3 = /*#__PURE__*/React.createElement(SummaryList, null, /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u038C\u03BD\u03BF\u03BC\u03B1"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "\u0393\u03B9\u03CE\u03C1\u03B3\u03BF\u03C2 \u03A0\u03B1\u03C0\u03B1\u03B4\u03CC\u03C0\u03BF\u03C5\u03BB\u03BF\u03C2"), /*#__PURE__*/React.createElement(SummaryListItemAction, null, ' ', /*#__PURE__*/React.createElement(Link, {
   href: "#"
-}, "\u0391\u03BB\u03BB\u03B1\u03B3\u03AE ", /*#__PURE__*/React.createElement(VisuallyHidden, null, " \u03BF\u03BD\u03CC\u03BC\u03B1\u03C4\u03BF\u03C2 ")))), /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u0397\u03BC. \u0393\u03AD\u03BD\u03BD\u03B7\u03C3\u03B7\u03C2"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "11 \u039C\u03B1\u03CA\u03BF\u03C5 1990")), /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u03A4\u03B7\u03BB\u03AD\u03C6\u03C9\u03BD\u03BF \u03B5\u03C0\u03B9\u03BA\u03BF\u03B9\u03BD\u03C9\u03BD\u03AF\u03B1\u03C2"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "6941234567"), /*#__PURE__*/React.createElement(SummaryListItemAction, null, /*#__PURE__*/React.createElement(Link, null, "\u0391\u03BB\u03BB\u03B1\u03B3\u03AE ", /*#__PURE__*/React.createElement(VisuallyHidden, null, " \u03C4\u03B7\u03BB\u03B5\u03C6\u03CE\u03BD\u03BF\u03C5 ")))));
+}, "\u0391\u03BB\u03BB\u03B1\u03B3\u03AE ", /*#__PURE__*/React.createElement(VisuallyHidden, null, " \u03BF\u03BD\u03CC\u03BC\u03B1\u03C4\u03BF\u03C2 ")))), /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u0397\u03BC. \u0393\u03AD\u03BD\u03BD\u03B7\u03C3\u03B7\u03C2"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "11 \u039C\u03B1\u03CA\u03BF\u03C5 1990")), /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u03A4\u03B7\u03BB\u03AD\u03C6\u03C9\u03BD\u03BF \u03B5\u03C0\u03B9\u03BA\u03BF\u03B9\u03BD\u03C9\u03BD\u03AF\u03B1\u03C2"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "6941234567"), /*#__PURE__*/React.createElement(SummaryListItemAction, null, ' ', /*#__PURE__*/React.createElement(Link, null, ' ', "\u0391\u03BB\u03BB\u03B1\u03B3\u03AE ", /*#__PURE__*/React.createElement(VisuallyHidden, null, " \u03C4\u03B7\u03BB\u03B5\u03C6\u03CE\u03BD\u03BF\u03C5 ")))));
 
 var _ref4 = /*#__PURE__*/React.createElement(Heading, {
   size: "md",
   element: "h3"
-}, "\u039F\u03B9 \u03C5\u03C0\u03BF\u03B8\u03AD\u03C3\u03B5\u03B9\u03C2 \u03C4\u03BF\u03C5\u03C2");
+}, "Y\u03C0\u03BF\u03B8\u03AD\u03C3\u03B5\u03B9\u03C2");
 
 var _ref5 = /*#__PURE__*/React.createElement(Heading, {
   size: "md",
   element: "h3"
+}, "\u039C\u03B7\u03BD\u03CD\u03BC\u03B1\u03C4\u03B1");
+
+var _ref6 = /*#__PURE__*/React.createElement(Paragraph, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.");
+
+var _ref7 = /*#__PURE__*/React.createElement(Paragraph, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.");
+
+var _ref8 = /*#__PURE__*/React.createElement(Heading, {
+  size: "md",
+  element: "h3"
 }, "\u0399\u03C3\u03C4\u03BF\u03C1\u03B9\u03BA\u03CC");
 
+var _ref9 = /*#__PURE__*/React.createElement(Paragraph, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.");
+
+var _ref10 = /*#__PURE__*/React.createElement(Paragraph, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.");
+
 export function Default() {
-  var _useTabs = useTabs(),
+  var _useTabs = useTabs({
+    defaultOpen: 'a'
+  }),
       register = _useTabs.register,
-      opened = _useTabs.opened,
       panel = _useTabs.panel;
 
-  return /*#__PURE__*/React.createElement(Tabs, null, _ref, /*#__PURE__*/React.createElement(TabsList, null, /*#__PURE__*/React.createElement(TabsListItem, _extends({}, register('citizen'), {
-    open: Object.keys(opened).length === 0 || opened['citizen']
-  }), "\u03A3\u03C4\u03BF\u03B9\u03C7\u03B5\u03AF\u03B1 \u03C0\u03BF\u03BB\u03AF\u03C4\u03B7"), /*#__PURE__*/React.createElement(TabsListItem, register('cases'), "\u039F\u03B9 \u03C5\u03C0\u03BF\u03B8\u03AD\u03C3\u03B5\u03B9\u03C2 \u03C4\u03BF\u03C5\u03C2"), /*#__PURE__*/React.createElement(TabsListItem, register('history'), "\u0399\u03C3\u03C4\u03BF\u03C1\u03B9\u03BA\u03CC")), /*#__PURE__*/React.createElement(TabsPanel, _extends({}, panel('citizen'), {
-    active: Object.keys(opened).length === 0 || opened['citizen']
-  }), _ref2, _ref3), /*#__PURE__*/React.createElement(TabsPanel, panel('cases'), _ref4, "\u03A0\u03B5\u03C1\u03B9\u03B5\u03C7\u03CC\u03BC\u03B5\u03BD\u03B1 \u03C5\u03C0\u03BF\u03B8\u03AD\u03C3\u03B5\u03C9\u03BD"), /*#__PURE__*/React.createElement(TabsPanel, panel('history'), _ref5, "\u03A0\u03B5\u03C1\u03B9\u03B5\u03C7\u03CC\u03BC\u03B5\u03BD\u03BF \u03B9\u03C3\u03C4\u03BF\u03C1\u03B9\u03BA\u03BF\u03CD"));
+  return /*#__PURE__*/React.createElement(Tabs, null, _ref, /*#__PURE__*/React.createElement(TabsList, null, /*#__PURE__*/React.createElement(TabsListItem, register('a'), "\u03A3\u03C4\u03BF\u03B9\u03C7\u03B5\u03AF\u03B1 \u03C0\u03BF\u03BB\u03AF\u03C4\u03B7"), /*#__PURE__*/React.createElement(TabsListItem, register('b'), "Y\u03C0\u03BF\u03B8\u03AD\u03C3\u03B5\u03B9\u03C2"), /*#__PURE__*/React.createElement(TabsListItem, register('c'), "\u039C\u03B7\u03BD\u03CD\u03BC\u03B1\u03C4\u03B1"), /*#__PURE__*/React.createElement(TabsListItem, register('d'), "\u0399\u03C3\u03C4\u03BF\u03C1\u03B9\u03BA\u03CC")), /*#__PURE__*/React.createElement(TabsPanel, panel('a'), _ref2, _ref3), /*#__PURE__*/React.createElement(TabsPanel, panel('b'), _ref4, "\u03A0\u03B5\u03C1\u03B9\u03B5\u03C7\u03CC\u03BC\u03B5\u03BD\u03B1 \u03C5\u03C0\u03BF\u03B8\u03AD\u03C3\u03B5\u03C9\u03BD"), /*#__PURE__*/React.createElement(TabsPanel, panel('c'), _ref5, _ref6, _ref7), /*#__PURE__*/React.createElement(TabsPanel, panel('d'), _ref8, _ref9, _ref10));
 }
 export default Default;

package/es/navigation/Tabs/__stories__/Dense.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { SummaryList, SummaryListItem, SummaryListItemKey, SummaryListItemValue, SummaryListItemAction } from "../../../content/SummaryList";
+import { Link } from "../../Link";
+import { Tabs, TabsHeading, TabsList, TabsListItem, TabsPanel, useTabs } from "./..";
+import { Heading } from "../../../typography/Heading";
+import { VisuallyHidden } from "../../../utils/VisuallyHidden";
+
+var _ref = /*#__PURE__*/React.createElement(TabsHeading, {
+  size: "md"
+}, "\u03A0\u03B5\u03C1\u03B9\u03B5\u03C7\u03CC\u03BC\u03B5\u03BD\u03B1");
+
+var _ref2 = /*#__PURE__*/React.createElement(Heading, {
+  size: "md",
+  element: "h3"
+}, "\u03A3\u03C4\u03BF\u03B9\u03C7\u03B5\u03AF\u03B1 \u03C0\u03BF\u03BB\u03AF\u03C4\u03B7");
+
+var _ref3 = /*#__PURE__*/React.createElement(SummaryList, null, /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u038C\u03BD\u03BF\u03BC\u03B1"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "\u0393\u03B9\u03CE\u03C1\u03B3\u03BF\u03C2 \u03A0\u03B1\u03C0\u03B1\u03B4\u03CC\u03C0\u03BF\u03C5\u03BB\u03BF\u03C2"), /*#__PURE__*/React.createElement(SummaryListItemAction, null, ' ', /*#__PURE__*/React.createElement(Link, {
+  href: "#"
+}, "\u0391\u03BB\u03BB\u03B1\u03B3\u03AE ", /*#__PURE__*/React.createElement(VisuallyHidden, null, " \u03BF\u03BD\u03CC\u03BC\u03B1\u03C4\u03BF\u03C2 ")))), /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u0397\u03BC. \u0393\u03AD\u03BD\u03BD\u03B7\u03C3\u03B7\u03C2"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "11 \u039C\u03B1\u03CA\u03BF\u03C5 1990")), /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u03A4\u03B7\u03BB\u03AD\u03C6\u03C9\u03BD\u03BF \u03B5\u03C0\u03B9\u03BA\u03BF\u03B9\u03BD\u03C9\u03BD\u03AF\u03B1\u03C2"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "6941234567"), /*#__PURE__*/React.createElement(SummaryListItemAction, null, ' ', /*#__PURE__*/React.createElement(Link, null, ' ', "\u0391\u03BB\u03BB\u03B1\u03B3\u03AE ", /*#__PURE__*/React.createElement(VisuallyHidden, null, " \u03C4\u03B7\u03BB\u03B5\u03C6\u03CE\u03BD\u03BF\u03C5 ")))));
+
+var _ref4 = /*#__PURE__*/React.createElement(Heading, {
+  size: "md",
+  element: "h3"
+}, "Y\u03C0\u03BF\u03B8\u03AD\u03C3\u03B5\u03B9\u03C2");
+
+export function Dense() {
+  var _useTabs = useTabs(),
+      register = _useTabs.register,
+      panel = _useTabs.panel;
+
+  return /*#__PURE__*/React.createElement(Tabs, {
+    dense: true
+  }, _ref, /*#__PURE__*/React.createElement(TabsList, null, /*#__PURE__*/React.createElement(TabsListItem, register('a'), "\u03A3\u03C4\u03BF\u03B9\u03C7\u03B5\u03AF\u03B1 \u03C0\u03BF\u03BB\u03AF\u03C4\u03B7"), /*#__PURE__*/React.createElement(TabsListItem, register('b'), "Y\u03C0\u03BF\u03B8\u03AD\u03C3\u03B5\u03B9\u03C2")), /*#__PURE__*/React.createElement(TabsPanel, panel('a'), _ref2, _ref3), /*#__PURE__*/React.createElement(TabsPanel, panel('b'), _ref4, "\u03A0\u03B5\u03C1\u03B9\u03B5\u03C7\u03CC\u03BC\u03B5\u03BD\u03B1 \u03C5\u03C0\u03BF\u03B8\u03AD\u03C3\u03B5\u03C9\u03BD"));
+}
+export default Dense;

package/es/navigation/Tabs/auto.js

@@ -0,0 +1,56 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["defaultOpen", "children"],
+    _excluded2 = ["tab"];
+import React, { useContext } from 'react';
+import { Tabs, TabsListItemBase, TabsPanelBase, useTabs } from "./";
+;
+;
+export var TabsContext = /*#__PURE__*/React.createContext(null);
+export var useTabsContext = function useTabsContext() {
+  var context = useContext(TabsContext);
+  return context;
+};
+export var TabsAuto = function TabsAuto(_ref) {
+  var defaultOpen = _ref.defaultOpen,
+      children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var tabs = useTabs({
+    defaultOpen: defaultOpen
+  });
+  return /*#__PURE__*/React.createElement(TabsContext.Provider, {
+    value: tabs
+  }, /*#__PURE__*/React.createElement(Tabs, props, children));
+};
+export var TabsListItem = /*#__PURE__*/React.forwardRef(function TabsListItem(_ref2, ref) {
+  var props = _extends({}, _ref2);
+
+  var context = useTabsContext();
+
+  if (!context) {
+    return /*#__PURE__*/React.createElement(TabsListItemBase, _extends({}, props, {
+      ref: ref
+    }));
+  }
+
+  return /*#__PURE__*/React.createElement(TabsListItemBase, _extends({}, context.register(props.id), {
+    ref: ref
+  }, props));
+});
+export var TabsPanel = /*#__PURE__*/React.forwardRef(function TabsPanel(_ref3, ref) {
+  var tab = _ref3.tab,
+      props = _objectWithoutProperties(_ref3, _excluded2);
+
+  var context = useTabsContext();
+
+  if (!context) {
+    return /*#__PURE__*/React.createElement(TabsPanelBase, _extends({
+      ref: ref
+    }, props));
+  }
+
+  return /*#__PURE__*/React.createElement(TabsPanelBase, _extends({}, context.panel(tab), {
+    ref: ref
+  }, props));
+});

package/es/navigation/Tabs/hooks.js

@@ -0,0 +1,92 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useState, useRef, useCallback } from 'react';
+export var useTabs = function useTabs() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      _ref$defaultOpen = _ref.defaultOpen,
+      defaultOpen = _ref$defaultOpen === void 0 ? null : _ref$defaultOpen;
+
+  var _useState = useState(defaultOpen),
+      _useState2 = _slicedToArray(_useState, 2),
+      currentOpen = _useState2[0],
+      setCurrentOpen = _useState2[1];
+
+  var tabsRef = useRef(new Map());
+  var open = useCallback(function (id) {
+    var _tabsRef$current$get, _tabsRef$current$get$;
+
+    setCurrentOpen(id);
+    (_tabsRef$current$get = tabsRef.current.get(id)) === null || _tabsRef$current$get === void 0 ? void 0 : (_tabsRef$current$get$ = _tabsRef$current$get.current) === null || _tabsRef$current$get$ === void 0 ? void 0 : _tabsRef$current$get$.focus();
+  }, []);
+  var navigate = useCallback(function (direction) {
+    var _document$activeEleme, _document$activeEleme2;
+
+    var focusedTabId = (_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : (_document$activeEleme2 = _document$activeEleme.id.match(/tab-(.*?)$/)) === null || _document$activeEleme2 === void 0 ? void 0 : _document$activeEleme2[1];
+    var tabs = Array.from(tabsRef.current.keys());
+    var currentIndex = tabs.indexOf(focusedTabId || currentOpen);
+    var newIndex = direction === 'next' ? currentIndex + 1 : currentIndex - 1;
+
+    if (newIndex >= 0 && newIndex < tabs.length) {
+      var _tabsRef$current$get2, _tabsRef$current$get3;
+
+      (_tabsRef$current$get2 = tabsRef.current.get(tabs[newIndex])) === null || _tabsRef$current$get2 === void 0 ? void 0 : (_tabsRef$current$get3 = _tabsRef$current$get2.current) === null || _tabsRef$current$get3 === void 0 ? void 0 : _tabsRef$current$get3.focus();
+    }
+  }, [currentOpen, tabsRef.current]);
+  var register = useCallback(function (id) {
+    if (!tabsRef.current.has(id)) {
+      if (tabsRef.current.size === 0 && !currentOpen) {
+        setCurrentOpen(id);
+      }
+
+      tabsRef.current.set(id, /*#__PURE__*/React.createRef());
+    }
+
+    return {
+      role: 'tab',
+      id: "tab-".concat(id),
+      href: "#panel-".concat(id),
+      'aria-selected': currentOpen === id,
+      open: currentOpen === id,
+      'aria-controls': "panel-".concat(id),
+      tabIndex: currentOpen === id ? 0 : -1,
+      onClick: function onClick(e) {
+        e.preventDefault();
+        open(id);
+      },
+      onKeyDown: function onKeyDown(e) {
+        switch (e.key) {
+          case 'ArrowRight':
+          case 'ArrowDown':
+            navigate('next');
+            break;
+
+          case 'ArrowLeft':
+          case 'ArrowUp':
+            navigate('previous');
+            break;
+
+          case 'Enter':
+            open(id);
+            break;
+        }
+      },
+      ref: tabsRef.current.get(id)
+    };
+  }, [currentOpen]);
+
+  var panel = function panel(id) {
+    return {
+      role: 'tabpanel',
+      'aria-labelledby': "tab-".concat(id),
+      'id': "panel-".concat(id),
+      active: currentOpen === id,
+      tab: id
+    };
+  };
+
+  return {
+    register: register,
+    panel: panel,
+    currentOpen: currentOpen,
+    open: open
+  };
+};

package/es/navigation/Tabs/index.js

@@ -1,55 +1,9 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["register", "opened"];
-import { useCallback, useRef } from 'react';
 import Tabs from '@digigov/react-core/Tabs';
-import { useTogglableTab } from '@digigov/ui/utils/hooks/useTogglableTab';
-export var useTabs = function useTabs() {
-  var registeredPanels = useRef({});
-  var goTo = useCallback(function (key) {
-    if (registeredPanels.current[key].offsetTop - rest.registered.current[key].offsetTop >= 30) {
-      var _registeredPanels$cur;
-
-      window.scrollTo({
-        top: (_registeredPanels$cur = registeredPanels.current[key]) === null || _registeredPanels$cur === void 0 ? void 0 : _registeredPanels$cur.offsetTop,
-        behavior: 'smooth'
-      });
-    }
-  }, []);
-
-  var _useTogglableTab = useTogglableTab({
-    singleOpen: true,
-    toggleProperty: 'open',
-    onToggleProperty: 'onClick',
-    firstOpen: true,
-    ariaNavigation: true,
-    toggleHook: goTo
-  }),
-      register = _useTogglableTab.register,
-      opened = _useTogglableTab.opened,
-      rest = _objectWithoutProperties(_useTogglableTab, _excluded);
-
-  var panel = useCallback(function (key) {
-    return {
-      ref: function ref(el) {
-        if (el && !registeredPanels.current[el.id]) {
-          registeredPanels.current[el.id] = el;
-        }
-      },
-      active: opened[key],
-      id: key,
-      tabIndex: opened[key] ? 1 : -1
-    };
-  }, [opened]);
-  return _extends({
-    register: register,
-    opened: opened,
-    panel: panel
-  }, rest);
-};
 export * from '@digigov/react-core/Tabs';
+export * from "./hooks";
 export * from '@digigov/react-core/TabsList';
-export * from '@digigov/react-core/TabsListItem';
-export * from '@digigov/react-core/TabsPanel';
+export * from '@digigov/react-core/TabsListItemBase';
+export * from '@digigov/react-core/TabsPanelBase';
 export * from '@digigov/react-core/TabsHeading';
+export * from "./auto";
 export default Tabs;

package/es/navigation/index.js

@@ -1,9 +1,9 @@
-export * from '@digigov/ui/navigation/BackLink';
-export * from '@digigov/ui/navigation/Breadcrumbs';
-export * from '@digigov/ui/navigation/Drawer';
-export * from '@digigov/ui/navigation/Dropdown';
-export * from '@digigov/ui/navigation/Link';
-export * from '@digigov/ui/navigation/NavList';
-export * from '@digigov/ui/navigation/Pagination';
-export * from '@digigov/ui/navigation/SkipLink';
-export * from '@digigov/ui/navigation/Tabs';
+export * from "./BackLink";
+export * from "./Breadcrumbs";
+export * from "./Drawer";
+export * from "./Dropdown";
+export * from "./Link";
+export * from "./NavList";
+export * from "./Pagination";
+export * from "./SkipLink";
+export * from "./Tabs";