Add menu state context for convenience (#1012)

- In some scenarios it's useful to have context available for menustate to avoid the need for passing it down through multiple components in props.  This mostly helps nested menus, but can be useful in other areas as well.

ui-frontend/packages/catalog-ui-search/src/main/webapp/component/menu-state/menu-state.tsx

@@ -84,7 +84,7 @@ const useListenForChildUpdates = ({
   }, [action.current, popoverRef])
 }
 
-export const useMenuState = ({ maxHeight }: Props = {}) => {
+export function useMenuState({ maxHeight }: Props = {}) {
   const anchorRef = React.useRef<HTMLDivElement>(null)
   const popoverRef = useRerenderingRef<HTMLDivElement>()
   const action = React.useRef<PopoverActions | null>(null)
@@ -140,6 +140,8 @@ export const useMenuState = ({ maxHeight }: Props = {}) => {
   }
 }
 
+export default useMenuState
+
 export const POPOVER_DEFAULTS = ({ maxHeight }: Props = {}) => {
   return {
     anchorOrigin: {
@@ -161,4 +163,12 @@ export const POPOVER_DEFAULTS = ({ maxHeight }: Props = {}) => {
   >
 }
 
-export default useMenuState
+const MenuStateContext = React.createContext<ReturnType<typeof useMenuState>>(
+  {} as ReturnType<typeof useMenuState>
+)
+
+export const MenuStateProvider = MenuStateContext.Provider
+
+export function useMenuStateContext() {
+  return React.useContext(MenuStateContext)
+}