azmenak / material-ui-nested-menu-item Goto Github PK

It seems adding component="a" to NestedMenuItem in order to change the MenuItem component to a tag instead of li tag doesn't work.
After taking a look on the code you are extracting component prop as div tag by default but not used down there as MenuItem props.

Would it be possible to add support for CommonJS, e.g. main in the package.json in addition to ES6 modules? We're using Jest for tests and running into an issue with ES6 not being supported.

How/Can we add an icon to the left hand side of the NestedMenuItem? I have tried the following:

<NestedMenuItem
                                            iconLeft = {<FaBeer />}
                                            label="Sub-Button 3"
                                            parentMenuOpen={!!menuPosition}
                                            onClick={handleItemClick}
                                            style={{paddingTop: 0, paddingBottom: 0, paddingLeft: 5, fontSize: "0.85rem"}}

                                          >

                                            <MenuItem onClick={handleItemClick}>Sub-Sub-Button 1</MenuItem>
                                            <MenuItem onClick={handleItemClick}>Sub-Sub-Button 2</MenuItem>
                                        </NestedMenuItem>                                    

MenuProps is specified as a property for NestedMenuItem, but it is not propagated to the underlying Menu object.
Suggest something like

<Menu
  . . .
  {...MenuProps}
>

What you were expecting:
When using the arrow key to navigate on NestedMenuItem-List the popup menu close upon changing to the next NestedMenuItem and a new menu popup open.

What happened instead:
When using the arrow key to navigate up and down on the NestedMenuItem-List the nested menu popup of the previous selected one are still there and don't close by themselves and the new popup are rendered above the old ones.

Steps to reproduce:

• go to https://codesandbox.io/s/material-ui-nested-menu-item-example-b25j6?file=/src/App.tsx:209-221
• right click on the text to open menu
• pressing keydown several times

I've seen some similar issues on stack overflow but I am trying to utilize the NestedMenuItem and it appears to work well but on the breakout dropdown menu the scroll is broken on Chrome but works on Firefox.

                                    id={`navigation-menu-${option.optionDisplayValue}`}
                                    label={option.optionDisplayValue}
                                    parentMenuOpen={isMenuOpen}
                                    onClick={handleClose(option)}
                                >
                                    {option.subOptions &&
                                        option.subOptions.map((subOption) => (
                                            <MenuItem
                                                key={`navigation-menu-${option.optionDisplayValue}-${subOption.optionDisplayValue}`}
                                                onClick={handleClose(subOption)}
                                            >
                                                {subOption.optionDisplayValue}
                                            </MenuItem>
                                        ))}
                                </NestedMenuItem>```

Here is an example of the code. Any suggestions or advice you can give would be greatly appreciated! Thank you

Hi ! 👋

Is it planned to migrate this library to new material UI version ?

I think it is light changes, and will allow futur users to use this cool library with last features of mui

https://mui.com/guides/migration-v4/

I have upgraded my project from @material-ui to @mui and i see below error when i use material-ui-nested-menu-item now.

error:
"./node_modules/material-ui-nested-menu-item/dist-web/index.js
Module not found: Can't resolve '@material-ui/core/Menu' in '/app/node_modules/material-ui-nested-menu-item/dist-web'"

later i found that the below dependencies incompatible with latest material ui library.

"@material-ui/core": "^4.9.0",
"@material-ui/icons": "^4.5.1",

kindly advice...

Hi,

I think @mui/codemod are scripts that help update MUI APIs from v4 to v5 but its not meant to be packaged with your component.
Because of dependency propagation, I suggest to remove it, maybe add it as a Devdependency ?
Is there a reason to add it as a direct dependency that I misunderstand ?

Thanks in advance

Open this url to see the issue.
https://codesandbox.io/s/material-ui-nested-menu-item-example-forked-4l9zn?file=/src/App.tsx

Click on Button 3 and try to scroll. It will be closed all menu item.
We need your response. Your cooperation is highly appreciated.

I currently have a menu that's on the right-most of the screen. I'd like the ability to tell the submenu to open to the left instead of to the left/on top of.

I can open a PR for this if we can agree on what needs to get done and the API of what this might look like :)