New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@rmwc/menu

Package Overview
Dependencies
Maintainers
1
Versions
176
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@rmwc/menu - npm Package Compare versions

Comparing version 14.0.4 to 14.0.5

14

package.json
{
"name": "@rmwc/menu",
"version": "14.0.4",
"version": "14.0.5",
"description": "RMWC Menu component",

@@ -40,5 +40,2 @@ "main": "./index.js",

"peerDependencies": {
"@material/animation": "^14.0.0",
"@material/menu": "^14.0.0",
"@material/menu-surface": "^14.0.0",
"react": ">=16.8.x",

@@ -48,6 +45,9 @@ "react-dom": ">=16.8.x"

"dependencies": {
"@rmwc/base": "14.0.4",
"@rmwc/list": "14.0.4",
"@rmwc/types": "14.0.4"
"@material/animation": "^14.0.0",
"@material/menu": "^14.0.0",
"@material/menu-surface": "^14.0.0",
"@rmwc/base": "14.0.5",
"@rmwc/list": "14.0.5",
"@rmwc/types": "14.0.5"
}
}

465

README.md
# Menus
> Menus display a list of choices on a transient sheet of material.
Menus display a list of choices on a transient sheet of material.

@@ -8,9 +8,9 @@ - Module **@rmwc/menu**

- Using CSS Loader
- import **'@rmwc/menu/styles';**
- import '@rmwc/menu/styles';
- Or include stylesheets
- **'@material/menu/dist/mdc.menu.css'**;
- **'@material/menu-surface/dist/mdc.menu-surface.css'**;
- **'@material/ripple/dist/mdc.ripple.css'**;
- **'@material/list/dist/mdc.list.css'**;
- **'@rmwc/icon/icon.css'**;
- **'@material/menu/dist/mdc.menu.css'**
- **'@material/menu-surface/dist/mdc.menu-surface.css'**
- **'@material/ripple/dist/mdc.ripple.css'**
- **'@material/list/dist/mdc.list.css'**
- **'@rmwc/icon/icon.css'**
- MDC Docs: [https://material.io/develop/web/components/menus/](https://material.io/develop/web/components/menus/)

@@ -22,154 +22,86 @@

```js
```jsx
function Example() {
const [open, setOpen] = React.useState(false);
const \[open, setOpen\] \= React.useState(false);
return (
<MenuSurfaceAnchor\>
<MenuSurfaceAnchor>
<Menu
open\={open}
onSelect\={(evt) \=> console.log(evt.detail.index)}
onClose\={() \=> setOpen(false)}
\>
<MenuItem\>Cookies</MenuItem\>
<MenuItem\>Pizza</MenuItem\>
{/\*\* MenuItem is just a ListItem, so you can intermingle other List components \*/}
open={open}
onSelect={(evt) => console.log(evt.detail.index)}
onClose={() => setOpen(false)}
>
<MenuItem>Cookies</MenuItem>
<MenuItem>Pizza</MenuItem>
{/** MenuItem is just a ListItem, so you can intermingle other List components */}
<ListDivider />
<MenuItem>Icecream</MenuItem>
</Menu>
<MenuItem\>Icecream</MenuItem\>
</Menu\>
<Button raised onClick\={() \=> setOpen(!open)}\>
<Button raised onClick={() => setOpen(!open)}>
Menu
</Button\>
</MenuSurfaceAnchor\>
</Button>
</MenuSurfaceAnchor>
);
}
```
```js
```jsx
function Example() {
const [open, setOpen] = React.useState(false);
const \[open, setOpen\] \= React.useState(false);
return (
<MenuSurfaceAnchor\>
<MenuSurface open\={open} onClose\={(evt) \=> setOpen(false)}\>
<div style\={{ padding: '1rem', width: '8rem' }}\>
<MenuSurfaceAnchor>
<MenuSurface open={open} onClose={(evt) => setOpen(false)}>
<div style={{ padding: '1rem', width: '8rem' }}>
Make the content whatever you want.
</div>
</MenuSurface>
</div\>
</MenuSurface\>
<Button raised onClick\={(evt) \=> setOpen(!open)}\>
<Button raised onClick={(evt) => setOpen(!open)}>
Menu Surface
</Button\>
</MenuSurfaceAnchor\>
</Button>
</MenuSurfaceAnchor>
);
}
```
```js
```jsx
function Example() {
const [open, setOpen] = React.useState(false);
const \[open, setOpen\] \= React.useState(false);
return (
<MenuSurfaceAnchor\>
<MenuSurface open\={open} onClose\={() \=> setOpen(false)}\>
<div style\={{ padding: '1rem', width: '8rem' }}\>Menu</div\>
</MenuSurface\>
{/\*\* The handle can be any component you want \*/}
<IconButton icon\="menu" onClick\={() \=> setOpen(!open)} />
</MenuSurfaceAnchor\>
<MenuSurfaceAnchor>
<MenuSurface open={open} onClose={() => setOpen(false)}>
<div style={{ padding: '1rem', width: '8rem' }}>Menu</div>
</MenuSurface>
{/** The handle can be any component you want */}
<IconButton icon="menu" onClick={() => setOpen(!open)} />
</MenuSurfaceAnchor>
);
}
```
```js
```jsx
function Example() {
const [open, setOpen] = React.useState(false);
const \[open, setOpen\] \= React.useState(false);
return (
<MenuSurfaceAnchor\>
<MenuSurfaceAnchor>
<Menu
open={open}
onSelect={(evt) => console.log(evt.detail.index)}
onClose={() => setOpen(false)}
>
<MenuItem>Item One</MenuItem>
<MenuItem disabled>Item Two (disabled)</MenuItem>
<MenuItem>Item Three</MenuItem>
</Menu>
open\={open}
onSelect\={(evt) \=> console.log(evt.detail.index)}
onClose\={() \=> setOpen(false)}
\>
<MenuItem\>Item One</MenuItem\>
<MenuItem disabled\>Item Two (disabled)</MenuItem\>
<MenuItem\>Item Three</MenuItem\>
</Menu\>
<Button raised onClick\={() \=> setOpen(!open)}\>
<Button raised onClick={() => setOpen(!open)}>
Menu
</Button\>
</MenuSurfaceAnchor\>
</Button>
</MenuSurfaceAnchor>
);
}
```

@@ -181,30 +113,16 @@

```js
<SimpleMenu handle\={<Button\>Simple Menu</Button\>}\>
<MenuItem\>Cookies</MenuItem\>
<MenuItem\>Pizza</MenuItem\>
<MenuItem\>Icecream</MenuItem\>
</SimpleMenu\>
```jsx
<SimpleMenu handle={<Button>Simple Menu</Button>}>
<MenuItem>Cookies</MenuItem>
<MenuItem>Pizza</MenuItem>
<MenuItem>Icecream</MenuItem>
</SimpleMenu>
```
```js
<SimpleMenuSurface handle\={<Button\>Simple Menu Surface</Button\>}\>
<div style\={{ padding: '1rem', width: '8rem' }}\>
```jsx
<SimpleMenuSurface handle={<Button>Simple Menu Surface</Button>}>
<div style={{ padding: '1rem', width: '8rem' }}>
Make the content whatever you want.
</div\>
</SimpleMenuSurface\>
</div>
</SimpleMenuSurface>
```

@@ -216,67 +134,36 @@

```js
```jsx
function Example() {
const \[anchorCorner, setAnchorCorner\] \=
const [anchorCorner, setAnchorCorner] =
React.useState('topLeft');
return (
<\>
<MenuSurfaceAnchor\>
<MenuSurface anchorCorner\={anchorCorner} open\={true}\>
<div style\={{ padding: '1rem', width: '8rem' }}\>
<>
<MenuSurfaceAnchor>
<MenuSurface anchorCorner={anchorCorner} open={true}>
<div style={{ padding: '1rem', width: '8rem' }}>
anchorCorner: {anchorCorner}
</div>
</MenuSurface>
<Button raised label="Anchored Menu" />
</MenuSurfaceAnchor>
</div\>
</MenuSurface\>
<Button raised label\="Anchored Menu" />
</MenuSurfaceAnchor\>
<Select
value\={anchorCorner}
label\="anchorCorner"
onChange\={(evt) \=> setAnchorCorner(evt.currentTarget.value)}
options\={\[
value={anchorCorner}
label="anchorCorner"
onChange={(evt) => setAnchorCorner(evt.currentTarget.value)}
options={[
'topLeft',
'topRight',
'bottomLeft',
'bottomRight',
'topStart',
'topEnd',
'bottomStart',
'bottomEnd'
\]}
]}
/>
</\>
</>
);
}
```

@@ -290,29 +177,20 @@

```js
```jsx
`
// Somewhere at the top level of your app
// Render the RMWC Portal
// You only have to do this once
import React from 'react';
import { Portal } from '@rmwc/base';
export default function App() {
return (
<div\>
<div>
...
<Portal />
</div\>
</div>
)
}
`

@@ -323,89 +201,146 @@ ```

```js
```jsx
function Example() {
const \[renderToPortal, setRenderToPortal\] \= React.useState(true);
const \[menuIsOpen, setMenuIsOpen\] \= React.useState(false);
const options \= \['Cookies', 'Pizza', 'Icecream'\];
const [renderToPortal, setRenderToPortal] = React.useState(true);
const [menuIsOpen, setMenuIsOpen] = React.useState(false);
const options = ['Cookies', 'Pizza', 'Icecream'];
return (
<\>
<>
<div
style\={{
style={{
marginBottom: '10rem',
height: '3.5rem',
overflow: 'hidden'
}}
\>
<MenuSurfaceAnchor\>
<Button raised onClick\={() \=> setMenuIsOpen(!menuIsOpen)}\>
>
<MenuSurfaceAnchor>
<Button raised onClick={() => setMenuIsOpen(!menuIsOpen)}>
Open Menu
</Button\>
</Button>
<Menu
open={menuIsOpen}
onClose={() => setMenuIsOpen(false)}
renderToPortal={renderToPortal}
>
{options.map((o) => (
<MenuItem key={o}>{o}</MenuItem>
))}
</Menu>
</MenuSurfaceAnchor>
</div>
<Checkbox
checked={renderToPortal}
onChange={(evt) => setRenderToPortal(evt.currentTarget.checked)}
label="renderToPortal"
/>
</>
);
}
```
open\={menuIsOpen}
## Menu
A menu component for displaying lists items.
onClose\={() \=> setMenuIsOpen(false)}
### Props
renderToPortal\={renderToPortal}
| Name | Type | Description |
|------|------|-------------|
| `anchorCorner` | `AnchorT` | Manually position the menu to one of the corners. |
| `apiRef` | `(api: null \| MenuApi) => void` | Internal api reference for cross component communication. |
| `children` | `ReactNode` | Children to render. |
| `fixed` | `boolean` | Make the menu position fixed. |
| `focusOnOpen` | `boolean` | Whether or not to focus the first list item on open. Defaults to true. |
| `foundationRef` | `Ref<MDCMenuFoundation<>>` | Advanced: A reference to the MDCFoundation. |
| `onClose` | `(evt: MenuSurfaceOnCloseEventT) => void` | Callback for when the menu is closed. |
| `onOpen` | `(evt: MenuSurfaceOnOpenEventT) => void` | Callback for when the menu is opened. |
| `onSelect` | `(evt: MenuOnSelectEventT) => void` | Callback that fires when a Menu item is selected. evt.detail = { index: number; item: HTMLElement; } |
| `open` | `boolean` | Opens the menu. |
| `renderToPortal` | `PortalPropT` | Renders the menu to a portal. Useful for situations where the content might be cutoff by an overflow: hidden container. You can pass "true" to render to the default RMWC portal. |
\>
{options.map((o) \=> (
## MenuItem
This is just the ListItem component exported from the Menu module for convenience. You can use
`ListItem`
or
`SimpleListItem`
components from the List section as long as you add
`role="menuitem"`
and
`tabIndex="0"`
to the components for accessibility.
<MenuItem key\={o}\>{o}</MenuItem\>
### Props
))}
| Name | Type | Description |
|------|------|-------------|
| `activated` | `boolean` | A modifier for an active state. |
| `disabled` | `boolean` | A modifier for a disabled state. |
| `ripple` | `RipplePropT` | Adds a ripple effect to the component |
| `selected` | `boolean` | A modifier for a selected state. |
</Menu\>
</MenuSurfaceAnchor\>
## MenuSurface
### Props
</div\>
| Name | Type | Description |
|------|------|-------------|
| `anchorCorner` | `AnchorT` | Manually position the menu to one of the corners. |
| `apiRef` | `(api: null \| MenuSurfaceApi) => void` | An internal api for cross component communication. |
| `children` | `ReactNode` | Children to render. |
| `fixed` | `boolean` | Make the menu position fixed. |
| `foundationRef` | `Ref<MDCMenuSurfaceFoundation<>>` | Advanced: A reference to the MDCFoundation. |
| `onClose` | `(evt: MenuSurfaceOnCloseEventT) => void` | Callback for when the menu is closed. |
| `onOpen` | `(evt: MenuSurfaceOnOpenEventT) => void` | Callback for when the menu is opened. |
| `open` | `boolean` | Opens the menu. |
| `renderToPortal` | `PortalPropT` | Renders the menu to a portal. Useful for situations where the content might be cutoff by an overflow: hidden container. You can pass "true" to render to the default RMWC portal. |
<Checkbox
checked\={renderToPortal}
## MenuSurfaceAnchor
*************************************************************
MenuSurfaceAnchor
**************************************************************
onChange\={(evt) \=> setRenderToPortal(evt.currentTarget.checked)}
label\="renderToPortal"
/>
## SimpleMenu
A Simplified menu component that allows you to pass a handle element and will automatically control the open state and add a MenuSurfaceAnchor
</\>
### Props
);
| Name | Type | Description |
|------|------|-------------|
| `anchorCorner` | `AnchorT` | Manually position the menu to one of the corners. |
| `apiRef` | `(api: null \| MenuApi) => void` | Internal api reference for cross component communication. |
| `children` | `ReactNode` | Children to render |
| `fixed` | `boolean` | Make the menu position fixed. |
| `focusOnOpen` | `boolean` | Whether or not to focus the first list item on open. Defaults to true. |
| `foundationRef` | `Ref<MDCMenuFoundation<>>` | Advanced: A reference to the MDCFoundation. |
| `handle` | `ReactElement<any, string \| JSXElementConstructor<any>>` | An element that will open the menu when clicked |
| `onClose` | `(evt: MenuSurfaceOnCloseEventT) => void` | Callback for when the menu is closed. |
| `onOpen` | `(evt: MenuSurfaceOnOpenEventT) => void` | Callback for when the menu is opened. |
| `onSelect` | `(evt: MenuOnSelectEventT) => void` | Callback that fires when a Menu item is selected. evt.detail = { index: number; item: HTMLElement; } |
| `open` | `boolean` | Opens the menu. |
| `renderToPortal` | `PortalPropT` | Renders the menu to a portal. Useful for situations where the content might be cutoff by an overflow: hidden container. You can pass "true" to render to the default RMWC portal. |
| `rootProps` | `Object` | By default, props spread to the Menu component. These will spread to the MenuSurfaceAnchor which is useful for things like overall positioning of the anchor. |
}
## SimpleMenuSurface
The same as SimpleMenu, but a generic surface.
```
### Props
## Menu
| Name | Type | Description |
|------|------|-------------|
| `anchorCorner` | `AnchorT` | Manually position the menu to one of the corners. |
| `apiRef` | `(api: null \| MenuSurfaceApi) => void` | An internal api for cross component communication. |
| `children` | `ReactNode` | Children to render |
| `fixed` | `boolean` | Make the menu position fixed. |
| `foundationRef` | `Ref<MDCMenuSurfaceFoundation<>>` | Advanced: A reference to the MDCFoundation. |
| `handle` | `ReactElement<any, string \| JSXElementConstructor<any>>` | An element that will open the menu when clicked |
| `onClose` | `(evt: MenuSurfaceOnCloseEventT) => void` | Callback for when the menu is closed. |
| `onOpen` | `(evt: MenuSurfaceOnOpenEventT) => void` | Callback for when the menu is opened. |
| `open` | `boolean` | Opens the menu. |
| `renderToPortal` | `PortalPropT` | Renders the menu to a portal. Useful for situations where the content might be cutoff by an overflow: hidden container. You can pass "true" to render to the default RMWC portal. |
| `rootProps` | `Object` | By default, props spread to the Menu component. These will spread to the MenuSurfaceAnchor which is useful for things like overall positioning of the anchor. |
## MenuItem
## MenuSurface
## MenuSurfaceAnchor
## SimpleMenu
## SimpleMenuSurface
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc