@digigov/ui 2.0.0-264e5fff → 2.0.0-290ada95

package/navigation/Dropdown/index.js

@@ -1,88 +1,64 @@
-import React, { useEffect, useRef } from "react";
-import DropdownBase from "@digigov/react-core/DropdownBase";
-export * from "@digigov/react-core/DropdownButton";
-export * from "@digigov/react-core/DropdownContent";
-const Dropdown = React.forwardRef(
-  function Dropdown2({ closeBehaviour = "clickOutside", float = false, ...props }, ref) {
+import react, { useEffect, useRef } from "react";
+import DropdownBase from "@digigov/react-core/DropdownBase/index.js";
+export * from "@digigov/react-core/DropdownButton/index.js";
+export * from "@digigov/react-core/DropdownContent/index.js";
+const Dropdown_Dropdown = /*#__PURE__*/ react.forwardRef(function({ closeBehaviour = 'clickOutside', float = false, ...props }, ref) {
     const innerRef = useRef(null);
-    useEffect(() => {
-      const element = innerRef.current;
-      if (!element) {
-        return;
-      }
-      const keyDownHandler = (event) => {
-        if (event.key === "Escape") {
-          element.open = false;
-          event.preventDefault();
-        }
-      };
-      const handleClickOutside = (event) => {
-        if (element && !element.contains(event.target)) {
-          element.open = false;
-        }
-      };
-      if (closeBehaviour === "clickOutside") {
-        document.addEventListener("click", handleClickOutside, true);
-      }
-      document.addEventListener("keydown", keyDownHandler);
-      const toggleFloat = () => {
-        const tbody = element.closest("tbody");
-        const parentElement = element?.parentElement;
-        if (element.open) {
-          tbody.style.position = "static";
-          const rect = element?.getBoundingClientRect();
-          const parentRect = parentElement.getBoundingClientRect();
-          element.style.position = "static";
-          const top = rect.top + window.pageYOffset;
-          const left = rect.left + window.pageXOffset;
-          parentElement.style.height = `${parentRect.height}px`;
-          parentElement.style.width = `${parentRect.width}px`;
-          element.style.top = `${top}px`;
-          element.style.left = `${left}px`;
-          element.style.position = `absolute`;
-          element.style.display = `block`;
-          element.style.background = "white";
-        } else {
-          tbody.style.position = "relative";
-          parentElement.style.height = "";
-          parentElement.style.width = "";
-          element.style.top = `0`;
-          element.style.left = `0`;
-          element.style.position = `relative`;
-          element.style.display = `table-cell`;
-        }
-      };
-      if (float) {
-        element.addEventListener("toggle", toggleFloat);
-      }
-      return () => {
-        if (closeBehaviour === "clickOutside") {
-          document.removeEventListener("click", handleClickOutside, true);
-        }
-        if (float) {
-          element.removeEventListener("toggle", toggleFloat);
-        }
-        document.removeEventListener("keydown", keyDownHandler);
-      };
+    useEffect(()=>{
+        const element = innerRef.current;
+        if (!element) return;
+        const keyDownHandler = (event)=>{
+            if ('Escape' === event.key) {
+                element.open = false;
+                event.preventDefault();
+            }
+        };
+        const handleClickOutside = (event)=>{
+            if (element && !element.contains(event.target)) element.open = false;
+        };
+        if ('clickOutside' === closeBehaviour) document.addEventListener('click', handleClickOutside, true);
+        document.addEventListener('keydown', keyDownHandler);
+        const toggleFloat = ()=>{
+            const tbody = element.closest('tbody');
+            const parentElement = element?.parentElement;
+            if (element.open) {
+                tbody.style.position = 'static';
+                const rect = element?.getBoundingClientRect();
+                const parentRect = parentElement.getBoundingClientRect();
+                element.style.position = 'static';
+                const top = rect.top + window.pageYOffset;
+                const left = rect.left + window.pageXOffset;
+                parentElement.style.height = `${parentRect.height}px`;
+                parentElement.style.width = `${parentRect.width}px`;
+                element.style.top = `${top}px`;
+                element.style.left = `${left}px`;
+                element.style.position = "absolute";
+                element.style.display = "block";
+                element.style.background = 'white';
+            } else {
+                tbody.style.position = 'relative';
+                parentElement.style.height = '';
+                parentElement.style.width = '';
+                element.style.top = "0";
+                element.style.left = "0";
+                element.style.position = "relative";
+                element.style.display = "table-cell";
+            }
+        };
+        if (float) element.addEventListener('toggle', toggleFloat);
+        return ()=>{
+            if ('clickOutside' === closeBehaviour) document.removeEventListener('click', handleClickOutside, true);
+            if (float) element.removeEventListener('toggle', toggleFloat);
+            document.removeEventListener('keydown', keyDownHandler);
+        };
     }, []);
-    return /* @__PURE__ */ React.createElement(
-      DropdownBase,
-      {
-        ref: (el) => {
-          innerRef.current = el;
-          if (typeof ref === "function") {
-            ref(el);
-          }
+    return /*#__PURE__*/ react.createElement(DropdownBase, {
+        ref: (el)=>{
+            innerRef.current = el;
+            if ('function' == typeof ref) ref(el);
         },
         ...props
-      }
-    );
-  }
-);
-var Dropdown_default = Dropdown;
-export {
-  Dropdown,
-  DropdownBase,
-  Dropdown_default as default
-};
-//# sourceMappingURL=index.js.map
+    });
+});
+const navigation_Dropdown = Dropdown_Dropdown;
+export { Dropdown_Dropdown as Dropdown, DropdownBase, navigation_Dropdown as default };

package/navigation/Link/index.js

@@ -1,25 +1,26 @@
-import React from "react";
-import LinkBase from "@digigov/react-core/LinkBase";
-const CommonLink = (props) => {
-  const defaultStyle = !props.className;
-  const underline = props.className ? !defaultStyle : defaultStyle;
-  return /* @__PURE__ */ React.createElement(LinkBase, { defaultStyle, underline, ...props }, props.children);
+import react from "react";
+import LinkBase from "@digigov/react-core/LinkBase/index.js";
+const CommonLink = (props)=>{
+    const defaultStyle = !props.className;
+    const underline = props.className ? !defaultStyle : defaultStyle;
+    return /*#__PURE__*/ react.createElement(LinkBase, {
+        defaultStyle: defaultStyle,
+        underline: underline,
+        ...props
+    }, props.children);
 };
-const LinkComponentContext = React.createContext(CommonLink);
-const LinkProvider = (props) => {
-  return /* @__PURE__ */ React.createElement(LinkComponentContext.Provider, { value: props.component }, props.children);
-};
-const Link = React.forwardRef(function Link2({ children, href = "", ...props }, ref) {
-  const LinkComponent = React.useContext(LinkComponentContext);
-  return /* @__PURE__ */ React.createElement(LinkComponent, { ref, href, ...props }, children);
+const LinkComponentContext = /*#__PURE__*/ react.createContext(CommonLink);
+const LinkProvider = (props)=>/*#__PURE__*/ react.createElement(LinkComponentContext.Provider, {
+        value: props.component
+    }, props.children);
+const Link_Link = /*#__PURE__*/ react.forwardRef(function({ children, href = '', ...props }, ref) {
+    const LinkComponent = react.useContext(LinkComponentContext);
+    return /*#__PURE__*/ react.createElement(LinkComponent, {
+        ref: ref,
+        href: href,
+        ...props
+    }, children);
 });
-Link.displayName = "Link";
-var Link_default = Link;
-export {
-  CommonLink,
-  Link,
-  LinkBase,
-  LinkProvider,
-  Link_default as default
-};
-//# sourceMappingURL=index.js.map
+Link_Link.displayName = 'Link';
+const navigation_Link = Link_Link;
+export { CommonLink, Link_Link as Link, LinkBase, LinkProvider, navigation_Link as default };

package/navigation/NavList/Nav.js

@@ -0,0 +1,4 @@
+import Nav from "@digigov/react-core/Nav/index.js";
+export * from "@digigov/react-core/Nav/index.js";
+const NavList_Nav = Nav;
+export { NavList_Nav as default };

package/navigation/NavList/NavList.js

@@ -0,0 +1,4 @@
+import NavList from "@digigov/react-core/NavList/index.js";
+export * from "@digigov/react-core/NavList/index.js";
+const NavList_NavList = NavList;
+export { NavList_NavList as default };

package/navigation/NavList/NavListAuto/index.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import { NavListAutoProps } from '@digigov/ui/navigation/NavList/types';
+import { NavListAutoProps } from '../types.js';
 export declare const NavListAuto: React.FC<NavListAutoProps>;
 export default NavListAuto;

package/navigation/NavList/NavListAuto/index.js

@@ -1,52 +1,27 @@
-import React from "react";
-import { Link } from "@digigov/ui/navigation/Link";
-import {
-  NavList,
-  NavListItemAction,
-  NavMenuContentList,
-  NavMenuContentListItem,
-  NavMenuContent,
-  NavMenuContainer,
-  NavMenuTitle
-} from "@digigov/ui/navigation/NavList";
-import { useNavList } from "@digigov/ui/navigation/NavList/hooks/useNavList";
-import { Nav } from "@digigov/ui/navigation/NavList/Nav";
-const NavListAuto = ({
-  layout,
-  links = [],
-  ...props
-}) => {
-  const { registerNavItemMenu, registerNavItem } = useNavList();
-  return /* @__PURE__ */ React.createElement(Nav, { ...props }, /* @__PURE__ */ React.createElement(NavList, { layout }, links.map((item, key) => /* @__PURE__ */ React.createElement(React.Fragment, { key }, /* @__PURE__ */ React.createElement(NavListItemAction, { ...registerNavItem(item) }, item.label), item.subMenu && /* @__PURE__ */ React.createElement(
-    NavMenuContainer,
-    {
-      layout,
-      ...registerNavItemMenu(item.name)
-    },
-    (item.subMenuHeading || item.label) && /* @__PURE__ */ React.createElement(NavMenuTitle, null, item.subMenuHeading || item.label),
-    /* @__PURE__ */ React.createElement(NavMenuContent, null, /* @__PURE__ */ React.createElement(NavMenuContentList, { role: "menu" }, item.subMenu?.map((subMenu, menuIndex) => {
-      return subMenu?.href && /* @__PURE__ */ React.createElement(
-        NavMenuContentListItem,
-        {
-          key: menuIndex,
-          role: "presentation"
-        },
-        /* @__PURE__ */ React.createElement(
-          Link,
-          {
-            role: "menuitem",
-            id: subMenu.name,
-            href: subMenu.href
-          },
-          subMenu.label
-        )
-      );
-    })))
-  )))));
+import react from "react";
+import { Link } from "../../Link/index.js";
+import { NavList, NavListItemAction, NavMenuContainer, NavMenuContent, NavMenuContentList, NavMenuContentListItem, NavMenuTitle } from "../index.js";
+import { useNavList } from "../hooks/useNavList.js";
+import { Nav } from "../Nav.js";
+const NavListAuto = ({ layout, links = [], ...props })=>{
+    const { registerNavItemMenu, registerNavItem } = useNavList();
+    return /*#__PURE__*/ react.createElement(Nav, props, /*#__PURE__*/ react.createElement(NavList, {
+        layout: layout
+    }, links.map((item, key)=>/*#__PURE__*/ react.createElement(react.Fragment, {
+            key: key
+        }, /*#__PURE__*/ react.createElement(NavListItemAction, registerNavItem(item), item.label), item.subMenu && /*#__PURE__*/ react.createElement(NavMenuContainer, {
+            layout: layout,
+            ...registerNavItemMenu(item.name)
+        }, (item.subMenuHeading || item.label) && /*#__PURE__*/ react.createElement(NavMenuTitle, null, item.subMenuHeading || item.label), /*#__PURE__*/ react.createElement(NavMenuContent, null, /*#__PURE__*/ react.createElement(NavMenuContentList, {
+            role: "menu"
+        }, item.subMenu?.map((subMenu, menuIndex)=>subMenu?.href && /*#__PURE__*/ react.createElement(NavMenuContentListItem, {
+                key: menuIndex,
+                role: "presentation"
+            }, /*#__PURE__*/ react.createElement(Link, {
+                role: "menuitem",
+                id: subMenu.name,
+                href: subMenu.href
+            }, subMenu.label))))))))));
 };
-var NavListAuto_default = NavListAuto;
-export {
-  NavListAuto,
-  NavListAuto_default as default
-};
-//# sourceMappingURL=index.js.map
+const NavList_NavListAuto = NavListAuto;
+export { NavListAuto, NavList_NavListAuto as default };

package/navigation/NavList/NavListItemAction.d.ts

@@ -1,7 +1,7 @@
 export * from '@digigov/react-core/NavListItemActionBase';
 import React from 'react';
-import { NavListItemButtonProps } from '@digigov/ui/navigation/NavList';
-import { NavListItemLinkProps } from '@digigov/ui/navigation/NavList/NavListItemLink';
+import { NavListItemButtonProps } from './index.js';
+import { NavListItemLinkProps } from './NavListItemLink.js';
 export type LinkButtonJoinProps = NavListItemLinkProps & NavListItemButtonProps;
 export interface NavListItemActionBaseProps extends LinkButtonJoinProps {
     /**

package/navigation/NavList/NavListItemAction.js

@@ -0,0 +1,21 @@
+import react from "react";
+import { NavListItemActionContainer, NavListItemBadge, NavListItemButton } from "./index.js";
+import { NavListItemLink } from "./NavListItemLink.js";
+export * from "@digigov/react-core/NavListItemActionBase/index.js";
+const NavListItemAction_NavListItemAction = /*#__PURE__*/ react.forwardRef(function({ label, arrow = false, href, className, children, ...props }, ref) {
+    return /*#__PURE__*/ react.createElement(NavListItemActionContainer, null, href ? /*#__PURE__*/ react.createElement(NavListItemLink, {
+        ...props,
+        href: href,
+        className: className,
+        ref: ref
+    }, children || label) : /*#__PURE__*/ react.createElement(NavListItemButton, {
+        ...props,
+        arrow: arrow,
+        className: className,
+        ref: ref
+    }, children || label), props.badgeText && /*#__PURE__*/ react.createElement(NavListItemBadge, {
+        text: props.badgeText
+    }));
+});
+const NavList_NavListItemAction = NavListItemAction_NavListItemAction;
+export { NavListItemAction_NavListItemAction as NavListItemAction, NavList_NavListItemAction as default };

package/navigation/NavList/NavListItemLink.js

@@ -0,0 +1,13 @@
+import { NavListItemLinkBase } from "@digigov/react-core/NavListItemLinkBase/index.js";
+import react from "react";
+import { Link } from "../Link/index.js";
+export * from "@digigov/react-core/NavListItemLinkBase/index.js";
+const NavListItemLink_NavListItemLink = /*#__PURE__*/ react.forwardRef(function({ children, ...props }, ref) {
+    return /*#__PURE__*/ react.createElement(NavListItemLinkBase, {
+        as: Link,
+        ref: ref,
+        ...props
+    }, children);
+});
+const NavList_NavListItemLink = NavListItemLink_NavListItemLink;
+export { NavListItemLink_NavListItemLink as NavListItemLink, NavList_NavListItemLink as default };

package/navigation/NavList/NavMenuContentList.js

@@ -0,0 +1,35 @@
+import react from "react";
+import NavMenuContentListBase from "@digigov/react-core/NavMenuContentListBase/index.js";
+export * from "@digigov/react-core/NavMenuContentListBase/index.js";
+const focusNavListItem = (e, nextItemIndex)=>{
+    e.preventDefault();
+    const id = document.activeElement?.id;
+    const menuItems = Array.from(e.currentTarget.querySelectorAll("[role=menuitem]"));
+    const currentItem = menuItems.findIndex((x)=>x.getAttribute('id') === document.activeElement?.id);
+    if (currentItem + nextItemIndex > -1 && currentItem + nextItemIndex < menuItems.length) menuItems[currentItem + nextItemIndex]?.focus();
+    else {
+        const menuElement = Array.from(document.querySelectorAll("[aria-controls]"));
+        const currentItem = menuElement.findIndex((x)=>id?.includes(x.getAttribute('aria-controls') || ''));
+        if (nextItemIndex > 0) menuElement[currentItem + nextItemIndex]?.focus();
+        else menuElement[currentItem]?.focus();
+    }
+};
+const NavMenuContentList = ({ children, ...props })=>/*#__PURE__*/ react.createElement(NavMenuContentListBase, {
+        ...props,
+        onKeyDown: (event)=>{
+            switch(event.key){
+                case 'ArrowDown':
+                case 'ArrowRight':
+                    focusNavListItem(event, 1);
+                    break;
+                case 'ArrowUp':
+                case 'ArrowLeft':
+                    focusNavListItem(event, -1);
+                    break;
+                default:
+                    break;
+            }
+        }
+    }, children);
+const NavList_NavMenuContentList = NavMenuContentList;
+export { NavMenuContentList, NavList_NavMenuContentList as default };

package/navigation/NavList/hooks/useNavList.d.ts

@@ -1,4 +1,4 @@
-import { UseTogglableNavReturn } from '@digigov/ui/navigation/NavList/hooks/useTogglableNav';
+import { UseTogglableNavReturn } from './useTogglableNav.js';
 export interface UseNavListReturn extends UseTogglableNavReturn {
     registerNavItemMenu: (key: string) => {
         active: boolean;

package/navigation/NavList/hooks/useNavList.js

@@ -0,0 +1,30 @@
+import { useCallback, useRef } from "react";
+import { useTogglableNav } from "./useTogglableNav.js";
+const useNavList = ()=>{
+    const registeredContainers = useRef({});
+    const { registerButton, registerLink, opened, ...rest } = useTogglableNav({
+        singleOpen: true,
+        toggleOpenClose: true,
+        toggleParentOpen: true,
+        toggleProperty: 'active',
+        onToggleProperty: 'onClick',
+        ariaNavigation: true
+    });
+    const registerNavItemMenu = useCallback((key)=>({
+            ref: (el)=>{
+                if (el && !registeredContainers.current[el.id]) registeredContainers.current[el.id] = el;
+            },
+            active: opened[key],
+            id: key
+        }), [
+        opened
+    ]);
+    return {
+        registerButton,
+        registerLink,
+        opened,
+        registerNavItemMenu,
+        ...rest
+    };
+};
+export { useNavList };

package/navigation/NavList/hooks/useTogglableNav.js

@@ -0,0 +1,191 @@
+import { useCallback, useMemo, useRef, useState } from "react";
+function useTogglableNav({ toggleProperty, toggleOpenClose, toggleParentOpen, onToggleProperty, initial, ariaNavigation, toggleHook }) {
+    const [opened, setOpened] = useState(initial || {});
+    const registered = useRef({});
+    const openedKeys = useRef([]);
+    const toggle = useCallback((e)=>{
+        const key = e.currentTarget.getAttribute('aria-controls');
+        const selected = 'true' === e.currentTarget.getAttribute('aria-selected');
+        if (toggleHook) toggleHook(key);
+        e.preventDefault();
+        if (toggleOpenClose) if (toggleParentOpen) {
+            const items = key.split('__');
+            const currentKey = items.slice(0, items.length).join('__');
+            const totalKeys = items.map((_, index)=>items.slice(0, index + 1).join('__'));
+            if (!selected && !openedKeys.current.includes(currentKey)) openedKeys.current.push(currentKey);
+            if (selected && openedKeys.current.includes(currentKey)) openedKeys.current = openedKeys.current.filter((k)=>k !== currentKey);
+            setOpened(()=>({
+                    ...totalKeys.reduce((acc, cur)=>{
+                        acc[cur] = cur === currentKey ? !selected : true;
+                        return acc;
+                    }, {})
+                }));
+        } else setOpened({
+            [key]: !selected
+        });
+        else setOpened({
+            [key]: true
+        });
+    }, []);
+    const getMenuItems = (element)=>{
+        if (element) if (element?.role === 'menuitem') return element;
+        else {
+            const childrenArray = Array.from(element?.children);
+            const menuItemsArray = [];
+            childrenArray.forEach((child)=>{
+                const menuItem = getMenuItems(child);
+                if (menuItem && !menuItemsArray.includes(menuItem)) menuItemsArray.push(menuItem);
+            });
+            return menuItemsArray.flatMap((x)=>x);
+        }
+        return null;
+    };
+    const findChildren = (parent, items)=>items ? items.filter((child)=>child.slice(0, child.lastIndexOf('__')) === parent) : items;
+    const findParent = (child, items)=>{
+        const parent = child.slice(0, child.lastIndexOf('__'));
+        return items.find((item)=>item === parent) ? parent : null;
+    };
+    const findSiblings = (key, items)=>{
+        const parent = key.slice(0, key.lastIndexOf('__'));
+        if (key.lastIndexOf('__') > 0) return items.filter((child)=>child.slice(0, child.lastIndexOf('__')) === parent);
+        return items.filter((child)=>!child.includes('__'));
+    };
+    const findLeftSibling = (key, items)=>{
+        const siblings = findSiblings(key, items);
+        if (siblings.length > 0) {
+            const keyIndex = siblings.findIndex((item)=>item === key);
+            return keyIndex > 0 ? siblings[keyIndex - 1] : null;
+        }
+        return null;
+    };
+    const findRightSibling = (key, items)=>{
+        const siblings = findSiblings(key, items);
+        if (siblings.length > 0) {
+            const keyIndex = siblings.findIndex((item)=>item === key);
+            return keyIndex < siblings.length - 1 ? siblings[keyIndex + 1] : null;
+        }
+        return null;
+    };
+    const getOpenItemChildren = (currentItem, items)=>{
+        const itemChildrenArray = [];
+        const itemChildren = findChildren(currentItem, items);
+        itemChildren.forEach((item)=>{
+            if (openedKeys.current.includes(item)) {
+                itemChildrenArray.push(item);
+                const internChildren = getOpenItemChildren(item, items);
+                if (internChildren.length > 0) itemChildrenArray.push(internChildren);
+            } else itemChildrenArray.push(item);
+        });
+        return itemChildrenArray.flatMap((x)=>x);
+    };
+    const onKeyDown = useCallback((e)=>{
+        const orientation = document.querySelector("[aria-orientation]")?.getAttribute('aria-orientation');
+        const key = e.target.getAttribute('aria-controls');
+        const keys = Object.entries(registered.current).map(([entryKey])=>entryKey);
+        const handleArrowRight = ()=>{
+            const arrowRightItem = findRightSibling(key, keys);
+            if (arrowRightItem) registered.current[arrowRightItem].el.focus();
+        };
+        const handleArrowLeft = ()=>{
+            const arrowLeftItem = findLeftSibling(key, keys);
+            if (arrowLeftItem) registered.current[arrowLeftItem].el.focus();
+        };
+        switch(e.key){
+            case 'ArrowRight':
+                handleArrowRight();
+                break;
+            case 'ArrowDown':
+                const openItem = getOpenItemChildren(key, keys);
+                const arrowDownItems = findChildren(key, openItem);
+                const menuItems = getMenuItems(document.getElementById(key));
+                if (arrowDownItems.length > 0) registered.current[arrowDownItems[0]].el.focus();
+                else if ('vertical' === orientation) if (document.activeElement?.getAttribute('aria-selected') === 'true' && menuItems && menuItems.length > 0) menuItems[0].focus();
+                else handleArrowRight();
+                else if (menuItems && menuItems.length > 0) menuItems[0].focus();
+                break;
+            case 'ArrowLeft':
+                handleArrowLeft();
+                break;
+            case 'ArrowUp':
+                if ('vertical' === orientation) handleArrowLeft();
+                else {
+                    const arrowUpItem = findParent(key, keys);
+                    if (arrowUpItem) registered.current[arrowUpItem].el.focus();
+                }
+                break;
+            case ' ':
+            case 'Enter':
+                if ('link' === registered.current[key].type) registered.current[key].el.click();
+                else toggle(e);
+                break;
+        }
+    }, []);
+    const registerButtonRef = useCallback((el)=>{
+        if (!el) return;
+        const key = el.getAttribute('aria-controls');
+        if (registered.current[key]) return;
+        registered.current[key] = {
+            el,
+            type: 'button'
+        };
+    }, []);
+    const registerLinkRef = useCallback((el)=>{
+        if (!el) return;
+        const key = el.getAttribute('aria-controls');
+        if (registered.current[key]) return;
+        registered.current[key] = {
+            el,
+            type: 'link'
+        };
+    }, []);
+    const registerButton = useCallback((key)=>{
+        const isOpen = !!opened[key];
+        return {
+            ref: registerButtonRef,
+            [toggleProperty]: isOpen,
+            arrow: true,
+            [onToggleProperty]: toggle,
+            'aria-controls': `${key}`,
+            ...ariaNavigation && {
+                onKeyDown
+            }
+        };
+    }, [
+        opened
+    ]);
+    const registerLink = useCallback((key)=>({
+            ref: registerLinkRef,
+            'aria-controls': `${key}`,
+            ...ariaNavigation && {
+                onKeyDown
+            }
+        }), [
+        opened
+    ]);
+    const registerNavItem = useCallback((item)=>{
+        if (item.subMenu || item.menu) return {
+            ...registerButton(item.name),
+            role: 'button'
+        };
+        if (item.href) return {
+            ...registerLink(item.name),
+            href: item.href
+        };
+        console.error(item);
+        throw new Error('Invalid nav item. Must be either button or link');
+    }, [
+        opened
+    ]);
+    return useMemo(()=>({
+            registerNavItem,
+            registerButton,
+            registerLink,
+            registered,
+            opened,
+            toggle,
+            setOpened
+        }), [
+        opened
+    ]);
+}
+export { useTogglableNav };

package/navigation/NavList/index.d.ts

@@ -1,8 +1,8 @@
 import NavList from '@digigov/react-core/NavList';
-export * from '@digigov/ui/navigation/NavList/NavListAuto';
-export * from '@digigov/ui/navigation/NavList/NavMenuContentList';
-export * from '@digigov/ui/navigation/NavList/types';
-export * from '@digigov/ui/navigation/NavList/hooks/useNavList';
+export * from './NavListAuto/index.js';
+export * from './NavMenuContentList.js';
+export * from './types.js';
+export * from './hooks/useNavList.js';
 export * from '@digigov/react-core/Nav';
 export * from '@digigov/react-core/NavList';
 export * from '@digigov/react-core/NavMenuContainer';
@@ -11,8 +11,8 @@ export * from '@digigov/react-core/NavMenuContentListBase';
 export * from '@digigov/react-core/NavMenuContentListItem';
 export * from '@digigov/react-core/NavMenuTitle';
 export * from '@digigov/react-core/NavListItemActionContainer';
-export * from '@digigov/ui/navigation/NavList/NavListItemAction';
+export * from './NavListItemAction.js';
 export * from '@digigov/react-core/NavListItemBadge';
 export * from '@digigov/react-core/NavListItemButton';
-export * from '@digigov/ui/navigation/NavList/NavListItemLink';
+export * from './NavListItemLink.js';
 export default NavList;