Use MenuItem without MenuButton or useMenuState

[jsh-wu]

Hi Paste Team,

I'm trying to use the MenuItem components so that I can render a menu within a HighChart's bar chart on bar click. Would it be possible to render MenuItems without using useMenuState and MenuButton?

Note that HighChart does not support React so rendering bars as a MenuButton is not possible.

[dosubot[bot]]

🤖

Hey there, @jsh-wu! 👋 I'm Dosu, a friendly bot here to assist with bugs, answer questions, and guide you on becoming a contributor to the Paste repository. While you're waiting for a human maintainer, I'm here to lend a hand. I noticed your issue with using MenuItem components and I'll dive into it to give you a comprehensive answer shortly. Stay tuned!

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Sorry, I don't know how to help with that.

I did do a search though, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Menu without button (updated: 07/11/2022, similarity score: 88%)
• Menu items don't fit the Menu in Mobile Devices - Answer (updated: 01/31/2024, similarity score: 84%)
• Variable width for menu items (updated: 10/16/2023, similarity score: 84%)

[dosubot[bot]]

🤖

Based on the information provided in the Paste repository, it is indeed possible to use the MenuItem components independently of useMenuState and MenuButton. The MenuItem component is a standalone component that doesn't inherently depend on useMenuState or MenuButton. Here's the relevant code from the repository:

const MenuItem = React.forwardRef<HTMLDivElement, MenuItemProps>(
  ({ as = StyledMenuItem, variant: _variant, element = "MENU_ITEM", ...props }, ref) => {
    const isGrouped = React.useContext(MenuGroupContext) === MenuItemVariants.GROUP_ITEM;
    const variant = _variant ? getComputedVariant(_variant, isGrouped) : _variant;

    return <MenuPrimitiveItem {...props} element={element} variant={variant} as={as} ref={ref} />;
  },
);

(Source: MenuItem.tsx)

This code shows that MenuItem is a component that can be used independently. It takes in props, applies some logic to determine the variant, and then returns a MenuPrimitiveItem with those props. There's no inherent dependency on useMenuState or MenuButton in this code.

However, using MenuItem in a non-React environment like HighCharts might be challenging. Since HighCharts does not support React, you might need to find a way to render React components within HighCharts or consider an alternative approach. Unfortunately, I couldn't find a specific solution within the Paste repository for this scenario.

I'm sorry, but I can't see the screenshot you've shared as I'm unable to view images. If you could provide more details about the issue you're facing or the implementation you're trying to achieve, I might be able to provide a more specific solution.

Sources

• packages/paste-core/components/menu/src/MenuItem.tsx

About Dosu

This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.

[SiTaggart]

Hi there

Accessing a menu must always be done via a physical trigger to make the menu accessible to non-mouse users.

What you are trying to do, isn't designed in a very accessible way and we would suggest attending Design System office hours with your design and engineering partners to discuss alternatives.

Thanks

[jsh-wu]

Hi, Could you direct me to the Google Cal office hours? I don't see it available on the Engineering Calendar or my personal.

Thanks!

[TheSisb]

Hi @jsh-wu,

You can find out more and sign up on this sheet: https://docs.google.com/spreadsheets/d/10vD91zdwr9hjgDOV3HSGnoC0LgvYw-thmn3X_kvW0xk/edit?pli=1#gid=800758837
The sign up sheet is pinned in the #help-design-system channel on Slack for future reference.