@digigov/ui 0.30.0-navlist.alpha.3 → 0.30.1

package/core/NavList/NavListContext.js

@@ -9,8 +9,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.NavListProvider = exports.NavListContext = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
+var _useNavList2 = require("@digigov/ui/hooks/useNavList");
+
 var _react = _interopRequireWildcard(require("react"));
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -18,7 +22,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 var NavListContext = /*#__PURE__*/(0, _react.createContext)({
-  horizontal: false,
+  layout: 'horizontal',
   openSubMenus: false,
   links: [],
   activeLink: {},
@@ -29,10 +33,9 @@ var TRAILING_SLASH = /\/$/gm;
 
 var NavListProvider = function NavListProvider(_ref) {
   var children = _ref.children,
+      layout = _ref.layout,
       _ref$openSubMenus = _ref.openSubMenus,
       openSubMenus = _ref$openSubMenus === void 0 ? false : _ref$openSubMenus,
-      _ref$horizontal = _ref.horizontal,
-      horizontal = _ref$horizontal === void 0 ? false : _ref$horizontal,
       _ref$showDividers = _ref.showDividers,
       showDividers = _ref$showDividers === void 0 ? false : _ref$showDividers,
       _ref$links = _ref.links,
@@ -48,6 +51,15 @@ var NavListProvider = function NavListProvider(_ref) {
       activeLink = _useState4[0],
       setActiveLink = _useState4[1];
 
+  var _useNavList = (0, _useNavList2.useNavList)(),
+      container = _useNavList.container,
+      register = _useNavList.register;
+
+  var setRegister = function setRegister(name) {
+    return (0, _extends2["default"])({}, register(name));
+  }; // TODO: Cleanup unused props
+
+
   (0, _react.useEffect)(function () {
     var currentActiveLink = links.find(function (link) {
       var _link$subMenu;
@@ -87,12 +99,14 @@ var NavListProvider = function NavListProvider(_ref) {
   return /*#__PURE__*/_react["default"].createElement(NavListContext.Provider, {
     value: {
       openSubMenus: openSubMenus,
-      horizontal: horizontal,
+      layout: layout,
       showDividers: showDividers,
       links: links,
       activeLink: activeLink,
       activeSubMenu: activeSubMenu,
-      onSubMenuActive: onSubMenuActive
+      onSubMenuActive: onSubMenuActive,
+      container: container,
+      setRegister: setRegister
     }
   }, children);
 };

package/core/NavList/NavListItem.d.ts

@@ -1,13 +1,4 @@
 import React from 'react';
-export interface NavListItemProps {
-    name?: string;
-    label?: string;
-    children?: React.ReactNode;
-    className?: string;
-    href?: string;
-    selected?: boolean;
-    expandOn?: 'hover' | 'click';
-    role?: string;
-}
+import { NavListItemProps } from '@digigov/ui/core/NavList/types';
 export declare const NavListItem: React.FC<NavListItemProps>;
 export default NavListItem;

package/core/NavList/NavListItem.js

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,136 +9,34 @@ exports["default"] = exports.NavListItem = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _react = _interopRequireWildcard(require("react"));
-
-var _clsx = _interopRequireDefault(require("clsx"));
-
-var _SectionBreak = _interopRequireDefault(require("@digigov/react-core/SectionBreak"));
-
-var _NavListItemBase = _interopRequireDefault(require("@digigov/ui/core/NavList/NavListItemBase"));
-
-var _NavListSubMenu = _interopRequireDefault(require("@digigov/ui/core/NavList/NavListSubMenu"));
+var _react = _interopRequireDefault(require("react"));
 
-var _NavListContext = _interopRequireDefault(require("@digigov/ui/core/NavList/NavListContext"));
+var _NavListItem = _interopRequireDefault(require("@digigov/react-core/NavListItem"));
 
-var _excluded = ["name", "expandOn", "children", "href", "className", "selected", "role"];
+var _NavListItemButton = _interopRequireDefault(require("@digigov/ui/core/NavList/NavListItemButton"));
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+var _NavListItemLink = require("@digigov/ui/core/NavList/NavListItemLink");
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _types = require("@digigov/ui/core/NavList/types");
 
-var _ref3 = /*#__PURE__*/_react["default"].createElement(_SectionBreak["default"], null);
+var _excluded = ["link", "layout", "setRegister", "active", "children"];
 
 var NavListItem = function NavListItem(_ref) {
-  var _ref$current2, _ref$current3;
-
-  var name = _ref.name,
-      _ref$expandOn = _ref.expandOn,
-      expandOn = _ref$expandOn === void 0 ? 'click' : _ref$expandOn,
+  var link = _ref.link,
+      layout = _ref.layout,
+      setRegister = _ref.setRegister,
+      active = _ref.active,
       children = _ref.children,
-      href = _ref.href,
-      className = _ref.className,
-      passSelected = _ref.selected,
-      role = _ref.role,
       props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-
-  var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      open = _useState2[0],
-      setOpen = _useState2[1];
-
-  var _useState3 = (0, _react.useState)({}),
-      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-      style = _useState4[0],
-      setStyle = _useState4[1];
-
-  var ref = (0, _react.useRef)(null);
-
-  var _useState5 = (0, _react.useState)(),
-      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-      delayHandler = _useState6[0],
-      setDelayHandler = _useState6[1];
-
-  var _useState7 = (0, _react.useState)(passSelected || false),
-      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-      selected = _useState8[0],
-      setSelected = _useState8[1];
-
-  var _useContext = (0, _react.useContext)(_NavListContext["default"]),
-      openSubMenus = _useContext.openSubMenus,
-      horizontal = _useContext.horizontal,
-      showDividers = _useContext.showDividers,
-      activeLink = _useContext.activeLink,
-      links = _useContext.links;
-
-  var _ref2 = links.find(function (link) {
-    return link.name === name;
-  }) || {},
-      contextHref = _ref2.href,
-      label = _ref2.label,
-      subMenu = _ref2.subMenu;
-
-  (0, _react.useEffect)(function () {
-    if (activeLink !== null && activeLink !== void 0 && activeLink.name && name) {
-      setSelected(activeLink.name === name);
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  }, [activeLink === null || activeLink === void 0 ? void 0 : activeLink.name]);
-
-  var toggleOpen = function toggleOpen() {
-    setOpen(!open);
-  };
-
-  var handleOpen = function handleOpen() {
-    if (subMenu && subMenu.length) {
-      setDelayHandler(setTimeout(function () {
-        setOpen(true);
-      }, 300));
-    }
-  };
-
-  var handleClose = function handleClose() {
-    if (subMenu && subMenu.length) {
-      if (delayHandler) clearTimeout(delayHandler);
-      setOpen(false);
-    }
-  };
-
-  (0, _react.useEffect)(function () {
-    var _ref$current;
-
-    if (ref !== null && ref !== void 0 && (_ref$current = ref.current) !== null && _ref$current !== void 0 && _ref$current.clientWidth && horizontal && ref.current.clientWidth !== style.width) {
-      setStyle({
-        top: ref.current.clientHeight - 12,
-        width: ref.current.clientWidth
-      });
-    }
-  }, [horizontal, style.width, (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.clientWidth, (_ref$current3 = ref.current) === null || _ref$current3 === void 0 ? void 0 : _ref$current3.clientHeight]);
-  var handlerProps = expandOn === 'hover' ? {
-    onMouseEnter: handleOpen,
-    onMouseLeave: handleClose
-  } : {
-    onClick: toggleOpen
-  };
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_NavListItemBase["default"], (0, _extends2["default"])({
-    ref: ref,
-    href: contextHref || href,
-    label: label || children,
-    expandOn: expandOn,
-    open: open,
-    selected: selected,
-    isNested: subMenu && subMenu.length > 0,
-    horizontal: horizontal,
-    role: role,
-    className: (0, _clsx["default"])(className)
-  }, handlerProps, props), (open || openSubMenus) && subMenu && subMenu.length && /*#__PURE__*/_react["default"].createElement(_NavListSubMenu["default"], {
-    style: style,
-    links: subMenu
-  })), !horizontal && showDividers && _ref3);
+  return /*#__PURE__*/_react["default"].createElement(_NavListItem["default"], (0, _extends2["default"])({
+    layout: layout
+  }, props), children ? children : (0, _types.isNavListItemSubMenuInterface)(link) && link !== null && link !== void 0 && link.subMenu && setRegister ? /*#__PURE__*/_react["default"].createElement(_NavListItemButton["default"], setRegister(link.name), link === null || link === void 0 ? void 0 : link.label) : (0, _types.isNavListItemLinkInterface)(link) && /*#__PURE__*/_react["default"].createElement(_NavListItemLink.NavListItemLink, (0, _extends2["default"])({
+    href: link === null || link === void 0 ? void 0 : link.href
+  }, props, {
+    active: active
+  }), link === null || link === void 0 ? void 0 : link.label));
 };
 
 exports.NavListItem = NavListItem;

package/core/NavList/NavListItemAuto.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface NavListItemAutoProps {
+    item?: any;
+    children?: React.ReactNode;
+    role?: string;
+}
+export declare const NavListItemAuto: React.FC<NavListItemAutoProps>;
+export default NavListItemAuto;

package/core/NavList/NavListItemAuto.js

@@ -0,0 +1,65 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.NavListItemAuto = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _SectionBreak = _interopRequireDefault(require("@digigov/react-core/SectionBreak"));
+
+var _NavListItemBase = _interopRequireDefault(require("@digigov/ui/core/NavList/NavListItemBase"));
+
+var _NavListSubMenu = _interopRequireDefault(require("@digigov/ui/core/NavList/NavListSubMenu"));
+
+var _NavListContext = _interopRequireDefault(require("@digigov/ui/core/NavList/NavListContext"));
+
+var _excluded = ["item", "children", "role"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var _ref3 = /*#__PURE__*/_react["default"].createElement(_SectionBreak["default"], null);
+
+var NavListItemAuto = function NavListItemAuto(_ref) {
+  var item = _ref.item,
+      children = _ref.children,
+      role = _ref.role,
+      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+
+  var _useContext = (0, _react.useContext)(_NavListContext["default"]),
+      layout = _useContext.layout,
+      showDividers = _useContext.showDividers,
+      links = _useContext.links,
+      container = _useContext.container,
+      setRegister = _useContext.setRegister;
+
+  var _ref2 = links.find(function (link) {
+    return link.name === item.name;
+  }) || {},
+      subMenu = _ref2.subMenu;
+
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_NavListItemBase["default"], (0, _extends2["default"])({
+    container: container,
+    setRegister: setRegister,
+    item: item,
+    layout: layout,
+    role: role
+  }, props), subMenu && (subMenu === null || subMenu === void 0 ? void 0 : subMenu.length) > 0 && /*#__PURE__*/_react["default"].createElement(_NavListSubMenu["default"], {
+    links: subMenu
+  })), showDividers && _ref3);
+};
+
+exports.NavListItemAuto = NavListItemAuto;
+var _default = NavListItemAuto;
+exports["default"] = _default;

package/core/NavList/NavListItemBase.d.ts

@@ -1,17 +1,15 @@
 import React from 'react';
-export declare const useNavListItemBaseStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"label" | "link" | "open" | "selected" | "horizontal" | "vertical" | "icon" | "root" | "submenu">;
+import { NavListLayout } from '@digigov/ui/core/NavList/types';
 export interface NavListItemBaseProps {
+    container?: (key: string) => {
+        active: boolean;
+        id: string;
+    };
+    setRegister?: (name: string) => any;
     children?: React.ReactNode;
-    href?: string;
-    label?: React.ReactNode;
-    className?: string;
-    expandOn?: 'hover' | 'click';
-    selected?: boolean;
-    isNested?: boolean;
-    horizontal?: boolean;
-    open?: boolean;
-    onClick?: (e: any) => void;
+    item?: any;
+    layout?: NavListLayout;
     role?: string;
 }
-export declare const NavListItemBase: React.ForwardRefExoticComponent<NavListItemBaseProps & React.RefAttributes<HTMLLIElement>>;
+export declare const NavListItemBase: React.FC<NavListItemBaseProps>;
 export default NavListItemBase;

package/core/NavList/NavListItemBase.js

@@ -2,163 +2,71 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useNavListItemBaseStyles = exports["default"] = exports.NavListItemBase = void 0;
+exports["default"] = exports.NavListItemBase = void 0;
 
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _Link = _interopRequireDefault(require("@digigov/ui/core/Link"));
 
-var _clsx = _interopRequireDefault(require("clsx"));
+var _types = require("@digigov/ui/core/NavList/types");
 
-var _styles = require("@material-ui/core/styles");
+var _NavListItem = _interopRequireDefault(require("@digigov/ui/core/NavList/NavListItem"));
 
-var _ExpandMore = _interopRequireDefault(require("@material-ui/icons/ExpandMore"));
+var _NavMenu = _interopRequireDefault(require("@digigov/ui/core/NavList/NavMenu"));
 
-var _Link = _interopRequireDefault(require("@digigov/ui/core/Link"));
+var _NavMenuContainer = _interopRequireDefault(require("@digigov/ui/core/NavList/NavMenuContainer"));
 
-var _router = require("@digigov/ui/router");
-
-var _excluded = ["href", "label", "children", "className", "open", "horizontal", "selected", "isNested", "expandOn", "onClick", "role"];
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-var TRAILING_SLASH = /\/$/gm;
-var useNavListItemBaseStyles = (0, _styles.makeStyles)(function (theme) {
-  var transition = {
-    duration: theme.transitions.duration.shortest
-  };
-  return {
-    root: (0, _extends2["default"])({
-      position: 'relative',
-      listStyle: 'none',
-      boxSizing: 'border-box',
-      textAlign: 'left',
-      margin: theme.spacing(0)
-    }, theme.typography.body1, {
-      '&$horizontal': {
-        flexDirection: 'column'
-      }
-    }),
-    link: {
-      display: 'flex',
-      flexGrow: 1,
-      padding: theme.spacing(1),
-      textDecoration: 'none',
-      '&:hover': {
-        textDecoration: 'underline'
-      }
-    },
-    selected: {
-      fontWeight: 'bolder',
-      '&$horizontal': {
-        borderStyle: 'solid',
-        borderColor: theme.palette.secondary.main,
-        borderTop: 0,
-        borderLeft: 0,
-        borderRight: 0
-      },
-      '&$vertical': {
-        border: 0
-      }
-    },
-    // Pseudoclasses - do not remove //
-    horizontal: {},
-    vertical: {},
-    // End Pseudoclasses //
-    label: {
-      display: 'flex',
-      alignItems: 'center',
-      flex: 'auto'
-    },
-    icon: {
-      display: 'flex',
-      alignItems: 'center',
-      transform: 'rotate(0deg)',
-      transition: theme.transitions.create('transform', transition),
-      '&$open': {
-        transform: 'rotate(180deg)'
-      }
-    },
-    submenu: {
-      display: 'flex'
-    },
-
-    /* Pseudo-class applied to the Expand icon if `open={true}`. */
-    open: {}
-  };
-}, {
-  name: 'MuiNavListItemBase'
-});
-exports.useNavListItemBaseStyles = useNavListItemBaseStyles;
+var _NavMenuContainerTitle = _interopRequireDefault(require("@digigov/ui/core/NavList/NavMenuContainerTitle"));
 
-var _ref2 = /*#__PURE__*/_react["default"].createElement(_ExpandMore["default"], null);
+var _NavMenuContainerContent = _interopRequireDefault(require("@digigov/ui/core/NavList/NavMenuContainerContent"));
 
-var NavListItemBase = /*#__PURE__*/_react["default"].forwardRef(function NavListItemBase(_ref, ref) {
-  var _ref$href = _ref.href,
-      href = _ref$href === void 0 ? '#' : _ref$href,
-      label = _ref.label,
+var _NavMenuContainerContentList = _interopRequireDefault(require("@digigov/ui/core/NavList/NavMenuContainerContentList"));
+
+var _NavMenuContainerContentListItem = _interopRequireDefault(require("@digigov/ui/core/NavList/NavMenuContainerContentListItem"));
+
+var _excluded = ["container", "setRegister", "children", "item", "layout", "role"];
+
+var NavListItemBase = function NavListItemBase(_ref) {
+  var _item$subMenu;
+
+  var container = _ref.container,
+      setRegister = _ref.setRegister,
       children = _ref.children,
-      className = _ref.className,
-      _ref$open = _ref.open,
-      open = _ref$open === void 0 ? false : _ref$open,
-      _ref$horizontal = _ref.horizontal,
-      horizontal = _ref$horizontal === void 0 ? false : _ref$horizontal,
-      _ref$selected = _ref.selected,
-      selected = _ref$selected === void 0 ? false : _ref$selected,
-      isNested = _ref.isNested,
-      expandOn = _ref.expandOn,
-      onClick = _ref.onClick,
+      item = _ref.item,
+      _ref$layout = _ref.layout,
+      layout = _ref$layout === void 0 ? 'horizontal' : _ref$layout,
       role = _ref.role,
       props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  var classes = useNavListItemBaseStyles();
-
-  var _useState = (0, _react.useState)(selected),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      privateSelected = _useState2[0],
-      setPrivateSelected = _useState2[1];
-
-  var _useRouter = (0, _router.useRouter)(),
-      router = _useRouter.router;
-
-  (0, _react.useEffect)(function () {
-    var asPath = router === null || router === void 0 ? void 0 : router.asPath.split('?').shift();
-    var isSelected = (asPath === null || asPath === void 0 ? void 0 : asPath.replace(TRAILING_SLASH, '')) === href.replace(TRAILING_SLASH, '');
-
-    if (isSelected !== privateSelected) {
-      setPrivateSelected(isSelected);
-    }
-  }, [href, router === null || router === void 0 ? void 0 : router.asPath, selected, privateSelected]);
-  return /*#__PURE__*/_react["default"].createElement("li", {
-    ref: ref,
-    className: (0, _clsx["default"])(className, classes.root, horizontal && classes.horizontal),
-    onClick: onClick,
-    role: "none"
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _clsx["default"])(horizontal ? classes.horizontal : classes.vertical, (selected || privateSelected) && classes.selected)
-  }, /*#__PURE__*/_react["default"].createElement(_Link["default"], (0, _extends2["default"])({
-    href: href,
-    className: classes.link
-  }, props, {
-    role: role
-  }), /*#__PURE__*/_react["default"].createElement("span", {
-    className: classes.label
-  }, label), /*#__PURE__*/_react["default"].createElement("span", {
-    className: (0, _clsx["default"])(classes.icon, open && classes.open)
-  }, isNested && _ref2))), /*#__PURE__*/_react["default"].createElement("div", {
-    className: classes.submenu
-  }, children));
-});
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_NavListItem["default"], (0, _extends2["default"])({
+    layout: layout,
+    link: item,
+    setRegister: setRegister,
+    role: "menuitem"
+  }, props)), /*#__PURE__*/_react["default"].createElement(_NavMenu["default"], (0, _extends2["default"])({
+    layout: layout
+  }, container && container(item.name)), /*#__PURE__*/_react["default"].createElement(_NavMenuContainer["default"], {
+    layout: layout,
+    paddingLeft: 5,
+    paddingRight: 5
+  }, /*#__PURE__*/_react["default"].createElement(_NavMenuContainerTitle["default"], {
+    layout: layout
+  }, item.label), /*#__PURE__*/_react["default"].createElement(_NavMenuContainerContent["default"], null, /*#__PURE__*/_react["default"].createElement(_NavMenuContainerContentList["default"], {
+    layout: layout
+  }, (_item$subMenu = item.subMenu) === null || _item$subMenu === void 0 ? void 0 : _item$subMenu.map(function (subMenu, menuIndex) {
+    return (0, _types.isNavListItemLinkInterface)(subMenu) && /*#__PURE__*/_react["default"].createElement(_NavMenuContainerContentListItem["default"], {
+      key: menuIndex
+    }, /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+      href: subMenu.href
+    }, subMenu.label));
+  }))))));
+};
 
 exports.NavListItemBase = NavListItemBase;
 var _default = NavListItemBase;

package/core/NavList/NavListItemButton.d.ts

@@ -0,0 +1,3 @@
+import NavListItemButton from '@digigov/react-core/NavListItemButton';
+export * from '@digigov/react-core/NavListItemButton';
+export default NavListItemButton;

package/core/NavList/NavListItemButton.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+exports["default"] = void 0;
+
+var _NavListItemButton = _interopRequireWildcard(require("@digigov/react-core/NavListItemButton"));
+
+Object.keys(_NavListItemButton).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _NavListItemButton[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _NavListItemButton[key];
+    }
+  });
+});
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var _default = _NavListItemButton["default"];
+exports["default"] = _default;

package/core/NavList/NavListItemLink.d.ts

@@ -0,0 +1,3 @@
+import NavListItemLink from '@digigov/react-core/NavListItemLink';
+export * from '@digigov/react-core/NavListItemLink';
+export default NavListItemLink;

package/core/NavList/NavListItemLink.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {};
+exports["default"] = void 0;
+
+var _NavListItemLink = _interopRequireWildcard(require("@digigov/react-core/NavListItemLink"));
+
+Object.keys(_NavListItemLink).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _NavListItemLink[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _NavListItemLink[key];
+    }
+  });
+});
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var _default = _NavListItemLink["default"];
+exports["default"] = _default;

package/core/NavList/NavListSubMenu.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { NavListProps } from '@digigov/ui/core/NavList/types';
+import { NavListAutoProps } from '@digigov/ui/core/NavList/types';
 import { NavLinkInterface } from '@digigov/ui/core/NavList/NavListContext';
-export interface NavListSubMenuProps extends NavListProps {
+export interface NavListSubMenuProps extends NavListAutoProps {
     links: NavLinkInterface[];
 }
 export declare const NavListSubMenu: React.FC<NavListSubMenuProps>;