@digigov/ui 1.0.0-8bbf3ef2 → 1.0.0-b0737a96

package/navigation/SkipLink/index.js

@@ -1,19 +1,3 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "SkipLink", {
-  enumerable: true,
-  get: function get() {
-    return _SkipLink["default"];
-  }
-});
-exports["default"] = void 0;
-
-var _SkipLink = _interopRequireDefault(require("@digigov/react-core/SkipLink"));
-
-var _default = _SkipLink["default"];
-exports["default"] = _default;
+import SkipLink from '@digigov/react-core/SkipLink';
+export default SkipLink;
+export { SkipLink };

package/navigation/SkipLink/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "main": "../../cjs/navigation/SkipLink/index.js"
+}

package/navigation/Tabs/Tabs.stories.d.ts

@@ -3,9 +3,11 @@ declare namespace _default {
     export const tags: string[];
     export const description: string;
     export const link: string;
-    export { Tabs as component };
+    export { TabsBase as component };
     export const displayName: string;
 }
 export default _default;
 export * from "@digigov/ui/navigation/Tabs/__stories__/Default";
-import Tabs from "@digigov/ui/navigation/Tabs";
+export * from "@digigov/ui/navigation/Tabs/__stories__/Dense";
+export * from "@digigov/ui/navigation/Tabs/__stories__/Auto";
+import TabsBase from "@digigov/ui/navigation/Tabs";

package/navigation/Tabs/Tabs.stories.js

@@ -1,34 +1,12 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _exportNames = {};
-exports["default"] = void 0;
-
-var _Tabs = _interopRequireDefault(require("@digigov/ui/navigation/Tabs"));
-
-var _Default = require("@digigov/ui/navigation/Tabs/__stories__/Default");
-
-Object.keys(_Default).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _Default[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _Default[key];
-    }
-  });
-});
-var _default = {
+import TabsBase from "./";
+export default {
   title: 'Digigov UI/navigation/Tabs',
   tags: ['Experimental'],
   description: 'The tabs component lets users navigate between related sections of content, displaying one section at a time.',
   link: 'https://guide.services.gov.gr/docs/components/tabs',
-  component: _Tabs["default"],
+  component: TabsBase,
   displayName: 'Tabs'
 };
-exports["default"] = _default;
+export * from "./__stories__/Default";
+export * from "./__stories__/Dense";
+export * from "./__stories__/Auto";

package/navigation/Tabs/Tabs.stories.playwright.json

@@ -8,13 +8,13 @@
             {
               "name": "hover",
               "args": {
-                "selector": "html>body>div:nth-child(5)>div>ul>li:nth-child(2)>button"
+                "selector": "html>body>div:nth-child(5)>div>ul>li:nth-child(2)>a"
               }
             },
             {
               "name": "click",
               "args": {
-                "selector": "html>body>div:nth-child(5)>div>ul>li:nth-child(2)>button"
+                "selector": "html>body>div:nth-child(5)>div>ul>li:nth-child(2)>a"
               }
             }
           ],

package/navigation/Tabs/__stories__/Auto.d.ts

@@ -0,0 +1,2 @@
+export declare function Auto(): JSX.Element;
+export default Auto;

