fix: MenuList initial component

src/lib/ListBox/ListBox.tsx

@@ -1,4 +1,4 @@
-import { FocusManagerOptions, FocusScope, useFocusManager } from '@react-aria/focus';
+import { FocusScope, useFocusManager } from '@react-aria/focus';
 import React from 'react';
 import { styled } from '../stitches.config';
 import { useKeyboardHandles } from '../utils';
@@ -8,16 +8,15 @@ const List = styled('ul', {
   p: '$1',
   overflowY: 'auto',
   maxHeight: '240px',
+  $outline: -1,
 });
 
-const focusOptions: FocusManagerOptions = { wrap: true };
-
-const ListInner: React.FC = (props) => {
+const ListInner: React.FC<{ wrap?: boolean }> = ({ wrap, ...props }) => {
   const { focusNext, focusPrevious } = useFocusManager();
 
   const handleKeyDown = useKeyboardHandles({
-    ArrowDown: () => focusNext(focusOptions),
-    ArrowUp: () => focusPrevious(focusOptions),
+    ArrowDown: () => focusNext({ wrap }),
+    ArrowUp: () => focusPrevious({ wrap }),
   });
 
   return <div onKeyDown={handleKeyDown} {...props} />;
@@ -27,12 +26,16 @@ ListInner.displayName = 'ListBox.Inner';
 
 const ListBox = React.forwardRef<
   HTMLUListElement,
-  React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>
->(({ children, ...props }, ref) => {
+  React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement> & {
+    restoreFocus?: boolean;
+    contain?: boolean;
+    wrap?: boolean;
+  }
+>(({ children, restoreFocus, contain, wrap, ...props }, ref) => {
   return (
     <List role="listbox" tabIndex={-1} {...props} as="ul" ref={ref}>
-      <FocusScope contain restoreFocus>
-        <ListInner>{children}</ListInner>
+      <FocusScope contain={contain} restoreFocus={restoreFocus}>
+        <ListInner wrap={wrap}>{children}</ListInner>
       </FocusScope>
     </List>
   );

src/lib/ListItem/ListItem.tsx

@@ -23,7 +23,7 @@ const Item = styled(Flex as FlexType<HTMLLIElement>, {
     bc: '$surfaceActive',
   },
 
-  [`> ${Text}`]: {
+  [`& ${Text}`]: {
     fontSize: 'inherit',
     lineHeight: 'inherit',
   },
@@ -32,7 +32,7 @@ const Item = styled(Flex as FlexType<HTMLLIElement>, {
 type Props = { disabled?: boolean } & React.ComponentProps<typeof Item>;
 
 const ListItem = React.forwardRef<HTMLLIElement, Props>(
-  ({ flow = 'row', cross = 'center', space = '$2', disabled, ...props }, ref) => {
+  ({ flow = 'row', cross = 'center', space = '$2', disabled, as = 'li', ...props }, ref) => {
     const onMouseEnter = useAllHandlers(props.onMouseEnter, (e) => {
       e.currentTarget.focus({
         preventScroll: true,
@@ -49,13 +49,13 @@ const ListItem = React.forwardRef<HTMLLIElement, Props>(
       <Item
         role="option"
         tabIndex={disabled ? undefined : -1}
-        {...props}
+        as={as}
         flow={flow}
         cross={cross}
         space={space}
+        {...props}
         aria-disabled={disabled}
         ref={ref}
-        as="li"
         onMouseEnter={onMouseEnter}
         onKeyDown={handleKeyDown}
       />

src/lib/Menu/MenuList.tsx

@@ -11,7 +11,18 @@ const MenuList: React.FC<UlListProps> = (props) => {
 
   const listRef = useInitialFocus();
 
-  return <ListBox {...props} role={'menu'} id={seed('menu')} aria-labelledby={seed('button')} ref={listRef} />;
+  return (
+    <ListBox
+      {...props}
+      restoreFocus
+      contain
+      wrap
+      role={'menu'}
+      id={seed('menu')}
+      aria-labelledby={seed('button')}
+      ref={listRef}
+    />
+  );
 };
 
 const MenuPopper: React.FC<

src/lib/MenuList/Item.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import ListItem from '../ListItem';
+import { styled } from '../stitches.config';
+
+const MenuItem = styled(ListItem, {
+  'position': 'relative',
+  '::after': {
+    position: 'absolute',
+    left: 0,
+    top: '$1',
+    bottom: '$1',
+    width: '2px',
+    content: `''`,
+    bc: 'transparent',
+  },
+  'variants': {
+    'aria-selected': {
+      true: {
+        'bc': '$surfaceActive',
+        '::after': {
+          bc: '$primaryActive',
+        },
+      },
+      false: {
+        '::after': {
+          bc: 'transparent',
+        },
+      },
+    },
+  },
+});
+
+type Props = React.ComponentProps<typeof MenuItem> & {
+  selected?: boolean;
+};
+
+const Item: React.FC<Props> = ({ selected, ...props }) => {
+  return <MenuItem {...props} role="treeitem" aria-selected={selected} tabIndex={selected ? 0 : -1} />;
+};
+
+export default Item;

src/lib/MenuList/MenuList.tsx

@@ -0,0 +1,54 @@
+import React, { useCallback, useRef } from 'react';
+import { getFocusableTreeWalker } from '@react-aria/focus';
+import Item from './Item';
+import { useAllHandlers, useKeyboardHandles } from '../utils';
+import { styled } from '../stitches.config';
+import Section from './Section';
+
+const List = styled('ul', {
+  m: 0,
+  p: 0,
+  $outline: -1,
+});
+
+type Props = React.ComponentProps<typeof List> & {
+  label?: string;
+};
+
+const MenuList: React.FC<Props> & { Item: typeof Item } = ({ label, ...props }) => {
+  const ref = useRef<HTMLUListElement>(null);
+
+  const focusElement = useCallback((fn: (walker: TreeWalker) => Node | null) => {
+    let focusedElement = document.activeElement as HTMLElement;
+    if (!ref.current?.contains(focusedElement)) {
+      return;
+    }
+
+    // Create a DOM tree walker that matches all tabbable elements
+    let walker = getFocusableTreeWalker(document.body);
+
+    // Find the next tabbable element after the currently focused element
+    walker.currentNode = focusedElement;
+    let nextElement = fn(walker) as HTMLElement;
+    if (ref.current.contains(nextElement)) {
+      nextElement.focus();
+    }
+  }, []);
+
+  const handleNavigation = useKeyboardHandles({
+    ArrowUp: () => focusElement((walker) => walker.previousNode()),
+    ArrowDown: () => focusElement((walker) => walker.nextNode()),
+  });
+  const handleHeyDown = useAllHandlers(props.onKeyDown, handleNavigation);
+
+  const list = <List {...props} onKeyDown={handleHeyDown} ref={ref} />;
+
+  if (label) {
+    return <Section label={label}>{list}</Section>;
+  }
+  return list;
+};
+
+MenuList.Item = Item;
+
+export default MenuList;

src/lib/MenuList/Section.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { useUID } from 'react-uid';
+import Flex from '../Flex';
+import { styled } from '../stitches.config';
+import Text from '../Text';
+import MenuList from './index';
+
+const Heading = styled(Text, {
+  pr: '$2',
+  textTransform: 'uppercase',
+});
+
+const Section: React.FC<{ label: string; children: React.ReactElement<typeof MenuList> }> = ({ label, children }) => {
+  const id = useUID();
+  return (
+    <Flex flow="column" space="xs">
+      <Heading id={id} font="mono" size="xs" tone="light">
+        {label}
+      </Heading>
+      {React.cloneElement(children, { 'aria-labelledby': id })}
+    </Flex>
+  );
+};
+
+export default Section;

src/lib/MenuList/index.ts

@@ -0,0 +1 @@
+export { default } from './MenuList';

src/lib/Picker/List.tsx

@@ -26,7 +26,7 @@ const List: React.FC<Props> = ({ triggerId, children, ...props }) => {
   }, [value]);
 
   return (
-    <ListBox id={`${triggerId}-listbox`} aria-labelledby={triggerId} {...props} ref={ref}>
+    <ListBox {...props} id={`${triggerId}-listbox`} aria-labelledby={triggerId} restoreFocus contain wrap ref={ref}>
       {children}
     </ListBox>
   );

src/lib/index.ts

@@ -7,7 +7,8 @@ export { default as Flex } from './Flex';
 export { default as Heading } from './Heading';
 export { default as Icon } from './Icon';
 export { default as Label } from './Label';
-export { default as ListBox } from './ListBox';
+export { default as MenuList } from './MenuList';
+export { default as ListItem } from './ListItem';
 export { default as Menu } from './Menu';
 export { default as Picker } from './Picker';
 export { default as Switch } from './Switch';

src/lib/utils/index.ts

@@ -71,7 +71,6 @@ export function useKeyboardHandles(handlers: KeyboardHandlers): KeyboardHandler
     const handler = handlersRef.current[event.key];
     if (typeof handler === 'function') {
       event.preventDefault();
-      event.stopPropagation();
       handler(event);
     }
   }, []);

src/pages/components/MenuList.mdx

@@ -0,0 +1,40 @@
+---
+name: MenuList
+---
+
+import { Playground } from 'dokz';
+import { Box, MenuList, ListItem, Icon, Text, Label } from '@fxtrot/ui';
+import { HiOutlineUsers, HiOutlineAdjustments, HiOutlineGlobe } from 'react-icons/hi';
+
+## MenuList
+
+<Playground>
+  {() => {
+    const [selected, setSelected] = React.useState('Appearance');
+    return (
+      <Box width="$56" p="$2">
+        <MenuList label="Settings" role="navigation">
+          {[
+            {
+              icon: HiOutlineUsers,
+              label: 'Profiles',
+            },
+            {
+              icon: HiOutlineAdjustments,
+              label: 'Appearance',
+            },
+            {
+              icon: HiOutlineGlobe,
+              label: 'Language',
+            },
+          ].map(({ icon, label }) => (
+            <MenuList.Item key={label} selected={selected === label} onClick={() => setSelected(label)}>
+              <Icon as={icon} />
+              <Text>{label}</Text>
+            </MenuList.Item>
+          ))}
+        </MenuList>
+      </Box>
+    );
+  }}
+</Playground>