@digigov/ui 0.30.2 → 0.31.0

package/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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));
     }))))));

package/esm/core/NavList/__stories__/NavHorizontalLayout.js

@@ -31,18 +31,25 @@ var links = [{
 }];
 export var NavHorizontalLayout = function NavHorizontalLayout() {
   var layout = 'horizontal';
+  var border = true;
 
   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
   }, /*#__PURE__*/React.createElement(NavList, {
     layout: layout
   }, links.map(function (item, key) {
@@ -53,7 +60,8 @@ export var NavHorizontalLayout = function NavHorizontalLayout() {
     }, /*#__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, {
@@ -63,11 +71,15 @@ export var NavHorizontalLayout = function NavHorizontalLayout() {
     }, /*#__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, {
+        role: "presentation",
         key: menuIndex
       }, /*#__PURE__*/React.createElement(Link, {
+        role: "menuitem",
+        id: subMenu.name,
         href: subMenu.href
       }, subMenu.label));
     }))))));

package/esm/core/NavList/__stories__/NavListEpathlaExample.js

@@ -7,7 +7,7 @@ var LANG = 'el';
 var DEFAULT_HREF_FLAG = true;
 var epathlaLinks = [{
   name: 'index',
-  href: DEFAULT_HREF_FLAG ? '#' : "/".concat(LANG),
+  href: DEFAULT_HREF_FLAG ? '#index' : "/".concat(LANG),
   label: 'Αρχική'
 }, {
   name: 'epathla',
@@ -71,7 +71,7 @@ var epathlaLinks = [{
   }]
 }, {
   name: 'news',
-  href: DEFAULT_HREF_FLAG ? '#' : "/".concat(LANG, "/news"),
+  href: DEFAULT_HREF_FLAG ? '#news' : "/".concat(LANG, "/news"),
   label: 'Νέα'
 }, {
   name: 'send-report',
@@ -89,32 +89,44 @@ var epathlaLinks = [{
 export var NavListEpathlaExample = function NavListEpathlaExample() {
   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(React.Fragment, null, /*#__PURE__*/React.createElement(NavListAuto, {
     layout: 'horizontal',
     links: epathlaLinks,
-    "aria-label": "Nav list",
-    role: "menu"
+    "aria-label": "Nav list"
   }, epathlaLinks.map(function (item, key) {
-    var _item$subMenu;
+    var _container, _item$subMenu;
 
     return /*#__PURE__*/React.createElement(React.Fragment, {
       key: key
     }, /*#__PURE__*/React.createElement(NavListItem, {
       link: item,
-      setRegister: setRegister
-    }), /*#__PURE__*/React.createElement(NavMenu, container(item.name), /*#__PURE__*/React.createElement(NavMenuContainer, {
+      setRegisterButton: setRegisterButton,
+      setRegisterLink: setRegisterLink
+    }), (item === null || item === void 0 ? void 0 : item.subMenu) && /*#__PURE__*/React.createElement(NavMenu, _extends({}, container(item.name), {
+      "aria-expanded": (_container = container(item.name)) === null || _container === void 0 ? void 0 : _container.active
+    }), /*#__PURE__*/React.createElement(NavMenuContainer, {
       paddingLeft: 5,
       paddingRight: 5
-    }, /*#__PURE__*/React.createElement(NavMenuContainerTitle, null, item.label), /*#__PURE__*/React.createElement(NavMenuContainerContent, null, /*#__PURE__*/React.createElement(NavMenuContainerContentList, null, (_item$subMenu = item.subMenu) === null || _item$subMenu === void 0 ? void 0 : _item$subMenu.map(function (subMenu, menuIndex) {
+    }, /*#__PURE__*/React.createElement(NavMenuContainerTitle, null, item.label), /*#__PURE__*/React.createElement(NavMenuContainerContent, null, /*#__PURE__*/React.createElement(NavMenuContainerContentList, {
+      role: "menu"
+    }, (_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: "".concat(item.name, "-").concat(menuIndex),
         href: subMenu.href
       }, subMenu.label));
     }))))));

package/esm/core/NavList/__stories__/NavListHorizontalAutoExample.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import { NavListAuto } from '@digigov/ui/core/NavList';
+import NavListItemAuto from '@digigov/ui/core/NavList/NavListAuto/NavListItemAuto';
+var links = [{
+  name: 'Nav1',
+  label: 'Nav list item 1',
+  href: '#'
+}, {
+  name: 'Nav2',
+  label: 'Nav list item 2',
+  menu: {
+    title: 'This is the first Menu',
+    links: [{
+      name: 'Nav2.1',
+      label: 'link navigation',
+      href: '#'
+    }, {
+      name: 'Nav2.2',
+      label: 'link navigation',
+      href: '#'
+    }, {
+      name: 'Nav2.3',
+      label: 'link navigation',
+      href: '#'
+    }, {
+      name: 'Nav2.4',
+      label: 'link navigation',
+      href: '#'
+    }]
+  }
+}, {
+  name: 'Nav3',
+  label: 'Nav list item 3',
+  href: '#'
+}];
+export var NavListHorizontalAutoExample = function NavListHorizontalAutoExample() {
+  var layout = 'horizontal';
+  var border = true;
+  return /*#__PURE__*/React.createElement(NavListAuto, {
+    layout: layout,
+    border: border,
+    links: links,
+    "aria-label": "Nav list"
+  }, links.map(function (item, key) {
+    return /*#__PURE__*/React.createElement(NavListItemAuto, {
+      key: key,
+      item: item
+    });
+  }));
+};
+export default NavListHorizontalAutoExample;