disclosure widget implementation continue

Author: broccolinisoup

src/UnderlineNav2/UnderlineNav.tsx

@@ -1,4 +1,4 @@
-import React, {useRef, forwardRef, useCallback, useState, MutableRefObject, RefObject} from 'react'
+import React, {useRef, forwardRef, useCallback, useState, MutableRefObject, RefObject, useEffect} from 'react'
 import Box from '../Box'
 import sx, {merge, BetterSystemStyleObject, SxProp} from '../sx'
 import {UnderlineNavContext} from './UnderlineNavContext'
@@ -12,6 +12,11 @@ import styled from 'styled-components'
 import {LoadingCounter} from './LoadingCounter'
 import {Button} from '../Button'
 import Link from '../Link'
+import {useFocusZone} from '../hooks/useFocusZone'
+import {FocusKeys, getAnchoredPosition} from '@primer/behaviors'
+import {ChevronDownIcon, TriangleDownIcon} from '@primer/octicons-react'
+import {useOnEscapePress} from '../hooks/useOnEscapePress'
+import {useOnOutsideClick} from '../hooks/useOnOutsideClick'
 
 export type UnderlineNavProps = {
   'aria-label'?: React.AriaAttributes['aria-label']
@@ -35,10 +40,6 @@ const NavigationList = styled.ul`
   ${sx};
 `
 
-const DisclosureBox = styled.ul`
-  ${sx};
-`
-
 const MoreMenuListItem = styled.li`
   display: flex;
 `
@@ -135,8 +136,8 @@ export const UnderlineNav = forwardRef(
     const navRef = (forwardedRef ?? backupRef) as MutableRefObject<HTMLElement>
     const listRef = useRef<HTMLUListElement>(null)
     const moreMenuRef = useRef<HTMLLIElement>(null)
-    const containerRef = useRef<HTMLUListElement>(null)
     const moreMenuBtnRef = useRef<HTMLButtonElement>(null)
+    const containerRef = React.useRef<HTMLUListElement>(null)
 
     const {theme} = useTheme()
 
@@ -247,17 +248,37 @@ export const UnderlineNav = forwardRef(
       // eslint-disable-next-line no-console
       console.warn('Use the `aria-label` prop to provide an accessible label for assistive technology')
     }
-
     const [isWidgetOpen, setIsWidgetOpen] = useState(false)
 
-    const onAnchorKeyDown = useCallback(
-      (event: React.KeyboardEvent<HTMLButtonElement>) => {
-        if (!event.defaultPrevented) {
-          if (!isWidgetOpen && ['ArrowDown', 'ArrowUp', ' ', 'Enter'].includes(event.key)) {
-            setIsWidgetOpen(true)
-            event.preventDefault()
-          }
+    const closeOverlay = React.useCallback(() => {
+      setIsWidgetOpen(false)
+    }, [setIsWidgetOpen])
+
+    const toggleOverlay = React.useCallback(() => {
+      setIsWidgetOpen(!isWidgetOpen)
+    }, [setIsWidgetOpen, isWidgetOpen])
+
+    useOnOutsideClick({onClickOutside: closeOverlay, containerRef, ignoreClickRefs: [moreMenuBtnRef]})
+
+    useFocusZone({
+      containerRef: backupRef,
+      bindKeys: FocusKeys.ArrowVertical | FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd | FocusKeys.Tab
+    })
+
+    useFocusZone({
+      containerRef,
+      bindKeys: FocusKeys.ArrowVertical | FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd,
+      focusInStrategy: 'first'
+    })
+
+    useOnEscapePress(
+      (event: KeyboardEvent) => {
+        if (isWidgetOpen) {
+          event.preventDefault()
+          closeOverlay()
         }
+        // onClose('escape')
+        // event.preventDefault()
       },
       [isWidgetOpen]
     )
@@ -266,21 +287,11 @@ export const UnderlineNav = forwardRef(
         if (event.defaultPrevented || event.button !== 0) {
           return
         }
-        setIsWidgetOpen(!isWidgetOpen)
+        toggleOverlay()
       },
-      [isWidgetOpen]
+      [toggleOverlay]
     )
 
-    const handleMenuItemKeyDown = useCallback((event: React.KeyboardEvent<HTMLAnchorElement>) => {
-      if (!event.defaultPrevented) {
-        if (event.key === 'ArrowDown') {
-          // manage focus on children
-
-          event.preventDefault()
-        }
-      }
-    }, [])
-
     return (
       <UnderlineNavContext.Provider
         value={{
@@ -315,64 +326,60 @@ export const UnderlineNav = forwardRef(
                   sx={moreBtnStyles}
                   aria-controls="disclosure-widget"
                   aria-expanded={isWidgetOpen}
-                  onKeyDown={onAnchorKeyDown}
                   onClick={onAnchorClick}
+                  trailingIcon={TriangleDownIcon}
                 >
                   More
                 </Button>
 
-                {isWidgetOpen && (
-                  <DisclosureBox
-                    ref={containerRef}
-                    // onKeyDown={keyPressHandler}
-                    id="disclosure-widget"
-                    sx={{
-                      position: 'absolute',
-                      top: '100%',
-                      boxShadow: '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)',
-                      borderRadius: '12px',
-                      right: '100px',
-                      backgroundColor: `${theme?.colors.canvas.overlay}`,
-                      listStyle: 'none',
-                      padding: '8px',
-                      minWidth: '192px',
-                      maxWidth: '640px'
-                    }}
-                  >
-                    {actions.map((action, index) => {
-                      const {children: actionElementChildren, ...actionElementProps} = action.props
-                      return (
-                        <Box key={index} as="li">
-                          <a
-                            href="#"
-                            // sx={menuItemStyles}
-                            // as={asNavItem}
-                            onClick={(event: React.MouseEvent<HTMLAnchorElement>) => {
-                              swapMenuItemWithListItem(action, index, event, updateListAndMenu)
-                              setSelectEvent(event)
-                              setIsWidgetOpen(false)
-                              moreMenuBtnRef.current?.focus()
-                            }}
-                            onKeyDown={handleMenuItemKeyDown}
-                          >
-                            <Box
-                              as="span"
-                              sx={{display: 'flex', alignItems: 'center', justifyContent: 'space-between'}}
-                            >
-                              {actionElementChildren}
-
-                              {loadingCounters ? (
-                                <LoadingCounter />
-                              ) : (
-                                <CounterLabel>{actionElementProps.counter}</CounterLabel>
-                              )}
-                            </Box>
-                          </a>
-                        </Box>
-                      )
-                    })}
-                  </DisclosureBox>
-                )}
+                <Box
+                  as="ul"
+                  ref={containerRef}
+                  id="disclosure-widget"
+                  sx={{
+                    position: 'absolute',
+                    top: '90%',
+                    boxShadow: '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)',
+                    borderRadius: '12px',
+                    right: '0',
+                    backgroundColor: `${theme?.colors.canvas.overlay}`,
+                    listStyle: 'none',
+                    padding: '8px',
+                    minWidth: '192px',
+                    maxWidth: '640px',
+                    display: isWidgetOpen ? 'block' : 'none'
+                  }}
+                  // onEscape={() => setIsWidgetOpen(false)}
+                >
+                  {actions.map((action, index) => {
+                    const {children: actionElementChildren, ...actionElementProps} = action.props
+                    return (
+                      <Box key={index} as="li">
+                        <a
+                          href="#hello"
+                          // sx={menuItemStyles}
+                          // as={asNavItem}
+                          onClick={(event: React.MouseEvent<HTMLAnchorElement>) => {
+                            swapMenuItemWithListItem(action, index, event, updateListAndMenu)
+                            setSelectEvent(event)
+                            closeOverlay()
+                            moreMenuBtnRef.current?.focus()
+                          }}
+                        >
+                          <Box as="span" sx={{display: 'flex', alignItems: 'center', justifyContent: 'space-between'}}>
+                            {actionElementChildren}
+
+                            {loadingCounters ? (
+                              <LoadingCounter />
+                            ) : (
+                              <CounterLabel>{actionElementProps.counter}</CounterLabel>
+                            )}
+                          </Box>
+                        </a>
+                      </Box>
+                    )
+                  })}
+                </Box>
               </MoreMenuListItem>
             )}
           </NavigationList>

src/UnderlineNav2/styles.ts

@@ -40,8 +40,7 @@ export const getNavStyles = (theme?: Theme, props?: Partial<Pick<UnderlineNavPro
   borderBottom: '1px solid',
   borderBottomColor: `${theme?.colors.border.muted}`,
   align: 'row',
-  alignItems: 'center',
-  position: 'relative'
+  alignItems: 'center'
 })
 
 export const ulStyles = {
@@ -52,7 +51,8 @@ export const ulStyles = {
   margin: 0,
   marginBottom: '-1px',
   alignItems: 'center',
-  gap: `${GAP}px`
+  gap: `${GAP}px`,
+  position: 'relative'
 }
 
 export const getDividerStyle = (theme?: Theme) => ({
@@ -71,7 +71,10 @@ export const moreBtnStyles = {
   fontWeight: 'normal',
   boxShadow: 'none',
   paddingY: 1,
-  paddingX: 2
+  paddingX: 2,
+  '& > span[data-component="trailingIcon"]': {
+    marginLeft: 0
+  }
 }
 
 export const getLinkStyles = (