@digigov/ui 0.29.0 → 0.30.0-navlist.alpha

package/CHANGELOG.md

@@ -1,6 +1,13 @@
 # Change Log - @digigov/ui
 
-This log was last generated on Mon, 16 Jan 2023 13:05:21 GMT and should not be manually modified.
+This log was last generated on Wed, 18 Jan 2023 13:07:00 GMT and should not be manually modified.
+
+## 0.29.1
+Wed, 18 Jan 2023 13:07:00 GMT
+
+### Patches
+
+- Rexport FieldContainer from `@digigov/ui/core` path
 
 ## 0.29.0
 Mon, 16 Jan 2023 13:05:21 GMT

package/core/NavList/NavHorizontalListItem.d.ts

@@ -1,3 +1,4 @@
-import NavHorizontalListItem from '@digigov/react-core/NavHorizontalListItem';
-export { NavHorizontalListItem };
+import React from 'react';
+import { NavHorizontalListItemProps } from '@digigov/ui/core/NavList/types';
+export declare const NavHorizontalListItem: React.FC<NavHorizontalListItemProps>;
 export default NavHorizontalListItem;

package/core/NavList/NavHorizontalListItem.js

@@ -5,15 +5,26 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "NavHorizontalListItem", {
-  enumerable: true,
-  get: function get() {
-    return _NavHorizontalListItem["default"];
-  }
-});
-exports["default"] = void 0;
+exports["default"] = exports.NavHorizontalListItem = void 0;
+
+var _react = _interopRequireDefault(require("react"));
 
 var _NavHorizontalListItem = _interopRequireDefault(require("@digigov/react-core/NavHorizontalListItem"));
 
-var _default = _NavHorizontalListItem["default"];
+var _NavHorizontalListItemButton = _interopRequireDefault(require("@digigov/ui/core/NavList/NavHorizontalListItemButton"));
+
+var _NavHorizontalListItemLink = require("@digigov/ui/core/NavList/NavHorizontalListItemLink");
+
+var _types = require("@digigov/ui/core/NavList/types");
+
+var NavHorizontalListItem = function NavHorizontalListItem(_ref) {
+  var link = _ref.link,
+      setRegister = _ref.setRegister;
+  return /*#__PURE__*/_react["default"].createElement(_NavHorizontalListItem["default"], null, (0, _types.isNavListItemSubMenuInterface)(link) && link !== null && link !== void 0 && link.subMenu && setRegister ? /*#__PURE__*/_react["default"].createElement(_NavHorizontalListItemButton["default"], setRegister(link.name), link === null || link === void 0 ? void 0 : link.label) : (0, _types.isNavListItemLinkInterface)(link) && /*#__PURE__*/_react["default"].createElement(_NavHorizontalListItemLink.NavHorizontalListItemLink, {
+    href: link === null || link === void 0 ? void 0 : link.href
+  }, link === null || link === void 0 ? void 0 : link.label));
+};
+
+exports.NavHorizontalListItem = NavHorizontalListItem;
+var _default = NavHorizontalListItem;
 exports["default"] = _default;

package/core/NavList/NavListBase.d.ts

@@ -1,4 +1,3 @@
 import React from 'react';
 import { NavListProps } from '@digigov/ui/core/NavList/types';
-export declare const useNavListStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"vertical" | "root" | "subMenu" | "floating" | "floatClear">;
 export declare const NavListBase: React.FC<NavListProps>;

package/core/NavList/NavListBase.js

@@ -5,55 +5,17 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useNavListStyles = exports.NavListBase = void 0;
+exports.NavListBase = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
 var _react = _interopRequireDefault(require("react"));
 
-var _clsx = _interopRequireDefault(require("clsx"));
-
-var _styles = require("@material-ui/core/styles");
+var _reactCore = require("@digigov/react-core");
 
 var _excluded = ["className", "children", "floating", "horizontal", "subMenu", "role"];
