@digigov/ui 0.30.2 → 0.31.0

package/es/core/ErrorSummary/__stories__/LinkedToField.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ErrorSummary } from '@digigov/ui/core/ErrorSummary';
-import { Title } from '@digigov/ui/typography/Title';
+import { Heading } from '@digigov/ui/typography/Heading';
 import { Link } from '@digigov/ui/core/Link';
 import { Hint } from '@digigov/ui/typography/Hint';
 import { ErrorMessage } from '@digigov/ui/core/ErrorMessage';
@@ -10,8 +10,8 @@ import { FieldContainer, Fieldset, FieldsetLegend } from '@digigov/ui/core/Field
 
 var _ref = /*#__PURE__*/React.createElement("div", {
   className: "example"
-}, /*#__PURE__*/React.createElement(ErrorSummary, null, /*#__PURE__*/React.createElement(Title, {
-  size: "sm"
+}, /*#__PURE__*/React.createElement(ErrorSummary, null, /*#__PURE__*/React.createElement(Heading, {
+  size: "s"
 }, "\u03A5\u03C0\u03AE\u03C1\u03BE\u03B5 \u03BA\u03AC\u03C0\u03BF\u03B9\u03BF \u03C0\u03C1\u03CC\u03B2\u03BB\u03B7\u03BC\u03B1"), /*#__PURE__*/React.createElement(Link, {
   href: "#passport-date"
 }, "\u0397 \u03B7\u03BC\u03B5\u03C1\u03BF\u03BC\u03B7\u03BD\u03AF\u03B1 \u03AD\u03BA\u03B4\u03BF\u03C3\u03B7\u03C2 \u03C4\u03BF\u03C5 \u03B4\u03B9\u03B1\u03B2\u03B1\u03C4\u03B7\u03C1\u03AF\u03BF\u03C5 \u03C3\u03B1\u03C2 \u03B8\u03B1 \u03C0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03B5\u03AF\u03BD\u03B1\u03B9 \u03C3\u03C4\u03BF \u03C0\u03B1\u03C1\u03B5\u03BB\u03B8\u03CC\u03BD.")), /*#__PURE__*/React.createElement(FieldContainer, {

package/es/core/ErrorSummary/__stories__/LinkedToInput.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ErrorSummary } from '@digigov/ui/core/ErrorSummary';
-import { Title } from '@digigov/ui/typography/Title';
+import { Heading } from '@digigov/ui/typography/Heading';
 import { Link } from '@digigov/ui/core/Link';
 import { TextInput } from '@digigov/ui/core/TextInput';
 import { FieldContainer } from '@digigov/ui/core/FieldContainer';
@@ -12,8 +12,8 @@ import { VisuallyHidden } from '@digigov/ui/core/VisuallyHidden';
 
 var _ref = /*#__PURE__*/React.createElement("div", {
   className: "example"
-}, /*#__PURE__*/React.createElement(ErrorSummary, null, /*#__PURE__*/React.createElement(Title, {
-  size: "sm"
+}, /*#__PURE__*/React.createElement(ErrorSummary, null, /*#__PURE__*/React.createElement(Heading, {
+  size: "s"
 }, "\u03A5\u03C0\u03AE\u03C1\u03BE\u03B5 \u03BA\u03AC\u03C0\u03BF\u03B9\u03BF \u03C0\u03C1\u03CC\u03B2\u03BB\u03B7\u03BC\u03B1"), /*#__PURE__*/React.createElement(Link, {
   href: "#business-name"
 }, "\u03A0\u03C1\u03AD\u03C0\u03B5\u03B9 \u03BD\u03B1 \u03C3\u03C5\u03BC\u03C0\u03BB\u03B7\u03C1\u03CE\u03C3\u03B5\u03C4\u03B5 \u03C4\u03BF \u03CC\u03BD\u03BF\u03BC\u03B1 \u03B5\u03C0\u03B9\u03C7\u03B5\u03AF\u03C1\u03B7\u03C3\u03B7\u03C2")), /*#__PURE__*/React.createElement(FieldContainer, {

package/es/core/Link/__stories__/DarkBackground.js

@@ -3,11 +3,15 @@ import { Link } from '@digigov/ui/core/Link';
 import { Masthead } from '@digigov/ui/layouts/Basic/Masthead';
 import { SectionBreak } from '@digigov/ui/core/SectionBreak';
 
-var _ref = /*#__PURE__*/React.createElement(Masthead, null, /*#__PURE__*/React.createElement(SectionBreak, null), /*#__PURE__*/React.createElement(Link, {
+var _ref = /*#__PURE__*/React.createElement(Masthead, null, /*#__PURE__*/React.createElement(SectionBreak, {
+  visible: false
+}), /*#__PURE__*/React.createElement(Link, {
   "aria-label": "\u03C0\u03BB\u03BF\u03B7\u03B3\u03B7\u03B8\u03B5\u03AF\u03C4\u03B5 \u03C3\u03C4\u03B7\u03BD \u03B9\u03C3\u03C4\u03BF\u03C3\u03B5\u03BB\u03AF\u03B4\u03B1 \u03C4\u03BF govgr",
   role: "link",
   href: "#"
-}, "govgr link"), /*#__PURE__*/React.createElement(SectionBreak, null));
+}, "govgr link"), /*#__PURE__*/React.createElement(SectionBreak, {
+  visible: false
+}));
 
 export var DarkBackground = function DarkBackground() {
   return _ref;

package/es/core/Link/__stories__/DarkBackgroundNoUnderline.js

@@ -3,12 +3,16 @@ import { Link } from '@digigov/ui/core/Link';
 import { Masthead } from '@digigov/ui/layouts/Basic/Masthead';
 import { SectionBreak } from '@digigov/ui/core/SectionBreak';
 
-var _ref = /*#__PURE__*/React.createElement(Masthead, null, /*#__PURE__*/React.createElement(SectionBreak, null), /*#__PURE__*/React.createElement(Link, {
+var _ref = /*#__PURE__*/React.createElement(Masthead, null, /*#__PURE__*/React.createElement(SectionBreak, {
+  visible: false
+}), /*#__PURE__*/React.createElement(Link, {
   "aria-label": "\u03C0\u03BB\u03BF\u03B7\u03B3\u03B7\u03B8\u03B5\u03AF\u03C4\u03B5 \u03C3\u03C4\u03B7\u03BD \u03B9\u03C3\u03C4\u03BF\u03C3\u03B5\u03BB\u03AF\u03B4\u03B1 \u03C4\u03BF govgr",
   role: "link",
   href: "#",
   underline: false
-}, "govgr link"), /*#__PURE__*/React.createElement(SectionBreak, null));
+}, "govgr link"), /*#__PURE__*/React.createElement(SectionBreak, {
+  visible: false
+}));
 
 export var DarkBackgroundNoUnderline = function DarkBackgroundNoUnderline() {
   return _ref;

package/es/core/NavList/NavList.stories.js

@@ -7,6 +7,8 @@ export default {
   displayName: 'NavList'
 };
 export * from '@digigov/ui/core/NavList/__stories__/Default';
-export * from '@digigov/ui/core/NavList/__stories__/NavListAutoExample';
+export * from '@digigov/ui/core/NavList/__stories__/NavListHorizontalAutoExample';
+export * from '@digigov/ui/core/NavList/__stories__/NavListVerticalAutoExample';
+export * from '@digigov/ui/core/NavList/__stories__/NavListSecondaryAutoExample';
 export * from '@digigov/ui/core/NavList/__stories__/NavListEpathlaExample';
 export * from '@digigov/ui/core/NavList/__stories__/NavHorizontalLayout';

package/es/core/NavList/NavList.stories.playwright.json

@@ -6,26 +6,26 @@
         {
           "actions": [
             {
-              "name": "click",
+              "name": "hover",
               "args": {
                 "selector": "html>body>div:nth-child(5)>nav>ul>li:nth-child(3)>button"
               }
             }
           ],
-          "id": "WMfgyO3E_9S_",
-          "title": "Open sub menu"
+          "id": "dHQxEQCIJ4bJ",
+          "title": "Hover item"
         },
         {
           "actions": [
             {
-              "name": "hover",
+              "name": "click",
               "args": {
                 "selector": "html>body>div:nth-child(5)>nav>ul>li:nth-child(3)>button"
               }
             }
           ],
-          "id": "dHQxEQCIJ4bJ",
-          "title": "Hover item"
+          "id": "WMfgyO3E_9S_",
+          "title": "Open sub menu"
         }
       ]
     }

package/{esm/core/NavList → es/core/NavList/NavListAuto}/NavListAuto.js

@@ -1,11 +1,13 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["layout", "openSubMenus", "links", "role"];
+var _excluded = ["layout", "border", "fixed", "openSubMenus", "links", "role"];
 import React from 'react';
-import { NavListProvider } from '@digigov/ui/core/NavList/NavListContext';
-import { NavListBase } from '@digigov/ui/core/NavList/NavListBase';
+import { NavListProviderAuto } from '@digigov/ui/core/NavList/NavListAuto/NavListContextAuto';
+import { NavListBaseAuto } from '@digigov/ui/core/NavList/NavListAuto/NavListBaseAuto';
 export var NavListAuto = function NavListAuto(_ref) {
   var layout = _ref.layout,
+      border = _ref.border,
+      fixed = _ref.fixed,
       _ref$openSubMenus = _ref.openSubMenus,
       openSubMenus = _ref$openSubMenus === void 0 ? false : _ref$openSubMenus,
       _ref$links = _ref.links,
@@ -13,12 +15,16 @@ export var NavListAuto = function NavListAuto(_ref) {
       role = _ref.role,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/React.createElement(NavListProvider, {
+  return /*#__PURE__*/React.createElement(NavListProviderAuto, {
     openSubMenus: openSubMenus,
     layout: layout,
+    border: border,
+    fixed: fixed,
     links: links
-  }, /*#__PURE__*/React.createElement(NavListBase, _extends({
+  }, /*#__PURE__*/React.createElement(NavListBaseAuto, _extends({
     layout: layout,
+    border: border,
+    fixed: fixed,
     role: role
   }, props)));
 };

package/{esm/core/NavList/NavListBase.js → es/core/NavList/NavListAuto/NavListBaseAuto.js}

@@ -4,7 +4,7 @@ var _excluded = ["className", "children", "floating", "layout", "subMenu", "role
 import React from 'react';
 import Nav from '@digigov/ui/core/NavList/Nav';
 import NavList from '@digigov/ui/core/NavList/NavList';
-export var NavListBase = function NavListBase(_ref) {
+export var NavListBaseAuto = function NavListBaseAuto(_ref) {
   var className = _ref.className,
       children = _ref.children,
       floating = _ref.floating,
@@ -16,7 +16,9 @@ export var NavListBase = function NavListBase(_ref) {
   return /*#__PURE__*/React.createElement(Nav, _extends({
     open: true,
     layout: layout
-  }, props), /*#__PURE__*/React.createElement(NavList, {
+  }, props, {
+    "aria-orientation": layout
+  }), /*#__PURE__*/React.createElement(NavList, {
     layout: layout
   }, children));
 };

package/es/core/NavList/{NavListContext.js → NavListAuto/NavListContextAuto.js}

@@ -2,17 +2,21 @@ import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { useNavList } from '@digigov/ui/hooks/useNavList';
 import React, { createContext, useEffect, useState } from 'react';
-export var NavListContext = /*#__PURE__*/createContext({
+export var NavListContextAuto = /*#__PURE__*/createContext({
   layout: 'horizontal',
+  border: true,
+  fixed: true,
   openSubMenus: false,
   links: [],
   activeLink: {},
   activeSubMenu: []
 });
 var TRAILING_SLASH = /\/$/gm;
-export var NavListProvider = function NavListProvider(_ref) {
+export var NavListProviderAuto = function NavListProviderAuto(_ref) {
   var children = _ref.children,
       layout = _ref.layout,
+      border = _ref.border,
+      fixed = _ref.fixed,
       _ref$openSubMenus = _ref.openSubMenus,
       openSubMenus = _ref$openSubMenus === void 0 ? false : _ref$openSubMenus,
       _ref$showDividers = _ref.showDividers,
@@ -32,10 +36,15 @@ export var NavListProvider = function NavListProvider(_ref) {
 
   var _useNavList = useNavList(),
       container = _useNavList.container,
-      register = _useNavList.register;
+      registerButton = _useNavList.registerButton,
+      registerLink = _useNavList.registerLink;
 
-  var setRegister = function setRegister(name) {
-    return _extends({}, register(name));
+  var setRegisterButton = function setRegisterButton(name) {
+    return _extends({}, registerButton(name));
+  };
+
+  var setRegisterLink = function setRegisterLink(name) {
+    return _extends({}, registerLink(name));
   }; // TODO: Cleanup unused props
 
 
@@ -75,18 +84,21 @@ export var NavListProvider = function NavListProvider(_ref) {
     }
   };
 
-  return /*#__PURE__*/React.createElement(NavListContext.Provider, {
+  return /*#__PURE__*/React.createElement(NavListContextAuto.Provider, {
     value: {
       openSubMenus: openSubMenus,
       layout: layout,
+      border: border,
+      fixed: fixed,
       showDividers: showDividers,
       links: links,
       activeLink: activeLink,
       activeSubMenu: activeSubMenu,
       onSubMenuActive: onSubMenuActive,
       container: container,
-      setRegister: setRegister
+      setRegisterButton: setRegisterButton,
+      setRegisterLink: setRegisterLink
     }
   }, children);
 };
-export default NavListContext;
+export default NavListContextAuto;

package/es/core/NavList/NavListAuto/NavListItemAnchorAuto.js

@@ -0,0 +1,29 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["name", "href", "active", "layout", "children"];
+import React, { useContext } from 'react';
+import { NavListItemLink } from '@digigov/ui/core/NavList/NavListItemLink';
+import NavListContextAuto from '@digigov/ui/core/NavList/NavListAuto/NavListContextAuto';
+import NavListItem from '@digigov/react-core/NavListItem';
+export var NavListItemAnchorAuto = function NavListItemAnchorAuto(_ref) {
+  var _container;
+
+  var name = _ref.name,
+      href = _ref.href,
+      active = _ref.active,
+      layout = _ref.layout,
+      children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var _useContext = useContext(NavListContextAuto),
+      container = _useContext.container,
+      setRegisterLink = _useContext.setRegisterLink;
+
+  return /*#__PURE__*/React.createElement(NavListItem, {
+    layout: layout
+  }, setRegisterLink && /*#__PURE__*/React.createElement(NavListItemLink, _extends({
+    href: href,
+    active: active || container && ((_container = container(name)) === null || _container === void 0 ? void 0 : _container.active)
+  }, props, setRegisterLink(name)), children));
+};
+export default NavListItemAnchorAuto;

package/es/core/NavList/NavListAuto/NavListItemAuto.js

@@ -0,0 +1,42 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["item", "children", "role"];
+import React, { useContext } from 'react';
+import Divider from '@digigov/react-core/SectionBreak';
+import NavListContextAuto from '@digigov/ui/core/NavList/NavListAuto/NavListContextAuto';
+import NavItemAnchorAuto from '@digigov/ui/core/NavList/NavListAuto/NavListItemAnchorAuto';
+import NavItemButtonAuto from '@digigov/ui/core/NavList/NavListAuto/NavListItemButtonAuto';
+import { NavListItem } from '@digigov/ui/core/NavList/NavListItem';
+
+var _ref2 = /*#__PURE__*/React.createElement(Divider, null);
+
+export var NavListItemAuto = function NavListItemAuto(_ref) {
+  var _container;
+
+  var item = _ref.item,
+      children = _ref.children,
+      role = _ref.role,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var _useContext = useContext(NavListContextAuto),
+      layout = _useContext.layout,
+      showDividers = _useContext.showDividers,
+      container = _useContext.container,
+      setRegisterButton = _useContext.setRegisterButton;
+
+  var itemName = item !== null && item !== void 0 && item.name ? item.name : item === null || item === void 0 ? void 0 : item.label;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, children ? /*#__PURE__*/React.createElement(NavListItem, _extends({
+    layout: layout
+  }, props), children) : item !== null && item !== void 0 && item.menu || item !== null && item !== void 0 && item.subMenu ? /*#__PURE__*/React.createElement(NavItemButtonAuto, {
+    item: item,
+    name: itemName,
+    active: container && ((_container = container(itemName)) === null || _container === void 0 ? void 0 : _container.active),
+    onSelect: setRegisterButton,
+    layout: layout
+  }, item === null || item === void 0 ? void 0 : item.label) : /*#__PURE__*/React.createElement(NavItemAnchorAuto, {
+    href: item === null || item === void 0 ? void 0 : item.href,
+    name: itemName,
+    layout: layout
+  }, item === null || item === void 0 ? void 0 : item.label), showDividers && _ref2);
+};
+export default NavListItemAuto;

package/es/core/NavList/NavListAuto/NavListItemButtonAuto.js

@@ -0,0 +1,32 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import NavListItemButton from '@digigov/ui/core/NavList/NavListItemButton';
+import NavItemSubMenuAuto from '@digigov/ui/core/NavList/NavListAuto/NavListSubMenuAuto';
+import NavItemMenuAuto from '@digigov/ui/core/NavList/NavListAuto/NavListMenuAuto';
+import NavListItem from '@digigov/ui/core/NavList/NavListItem';
+export var NavListItemButtonAuto = function NavListItemButtonAuto(_ref) {
+  var _item$menu, _item$menu2;
+
+  var item = _ref.item,
+      name = _ref.name,
+      active = _ref.active,
+      onSelect = _ref.onSelect,
+      layout = _ref.layout,
+      children = _ref.children;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, onSelect && /*#__PURE__*/React.createElement(NavListItem, {
+    layout: layout
+  }, /*#__PURE__*/React.createElement(NavListItemButton, _extends({
+    active: active
+  }, onSelect(name)), children)), item !== null && item !== void 0 && item.subMenu ? /*#__PURE__*/React.createElement(NavItemSubMenuAuto, {
+    items: item === null || item === void 0 ? void 0 : item.subMenu,
+    open: active,
+    layout: layout
+  }) : /*#__PURE__*/React.createElement(NavItemMenuAuto, {
+    subMenu: item === null || item === void 0 ? void 0 : (_item$menu = item.menu) === null || _item$menu === void 0 ? void 0 : _item$menu.links,
+    title: item === null || item === void 0 ? void 0 : (_item$menu2 = item.menu) === null || _item$menu2 === void 0 ? void 0 : _item$menu2.title,
+    active: active,
+    layout: layout,
+    id: name
+  }));
+};
+export default NavListItemButtonAuto;

package/es/core/NavList/NavListAuto/NavListMenuAuto.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import NavMenu from '@digigov/ui/core/NavList/NavMenu';
+import NavMenuContainer from '@digigov/ui/core/NavList/NavMenuContainer';
+import NavMenuContainerTitle from '@digigov/ui/core/NavList/NavMenuContainerTitle';
+import NavMenuContainerContent from '@digigov/ui/core/NavList/NavMenuContainerContent';
+import NavMenuContainerContentList from '@digigov/ui/core/NavList/NavMenuContainerContentList';
+import NavMenuContainerContentListItem from '@digigov/ui/core/NavList/NavMenuContainerContentListItem';
+import { Link } from '@digigov/ui/core';
+export var NavListMenuAuto = function NavListMenuAuto(_ref) {
+  var layout = _ref.layout,
+      active = _ref.active,
+      title = _ref.title,
+      subMenu = _ref.subMenu,
+      id = _ref.id;
+  return /*#__PURE__*/React.createElement(NavMenu, {
+    layout: layout,
+    active: active,
+    id: id
+  }, /*#__PURE__*/React.createElement(NavMenuContainer, {
+    layout: layout,
+    paddingLeft: 5,
+    paddingRight: 5
+  }, /*#__PURE__*/React.createElement(NavMenuContainerTitle, {
+    layout: layout
+  }, title), /*#__PURE__*/React.createElement(NavMenuContainerContent, null, /*#__PURE__*/React.createElement(NavMenuContainerContentList, {
+    role: "menu",
+    layout: layout
+  }, subMenu === null || subMenu === void 0 ? void 0 : subMenu.map(function (item, index) {
+    return /*#__PURE__*/React.createElement(NavMenuContainerContentListItem, {
+      role: "presentation",
+      key: index
+    }, /*#__PURE__*/React.createElement(Link, {
+      role: "menuitem",
+      id: item.name,
+      href: item.href
+    }, item.label));
+  })))));
+};
+export default NavListMenuAuto;

package/es/core/NavList/NavListAuto/NavListSubMenuAuto.js

@@ -0,0 +1,28 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["items", "open", "layout"];
+import React from 'react';
+import { Nav } from '@digigov/ui/core/NavList/Nav';
+import { NavList } from '@digigov/ui/core/NavList/NavList';
+import NavItemAuto from '@digigov/ui/core/NavList/NavListAuto/NavListItemAuto';
+export var NavListSubMenuAuto = function NavListSubMenuAuto(_ref) {
+  var items = _ref.items,
+      open = _ref.open,
+      layout = _ref.layout,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return open ? /*#__PURE__*/React.createElement(Nav, _extends({
+    hidden: !open,
+    layout: layout
+  }, props, {
+    "aria-orientation": layout
+  }), /*#__PURE__*/React.createElement(NavList, {
+    layout: layout
+  }, items === null || items === void 0 ? void 0 : items.map(function (subMenuItem, index) {
+    return /*#__PURE__*/React.createElement(NavItemAuto, {
+      key: index,
+      item: subMenuItem
+    });
+  }))) : /*#__PURE__*/React.createElement(React.Fragment, null);
+};
+export default NavListSubMenuAuto;

package/es/core/NavList/NavListItem.js

@@ -1,25 +1,26 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["link", "layout", "setRegister", "active", "children"];
+var _excluded = ["link", "layout", "setRegisterButton", "setRegisterLink", "active", "children"];
 import React from 'react';
-import CoreNavListItem from '@digigov/react-core/NavListItem';
+import NavListItemContainer from '@digigov/react-core/NavListItem';
 import NavListItemButton from '@digigov/ui/core/NavList/NavListItemButton';
 import { NavListItemLink } from '@digigov/ui/core/NavList/NavListItemLink';
 import { isNavListItemLinkInterface, isNavListItemSubMenuInterface } from '@digigov/ui/core/NavList/types';
 export var NavListItem = function NavListItem(_ref) {
   var link = _ref.link,
       layout = _ref.layout,
-      setRegister = _ref.setRegister,
+      setRegisterButton = _ref.setRegisterButton,
+      setRegisterLink = _ref.setRegisterLink,
       active = _ref.active,
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/React.createElement(CoreNavListItem, _extends({
+  return /*#__PURE__*/React.createElement(NavListItemContainer, _extends({
     layout: layout
-  }, props), children ? children : isNavListItemSubMenuInterface(link) && link !== null && link !== void 0 && link.subMenu && setRegister ? /*#__PURE__*/React.createElement(NavListItemButton, setRegister(link.name), link === null || link === void 0 ? void 0 : link.label) : isNavListItemLinkInterface(link) && /*#__PURE__*/React.createElement(NavListItemLink, _extends({
+  }, props), children ? children : isNavListItemSubMenuInterface(link) && link !== null && link !== void 0 && link.subMenu ? /*#__PURE__*/React.createElement(NavListItemButton, setRegisterButton && setRegisterButton(link.name), link === null || link === void 0 ? void 0 : link.label) : isNavListItemLinkInterface(link) && /*#__PURE__*/React.createElement(NavListItemLink, _extends({
     href: link === null || link === void 0 ? void 0 : link.href
-  }, props, {
+  }, setRegisterLink && setRegisterLink(link.name), {
     active: active
-  }), link === null || link === void 0 ? void 0 : link.label));
+  }, props), link === null || link === void 0 ? void 0 : link.label));
 };
 export default NavListItem;

package/es/core/NavList/NavListItemBase.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["container", "setRegister", "children", "item", "layout", "role"];
+var _excluded = ["container", "setRegisterButton", "children", "item", "layout", "role"];
 import React from 'react';
 import Link from '@digigov/ui/core/Link';
 import { isNavListItemLinkInterface } from '@digigov/ui/core/NavList/types';
@@ -15,7 +15,7 @@ export var NavListItemBase = function NavListItemBase(_ref) {
   var _item$subMenu;
 
   var container = _ref.container,
-      setRegister = _ref.setRegister,
+      setRegisterButton = _ref.setRegisterButton,
       children = _ref.children,
       item = _ref.item,
       _ref$layout = _ref.layout,
@@ -26,7 +26,7 @@ export var NavListItemBase = function NavListItemBase(_ref) {
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(NavListItem, _extends({
     layout: layout,
     link: item,
-    setRegister: setRegister,
+    setRegisterButton: setRegisterButton,
     role: "menuitem"
   }, props)), /*#__PURE__*/React.createElement(NavMenu, _extends({
     layout: layout

package/es/core/NavList/NavMenuContainerContentList.js

@@ -1,3 +1,69 @@
-import NavMenuContainerContentList from '@digigov/react-core/NavMenuContainerContentList';
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["layout", "children"];
+import React from 'react';
+import NavMenuContainerContentListWrapper from '@digigov/react-core/NavMenuContainerContentList';
 export * from '@digigov/react-core/NavMenuContainerContentList';
+
+var focusNavListItem = function focusNavListItem(e, nextItemIndex) {
+  var _document$activeEleme;
+
+  e.preventDefault();
+  var id = (_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.id;
+  var menuItems = Array.from(e.currentTarget.querySelectorAll("[role=menuitem]"));
+  var currentItem = menuItems.findIndex(function (x) {
+    var _document$activeEleme2;
+
+    return x.getAttribute('id') === ((_document$activeEleme2 = document.activeElement) === null || _document$activeEleme2 === void 0 ? void 0 : _document$activeEleme2.id);
+  });
+
+  if (currentItem + nextItemIndex > -1 && currentItem + nextItemIndex < menuItems.length) {
+    var _menuItems;
+
+    (_menuItems = menuItems[currentItem + nextItemIndex]) === null || _menuItems === void 0 ? void 0 : _menuItems.focus();
+  } else {
+    var menuElement = Array.from(document.querySelectorAll("[aria-controls]"));
+
+    var _currentItem = menuElement.findIndex(function (x) {
+      return id === null || id === void 0 ? void 0 : id.includes(x.getAttribute('aria-controls') || '');
+    });
+
+    if (nextItemIndex > 0) {
+      var _menuElement;
+
+      (_menuElement = menuElement[_currentItem + nextItemIndex]) === null || _menuElement === void 0 ? void 0 : _menuElement.focus();
+    } else {
+      var _menuElement$_current;
+
+      (_menuElement$_current = menuElement[_currentItem]) === null || _menuElement$_current === void 0 ? void 0 : _menuElement$_current.focus();
+    }
+  }
+};
+
+export var NavMenuContainerContentList = function NavMenuContainerContentList(_ref) {
+  var layout = _ref.layout,
+      children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(NavMenuContainerContentListWrapper, _extends({
+    layout: layout
+  }, props, {
+    onKeyDown: function onKeyDown(event) {
+      switch (event.key) {
+        case 'ArrowDown':
+        case 'ArrowRight':
+          focusNavListItem(event, 1);
+          break;
+
+        case 'ArrowUp':
+        case 'ArrowLeft':
+          focusNavListItem(event, -1);
+          break;
+
+        default:
+          break;
+      }
+    }
+  }), children);
+};
 export default NavMenuContainerContentList;

package/es/core/NavList/__stories__/Default.js

@@ -35,18 +35,26 @@ var links = [{
 }];
 export var Default = function Default() {
   var layout = 'vertical';
+  var border = false;
 
   var _useNavList = useNavList(),
       container = _useNavList.container,
-      register = _useNavList.register;
+      registerButton = _useNavList.registerButton,
+      registerLink = _useNavList.registerLink;
 
-  var setRegister = function setRegister(name) {
-    return _extends({}, register(name));
+  var setRegisterButton = function setRegisterButton(name) {
+    return _extends({}, registerButton(name));
+  };
+
+  var setRegisterLink = function setRegisterLink(name) {
+    return _extends({}, registerLink(name));
   };
 
   return /*#__PURE__*/React.createElement(Nav, {
     open: true,
-    layout: layout
+    layout: layout,
+    border: border,
+    "aria-orientation": layout
   }, /*#__PURE__*/React.createElement(NavList, {
     layout: layout
   }, links.map(function (item, key) {
@@ -57,7 +65,8 @@ export var Default = function Default() {
     }, /*#__PURE__*/React.createElement(NavListItem, {
       layout: layout,
       link: item,
-      setRegister: setRegister
+      setRegisterButton: setRegisterButton,
+      setRegisterLink: setRegisterLink
     }), /*#__PURE__*/React.createElement(NavMenu, _extends({
       layout: layout
     }, container(item.name)), /*#__PURE__*/React.createElement(NavMenuContainer, {
@@ -67,11 +76,15 @@ export var Default = function Default() {
     }, /*#__PURE__*/React.createElement(NavMenuContainerTitle, {
       layout: layout
     }, item.label), /*#__PURE__*/React.createElement(NavMenuContainerContent, null, /*#__PURE__*/React.createElement(NavMenuContainerContentList, {
+      role: "menu",
       layout: layout
     }, (_item$subMenu = item.subMenu) === null || _item$subMenu === void 0 ? void 0 : _item$subMenu.map(function (subMenu, menuIndex) {
       return isNavListItemLinkInterface(subMenu) && /*#__PURE__*/React.createElement(NavMenuContainerContentListItem, {
-        key: menuIndex
+        key: menuIndex,
+        role: "presentation"
       }, /*#__PURE__*/React.createElement(Link, {
+        role: "menuitem",
+        id: subMenu.name,
         href: subMenu.href
       }, subMenu.label));
     }))))));