misleading hover vs "highlighted" state

[Adnan Asani]

when we use the arrow keys to navigate up/down the list, our highlighting styles indicates clearly where we are within the list.

However, hovering with the mouse; we get the hovered item highlighted, while the previous item that we had navigated into retains its highlighted state.

I think this can be resolved partially/mitigated with #4,
but the underlying problem I've found is the scattered responsibility of setting the highlighted state. Here is what I found

• Omnibar: hoveredIndex
• ResultsItem: highlight => hover style appended

[Vu Tran]

Now that we have a children render function (#14), we should be able to expose these in our new children function.

isFocused - currently selected item in the list (via arrow keys)

isHighlighted - mouse is currently hovered over the item

Example API:

<Omnibar>
    {({ item, isFocused, isHighlighted }) => {
        let backgroundColor = 'white';
        
        if (isFocused) {
            backgroundColor = 'lightgray';
        }

        if (isHighlighted) {
            backgroundColor = 'gray';
        }

        return <div style={{ backgroundColor }}>{item.title}</div>;
    }}
</Omnibar>

[Vu Tran]

Can close this now :)