@digigov/ui 1.0.0-480e3d97 → 1.0.0-60addd4a

package/esm/form/Button/index.mdx

@@ -55,7 +55,7 @@ Any links within a button group will automatically align with the buttons.
 <Story packageName="@digigov/ui" component="form/Button" story="GroupingButtonsAndLinks.tsx" />
 
 Write button text in sentence case, describing the action it performs. For
-example:'
+example:
 
 - `Start now` at the [start of the service](https://guide.services.gov.gr/docs/start-pages)
 - `Sign in` to an account a user has already created
@@ -85,12 +85,12 @@ to do next.
 
 ## API Docs
 
-Read more about [how to use the React types](/docs/api/Button)
+Read more about [how to use the React types](/docs/api/Button).
 
 ## Accessibility
 
-You can read more about the accessibility patterns used in our Select
-implementation in the ARIA Authoring Practices Guide (APG) at
+You can read more about the accessibility patterns used in our Button
+implementation in the ARIA Authoring Practices Guide (APG) at [button](https://www.w3.org/WAI/ARIA/apg/patterns/button/) section.
 
 ## API
 

package/esm/form/Checkbox/index.mdx

@@ -47,6 +47,11 @@ This might make 2 related questions easier to answer by grouping them on the sam
 
 <Story packageName="@digigov/ui" component="form/Checkbox" story="ConditionalReveal.tsx" />
 
+## Accessibility
+
+You can read more about the accessibility patterns used in our Checkbox
+implementation in the ARIA Authoring Practices Guide (APG) at [Checkbox](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/) section.
+
 ## API
 
 <PropTypes packageName="@digigov/ui" component="Checkbox" />

package/esm/form/DateInputContainer/index.mdx

@@ -26,3 +26,8 @@ If you’re highlighting the whole date, style all the fields like this:
 If you’re highlighting just one field - either the day, month or year - only style the field that has an error. The error message must say which field has an error, like this:
 
 <Story packageName="@digigov/ui" component="form/DateInputContainer"story="WithErrorMessageForSingleField.tsx" />
+
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="DateInputContainer" />

package/esm/form/FileUpload/index.mdx

@@ -17,6 +17,8 @@ import FileUpload from '@digigov/ui/form/FileUpload';
 
 Error messages should be styled like this:
 
+<Story packageName="@digigov/ui" component="form/FileUpload" story="WithErrorMessage.tsx" />
+
 ## API
 
 <PropTypes packageName="@digigov/ui" component="FileUpload" />

package/esm/form/RadioContainer/index.mdx

@@ -48,6 +48,11 @@ Error messages should be styled like this:
 
 <Story packageName="@digigov/ui" component="form/RadioContainer" story="WithErrorMessage.tsx" />
 
+## Accessibility
+
+You can read more about the accessibility patterns used in our Radio
+implementation in the ARIA Authoring Practices Guide (APG) at [Radio](https://www.w3.org/WAI/ARIA/apg/patterns/radio/) section.
+
 ## API
 
 ### RadioContainer

package/esm/form/SelectContainer/index.mdx

@@ -25,6 +25,12 @@ Error messages should be styled like this:
 
 <Story packageName="@digigov/ui" component="form/SelectContainer" story="DisabledInput.tsx" />
 
+## Accessibility
+
 You can read more about the accessibility patterns used in our SelectContainer
 implementation in the ARIA Authoring Practices Guide (APG) at
 [Combobox](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) section.
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="SelectContainer" />

package/esm/index.js

@@ -1,4 +1,4 @@
-/** @license Digigov v1.0.0-480e3d97
+/** @license Digigov v1.0.0-60addd4a
  *
  * This source code is licensed under the BSD-2-Clause license found in the
  * LICENSE file in the root directory of this source tree.

package/esm/layouts/Grid/Grid.stories.js

@@ -5,4 +5,5 @@ export default {
   displayName: 'Grid'
 };
 export * from '@digigov/ui/layouts/Grid/__stories__/Default';
+export * from '@digigov/ui/layouts/Grid/__stories__/ResponsiveSpacing';
 export * from '@digigov/ui/layouts/Grid/__stories__/Inline';

package/esm/layouts/Grid/__stories__/ResponsiveSpacing.js

@@ -0,0 +1,79 @@
+import React from 'react';
+import { Card } from '@digigov/ui/content/Card';
+import { Grid } from '@digigov/ui/layouts/Grid';
+
+var _ref = /*#__PURE__*/React.createElement(Grid, {
+  role: "row",
+  xs: 12,
+  sm: 6,
+  md: 4
+}, /*#__PURE__*/React.createElement(Card, {
+  variant: "border",
+  role: "gridcell"
+}, "1"));
+
+var _ref2 = /*#__PURE__*/React.createElement(Grid, {
+  role: "row",
+  xs: 12,
+  sm: 6,
+  md: 4
+}, /*#__PURE__*/React.createElement(Card, {
+  variant: "border",
+  role: "gridcell"
+}, "1"));
+
+var _ref3 = /*#__PURE__*/React.createElement(Grid, {
+  role: "row",
+  xs: 12,
+  sm: 6,
+  md: 4
+}, /*#__PURE__*/React.createElement(Card, {
+  variant: "border",
+  role: "gridcell"
+}, "1"));
+
+var _ref4 = /*#__PURE__*/React.createElement(Grid, {
+  role: "row",
+  xs: 12,
+  sm: 6,
+  md: 4
+}, /*#__PURE__*/React.createElement(Card, {
+  variant: "border",
+  role: "gridcell"
+}, "1"));
+
+var _ref5 = /*#__PURE__*/React.createElement(Grid, {
+  role: "row",
+  xs: 12,
+  sm: 6,
+  md: 4
+}, /*#__PURE__*/React.createElement(Card, {
+  variant: "border",
+  role: "gridcell"
+}, "1"));
+
+var _ref6 = /*#__PURE__*/React.createElement(Grid, {
+  role: "row",
+  xs: 12,
+  sm: 6,
+  md: 4
+}, /*#__PURE__*/React.createElement(Card, {
+  variant: "border",
+  role: "gridcell"
+}, "1"));
+
+export var ResponsiveSpacing = function ResponsiveSpacing() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Grid, {
+    role: "grid",
+    "aria-label": "grid-example",
+    container: true,
+    spacing: {
+      xs: 1,
+      sm: 4,
+      md: 6,
+      lg: 8,
+      xl: 12
+    }
+  }, _ref, _ref2, _ref3, _ref4, _ref5, _ref6));
+};
+export default ResponsiveSpacing;

