@digigov/ui 0.30.3 → 0.32.0

package/src/core/NavList/{NavListContext.tsx → NavListAuto/NavListContextAuto.tsx}

@@ -12,6 +12,8 @@ export interface NavLinkInterface {
 
 export interface NavListContextInterface {
   layout?: NavListLayout;
+  border?: boolean;
+  fixed?: boolean;
   openSubMenus?: boolean;
   showDividers?: boolean;
   links: NavLinkInterface[];
@@ -19,11 +21,14 @@ export interface NavListContextInterface {
   activeSubMenu?: NavLinkInterface[];
   onSubMenuActive?: (name: string) => void;
   container?: (key: string) => { active: boolean; id: string };
-  setRegister?: (name: string) => any;
+  setRegisterButton?: (name: string) => any;
+  setRegisterLink?: (name: string) => any;
 }
 
-export const NavListContext = createContext<NavListContextInterface>({
+export const NavListContextAuto = createContext<NavListContextInterface>({
   layout: 'horizontal',
+  border: true,
+  fixed: true,
   openSubMenus: false,
   links: [],
   activeLink: {},
@@ -31,18 +36,25 @@ export const NavListContext = createContext<NavListContextInterface>({
 });
 
 const TRAILING_SLASH = /\/$/gm;
-export const NavListProvider: React.FC<NavListContextInterface> = ({
+export const NavListProviderAuto: React.FC<NavListContextInterface> = ({
   children,
   layout,
+  border,
+  fixed,
   openSubMenus = false,
   showDividers = false,
   links = [],
 }) => {
   const [activeSubMenu, setActiveSubMenu] = useState<NavLinkInterface[]>([]);
   const [activeLink, setActiveLink] = useState<NavLinkInterface>({});
-  const { container, register } = useNavList();
-  const setRegister = (name: string) => {
-    return { ...register(name) };
+  const { container, registerButton, registerLink } = useNavList();
+
+  const setRegisterButton = (name: string) => {
+    return { ...registerButton(name) };
+  };
+
+  const setRegisterLink = (name: string) => {
+    return { ...registerLink(name) };
   };
 
   // TODO: Cleanup unused props
@@ -57,7 +69,7 @@ export const NavListProvider: React.FC<NavListContextInterface> = ({
       } else {
         return (
           window?.location.pathname.replace(TRAILING_SLASH, '') ===
-          link.href?.replace(TRAILING_SLASH, '') || false
+            link.href?.replace(TRAILING_SLASH, '') || false
         );
       }
     }) || { label: '', href: '' };
@@ -76,22 +88,25 @@ export const NavListProvider: React.FC<NavListContextInterface> = ({
   };
 
   return (
-    <NavListContext.Provider
+    <NavListContextAuto.Provider
       value={{
         openSubMenus,
         layout,
+        border,
+        fixed,
         showDividers,
         links,
         activeLink,
         activeSubMenu,
         onSubMenuActive,
         container,
-        setRegister,
+        setRegisterButton,
+        setRegisterLink,
       }}
     >
       {children}
-    </NavListContext.Provider>
+    </NavListContextAuto.Provider>
   );
 };
 
-export default NavListContext;
+export default NavListContextAuto;

package/src/core/NavList/NavListAuto/NavListItemAnchorAuto.tsx

@@ -0,0 +1,38 @@
+import React, { useContext } from 'react';
+import { NavListItemLink } from '@digigov/ui/core/NavList/NavListItemLink';
+import NavListContextAuto from '@digigov/ui/core/NavList/NavListAuto/NavListContextAuto';
+import NavListItem from '@digigov/react-core/NavListItem';
+
+interface NavListItemAnchorAutoProps {
+  name: string;
+  href?: string;
+  active?: boolean;
+  children?: React.ReactNode;
+}
+
+export const NavListItemAnchorAuto: React.FC<NavListItemAnchorAutoProps> = ({
+  name,
+  href,
+  active,
+  children,
+  ...props
+}) => {
+  const { container, setRegisterLink } = useContext(NavListContextAuto);
+
+  return (
+    <NavListItem>
+      {setRegisterLink && (
+        <NavListItemLink
+          href={href}
+          active={active || (container && container(name)?.active)}
+          {...props}
+          {...setRegisterLink(name)}
+        >
+          {children}
+        </NavListItemLink>
+      )}
+    </NavListItem>
+  );
+};
+
+export default NavListItemAnchorAuto;

package/src/core/NavList/NavListAuto/NavListItemAuto.tsx

@@ -0,0 +1,49 @@
+import React, { useContext } from 'react';
+import Divider from '@digigov/react-core/SectionBreak';
+import NavListContextAuto from '@digigov/ui/core/NavList/NavListAuto/NavListContextAuto';
+import NavItemAnchorAuto from '@digigov/ui/core/NavList/NavListAuto/NavListItemAnchorAuto';
+import NavItemButtonAuto from '@digigov/ui/core/NavList/NavListAuto/NavListItemButtonAuto';
+import { NavListItem } from '@digigov/ui/core/NavList/NavListItem';
+
+export interface NavListItemAutoProps {
+  item?: any;
+  children?: React.ReactNode;
+  role?: string;
+}
+
+export const NavListItemAuto: React.FC<NavListItemAutoProps> = ({
+  item,
+  children,
+  role,
+  ...props
+}) => {
+  const { layout, showDividers, container, setRegisterButton } = useContext(
+    NavListContextAuto
+  );
+  const itemName = item?.name ? item.name : item?.label;
+
+  return (
+    <React.Fragment>
+      {children ? (
+        <NavListItem {...props}>{children}</NavListItem>
+      ) : item?.menu || item?.subMenu ? (
+        <NavItemButtonAuto
+          item={item}
+          name={itemName}
+          active={container && container(itemName)?.active}
+          onSelect={setRegisterButton}
+          layout={layout}
+        >
+          {item?.label}
+        </NavItemButtonAuto>
+      ) : (
+        <NavItemAnchorAuto href={item?.href} name={itemName}>
+          {item?.label}
+        </NavItemAnchorAuto>
+      )}
+      {showDividers && <Divider />}
+    </React.Fragment>
+  );
+};
+
+export default NavListItemAuto;

package/src/core/NavList/NavListAuto/NavListItemButtonAuto.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import NavListItemButton from '@digigov/ui/core/NavList/NavListItemButton';
+import NavItemSubMenuAuto from '@digigov/ui/core/NavList/NavListAuto/NavListSubMenuAuto';
+import NavItemMenuAuto from '@digigov/ui/core/NavList/NavListAuto/NavListMenuAuto';
+import NavListItem from '@digigov/ui/core/NavList/NavListItem';
+import { NavListLayout } from '@digigov/ui/core/NavList/types';
+
+interface NavListItemButtonAutoProps {
+  item?: any;
+  name: string;
+  active?: boolean;
+  onSelect?: (name: string) => any;
+  layout?: NavListLayout;
+  children?: React.ReactNode;
+}
+
+export const NavListItemButtonAuto: React.FC<NavListItemButtonAutoProps> = ({
+  item,
+  name,
+  active,
+  onSelect,
+  layout,
+  children,
+}) => {
+  return (
+    <React.Fragment>
+      {onSelect && (
+        <NavListItem>
+          <NavListItemButton active={active} {...onSelect(name)}>
+            {children}
+          </NavListItemButton>
+        </NavListItem>
+      )}
+      {item?.subMenu ? (
+        <NavItemSubMenuAuto
+          items={item?.subMenu}
+          open={active}
+          layout={layout}
+        />
+      ) : (
+        <NavItemMenuAuto
+          subMenu={item?.menu?.links}
+          title={item?.menu?.title}
+          active={active}
+          layout={layout}
+          id={name}
+        />
+      )}
+    </React.Fragment>
+  );
+};
+
+export default NavListItemButtonAuto;

package/src/core/NavList/NavListAuto/NavListMenuAuto.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { NavListLayout } from '@digigov/ui/core/NavList/types';
+import NavMenu from '@digigov/ui/core/NavList/NavMenu';
+import NavMenuContainer from '@digigov/ui/core/NavList/NavMenuContainer';
+import NavMenuContainerTitle from '@digigov/ui/core/NavList/NavMenuContainerTitle';
+import NavMenuContainerContent from '@digigov/ui/core/NavList/NavMenuContainerContent';
+import NavMenuContainerContentList from '@digigov/ui/core/NavList/NavMenuContainerContentList';
+import NavMenuContainerContentListItem from '@digigov/ui/core/NavList/NavMenuContainerContentListItem';
+import { Link } from '@digigov/ui/core';
+
+interface NavListMenuAutoProps {
+  layout?: NavListLayout;
+  title?: string;
+  active?: boolean;
+  subMenu?: any[];
+  id?: string;
+}
+
+export const NavListMenuAuto: React.FC<NavListMenuAutoProps> = ({
+  layout,
+  active,
+  title,
+  subMenu,
+  id,
+}) => {
+  return (
+    <NavMenu layout={layout} active={active} id={id}>
+      <NavMenuContainer layout={layout} paddingLeft={5} paddingRight={5}>
+        <NavMenuContainerTitle>{title}</NavMenuContainerTitle>
+        <NavMenuContainerContent>
+          <NavMenuContainerContentList role="menu">
+            {subMenu?.map((item, index) => {
+              return (
+                <NavMenuContainerContentListItem
+                  role="presentation"
+                  key={index}
+                >
+                  <Link role="menuitem" id={item.name} href={item.href}>
+                    {item.label}
+                  </Link>
+                </NavMenuContainerContentListItem>
+              );
+            })}
+          </NavMenuContainerContentList>
+        </NavMenuContainerContent>
+      </NavMenuContainer>
+    </NavMenu>
+  );
+};
+
+export default NavListMenuAuto;

package/src/core/NavList/NavListAuto/NavListSubMenuAuto.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Nav } from '@digigov/ui/core/NavList/Nav';
+import { NavList } from '@digigov/ui/core/NavList/NavList';
+import NavItemAuto from '@digigov/ui/core/NavList/NavListAuto/NavListItemAuto';
+import { NavListLayout } from '@digigov/ui/core/NavList/types';
+
+export interface NavListSubMenuAutoProps {
+  items?: any[];
+  open?: boolean;
+  layout?: NavListLayout;
+}
+
+export const NavListSubMenuAuto: React.FC<NavListSubMenuAutoProps> = ({
+  items,
+  open,
+  layout,
+  ...props
+}) => {
+  return open ? (
+    <Nav hidden={!open} layout={layout} {...props} aria-orientation={layout}>
+      <NavList>
+        {items?.map((subMenuItem, index) => (
+          <NavItemAuto key={index} item={subMenuItem} />
+        ))}
+      </NavList>
+    </Nav>
+  ) : (
+    <></>
+  );
+};
+
+export default NavListSubMenuAuto;

package/src/core/NavList/NavListItem.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import CoreNavListItem from '@digigov/react-core/NavListItem';
+import NavListItemContainer from '@digigov/react-core/NavListItem';
 import NavListItemButton from '@digigov/ui/core/NavList/NavListItemButton';
 import { NavListItemLink } from '@digigov/ui/core/NavList/NavListItemLink';
 import {
@@ -10,30 +10,35 @@ import {
 
 export const NavListItem: React.FC<NavListItemProps> = ({
   link,
-  layout,
-  setRegister,
+  setRegisterButton,
+  setRegisterLink,
   active,
   children,
   ...props
 }) => {
   return (
-    <CoreNavListItem layout={layout} {...props}>
+    <NavListItemContainer {...props}>
       {children ? (
         children
-      ) : isNavListItemSubMenuInterface(link) &&
-        link?.subMenu &&
-        setRegister ? (
-        <NavListItemButton {...setRegister(link.name)}>
+      ) : isNavListItemSubMenuInterface(link) && link?.subMenu ? (
+        <NavListItemButton
+          {...(setRegisterButton && setRegisterButton(link.name))}
+        >
           {link?.label}
         </NavListItemButton>
       ) : (
         isNavListItemLinkInterface(link) && (
-          <NavListItemLink href={link?.href} {...props} active={active}>
+          <NavListItemLink
+            href={link?.href}
+            {...(setRegisterLink && setRegisterLink(link.name))}
+            active={active}
+            {...props}
+          >
             {link?.label}
           </NavListItemLink>
         )
       )}
-    </CoreNavListItem>
+    </NavListItemContainer>
   );
 };
 

package/src/core/NavList/NavListItemBase.tsx

@@ -14,7 +14,7 @@ import NavMenuContainerContentListItem from '@digigov/ui/core/NavList/NavMenuCon
 
 export interface NavListItemBaseProps {
   container?: (key: string) => { active: boolean; id: string };
-  setRegister?: (name: string) => any;
+  setRegisterButton?: (name: string) => any;
   children?: React.ReactNode;
   item?: any;
   layout?: NavListLayout;
@@ -23,7 +23,7 @@ export interface NavListItemBaseProps {
 
 export const NavListItemBase: React.FC<NavListItemBaseProps> = ({
   container,
-  setRegister,
+  setRegisterButton,
   children,
   item,
   layout = 'horizontal',
@@ -33,19 +33,16 @@ export const NavListItemBase: React.FC<NavListItemBaseProps> = ({
   return (
     <>
       <NavListItem
-        layout={layout}
         link={item}
-        setRegister={setRegister}
+        setRegisterButton={setRegisterButton}
         role="menuitem"
         {...props}
       />
       <NavMenu layout={layout} {...(container && container(item.name))}>
         <NavMenuContainer layout={layout} paddingLeft={5} paddingRight={5}>
-          <NavMenuContainerTitle layout={layout}>
-            {item.label}
-          </NavMenuContainerTitle>
+          <NavMenuContainerTitle>{item.label}</NavMenuContainerTitle>
           <NavMenuContainerContent>
-            <NavMenuContainerContentList layout={layout}>
+            <NavMenuContainerContentList>
               {item.subMenu?.map((subMenu, menuIndex) => {
                 return (
                   isNavListItemLinkInterface(subMenu) && (

package/src/core/NavList/NavMenuContainerContentList.tsx

@@ -1,3 +1,63 @@
-import NavMenuContainerContentList from '@digigov/react-core/NavMenuContainerContentList';
+import React from 'react';
+import NavMenuContainerContentListWrapper, {
+  NavMenuContainerContentListProps,
+} from '@digigov/react-core/NavMenuContainerContentList';
 export * from '@digigov/react-core/NavMenuContainerContentList';
+
+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 as HTMLElement).getAttribute('id') === document.activeElement?.id
+  );
+  if (
+    currentItem + nextItemIndex > -1 &&
+    currentItem + nextItemIndex < menuItems.length
+  ) {
+    (menuItems[currentItem + nextItemIndex] as HTMLElement)?.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] as HTMLElement)?.focus();
+    } else {
+      (menuElement[currentItem] as HTMLElement)?.focus();
+    }
+  }
+};
+
+export const NavMenuContainerContentList: React.FC<NavMenuContainerContentListProps> = ({
+  children,
+  ...props
+}) => {
+  return (
+    <NavMenuContainerContentListWrapper
+      {...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}
+    </NavMenuContainerContentListWrapper>
+  );
+};
+
 export default NavMenuContainerContentList;

package/src/core/NavList/__stories__/Default.tsx

@@ -45,22 +45,27 @@ const links = [
 ];
 
 export const Default = () => {
-  const layout = 'vertical';
-  const { container, register } = useNavList();
+  const layout = 'horizontal';
+  const border = false;
+  const { container, registerButton, registerLink } = useNavList();
 
-  const setRegister = (name: string) => {
-    return { ...register(name) };
+  const setRegisterButton = (name: string) => {
+    return { ...registerButton(name) };
+  };
+
+  const setRegisterLink = (name: string) => {
+    return { ...registerLink(name) };
   };
 
   return (
-    <Nav open={true} layout={layout}>
-      <NavList layout={layout}>
+    <Nav open={true} layout={layout} border={border} aria-orientation={layout}>
+      <NavList>
         {links.map((item, key) => (
           <React.Fragment key={key}>
             <NavListItem
-              layout={layout}
               link={item}
-              setRegister={setRegister}
+              setRegisterButton={setRegisterButton}
+              setRegisterLink={setRegisterLink}
             />
             <NavMenu layout={layout} {...container(item.name)}>
               <NavMenuContainer
@@ -68,16 +73,23 @@ export const Default = () => {
                 paddingLeft={5}
                 paddingRight={5}
               >
-                <NavMenuContainerTitle layout={layout}>
-                  {item.label}
-                </NavMenuContainerTitle>
+                <NavMenuContainerTitle>{item.label}</NavMenuContainerTitle>
                 <NavMenuContainerContent>
-                  <NavMenuContainerContentList layout={layout}>
+                  <NavMenuContainerContentList role="menu">
                     {item.subMenu?.map((subMenu, menuIndex) => {
                       return (
                         isNavListItemLinkInterface(subMenu) && (
-                          <NavMenuContainerContentListItem key={menuIndex}>
-                            <Link href={subMenu.href}>{subMenu.label}</Link>
+                          <NavMenuContainerContentListItem
+                            key={menuIndex}
+                            role="presentation"
+                          >
+                            <Link
+                              role="menuitem"
+                              id={subMenu.name}
+                              href={subMenu.href}
+                            >
+                              {subMenu.label}
+                            </Link>
                           </NavMenuContainerContentListItem>
                         )
                       );

package/src/core/NavList/__stories__/{NavHorizontalLayout.tsx → NavVerticalLayout.tsx}

@@ -40,22 +40,28 @@ const links = [
   { name: 'Nav3', href: '#', label: 'Nav list item 3' },
 ];
 
-export const NavHorizontalLayout = () => {
-  const layout = 'horizontal';
-  const { container, register } = useNavList();
+export const NavVerticalLayout = () => {
+  const layout = 'vertical';
+  const border = false;
+  const { container, registerButton, registerLink } = useNavList();
 
-  const setRegister = (name: string) => {
-    return { ...register(name) };
+  const setRegisterButton = (name: string) => {
+    return { ...registerButton(name) };
   };
+
+  const setRegisterLink = (name: string) => {
+    return { ...registerLink(name) };
+  };
+
   return (
-    <Nav open={true} layout={layout}>
-      <NavList layout={layout}>
+    <Nav open={true} layout={layout} border={border}>
+      <NavList>
         {links.map((item, key) => (
           <React.Fragment key={key}>
             <NavListItem
-              layout={layout}
               link={item}
-              setRegister={setRegister}
+              setRegisterButton={setRegisterButton}
+              setRegisterLink={setRegisterLink}
             />
             <NavMenu layout={layout} {...container(item.name)}>
               <NavMenuContainer
@@ -63,16 +69,23 @@ export const NavHorizontalLayout = () => {
                 paddingLeft={5}
                 paddingRight={5}
               >
-                <NavMenuContainerTitle layout={layout}>
-                  {item.label}
-                </NavMenuContainerTitle>
+                <NavMenuContainerTitle>{item.label}</NavMenuContainerTitle>
                 <NavMenuContainerContent>
-                  <NavMenuContainerContentList layout={layout}>
+                  <NavMenuContainerContentList role="menu">
                     {item.subMenu?.map((subMenu, menuIndex) => {
                       return (
                         isNavListItemLinkInterface(subMenu) && (
-                          <NavMenuContainerContentListItem key={menuIndex}>
-                            <Link href={subMenu.href}>{subMenu.label}</Link>
+                          <NavMenuContainerContentListItem
+                            role="presentation"
+                            key={menuIndex}
+                          >
+                            <Link
+                              role="menuitem"
+                              id={subMenu.name}
+                              href={subMenu.href}
+                            >
+                              {subMenu.label}
+                            </Link>
                           </NavMenuContainerContentListItem>
                         )
                       );
@@ -88,4 +101,4 @@ export const NavHorizontalLayout = () => {
   );
 };
 
-export default NavHorizontalLayout;
+export default NavVerticalLayout;

package/src/core/NavList/index.tsx

@@ -1,11 +1,9 @@
 export * from '@digigov/ui/core/NavList/NavListItem';
-export * from '@digigov/ui/core/NavList/NavListAuto';
-export * from '@digigov/ui/core/NavList/NavListItemAuto';
-export * from '@digigov/ui/core/NavList/NavListSubMenu';
-export * from '@digigov/ui/core/NavList/NavListContext';
+export * from '@digigov/ui/core/NavList/NavListAuto/NavListItemAuto';
+export * from '@digigov/ui/core/NavList/NavListAuto/NavListAuto';
+export * from '@digigov/ui/core/NavList/NavListAuto/NavListContextAuto';
 export * from '@digigov/ui/core/NavList/Nav';
 export * from '@digigov/ui/core/NavList/NavList';
-export * from '@digigov/ui/core/NavList/NavListItem';
 export * from '@digigov/ui/core/NavList/NavListItemLink';
 export * from '@digigov/ui/core/NavList/NavListItemButton';
 export * from '@digigov/ui/core/NavList/NavMenu';