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

package/esm/core/List/__snapshots__/index.spec.tsx.snap

@@ -1,322 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders the ErrorSummary with sample data 1`] = `
-<ThemeProvider
-  theme={
-    Object {
-      "breakpoints": Object {
-        "between": [Function],
-        "down": [Function],
-        "keys": Array [
-          "xs",
-          "sm",
-          "md",
-          "lg",
-          "xl",
-        ],
-        "only": [Function],
-        "up": [Function],
-        "values": Object {
-          "lg": 1280,
-          "md": 960,
-          "sm": 600,
-          "xl": 1920,
-          "xs": 0,
-        },
-        "width": [Function],
-      },
-      "direction": "ltr",
-      "footer": Object {
-        "contrastText": "",
-        "link": "",
-        "main": "",
-      },
-      "header": Object {
-        "border": Object {
-          "background": "",
-          "height": "",
-          "width": "",
-        },
-        "height": "",
-        "logo": Object {
-          "component": "",
-          "height": "",
-        },
-      },
-      "mixins": Object {
-        "gutters": [Function],
-        "toolbar": Object {
-          "@media (min-width:0px) and (orientation: landscape)": Object {
-            "minHeight": 48,
-          },
-          "@media (min-width:600px)": Object {
-            "minHeight": 64,
-          },
-          "minHeight": 56,
-        },
-      },
-      "overrides": Object {},
-      "palette": Object {
-        "action": Object {
-          "activatedOpacity": 0.12,
-          "active": "rgba(0, 0, 0, 0.54)",
-          "disabled": "rgba(0, 0, 0, 0.26)",
-          "disabledBackground": "rgba(0, 0, 0, 0.12)",
-          "disabledOpacity": 0.38,
-          "focus": "rgba(0, 0, 0, 0.12)",
-          "focusOpacity": 0.12,
-          "hover": "rgba(0, 0, 0, 0.04)",
-          "hoverOpacity": 0.04,
-          "selected": "rgba(0, 0, 0, 0.08)",
-          "selectedOpacity": 0.08,
-        },
-        "augmentColor": [Function],
-        "background": Object {
-          "default": "#fafafa",
-          "paper": "#fff",
-        },
-        "common": Object {
-          "black": "#000",
-          "white": "#fff",
-        },
-        "contrastThreshold": 3,
-        "divider": "rgba(0, 0, 0, 0.12)",
-        "error": Object {
-          "contrastText": "#fff",
-          "dark": "#d32f2f",
-          "light": "#e57373",
-          "main": "#f44336",
-        },
-        "getContrastText": [Function],
-        "grey": Object {
-          "100": "#f5f5f5",
-          "200": "#eeeeee",
-          "300": "#e0e0e0",
-          "400": "#bdbdbd",
-          "50": "#fafafa",
-          "500": "#9e9e9e",
-          "600": "#757575",
-          "700": "#616161",
-          "800": "#424242",
-          "900": "#212121",
-          "A100": "#d5d5d5",
-          "A200": "#aaaaaa",
-          "A400": "#303030",
-          "A700": "#616161",
-        },
-        "info": Object {
-          "contrastText": "#fff",
-          "dark": "#1976d2",
-          "light": "#64b5f6",
-          "main": "#2196f3",
-        },
-        "primary": Object {
-          "contrastText": "#fff",
-          "dark": "#303f9f",
-          "light": "#7986cb",
-          "main": "#3f51b5",
-        },
-        "secondary": Object {
-          "contrastText": "#fff",
-          "dark": "#c51162",
-          "light": "#ff4081",
-          "main": "#f50057",
-        },
-        "success": Object {
-          "contrastText": "rgba(0, 0, 0, 0.87)",
-          "dark": "#388e3c",
-          "light": "#81c784",
-          "main": "#4caf50",
-        },
-        "text": Object {
-          "disabled": "rgba(0, 0, 0, 0.38)",
-          "hint": "rgba(0, 0, 0, 0.38)",
-          "primary": "rgba(0, 0, 0, 0.87)",
-          "secondary": "rgba(0, 0, 0, 0.54)",
-        },
-        "tonalOffset": 0.2,
-        "type": "light",
-        "warning": Object {
-          "contrastText": "rgba(0, 0, 0, 0.87)",
-          "dark": "#f57c00",
-          "light": "#ffb74d",
-          "main": "#ff9800",
-        },
-      },
-      "props": Object {},
-      "shadows": Array [
-        "none",
-        "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
-        "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
-        "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
-        "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
-        "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
-        "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
-        "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
-        "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
-        "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
-        "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
-        "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
-        "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
-        "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
-        "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
-        "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
-        "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
-        "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
-        "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
-        "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
-        "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
-        "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
-        "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
-        "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
-        "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
-      ],
-      "shape": Object {
-        "borderRadius": 4,
-      },
-      "spacing": [Function],
-      "transitions": Object {
-        "create": [Function],
-        "duration": Object {
-          "complex": 375,
-          "enteringScreen": 225,
-          "leavingScreen": 195,
-          "short": 250,
-          "shorter": 200,
-          "shortest": 150,
-          "standard": 300,
-        },
-        "easing": Object {
-          "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
-          "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
-          "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
-          "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
-        },
-        "getAutoHeightDuration": [Function],
-      },
-      "typography": Object {
-        "body1": Object {
-          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-          "fontSize": "1rem",
-          "fontWeight": 400,
-          "letterSpacing": "0.00938em",
-          "lineHeight": 1.5,
-        },
-        "body2": Object {
-          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-          "fontSize": "0.875rem",
-          "fontWeight": 400,
-          "letterSpacing": "0.01071em",
-          "lineHeight": 1.43,
-        },
-        "button": Object {
-          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-          "fontSize": "0.875rem",
-          "fontWeight": 500,
-          "letterSpacing": "0.02857em",
-          "lineHeight": 1.75,
-          "textTransform": "uppercase",
-        },
-        "caption": Object {
-          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-          "fontSize": "0.75rem",
-          "fontWeight": 400,
-          "letterSpacing": "0.03333em",
-          "lineHeight": 1.66,
-        },
-        "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-        "fontSize": 14,
-        "fontWeightBold": 700,
-        "fontWeightLight": 300,
-        "fontWeightMedium": 500,
-        "fontWeightRegular": 400,
-        "h1": Object {
-          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-          "fontSize": "6rem",
-          "fontWeight": 300,
-          "letterSpacing": "-0.01562em",
-          "lineHeight": 1.167,
-        },
-        "h2": Object {
-          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-          "fontSize": "3.75rem",
-          "fontWeight": 300,
-          "letterSpacing": "-0.00833em",
-          "lineHeight": 1.2,
-        },
-        "h3": Object {
-          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-          "fontSize": "3rem",
-          "fontWeight": 400,
-          "letterSpacing": "0em",
-          "lineHeight": 1.167,
-        },
-        "h4": Object {
-          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-          "fontSize": "2.125rem",
-          "fontWeight": 400,
-          "letterSpacing": "0.00735em",
-          "lineHeight": 1.235,
-        },
-        "h5": Object {
-          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-          "fontSize": "1.5rem",
-          "fontWeight": 400,
-          "letterSpacing": "0em",
-          "lineHeight": 1.334,
-        },
-        "h6": Object {
-          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-          "fontSize": "1.25rem",
-          "fontWeight": 500,
-          "letterSpacing": "0.0075em",
-          "lineHeight": 1.6,
-        },
-        "htmlFontSize": 16,
-        "overline": Object {
-          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-          "fontSize": "0.75rem",
-          "fontWeight": 400,
-          "letterSpacing": "0.08333em",
-          "lineHeight": 2.66,
-          "textTransform": "uppercase",
-        },
-        "pxToRem": [Function],
-        "round": [Function],
-        "subtitle1": Object {
-          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-          "fontSize": "1rem",
-          "fontWeight": 400,
-          "letterSpacing": "0.00938em",
-          "lineHeight": 1.75,
-        },
-        "subtitle2": Object {
-          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-          "fontSize": "0.875rem",
-          "fontWeight": 500,
-          "letterSpacing": "0.00714em",
-          "lineHeight": 1.57,
-        },
-      },
-      "zIndex": Object {
-        "appBar": 1100,
-        "drawer": 1200,
-        "mobileStepper": 1000,
-        "modal": 1300,
-        "snackbar": 1400,
-        "speedDial": 1050,
-        "tooltip": 1500,
-      },
-      Symbol(mui.nested): false,
-    }
-  }
->
-  <ForwardRef(List)>
-    <ul
-      className="govgr-list"
-    >
-      this is some random warning text
-    </ul>
-  </ForwardRef(List)>
-</ThemeProvider>
+<ForwardRef(List)>
+  this is some random warning text
+</ForwardRef(List)>
 `;

package/esm/core/NavList/Nav.js

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

package/esm/core/NavList/NavList.js

@@ -1,25 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["horizontal", "openSubMenus", "links", "role"];
-import React from 'react';
-import { NavListProvider } from '@digigov/ui/core/NavList/NavListContext';
-import { NavListBase } from '@digigov/ui/core/NavList/NavListBase';
-export var NavList = function NavList(_ref) {
-  var horizontal = _ref.horizontal,
-      _ref$openSubMenus = _ref.openSubMenus,
-      openSubMenus = _ref$openSubMenus === void 0 ? false : _ref$openSubMenus,
-      _ref$links = _ref.links,
-      links = _ref$links === void 0 ? [] : _ref$links,
-      role = _ref.role,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  return /*#__PURE__*/React.createElement(NavListProvider, {
-    openSubMenus: openSubMenus,
-    horizontal: horizontal,
-    links: links
-  }, /*#__PURE__*/React.createElement(NavListBase, _extends({
-    horizontal: horizontal,
-    role: role
-  }, props)));
-};
+import NavList from '@digigov/react-core/NavList';
+export * from '@digigov/react-core/NavList';
 export default NavList;

package/esm/core/NavList/NavList.stories.js

@@ -7,4 +7,6 @@ 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__/NavListEpathlaExample';
 export * from '@digigov/ui/core/NavList/__stories__/NavHorizontalLayout';

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

@@ -5,27 +5,27 @@
       "actionSets": [
         {
           "actions": [
-            {
-              "name": "hover",
-              "args": {
-                "selector": "html>body>div:nth-child(5)>nav>ul>li:nth-child(2)>div:nth-child(1)>a>span:nth-child(1)"
-              }
-            },
             {
               "name": "click",
               "args": {
-                "selector": "html>body>div:nth-child(5)>nav>ul>li:nth-child(2)>div:nth-child(1)>a>span:nth-child(1)"
+                "selector": "html>body>div:nth-child(5)>nav>ul>li:nth-child(3)>button"
               }
-            },
+            }
+          ],
+          "id": "WMfgyO3E_9S_",
+          "title": "Open sub menu"
+        },
+        {
+          "actions": [
             {
-              "name": "keyboard.press",
+              "name": "hover",
               "args": {
-                "key": "Tab"
+                "selector": "html>body>div:nth-child(5)>nav>ul>li:nth-child(3)>button"
               }
             }
           ],
-          "id": "WMfgyO3E_9S_",
-          "title": "Hover and click"
+          "id": "dHQxEQCIJ4bJ",
+          "title": "Hover item"
         }
       ]
     }

package/esm/core/NavList/NavListAuto.js

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

package/esm/core/NavList/NavListBase.js

@@ -1,18 +1,22 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "children", "floating", "horizontal", "subMenu", "role"];
+var _excluded = ["className", "children", "floating", "layout", "subMenu", "role"];
 import React from 'react';
-import { NavHorizontal, NavHorizontalList } from '@digigov/react-core';
+import Nav from '@digigov/ui/core/NavList/Nav';
+import NavList from '@digigov/ui/core/NavList/NavList';
 export var NavListBase = function NavListBase(_ref) {
   var className = _ref.className,
       children = _ref.children,
       floating = _ref.floating,
-      horizontal = _ref.horizontal,
+      layout = _ref.layout,
       subMenu = _ref.subMenu,
       role = _ref.role,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/React.createElement(NavHorizontal, _extends({
-    open: true
-  }, props), /*#__PURE__*/React.createElement(NavHorizontalList, null, children));
+  return /*#__PURE__*/React.createElement(Nav, _extends({
+    open: true,
+    layout: layout
+  }, props), /*#__PURE__*/React.createElement(NavList, {
+    layout: layout
+  }, children));
 };

package/esm/core/NavList/NavListContext.js

@@ -1,7 +1,9 @@
+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({
-  horizontal: false,
+  layout: 'horizontal',
   openSubMenus: false,
   links: [],
   activeLink: {},
@@ -10,10 +12,9 @@ export var NavListContext = /*#__PURE__*/createContext({
 var TRAILING_SLASH = /\/$/gm;
 export 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,
@@ -29,6 +30,15 @@ export var NavListProvider = function NavListProvider(_ref) {
       activeLink = _useState4[0],
       setActiveLink = _useState4[1];
 
+  var _useNavList = useNavList(),
+      container = _useNavList.container,
+      register = _useNavList.register;
+
+  var setRegister = function setRegister(name) {
+    return _extends({}, register(name));
+  }; // TODO: Cleanup unused props
+
+
   useEffect(function () {
     var currentActiveLink = links.find(function (link) {
       var _link$subMenu;
@@ -68,12 +78,14 @@ export var NavListProvider = function NavListProvider(_ref) {
   return /*#__PURE__*/React.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/esm/core/NavList/NavListItem.js

@@ -1,121 +1,25 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["name", "expandOn", "children", "href", "className", "selected", "role"];
-import React, { useContext, useEffect, useRef, useState } from 'react';
-import clsx from 'clsx';
-import Divider from '@digigov/react-core/SectionBreak';
-import NavListItemBase from '@digigov/ui/core/NavList/NavListItemBase';
-import NavListSubMenu from '@digigov/ui/core/NavList/NavListSubMenu';
-import NavListContext from '@digigov/ui/core/NavList/NavListContext';
-
-var _ref3 = /*#__PURE__*/React.createElement(Divider, null);
-
+var _excluded = ["link", "layout", "setRegister", "active", "children"];
+import React from 'react';
+import CoreNavListItem 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 _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 = _objectWithoutProperties(_ref, _excluded);
 
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      open = _useState2[0],
-      setOpen = _useState2[1];
-
-  var _useState3 = useState({}),
-      _useState4 = _slicedToArray(_useState3, 2),
-      style = _useState4[0],
-      setStyle = _useState4[1];
-
-  var ref = useRef(null);
-
-  var _useState5 = useState(),
-      _useState6 = _slicedToArray(_useState5, 2),
-      delayHandler = _useState6[0],
-      setDelayHandler = _useState6[1];
-
-  var _useState7 = useState(passSelected || false),
-      _useState8 = _slicedToArray(_useState7, 2),
-      selected = _useState8[0],
-      setSelected = _useState8[1];
-
-  var _useContext = useContext(NavListContext),
-      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;
-
-  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);
-    }
-  };
-
-  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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(NavListItemBase, _extends({
-    ref: ref,
-    href: contextHref || href,
-    label: label || children,
-    expandOn: expandOn,
-    open: open,
-    selected: selected,
-    isNested: subMenu && subMenu.length > 0,
-    horizontal: horizontal,
-    role: role,
-    className: clsx(className)
-  }, handlerProps, props), (open || openSubMenus) && subMenu && subMenu.length && /*#__PURE__*/React.createElement(NavListSubMenu, {
-    style: style,
-    links: subMenu
-  })), !horizontal && showDividers && _ref3);
+  return /*#__PURE__*/React.createElement(CoreNavListItem, _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({
+    href: link === null || link === void 0 ? void 0 : link.href
+  }, props, {
+    active: active
+  }), link === null || link === void 0 ? void 0 : link.label));
 };
 export default NavListItem;