package/esm/navigation/Breadcrumbs/index.mdx

@@ -17,6 +17,11 @@ import Breadcrumbs from '@digigov/ui/navigation/Breadcrumbs';
 
 <Story packageName="@digigov/ui" component="navigation/Breadcrumbs" story="Default.tsx" />
 
+## Accessibility
+
+You can read more about the accessibility patterns used in our Breadcrumbs
+implementation in the ARIA Authoring Practices Guide (APG) at [Breadcrumbs](https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/) section.
+
 ## API
 
 <PropTypes packageName="@digigov/ui" component="Breadcrumbs" />

package/esm/navigation/Drawer/__stories__/Default.js

@@ -1,11 +1,8 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useState } from 'react';
 import { Drawer } from '@digigov/ui/navigation/Drawer';
 import { DrawerHeading } from '@digigov/ui/navigation/Drawer';
-import { Link } from '@digigov/ui/navigation/Link';
-import { isNavListItemLinkInterface, NavListAuto, NavListItem, NavMenu, NavMenuContainer, NavMenuContainerContent, NavMenuContainerContentList, NavMenuContainerContentListItem, NavMenuContainerTitle } from '@digigov/ui/navigation/NavList';
-import { useNavList } from '@digigov/ui/navigation/NavList/hooks/useNavList';
+import { NavListAuto } from '@digigov/ui/navigation/NavList';
 import { Title } from '@digigov/ui/typography/Title';
 
 function useDrawer() {
@@ -28,27 +25,29 @@ var links = [{
 }, {
   name: 'educational',
   label: 'Εκπαιδευτικό υλικό',
-  subMenu: [{
-    name: 'elearning',
-    href: '#elearning',
-    label: 'Εκπαιδευτική πλατφόρμα'
-  }, {
-    name: 'videos',
-    href: '#videos',
-    label: 'Βίντεο'
-  }, {
-    name: 'presentations',
-    href: '#presentations',
-    label: 'Παρουσιάσεις'
-  }, {
-    name: 'promoting',
-    href: '#promoting',
-    label: 'Προωθώντας την αθλητική ακεραιότητα στην νέα γενιά'
-  }, {
-    name: 'other-texts',
-    href: '#other-texts',
-    label: 'Άλλα κείμενα'
-  }]
+  menu: {
+    links: [{
+      name: 'elearning',
+      href: '#elearning',
+      label: 'Εκπαιδευτική πλατφόρμα'
+    }, {
+      name: 'videos',
+      href: '#videos',
+      label: 'Βίντεο'
+    }, {
+      name: 'presentations',
+      href: '#presentations',
+      label: 'Παρουσιάσεις'
+    }, {
+      name: 'promoting',
+      href: '#promoting',
+      label: 'Προωθώντας την αθλητική ακεραιότητα στην νέα γενιά'
+    }, {
+      name: 'other-texts',
+      href: '#other-texts',
+      label: 'Άλλα κείμενα'
+    }]
+  }
 }, {
   name: 'news',
   href: '#news',
@@ -65,19 +64,6 @@ export var Default = function Default() {
       open = _useDrawer2[0],
       toggleDrawer = _useDrawer2[1];
 
-  var _useNavList = useNavList(),
-      container = _useNavList.container,
-      registerButton = _useNavList.registerButton,
-      registerLink = _useNavList.registerLink;
-
-  var setRegisterButton = function setRegisterButton(name) {
-    return _extends({}, registerButton(name));
-  };
-
-  var setRegisterLink = function setRegisterLink(name) {
-    return _extends({}, registerLink(name));
-  };
-
   var layout = 'vertical';
   var border = false;
   var fixed = false;
@@ -95,33 +81,6 @@ export var Default = function Default() {
     border: border,
     fixed: fixed,
     "aria-label": "Nav list"
-  }, links.map(function (item, key) {
-    var _item$subMenu;
-
-    return /*#__PURE__*/React.createElement(React.Fragment, {
-      key: key
-    }, /*#__PURE__*/React.createElement(NavListItem, {
-      link: item,
-      setRegisterButton: setRegisterButton,
-      setRegisterLink: setRegisterLink
-    }), /*#__PURE__*/React.createElement(NavMenu, _extends({
-      layout: layout
-    }, container(item.name)), /*#__PURE__*/React.createElement(NavMenuContainer, {
-      layout: layout,
-      paddingLeft: 5,
-      paddingRight: 5
-    }, /*#__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,
-        role: "presentation"
-      }, /*#__PURE__*/React.createElement(Link, {
-        role: "menuitem",
-        id: subMenu.name,
-        href: subMenu.href
-      }, subMenu.label));
-    }))))));
-  })));
+  }));
 };
 export default Default;

package/esm/navigation/Dropdown/__stories__/AlignRight.js

@@ -6,8 +6,7 @@ import { LabelTitle } from '@digigov/ui/form/LabelContainer';
 import { TextInput } from '@digigov/ui/form/TextInput';
 import { SectionBreak } from '@digigov/ui/layouts/SectionBreak';
 import { Dropdown, DropdownButton, DropdownContent } from '@digigov/ui/navigation/Dropdown';
-import { NavVertical } from '@digigov/ui/navigation/NavList/NavVertical';
-import { NavVerticalItem } from '@digigov/ui/navigation/NavList/NavVerticalItem';
+import { NavList, NavListItemAction } from '@digigov/ui/navigation/NavList';
 
 var _ref = /*#__PURE__*/React.createElement(Dropdown, {
   align: "right"
@@ -24,16 +23,18 @@ var _ref = /*#__PURE__*/React.createElement(Dropdown, {
 }, /*#__PURE__*/React.createElement(LabelContainer, null, /*#__PURE__*/React.createElement(LabelTitle, null, "\u038C\u03BD\u03BF\u03BC\u03B1 \u03C0\u03B5\u03B4\u03AF\u03BF\u03C5"), /*#__PURE__*/React.createElement(TextInput, {
   name: "input-name"
 }))), /*#__PURE__*/React.createElement(SectionBreak, {
-  role: "separator"
-}), /*#__PURE__*/React.createElement(NavVertical, {
-  role: "menu"
-}, /*#__PURE__*/React.createElement(NavVerticalItem, {
+  role: "separator",
+  paddingBottom: 0,
+  paddingTop: 0
+}), /*#__PURE__*/React.createElement(NavList, {
+  layout: "vertical"
+}, /*#__PURE__*/React.createElement(NavListItemAction, {
   role: "menuitem",
   href: "#"
-}, "\u0395\u03C0\u03B5\u03BE\u03B5\u03C1\u03B3\u03B1\u03C3\u03AF\u03B1"), /*#__PURE__*/React.createElement(NavVerticalItem, {
+}, "\u0395\u03C0\u03B5\u03BE\u03B5\u03C1\u03B3\u03B1\u03C3\u03AF\u03B1"), /*#__PURE__*/React.createElement(NavListItemAction, {
   role: "menuitem",
   href: "#"
-}, "\u039C\u03B5\u03C4\u03B1\u03BA\u03AF\u03BD\u03B7\u03C3\u03B7"), /*#__PURE__*/React.createElement(NavVerticalItem, {
+}, "\u039C\u03B5\u03C4\u03B1\u03BA\u03AF\u03BD\u03B7\u03C3\u03B7"), /*#__PURE__*/React.createElement(NavListItemAction, {
   role: "menuitem",
   href: "#"
 }, "\u039F\u03C1\u03B9\u03C3\u03C4\u03B9\u03BA\u03AE \u03B4\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE")), /*#__PURE__*/React.createElement(SectionBreak, {

package/esm/navigation/Dropdown/__stories__/Default.js

@@ -6,8 +6,7 @@ import { LabelTitle } from '@digigov/ui/form/LabelContainer';
 import { TextInput } from '@digigov/ui/form/TextInput';
 import { SectionBreak } from '@digigov/ui/layouts/SectionBreak';
 import { Dropdown, DropdownButton, DropdownContent } from '@digigov/ui/navigation/Dropdown';
-import { NavVertical } from '@digigov/ui/navigation/NavList/NavVertical';
-import { NavVerticalItem } from '@digigov/ui/navigation/NavList/NavVerticalItem';
+import { NavListItemAction, NavList } from '@digigov/ui/navigation/NavList';
 
 var _ref = /*#__PURE__*/React.createElement(Dropdown, null, /*#__PURE__*/React.createElement(DropdownButton, {
   role: "button",
@@ -22,16 +21,18 @@ var _ref = /*#__PURE__*/React.createElement(Dropdown, null, /*#__PURE__*/React.c
 }, /*#__PURE__*/React.createElement(LabelContainer, null, /*#__PURE__*/React.createElement(LabelTitle, null, "\u038C\u03BD\u03BF\u03BC\u03B1 \u03C0\u03B5\u03B4\u03AF\u03BF\u03C5"), /*#__PURE__*/React.createElement(TextInput, {
   name: "input-name"
 }))), /*#__PURE__*/React.createElement(SectionBreak, {
-  role: "separator"
-}), /*#__PURE__*/React.createElement(NavVertical, {
-  role: "menu"
-}, /*#__PURE__*/React.createElement(NavVerticalItem, {
+  role: "separator",
+  paddingBottom: 0,
+  paddingTop: 0
+}), /*#__PURE__*/React.createElement(NavList, {
+  layout: "vertical"
+}, /*#__PURE__*/React.createElement(NavListItemAction, {
   role: "menuitem",
   href: "#"
-}, "\u0395\u03C0\u03B5\u03BE\u03B5\u03C1\u03B3\u03B1\u03C3\u03AF\u03B1"), /*#__PURE__*/React.createElement(NavVerticalItem, {
+}, "\u0395\u03C0\u03B5\u03BE\u03B5\u03C1\u03B3\u03B1\u03C3\u03AF\u03B1"), /*#__PURE__*/React.createElement(NavListItemAction, {
   role: "menuitem",
   href: "#"
-}, "\u039C\u03B5\u03C4\u03B1\u03BA\u03AF\u03BD\u03B7\u03C3\u03B7"), /*#__PURE__*/React.createElement(NavVerticalItem, {
+}, "\u039C\u03B5\u03C4\u03B1\u03BA\u03AF\u03BD\u03B7\u03C3\u03B7"), /*#__PURE__*/React.createElement(NavListItemAction, {
   role: "menuitem",
   href: "#"
 }, "\u039F\u03C1\u03B9\u03C3\u03C4\u03B9\u03BA\u03AE \u03B4\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE")), /*#__PURE__*/React.createElement(SectionBreak, {

package/esm/navigation/Dropdown/__stories__/PlacementTop.js

@@ -6,8 +6,7 @@ import { LabelTitle } from '@digigov/ui/form/LabelContainer';
 import { TextInput } from '@digigov/ui/form/TextInput';
 import { SectionBreak } from '@digigov/ui/layouts/SectionBreak';
 import { Dropdown, DropdownButton, DropdownContent } from '@digigov/ui/navigation/Dropdown';
-import { NavVertical } from '@digigov/ui/navigation/NavList/NavVertical';
-import { NavVerticalItem } from '@digigov/ui/navigation/NavList/NavVerticalItem';
+import { NavListItemAction, NavList } from '@digigov/ui/navigation/NavList';
 
 var _ref = /*#__PURE__*/React.createElement(DropdownButton, {
   role: "button",
@@ -24,16 +23,18 @@ var _ref2 = /*#__PURE__*/React.createElement(DropdownContent, {
 }, /*#__PURE__*/React.createElement(LabelContainer, null, /*#__PURE__*/React.createElement(LabelTitle, null, "\u038C\u03BD\u03BF\u03BC\u03B1 \u03C0\u03B5\u03B4\u03AF\u03BF\u03C5"), /*#__PURE__*/React.createElement(TextInput, {
   name: "input-name"
 }))), /*#__PURE__*/React.createElement(SectionBreak, {
-  role: "separator"
-}), /*#__PURE__*/React.createElement(NavVertical, {
-  role: "menu"
-}, /*#__PURE__*/React.createElement(NavVerticalItem, {
+  role: "separator",
+  paddingBottom: 0,
+  paddingTop: 0
+}), /*#__PURE__*/React.createElement(NavList, {
+  layout: "vertical"
+}, /*#__PURE__*/React.createElement(NavListItemAction, {
   role: "menuitem",
   href: "#"
-}, "\u0395\u03C0\u03B5\u03BE\u03B5\u03C1\u03B3\u03B1\u03C3\u03AF\u03B1"), /*#__PURE__*/React.createElement(NavVerticalItem, {
+}, "\u0395\u03C0\u03B5\u03BE\u03B5\u03C1\u03B3\u03B1\u03C3\u03AF\u03B1"), /*#__PURE__*/React.createElement(NavListItemAction, {
   role: "menuitem",
   href: "#"
-}, "\u039C\u03B5\u03C4\u03B1\u03BA\u03AF\u03BD\u03B7\u03C3\u03B7"), /*#__PURE__*/React.createElement(NavVerticalItem, {
+}, "\u039C\u03B5\u03C4\u03B1\u03BA\u03AF\u03BD\u03B7\u03C3\u03B7"), /*#__PURE__*/React.createElement(NavListItemAction, {
   role: "menuitem",
   href: "#"
 }, "\u039F\u03C1\u03B9\u03C3\u03C4\u03B9\u03BA\u03AE \u03B4\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE")), /*#__PURE__*/React.createElement(SectionBreak, {

package/esm/navigation/Dropdown/index.mdx

@@ -25,8 +25,6 @@ You can display the dropdown menu to the top of the `Dropdown` button.
 
 <Story packageName="@digigov/ui" component="navigation/Dropdown" story="PlacementTop.tsx" />
 
-You can read more about the accessibility patterns used in our Dropdown
-implementation in the ARIA Authoring Practices Guide (APG) at
 
 ## API
 

package/esm/navigation/Link/index.mdx

@@ -29,6 +29,8 @@ import Link from '@digigov/ui/navigation/Link';
 
 <Story packageName="@digigov/ui" component="navigation/Link" story="DarkBackgroundNoUnderline.tsx" />
 
+### Accessibility
+
 You can read more about the accessibility patterns used in our Link
 implementation in the ARIA Authoring Practices Guide (APG) at
 [Link](https://www.w3.org/WAI/ARIA/apg/patterns/link/) section.

package/esm/navigation/NavList/NavList.stories.playwright.json

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

package/esm/navigation/NavList/NavListAuto/index.js

@@ -0,0 +1,54 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["layout", "border", "fixed", "links"];
+import React from 'react';
+import { useNavList } from '../hooks/useNavList';
+import NavListItemAction from '@digigov/react-core/NavListItemAction';
+import { Link } from '@digigov/ui/navigation/Link';
+import Nav from '../Nav';
+import NavList from '@digigov/react-core/NavList';
+import NavMenuContainer from '@digigov/react-core/NavMenuContainer';
+import NavMenuContent from '@digigov/react-core/NavMenuContent';
+import NavMenuContentList from '@digigov/ui/navigation/NavList/NavMenuContentList';
+import NavMenuContentListItem from '@digigov/react-core/NavMenuContentListItem';
+import NavMenuTitle from '@digigov/react-core/NavMenuTitle';
+export var NavListAuto = function NavListAuto(_ref) {
+  var layout = _ref.layout,
+      border = _ref.border,
+      fixed = _ref.fixed,
+      _ref$links = _ref.links,
+      links = _ref$links === void 0 ? [] : _ref$links,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var _useNavList = useNavList(),
+      registerNavItemMenu = _useNavList.registerNavItemMenu,
+      registerNavItem = _useNavList.registerNavItem;
+
+  return /*#__PURE__*/React.createElement(Nav, _extends({
+    open: true,
+    border: border,
+    fixed: fixed
+  }, props), /*#__PURE__*/React.createElement(NavList, {
+    layout: layout
+  }, links.map(function (item, key) {
+    var _item$menu, _item$menu2, _item$menu$links;
+
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: key
+    }, /*#__PURE__*/React.createElement(NavListItemAction, registerNavItem(item), item.label), item.menu && /*#__PURE__*/React.createElement(NavMenuContainer, _extends({
+      layout: layout
+    }, registerNavItemMenu(item.name)), ((_item$menu = item.menu) === null || _item$menu === void 0 ? void 0 : _item$menu.title) && /*#__PURE__*/React.createElement(NavMenuTitle, null, (_item$menu2 = item.menu) === null || _item$menu2 === void 0 ? void 0 : _item$menu2.title), /*#__PURE__*/React.createElement(NavMenuContent, null, /*#__PURE__*/React.createElement(NavMenuContentList, {
+      role: "menu"
+    }, (_item$menu$links = item.menu.links) === null || _item$menu$links === void 0 ? void 0 : _item$menu$links.map(function (subMenu, menuIndex) {
+      return (subMenu === null || subMenu === void 0 ? void 0 : subMenu.href) && /*#__PURE__*/React.createElement(NavMenuContentListItem, {
+        key: menuIndex,
+        role: "presentation"
+      }, /*#__PURE__*/React.createElement(Link, {
+        role: "menuitem",
+        id: subMenu.name,
+        href: subMenu.href
+      }, subMenu.label));
+    })))));
+  })));
+};
+export default NavListAuto;

package/esm/navigation/NavList/{NavMenuContainerContentList.js → NavMenuContentList.js}

@@ -2,8 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children"];
 import React from 'react';
-import NavMenuContainerContentListWrapper from '@digigov/react-core/NavMenuContainerContentList';
-export * from '@digigov/react-core/NavMenuContainerContentList';
+import NavMenuContentListBase from '@digigov/react-core/NavMenuContentListBase';
+export * from '@digigov/react-core/NavMenuContentListBase';
 
 var focusNavListItem = function focusNavListItem(e, nextItemIndex) {
   var _document$activeEleme;
@@ -40,11 +40,11 @@ var focusNavListItem = function focusNavListItem(e, nextItemIndex) {
   }
 };
 
-export var NavMenuContainerContentList = function NavMenuContainerContentList(_ref) {
+export var NavMenuContentList = function NavMenuContentList(_ref) {
   var children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/React.createElement(NavMenuContainerContentListWrapper, _extends({}, props, {
+  return /*#__PURE__*/React.createElement(NavMenuContentListBase, _extends({}, props, {
     onKeyDown: function onKeyDown(event) {
       switch (event.key) {
         case 'ArrowDown':
@@ -63,4 +63,4 @@ export var NavMenuContainerContentList = function NavMenuContainerContentList(_r
     }
   }), children);
 };
-export default NavMenuContainerContentList;
+export default NavMenuContentList;

package/esm/navigation/NavList/__stories__/Default.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
-import NavList, { isNavListItemLinkInterface, Nav, NavListItem, NavMenu, NavMenuContainer, NavMenuContainerContent, NavMenuContainerContentList, NavMenuContainerContentListItem, NavMenuContainerTitle, useNavList } from '@digigov/ui/navigation/NavList';
+import React, { Fragment } from 'react';
+import { Nav, NavList, NavListItemAction, NavMenuContainer, NavMenuContent, NavMenuContentList, NavMenuContentListItem, NavMenuTitle, useNavList } from '@digigov/ui/navigation/NavList';
 import { Link } from '@digigov/ui/navigation/Link';
 var links = [{
   name: 'home',
@@ -40,42 +40,26 @@ export var Default = function Default() {
   var border = false;
 
   var _useNavList = useNavList(),
-      container = _useNavList.container,
-      registerButton = _useNavList.registerButton,
-      registerLink = _useNavList.registerLink;
-
-  var setRegisterButton = function setRegisterButton(name) {
-    return _extends({}, registerButton(name));
-  };
-
-  var setRegisterLink = function setRegisterLink(name) {
-    return _extends({}, registerLink(name));
-  };
+      registerNavItemMenu = _useNavList.registerNavItemMenu,
+      registerNavItem = _useNavList.registerNavItem;
 
   return /*#__PURE__*/React.createElement(Nav, {
     open: true,
-    layout: layout,
     border: border,
     "aria-orientation": layout
-  }, /*#__PURE__*/React.createElement(NavList, null, links.map(function (item, key) {
+  }, /*#__PURE__*/React.createElement(NavList, {
+    layout: layout
+  }, links.map(function (item, key) {
     var _item$subMenu;
 
-    return /*#__PURE__*/React.createElement(React.Fragment, {
+    return /*#__PURE__*/React.createElement(Fragment, {
       key: key
-    }, /*#__PURE__*/React.createElement(NavListItem, {
-      link: item,
-      setRegisterButton: setRegisterButton,
-      setRegisterLink: setRegisterLink
-    }), /*#__PURE__*/React.createElement(NavMenu, _extends({
+    }, /*#__PURE__*/React.createElement(NavListItemAction, registerNavItem(item), item.label), item.subMenu && /*#__PURE__*/React.createElement(NavMenuContainer, _extends({
       layout: layout
-    }, container(item.name)), /*#__PURE__*/React.createElement(NavMenuContainer, {
-      layout: layout,
-      paddingLeft: 5,
-      paddingRight: 5
-    }, /*#__PURE__*/React.createElement(NavMenuContainerTitle, null, item.label), /*#__PURE__*/React.createElement(NavMenuContainerContent, null, /*#__PURE__*/React.createElement(NavMenuContainerContentList, {
+    }, registerNavItemMenu(item.name)), /*#__PURE__*/React.createElement(NavMenuTitle, null, item.label), /*#__PURE__*/React.createElement(NavMenuContent, null, /*#__PURE__*/React.createElement(NavMenuContentList, {
       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, {
+      return (subMenu === null || subMenu === void 0 ? void 0 : subMenu.href) && /*#__PURE__*/React.createElement(NavMenuContentListItem, {
         key: menuIndex,
         role: "presentation"
       }, /*#__PURE__*/React.createElement(Link, {
@@ -83,7 +67,7 @@ export var Default = function Default() {
         id: subMenu.name,
         href: subMenu.href
       }, subMenu.label));
-    }))))));
+    })))));
   })));
 };
 export default Default;