package/navigation/Tabs/__stories__/Auto.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { SummaryList, SummaryListItem, SummaryListItemKey, SummaryListItemValue, SummaryListItemAction } from "../../../content/SummaryList";
+import { Link } from "../../Link";
+import { TabsAuto, TabsHeading, TabsList, TabsListItem, TabsPanel } from "./..";
+import { Heading } from "../../../typography/Heading";
+import { VisuallyHidden } from "../../../utils/VisuallyHidden";
+
+var _ref = /*#__PURE__*/React.createElement(TabsAuto, {
+  defaultOpen: 'b'
+}, /*#__PURE__*/React.createElement(TabsHeading, {
+  size: "md"
+}, "\u03A0\u03B5\u03C1\u03B9\u03B5\u03C7\u03CC\u03BC\u03B5\u03BD\u03B1"), /*#__PURE__*/React.createElement(TabsList, null, /*#__PURE__*/React.createElement(TabsListItem, {
+  id: "a"
+}, "\u03A3\u03C4\u03BF\u03B9\u03C7\u03B5\u03AF\u03B1 \u03C0\u03BF\u03BB\u03AF\u03C4\u03B7"), /*#__PURE__*/React.createElement(TabsListItem, {
+  id: "b"
+}, "Y\u03C0\u03BF\u03B8\u03AD\u03C3\u03B5\u03B9\u03C2")), /*#__PURE__*/React.createElement(TabsPanel, {
+  tab: "a"
+}, /*#__PURE__*/React.createElement(Heading, {
+  size: "md",
+  element: "h3"
+}, "\u03A3\u03C4\u03BF\u03B9\u03C7\u03B5\u03AF\u03B1 \u03C0\u03BF\u03BB\u03AF\u03C4\u03B7"), /*#__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 ")))))), /*#__PURE__*/React.createElement(TabsPanel, {
+  tab: "b"
+}, /*#__PURE__*/React.createElement(Heading, {
+  size: "md",
+  element: "h3"
+}, "Y\u03C0\u03BF\u03B8\u03AD\u03C3\u03B5\u03B9\u03C2"), "\u03A0\u03B5\u03C1\u03B9\u03B5\u03C7\u03CC\u03BC\u03B5\u03BD\u03B1 \u03C5\u03C0\u03BF\u03B8\u03AD\u03C3\u03B5\u03C9\u03BD"));
+
+export function Auto() {
+  return _ref;
+}
+export default Auto;

package/navigation/Tabs/__stories__/Default.js

@@ -1,62 +1,54 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Default = Default;
-exports["default"] = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _SummaryList = require("@digigov/ui/content/SummaryList");
-
-var _Link = require("@digigov/ui/navigation/Link");
-
-var _Tabs = require("@digigov/ui/navigation/Tabs");
-
-var _Heading = require("@digigov/ui/typography/Heading");
-
-var _VisuallyHidden = require("@digigov/ui/utils/VisuallyHidden");
-
-var _ref = /*#__PURE__*/_react["default"].createElement(_Tabs.TabsHeading, {
+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";
+import { Paragraph } from "../../../typography/Paragraph";
+
+var _ref = /*#__PURE__*/React.createElement(TabsHeading, {
   size: "md"
 }, "\u03A0\u03B5\u03C1\u03B9\u03B5\u03C7\u03CC\u03BC\u03B5\u03BD\u03B1");
 
-var _ref2 = /*#__PURE__*/_react["default"].createElement(_Heading.Heading, {
+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["default"].createElement(_SummaryList.SummaryList, null, /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItem, null, /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemKey, null, "\u038C\u03BD\u03BF\u03BC\u03B1"), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemValue, null, "\u0393\u03B9\u03CE\u03C1\u03B3\u03BF\u03C2 \u03A0\u03B1\u03C0\u03B1\u03B4\u03CC\u03C0\u03BF\u03C5\u03BB\u03BF\u03C2"), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemAction, null, /*#__PURE__*/_react["default"].createElement(_Link.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["default"].createElement(_VisuallyHidden.VisuallyHidden, null, " \u03BF\u03BD\u03CC\u03BC\u03B1\u03C4\u03BF\u03C2 ")))), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItem, null, /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemKey, null, "\u0397\u03BC. \u0393\u03AD\u03BD\u03BD\u03B7\u03C3\u03B7\u03C2"), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemValue, null, "11 \u039C\u03B1\u03CA\u03BF\u03C5 1990")), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItem, null, /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemKey, null, "\u03A4\u03B7\u03BB\u03AD\u03C6\u03C9\u03BD\u03BF \u03B5\u03C0\u03B9\u03BA\u03BF\u03B9\u03BD\u03C9\u03BD\u03AF\u03B1\u03C2"), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemValue, null, "6941234567"), /*#__PURE__*/_react["default"].createElement(_SummaryList.SummaryListItemAction, null, /*#__PURE__*/_react["default"].createElement(_Link.Link, null, "\u0391\u03BB\u03BB\u03B1\u03B3\u03AE ", /*#__PURE__*/_react["default"].createElement(_VisuallyHidden.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["default"].createElement(_Heading.Heading, {
+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["default"].createElement(_Heading.Heading, {
+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");
 
-function Default() {
-  var _useTabs = (0, _Tabs.useTabs)(),
+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({
+    defaultOpen: 'a'
+  }),
       register = _useTabs.register,
-      opened = _useTabs.opened,
       panel = _useTabs.panel;
 
-  return /*#__PURE__*/_react["default"].createElement(_Tabs.Tabs, null, _ref, /*#__PURE__*/_react["default"].createElement(_Tabs.TabsList, null, /*#__PURE__*/_react["default"].createElement(_Tabs.TabsListItem, (0, _extends2["default"])({}, 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["default"].createElement(_Tabs.TabsListItem, register('cases'), "\u039F\u03B9 \u03C5\u03C0\u03BF\u03B8\u03AD\u03C3\u03B5\u03B9\u03C2 \u03C4\u03BF\u03C5\u03C2"), /*#__PURE__*/_react["default"].createElement(_Tabs.TabsListItem, register('history'), "\u0399\u03C3\u03C4\u03BF\u03C1\u03B9\u03BA\u03CC")), /*#__PURE__*/_react["default"].createElement(_Tabs.TabsPanel, (0, _extends2["default"])({}, panel('citizen'), {
-    active: Object.keys(opened).length === 0 || opened['citizen']
-  }), _ref2, _ref3), /*#__PURE__*/_react["default"].createElement(_Tabs.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["default"].createElement(_Tabs.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));
 }
-
-var _default = Default;
-exports["default"] = _default;
+export default Default;

package/navigation/Tabs/__stories__/Dense.d.ts

@@ -0,0 +1,2 @@
+export declare function Dense(): JSX.Element;
+export default Dense;

package/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/navigation/Tabs/auto.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { UseTabsReturn, TabsListItemBaseProps, TabsPanelBaseProps } from '@digigov/ui/navigation/Tabs';
+import { TabId } from '@digigov/ui/navigation/Tabs';
+export interface TabsListItemProps extends TabsListItemBaseProps {
+    id: string;
+}
+export interface TabsPanelProps extends TabsPanelBaseProps {
+    tab: TabId;
+}
+export declare const TabsContext: React.Context<UseTabsReturn | null>;
+export declare const useTabsContext: () => UseTabsReturn | null;
+export declare const TabsAuto: ({ defaultOpen, children, ...props }: {
+    [x: string]: any;
+    defaultOpen: any;
+    children: any;
+}) => JSX.Element;
+export declare const TabsListItem: React.ForwardRefExoticComponent<Pick<TabsListItemProps, "children" | "slot" | "style" | "title" | "as" | "className" | "color" | "id" | "lang" | "media" | "target" | "type" | "role" | "tabIndex" | "href" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "download" | "hrefLang" | "ping" | "rel" | "referrerPolicy" | "open" | "margin" | "marginTop" | "marginBottom" | "marginLeft" | "marginRight" | "padding" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "printHidden" | "printVisible" | "xsUpHidden" | "smUpHidden" | "mdUpHidden" | "lgUpHidden" | "xlUpHidden" | "xsHidden" | "smHidden" | "mdHidden" | "lgHidden" | "xlHidden"> & React.RefAttributes<HTMLAnchorElement>>;
+export declare const TabsPanel: React.ForwardRefExoticComponent<Pick<TabsPanelProps, "children" | "slot" | "style" | "title" | "as" | "className" | "color" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "margin" | "marginTop" | "marginBottom" | "marginLeft" | "marginRight" | "padding" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "printHidden" | "printVisible" | "xsUpHidden" | "smUpHidden" | "mdUpHidden" | "lgUpHidden" | "xlUpHidden" | "xsHidden" | "smHidden" | "mdHidden" | "lgHidden" | "xlHidden" | "tab" | "active"> & React.RefAttributes<HTMLDivElement>>;

package/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/navigation/Tabs/hooks.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+export declare type TabId = string | number | null;
+export interface UseTabsProps {
+    defaultOpen?: TabId;
+}
+export interface UseTabsReturn {
+    register: (id: TabId) => {
+        role: string;
+        href: string;
+        id: string;
+        'aria-selected': boolean;
+        'aria-controls': string;
+        tabIndex: number;
+        onClick: (e: any) => void;
+        onKeyDown: (e: React.KeyboardEvent) => void;
+        ref?: React.RefObject<HTMLAnchorElement>;
+    };
+    panel: (id: TabId) => {
+        tab: TabId;
+        role: string;
+        'aria-labelledby': string;
+        'id': string;
+        active: boolean;
+    };
+    currentOpen: TabId;
+    open: (id: TabId) => void;
+}
+export declare const useTabs: ({ defaultOpen }?: UseTabsProps) => UseTabsReturn;

package/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/navigation/Tabs/index.d.ts

@@ -1,16 +1,9 @@
 import Tabs from '@digigov/react-core/Tabs';
-import { UseTogglableTabReturn } from '@digigov/ui/utils/hooks/useTogglableTab';
-export interface UseTabsReturn extends UseTogglableTabReturn {
-    panel: (key: string) => {
-        active: boolean;
-        tabIndex: number;
-        id: string;
-    };
-}
-export declare const useTabs: () => UseTabsReturn;
 export * from '@digigov/react-core/Tabs';
+export * from '@digigov/ui/navigation/Tabs/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 '@digigov/ui/navigation/Tabs/auto';
 export default Tabs;