-var useNavListStyles = (0, _styles.makeStyles)(function (theme) {
-  return {
-    root: {
-      padding: theme.spacing(0),
-      margin: theme.spacing(0),
-      display: 'flex',
-      '&$vertical': {
-        flexDirection: 'column'
-      }
-    },
-    subMenu: {
-      marginLeft: theme.spacing(3)
-    },
-    floating: {
-      left: 0,
-      zIndex: 99,
-      position: 'absolute',
-      background: theme.palette.grey['100'],
-      borderTop: "1px solid ".concat(theme.palette.grey['500']),
-      borderRight: "1px solid ".concat(theme.palette.grey['500']),
-      borderLeft: "1px solid ".concat(theme.palette.grey['500']),
-      margin: theme.spacing(1.5, 0, 0, 0),
-      boxShadow: theme.shadows[3],
-      '& > li': {
-        width: '100%',
-        borderBottom: "1px solid ".concat(theme.palette.grey['500']),
-        margin: 0
-      }
-    },
-    vertical: {},
-    floatClear: {
-      clear: 'both'
-    }
-  };
-}, {
-  name: 'MuiNavList'
-});
-exports.useNavListStyles = useNavListStyles;
 
 var NavListBase = function NavListBase(_ref) {
   var className = _ref.className,
@@ -63,14 +25,9 @@ var NavListBase = function NavListBase(_ref) {
       subMenu = _ref.subMenu,
       role = _ref.role,
       props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  var classes = useNavListStyles();
-  return /*#__PURE__*/_react["default"].createElement("nav", null, /*#__PURE__*/_react["default"].createElement("ul", {
-    style: props.style,
-    role: role,
-    className: (0, _clsx["default"])(className, classes.root, !horizontal && classes.vertical, floating && classes.floating, subMenu && classes.subMenu)
-  }, children), /*#__PURE__*/_react["default"].createElement("div", {
-    className: classes.floatClear
-  }));
+  return /*#__PURE__*/_react["default"].createElement(_reactCore.NavHorizontal, (0, _extends2["default"])({
+    open: true
+  }, props), /*#__PURE__*/_react["default"].createElement(_reactCore.NavHorizontalList, null, children));
 };
 
 exports.NavListBase = NavListBase;

package/core/NavList/NavListItem.d.ts

@@ -9,6 +9,5 @@ export interface NavListItemProps {
     expandOn?: 'hover' | 'click';
     role?: string;
 }
-export declare const useNavListItemStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"link" | "selected" | "root">;
 export declare const NavListItem: React.FC<NavListItemProps>;
 export default NavListItem;

package/core/NavList/NavListItem.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useNavListItemStyles = exports["default"] = exports.NavListItem = void 0;
+exports["default"] = exports.NavListItem = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -21,8 +21,6 @@ var _clsx = _interopRequireDefault(require("clsx"));
 
 var _SectionBreak = _interopRequireDefault(require("@digigov/react-core/SectionBreak"));
 
-var _styles = require("@material-ui/core/styles");
-
 var _NavListItemBase = _interopRequireDefault(require("@digigov/ui/core/NavList/NavListItemBase"));
 
 var _NavListSubMenu = _interopRequireDefault(require("@digigov/ui/core/NavList/NavListSubMenu"));
@@ -35,27 +33,6 @@ 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 useNavListItemStyles = (0, _styles.makeStyles)(function (theme) {
-  return {
-    root: {},
-    link: {
-      padding: theme.spacing(0.5, 2),
-      textDecoration: 'none',
-      '&:hover': {
-        textDecoration: 'underline'
-      }
-    },
-    selected: {
-      borderStyle: 'solid',
-      borderColor: theme.palette.secondary.main,
-      fontWeight: 'bolder'
-    }
-  };
-}, {
-  name: 'MuiNavListItem'
-});
-exports.useNavListItemStyles = useNavListItemStyles;
-
 var _ref3 = /*#__PURE__*/_react["default"].createElement(_SectionBreak["default"], null);
 
 var NavListItem = function NavListItem(_ref) {
@@ -93,8 +70,6 @@ var NavListItem = function NavListItem(_ref) {
       selected = _useState8[0],
       setSelected = _useState8[1];
 
-  var classes = useNavListItemStyles();
-
   var _useContext = (0, _react.useContext)(_NavListContext["default"]),
       openSubMenus = _useContext.openSubMenus,
       horizontal = _useContext.horizontal,
@@ -161,7 +136,7 @@ var NavListItem = function NavListItem(_ref) {
     isNested: subMenu && subMenu.length > 0,
     horizontal: horizontal,
     role: role,
-    className: (0, _clsx["default"])(className, classes.root)
+    className: (0, _clsx["default"])(className)
   }, handlerProps, props), (open || openSubMenus) && subMenu && subMenu.length && /*#__PURE__*/_react["default"].createElement(_NavListSubMenu["default"], {
     style: style,
     links: subMenu

package/core/NavList/NavListItemBase.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export declare const useNavListItemBaseStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"label" | "link" | "open" | "selected" | "horizontal" | "vertical" | "root" | "icon" | "submenu">;
+export declare const useNavListItemBaseStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"label" | "link" | "open" | "selected" | "horizontal" | "vertical" | "icon" | "root" | "submenu">;
 export interface NavListItemBaseProps {
     children?: React.ReactNode;
     href?: string;

package/core/NavList/__stories__/NavHorizontalLayout.js

@@ -7,20 +7,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.NavHorizontalLayout = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _react = _interopRequireDefault(require("react"));
 
-var _NavList = require("@digigov/ui/core/NavList/NavList");
+var _NavList = require("@digigov/ui/core/NavList");
 
-var _NavListItem = require("@digigov/ui/core/NavList/NavListItem");
+var _core = require("@digigov/ui/core");
 
-var links = [{
+var navItemArray = [{
   name: 'Nav1',
-  href: '#',
-  label: 'Nav list item 1'
-}, {
-  name: 'Nav2',
-  href: '#',
-  label: 'Nav list item 2',
+  label: 'Item list 1',
   subMenu: [{
     name: 'Nav2.1',
     href: '#',
@@ -37,24 +34,38 @@ var links = [{
 }, {
   name: 'Nav3',
   href: '#',
-  label: 'Nav list item 3'
+  label: 'Item list 3'
 }];
 
 var NavHorizontalLayout = function NavHorizontalLayout() {
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_NavList.NavList, {
-    horizontal: true,
-    links: links,
-    role: "menubar",
-    "aria-orientation": "horizontal",
-    "aria-label": "Nav list"
-  }, links.map(function (link, key) {
-    return /*#__PURE__*/_react["default"].createElement(_NavListItem.NavListItem, {
-      "aria-label": link.label,
-      role: "menuitem",
-      "aria-haspopup": link.subMenu ? 'true' : 'false',
-      key: key,
-      name: link.name
-    });
+  var _useNavList = (0, _NavList.useNavList)(),
+      container = _useNavList.container,
+      register = _useNavList.register;
+
+  var setRegister = function setRegister(name) {
+    return (0, _extends2["default"])({}, register(name));
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(_NavList.NavHorizontal, {
+    open: true
+  }, /*#__PURE__*/_react["default"].createElement(_NavList.NavHorizontalList, null, navItemArray.map(function (item, index) {
+    var _item$subMenu;
+
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
+      key: index
+    }, /*#__PURE__*/_react["default"].createElement(_NavList.NavHorizontalListItem, {
+      link: item,
+      setRegister: setRegister
+    }), /*#__PURE__*/_react["default"].createElement(_NavList.NavMenu, container(item.name), /*#__PURE__*/_react["default"].createElement(_NavList.NavMenuContainer, {
+      paddingLeft: 5,
+      paddingRight: 5
+    }, /*#__PURE__*/_react["default"].createElement(_NavList.NavMenuContainerTitle, null, item.name), /*#__PURE__*/_react["default"].createElement(_NavList.NavMenuContainerContent, null, /*#__PURE__*/_react["default"].createElement(_NavList.NavMenuContainerContentList, null, (0, _NavList.isNavListItemSubMenuInterface)(item) && (item === null || item === void 0 ? void 0 : (_item$subMenu = item.subMenu) === null || _item$subMenu === void 0 ? void 0 : _item$subMenu.map(function (subMenu, menuIndex) {
+      return /*#__PURE__*/_react["default"].createElement(_NavList.NavMenuContainerContentListItem, {
+        key: menuIndex
+      }, (0, _NavList.isNavListItemLinkInterface)(subMenu) && /*#__PURE__*/_react["default"].createElement(_core.Link, {
+        href: subMenu.href
+      }, subMenu.label));
+    })))))));
   })));
 };
 

package/core/NavList/index.d.ts

@@ -1,3 +1,12 @@
+import NavList from '@digigov/ui/core/NavList/NavList';
+import { UseTogglableSectionsReturn } from '@digigov/ui/hooks/useTogglableSections';
+export interface UseNavListReturn extends UseTogglableSectionsReturn {
+    container: (key: string) => {
+        active: boolean;
+        id: string;
+    };
+}
+export declare const useNavList: () => UseNavListReturn;
 export * from '@digigov/ui/core/NavList/NavList';
 export * from '@digigov/ui/core/NavList/NavListItem';
 export * from '@digigov/ui/core/NavList/NavListSubMenu';
@@ -16,5 +25,4 @@ export * from '@digigov/ui/core/NavList/NavMenuContainerContentListItem';
 export * from '@digigov/ui/core/NavList/NavVertical';
 export * from '@digigov/ui/core/NavList/NavVerticalItem';
 export * from '@digigov/ui/core/NavList/types';
-import NavList from '@digigov/ui/core/NavList/NavList';
 export default NavList;

package/core/NavList/index.js

@@ -1,12 +1,22 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 var _typeof = require("@babel/runtime/helpers/typeof");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {};
-exports["default"] = void 0;
+var _exportNames = {
+  useNavList: true
+};
+exports.useNavList = exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = require("react");
 
 var _NavList = _interopRequireWildcard(require("@digigov/ui/core/NavList/NavList"));
 
@@ -22,6 +32,8 @@ Object.keys(_NavList).forEach(function (key) {
   });
 });
 
+var _useTogglableSections2 = require("@digigov/ui/hooks/useTogglableSections");
+
 var _NavListItem = require("@digigov/ui/core/NavList/NavListItem");
 
 Object.keys(_NavListItem).forEach(function (key) {
@@ -259,10 +271,44 @@ Object.keys(_types).forEach(function (key) {
     }
   });
 });
+var _excluded = ["register", "opened"];
 
 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 useNavList = function useNavList() {
+  var registeredContainers = (0, _react.useRef)({});
+
+  var _useTogglableSections = (0, _useTogglableSections2.useTogglableSections)({
+    singleOpen: true,
+    reOpen: true,
+    toggleProperty: 'active',
+    onToggleProperty: 'onClick',
+    ariaNavigation: true
+  }),
+      registerListItem = _useTogglableSections.register,
+      opened = _useTogglableSections.opened,
+      rest = (0, _objectWithoutProperties2["default"])(_useTogglableSections, _excluded);
+
+  var registerNavMenu = (0, _react.useCallback)(function (key) {
+    return {
+      ref: function ref(el) {
+        if (el && !registeredContainers.current[el.id]) {
+          registeredContainers.current[el.id] = el;
+        }
+      },
+      active: opened[key],
+      id: key
+    };
+  }, [opened]);
+  return (0, _extends2["default"])({
+    register: registerListItem,
+    opened: opened,
+    container: registerNavMenu
+  }, rest);
+};
+
+exports.useNavList = useNavList;
 var _default = _NavList["default"];
 exports["default"] = _default;

package/core/NavList/types.d.ts

@@ -12,3 +12,30 @@ export interface NavListProps {
     links?: NavLinkInterface[];
     style?: BaseCSSProperties;
 }
+interface NavListItemInterface {
+    name: string;
+    label?: string;
+    children?: React.ReactNode;
+}
+interface NavListItemLinkInterface extends NavListItemInterface {
+    href: string;
+}
+export interface NavListHeaderItemType {
+    name: string;
+    label?: string;
+    title?: string;
+    children?: React.ReactNode;
+    subMenu: NavListItemLinkInterface[];
+}
+export declare type NavListItemType = NavListItemLinkInterface | NavListItemSubMenuInterface;
+export interface NavListItemSubMenuInterface extends NavListItemInterface {
+    subMenu: NavListItemType[];
+}
+export declare const isNavListItemLinkInterface: (item: any) => item is NavListItemLinkInterface;
+export declare const isNavListItemSubMenuInterface: (item: any) => item is NavListItemSubMenuInterface;
+export interface NavHorizontalListItemProps {
+    children?: React.ReactNode;
+    link?: NavListItemType;
+    setRegister?: (name: string) => any;
+}
+export {};

package/core/NavList/types.js

@@ -2,4 +2,17 @@
 
 Object.defineProperty(exports, "__esModule", {
   value: true
-});
+});
+exports.isNavListItemSubMenuInterface = exports.isNavListItemLinkInterface = void 0;
+
+var isNavListItemLinkInterface = function isNavListItemLinkInterface(item) {
+  return 'href' in item;
+};
+
+exports.isNavListItemLinkInterface = isNavListItemLinkInterface;
+
+var isNavListItemSubMenuInterface = function isNavListItemSubMenuInterface(item) {
+  return 'subMenu' in item;
+};
+
+exports.isNavListItemSubMenuInterface = isNavListItemSubMenuInterface;

package/core/index.d.ts

@@ -12,6 +12,7 @@ export * from '@digigov/ui/core/Details';
 export * from '@digigov/ui/core/Divider';
 export * from '@digigov/ui/core/ErrorMessage';
 export * from '@digigov/ui/core/ErrorSummary';
+export * from '@digigov/ui/core/FieldContainer';
 export * from '@digigov/ui/core/FileUpload';
 export * from '@digigov/ui/core/Form';
 export * from '@digigov/ui/core/Hidden';

package/core/index.js

@@ -173,6 +173,19 @@ Object.keys(_ErrorSummary).forEach(function (key) {
   });
 });
 
+var _FieldContainer = require("@digigov/ui/core/FieldContainer");
+
+Object.keys(_FieldContainer).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _FieldContainer[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _FieldContainer[key];
+    }
+  });
+});
+
 var _FileUpload = require("@digigov/ui/core/FileUpload");
 
 Object.keys(_FileUpload).forEach(function (key) {

package/es/core/NavList/NavHorizontalListItem.js

@@ -1,3 +1,13 @@
-import NavHorizontalListItem from '@digigov/react-core/NavHorizontalListItem';
-export { NavHorizontalListItem };
+import React from 'react';
+import CoreNavHorizontalListItem from '@digigov/react-core/NavHorizontalListItem';
+import NavHorizontalListItemButton from '@digigov/ui/core/NavList/NavHorizontalListItemButton';
+import { NavHorizontalListItemLink } from '@digigov/ui/core/NavList/NavHorizontalListItemLink';
+import { isNavListItemLinkInterface, isNavListItemSubMenuInterface } from '@digigov/ui/core/NavList/types';
+export var NavHorizontalListItem = function NavHorizontalListItem(_ref) {
+  var link = _ref.link,
+      setRegister = _ref.setRegister;
+  return /*#__PURE__*/React.createElement(CoreNavHorizontalListItem, null, isNavListItemSubMenuInterface(link) && link !== null && link !== void 0 && link.subMenu && setRegister ? /*#__PURE__*/React.createElement(NavHorizontalListItemButton, setRegister(link.name), link === null || link === void 0 ? void 0 : link.label) : isNavListItemLinkInterface(link) && /*#__PURE__*/React.createElement(NavHorizontalListItemLink, {
+    href: link === null || link === void 0 ? void 0 : link.href
+  }, link === null || link === void 0 ? void 0 : link.label));
+};
 export default NavHorizontalListItem;

package/es/core/NavList/NavListBase.js

@@ -1,45 +1,8 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["className", "children", "floating", "horizontal", "subMenu", "role"];
 import React from 'react';
-import clsx from 'clsx';
-import { makeStyles } from '@material-ui/core/styles';
-export var useNavListStyles = makeStyles(function (theme) {
-  return {
-    root: {
-      padding: theme.spacing(0),
-      margin: theme.spacing(0),
-      display: 'flex',
-      '&$vertical': {
-        flexDirection: 'column'
-      }
-    },
-    subMenu: {
-      marginLeft: theme.spacing(3)
-    },
-    floating: {
-      left: 0,
-      zIndex: 99,
-      position: 'absolute',
-      background: theme.palette.grey['100'],
-      borderTop: "1px solid ".concat(theme.palette.grey['500']),
-      borderRight: "1px solid ".concat(theme.palette.grey['500']),
-      borderLeft: "1px solid ".concat(theme.palette.grey['500']),
-      margin: theme.spacing(1.5, 0, 0, 0),
-      boxShadow: theme.shadows[3],
-      '& > li': {
-        width: '100%',
-        borderBottom: "1px solid ".concat(theme.palette.grey['500']),
-        margin: 0
-      }
-    },
-    vertical: {},
-    floatClear: {
-      clear: 'both'
-    }
-  };
-}, {
-  name: 'MuiNavList'
-});
+import { NavHorizontal, NavHorizontalList } from '@digigov/react-core';
 export var NavListBase = function NavListBase(_ref) {
   var className = _ref.className,
       children = _ref.children,
@@ -49,12 +12,7 @@ export var NavListBase = function NavListBase(_ref) {
       role = _ref.role,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  var classes = useNavListStyles();
-  return /*#__PURE__*/React.createElement("nav", null, /*#__PURE__*/React.createElement("ul", {
-    style: props.style,
-    role: role,
-    className: clsx(className, classes.root, !horizontal && classes.vertical, floating && classes.floating, subMenu && classes.subMenu)
-  }, children), /*#__PURE__*/React.createElement("div", {
-    className: classes.floatClear
-  }));
+  return /*#__PURE__*/React.createElement(NavHorizontal, _extends({
+    open: true
+  }, props), /*#__PURE__*/React.createElement(NavHorizontalList, null, children));
 };

package/es/core/NavList/NavListItem.js

@@ -5,29 +5,9 @@ var _excluded = ["name", "expandOn", "children", "href", "className", "selected"
 import React, { useContext, useEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
 import Divider from '@digigov/react-core/SectionBreak';
-import { makeStyles } from '@material-ui/core/styles';
 import NavListItemBase from '@digigov/ui/core/NavList/NavListItemBase';
 import NavListSubMenu from '@digigov/ui/core/NavList/NavListSubMenu';
 import NavListContext from '@digigov/ui/core/NavList/NavListContext';
-export var useNavListItemStyles = makeStyles(function (theme) {
-  return {
-    root: {},
-    link: {
-      padding: theme.spacing(0.5, 2),
-      textDecoration: 'none',
-      '&:hover': {
-        textDecoration: 'underline'
-      }
-    },
-    selected: {
-      borderStyle: 'solid',
-      borderColor: theme.palette.secondary.main,
-      fontWeight: 'bolder'
-    }
-  };
-}, {
-  name: 'MuiNavListItem'
-});
 
 var _ref3 = /*#__PURE__*/React.createElement(Divider, null);
 
@@ -66,8 +46,6 @@ export var NavListItem = function NavListItem(_ref) {
       selected = _useState8[0],
       setSelected = _useState8[1];
 
-  var classes = useNavListItemStyles();
-
   var _useContext = useContext(NavListContext),
       openSubMenus = _useContext.openSubMenus,
       horizontal = _useContext.horizontal,
@@ -134,7 +112,7 @@ export var NavListItem = function NavListItem(_ref) {
     isNested: subMenu && subMenu.length > 0,
     horizontal: horizontal,
     role: role,
-    className: clsx(className, classes.root)
+    className: clsx(className)
   }, handlerProps, props), (open || openSubMenus) && subMenu && subMenu.length && /*#__PURE__*/React.createElement(NavListSubMenu, {
     style: style,
     links: subMenu