@rmwc/menu - npm Package Compare versions

Comparing version 6.0.0-alpha.11 to 6.0.0-alpha.12

dist/menu-foundation.d.ts

@@ -131,3 +131,3 @@ /// <reference types="react" />
         className?: string | undefined;
-        contentEditable?: boolean | "true" | "false" | "inherit" | undefined;
+        contentEditable?: boolean | "inherit" | "true" | "false" | undefined;
         contextMenu?: string | undefined;
@@ -144,3 +144,3 @@ dir?: string | undefined;
         title?: string | undefined;
-        translate?: "yes" | "no" | undefined;
+        translate?: "no" | "yes" | undefined;
         radioGroup?: string | undefined;
@@ -147,0 +147,0 @@ role?: string | undefined;

dist/menu-surface-foundation.js

@@ -246,4 +246,5 @@ "use strict";
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     return tslib_1.__assign({}, elements);
 };

dist/menu-surface.d.ts

@@ -36,10 +36,27 @@ import * as RMWC from '@rmwc/types';
 /** A generic menu component for displaying any type of content. */
-export declare const MenuSurface: React.ForwardRefExoticComponent<Pick<MenuSurfaceProps & RMWC.ComponentProps, "onError" | "className" | "prefix" | "size" | "children" | "value" | "cite" | "data" | "form" | "label" | "span" | "style" | "summary" | "title" | "pattern" | "theme" | "onBlur" | "onClick" | "onClose" | "onContextMenu" | "onCopy" | "onCut" | "onAuxClick" | "onDoubleClick" | "onDragEnd" | "onDragStart" | "onDrop" | "onFocus" | "onInput" | "onInvalid" | "onKeyDown" | "onKeyPress" | "onKeyUp" | "onMouseDown" | "onMouseUp" | "onPaste" | "onPause" | "onPlay" | "onPointerCancel" | "onPointerDown" | "onPointerUp" | "onRateChange" | "onReset" | "onSeeked" | "onSubmit" | "onTouchCancel" | "onTouchEnd" | "onTouchStart" | "onVolumeChange" | "onAbort" | "onAnimationEnd" | "onAnimationIteration" | "onAnimationStart" | "onCanPlay" | "onCanPlayThrough" | "onDrag" | "onDragEnter" | "onDragExit" | "onDragLeave" | "onDragOver" | "onDurationChange" | "onEmptied" | "onEncrypted" | "onEnded" | "onGotPointerCapture" | "onLoad" | "onLoadedData" | "onLoadedMetadata" | "onLoadStart" | "onLostPointerCapture" | "onMouseMove" | "onMouseOut" | "onMouseOver" | "onPlaying" | "onPointerMove" | "onPointerOut" | "onPointerOver" | "onProgress" | "onScroll" | "onSeeking" | "onStalled" | "onSuspend" | "onTimeUpdate" | "onTouchMove" | "onTransitionEnd" | "onWaiting" | "onWheel" | "onMouseEnter" | "onMouseLeave" | "onPointerEnter" | "onPointerLeave" | "onChange" | "onSelect" | "onBeforeInput" | "onCompositionEnd" | "onCompositionStart" | "onCompositionUpdate" | "id" | "dir" | "slot" | "key" | "fixed" | "target" | "tag" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "type" | "useMap" | "width" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopyCapture" | "onCutCapture" | "onPasteCapture" | "onCompositionEndCapture" | "onCompositionStartCapture" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInputCapture" | "onInputCapture" | "onResetCapture" | "onSubmitCapture" | "onInvalidCapture" | "onLoadCapture" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPressCapture" | "onKeyUpCapture" | "onAbortCapture" | "onCanPlayCapture" | "onCanPlayThroughCapture" | "onDurationChangeCapture" | "onEmptiedCapture" | "onEncryptedCapture" | "onEndedCapture" | "onLoadedDataCapture" | "onLoadedMetadataCapture" | "onLoadStartCapture" | "onPauseCapture" | "onPlayCapture" | "onPlayingCapture" | "onProgressCapture" | "onRateChangeCapture" | "onSeekedCapture" | "onSeekingCapture" | "onStalledCapture" | "onSuspendCapture" | "onTimeUpdateCapture" | "onVolumeChangeCapture" | "onWaitingCapture" | "onAuxClickCapture" | "onClickCapture" | "onContextMenuCapture" | "onDoubleClickCapture" | "onDragCapture" | "onDragEndCapture" | "onDragEnterCapture" | "onDragExitCapture" | "onDragLeaveCapture" | "onDragOverCapture" | "onDragStartCapture" | "onDropCapture" | "onMouseDownCapture" | "onMouseMoveCapture" | "onMouseOutCapture" | "onMouseOverCapture" | "onMouseUpCapture" | "onSelectCapture" | "onTouchCancelCapture" | "onTouchEndCapture" | "onTouchMoveCapture" | "onTouchStartCapture" | "onPointerDownCapture" | "onPointerMoveCapture" | "onPointerUpCapture" | "onPointerCancelCapture" | "onPointerEnterCapture" | "onPointerLeaveCapture" | "onPointerOverCapture" | "onPointerOutCapture" | "onGotPointerCaptureCapture" | "onLostPointerCaptureCapture" | "onScrollCapture" | "onWheelCapture" | "onAnimationStartCapture" | "onAnimationEndCapture" | "onAnimationIterationCapture" | "onTransitionEndCapture" | "onOpen" | "apiRef" | "hoistToBody" | "anchorCorner"> & React.RefAttributes<any>>;
+export declare const MenuSurface: {
+    <Tag extends React.ElementType<any> = "div">(props: (MenuSurfaceProps & {
+        tag?: Tag | undefined;
+        theme?: RMWC.ThemePropT;
+    } & React.HTMLProps<HTMLDivElement>) | (MenuSurfaceProps & {
+        tag?: Tag | undefined;
+        theme?: RMWC.ThemePropT;
+    } & React.ComponentPropsWithRef<Tag>), ref: any): JSX.Element;
+    displayName: string;
+};
 /****************************************************************
  * MenuSurfaceAnchor
  ****************************************************************/
+export interface MenuSurfaceAnchorProps {
+}
 /** A Menu Anchor. When using the anchorCorner prop of Menu, you must set MenuSurfaceAnchors css style position to absolute. */
-export declare function MenuSurfaceAnchor(props: RMWC.ComponentProps): JSX.Element;
-export declare namespace MenuSurfaceAnchor {
-    var displayName: string;
-}
+export declare const MenuSurfaceAnchor: {
+    <Tag extends React.ElementType<any> = "div">(props: (MenuSurfaceAnchorProps & {
+        tag?: Tag | undefined;
+        theme?: RMWC.ThemePropT;
+    } & React.HTMLProps<HTMLDivElement>) | (MenuSurfaceAnchorProps & {
+        tag?: Tag | undefined;
+        theme?: RMWC.ThemePropT;
+    } & React.ComponentPropsWithRef<Tag>), ref: any): JSX.Element;
+    displayName: string;
+};

dist/menu-surface.js

@@ -11,3 +11,3 @@ "use strict";
 /** A generic menu component for displaying any type of content. */
-exports.MenuSurface = react_1.default.forwardRef(function MenuSurface(props, ref) {
+exports.MenuSurface = base_1.createComponent(function MenuSurface(props, ref) {
     var children = props.children, open = props.open, anchorCorner = props.anchorCorner, onOpen = props.onOpen, onClose = props.onClose, hoistToBody = props.hoistToBody, fixed = props.fixed, apiRef = props.apiRef, rest = tslib_1.__rest(props, ["children", "open", "anchorCorner", "onOpen", "onClose", "hoistToBody", "fixed", "apiRef"]);
@@ -23,12 +23,6 @@ var rootEl = menu_surface_foundation_1.useMenuSurfaceFoundation(props).rootEl;
 });
-exports.MenuSurface.displayName = 'MenuSurface';
-/****************************************************************
- * MenuSurfaceAnchor
- ****************************************************************/
 /** A Menu Anchor. When using the anchorCorner prop of Menu, you must set MenuSurfaceAnchors css style position to absolute. */
-function MenuSurfaceAnchor(props) {
+exports.MenuSurfaceAnchor = base_1.createComponent(function MenuSurfaceAnchor(props, ref) {
     var className = base_1.useClassNames(props, ['mdc-menu-surface--anchor']);
-    return react_1.default.createElement(base_1.Tag, tslib_1.__assign({}, props, { className: className }));
-}
-exports.MenuSurfaceAnchor = MenuSurfaceAnchor;
-MenuSurfaceAnchor.displayName = 'MenuSurfaceAnchor';
+    return react_1.default.createElement(base_1.Tag, tslib_1.__assign({}, props, { className: className, ref: ref }));
+});

dist/menu.d.ts

@@ -24,2 +24,3 @@ import * as RMWC from '@rmwc/types';
 }
+export declare type MenuHTMLProps = RMWC.HTMLProps<HTMLInputElement, Omit<React.AllHTMLAttributes<HTMLInputElement>, 'onSelect'>>;
 /** A wrapper for menu items */
@@ -29,3 +30,12 @@ export interface MenuItemsProps extends ListProps {
 /** A wrapper for menu items */
-export declare const MenuItems: React.ForwardRefExoticComponent<Pick<MenuItemsProps & RMWC.ComponentProps, "onError" | "className" | "prefix" | "size" | "children" | "value" | "cite" | "data" | "form" | "label" | "span" | "style" | "summary" | "title" | "pattern" | "theme" | "onBlur" | "onClick" | "onContextMenu" | "onCopy" | "onCut" | "onAuxClick" | "onDoubleClick" | "onDragEnd" | "onDragStart" | "onDrop" | "onFocus" | "onInput" | "onInvalid" | "onKeyDown" | "onKeyPress" | "onKeyUp" | "onMouseDown" | "onMouseUp" | "onPaste" | "onPause" | "onPlay" | "onPointerCancel" | "onPointerDown" | "onPointerUp" | "onRateChange" | "onReset" | "onSeeked" | "onSubmit" | "onTouchCancel" | "onTouchEnd" | "onTouchStart" | "onVolumeChange" | "onAbort" | "onAnimationEnd" | "onAnimationIteration" | "onAnimationStart" | "onCanPlay" | "onCanPlayThrough" | "onDrag" | "onDragEnter" | "onDragExit" | "onDragLeave" | "onDragOver" | "onDurationChange" | "onEmptied" | "onEncrypted" | "onEnded" | "onGotPointerCapture" | "onLoad" | "onLoadedData" | "onLoadedMetadata" | "onLoadStart" | "onLostPointerCapture" | "onMouseMove" | "onMouseOut" | "onMouseOver" | "onPlaying" | "onPointerMove" | "onPointerOut" | "onPointerOver" | "onProgress" | "onScroll" | "onSeeking" | "onStalled" | "onSuspend" | "onTimeUpdate" | "onTouchMove" | "onTransitionEnd" | "onWaiting" | "onWheel" | "onMouseEnter" | "onMouseLeave" | "onPointerEnter" | "onPointerLeave" | "onChange" | "onSelect" | "onBeforeInput" | "onCompositionEnd" | "onCompositionStart" | "onCompositionUpdate" | "id" | "dir" | "slot" | "key" | "target" | "tag" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "type" | "useMap" | "width" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopyCapture" | "onCutCapture" | "onPasteCapture" | "onCompositionEndCapture" | "onCompositionStartCapture" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInputCapture" | "onInputCapture" | "onResetCapture" | "onSubmitCapture" | "onInvalidCapture" | "onLoadCapture" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPressCapture" | "onKeyUpCapture" | "onAbortCapture" | "onCanPlayCapture" | "onCanPlayThroughCapture" | "onDurationChangeCapture" | "onEmptiedCapture" | "onEncryptedCapture" | "onEndedCapture" | "onLoadedDataCapture" | "onLoadedMetadataCapture" | "onLoadStartCapture" | "onPauseCapture" | "onPlayCapture" | "onPlayingCapture" | "onProgressCapture" | "onRateChangeCapture" | "onSeekedCapture" | "onSeekingCapture" | "onStalledCapture" | "onSuspendCapture" | "onTimeUpdateCapture" | "onVolumeChangeCapture" | "onWaitingCapture" | "onAuxClickCapture" | "onClickCapture" | "onContextMenuCapture" | "onDoubleClickCapture" | "onDragCapture" | "onDragEndCapture" | "onDragEnterCapture" | "onDragExitCapture" | "onDragLeaveCapture" | "onDragOverCapture" | "onDragStartCapture" | "onDropCapture" | "onMouseDownCapture" | "onMouseMoveCapture" | "onMouseOutCapture" | "onMouseOverCapture" | "onMouseUpCapture" | "onSelectCapture" | "onTouchCancelCapture" | "onTouchEndCapture" | "onTouchMoveCapture" | "onTouchStartCapture" | "onPointerDownCapture" | "onPointerMoveCapture" | "onPointerUpCapture" | "onPointerCancelCapture" | "onPointerEnterCapture" | "onPointerLeaveCapture" | "onPointerOverCapture" | "onPointerOutCapture" | "onGotPointerCaptureCapture" | "onLostPointerCaptureCapture" | "onScrollCapture" | "onWheelCapture" | "onAnimationStartCapture" | "onAnimationEndCapture" | "onAnimationIterationCapture" | "onTransitionEndCapture" | "dense" | "apiRef" | "twoLine" | "avatarList" | "nonInteractive" | "onAction"> & React.RefAttributes<any>>;
+export declare const MenuItems: {
+    <Tag extends React.ElementType<any> = "div">(props: (MenuItemsProps & {
+        tag?: Tag | undefined;
+        theme?: RMWC.ThemePropT;
+    } & React.HTMLProps<HTMLDivElement>) | (MenuItemsProps & {
+        tag?: Tag | undefined;
+        theme?: RMWC.ThemePropT;
+    } & React.ComponentPropsWithRef<Tag>), ref: any): JSX.Element;
+    displayName: string;
+};
 /** 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. */
@@ -35,5 +45,27 @@ export interface MenuItemProps extends ListItemProps {
 /** 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. */
-export declare const MenuItem: React.ForwardRefExoticComponent<Pick<MenuItemProps & RMWC.ComponentProps, "onError" | "className" | "prefix" | "size" | "children" | "ripple" | "value" | "cite" | "data" | "form" | "label" | "span" | "style" | "summary" | "title" | "pattern" | "theme" | "onBlur" | "onClick" | "onContextMenu" | "onCopy" | "onCut" | "onAuxClick" | "onDoubleClick" | "onDragEnd" | "onDragStart" | "onDrop" | "onFocus" | "onInput" | "onInvalid" | "onKeyDown" | "onKeyPress" | "onKeyUp" | "onMouseDown" | "onMouseUp" | "onPaste" | "onPause" | "onPlay" | "onPointerCancel" | "onPointerDown" | "onPointerUp" | "onRateChange" | "onReset" | "onSeeked" | "onSubmit" | "onTouchCancel" | "onTouchEnd" | "onTouchStart" | "onVolumeChange" | "onAbort" | "onAnimationEnd" | "onAnimationIteration" | "onAnimationStart" | "onCanPlay" | "onCanPlayThrough" | "onDrag" | "onDragEnter" | "onDragExit" | "onDragLeave" | "onDragOver" | "onDurationChange" | "onEmptied" | "onEncrypted" | "onEnded" | "onGotPointerCapture" | "onLoad" | "onLoadedData" | "onLoadedMetadata" | "onLoadStart" | "onLostPointerCapture" | "onMouseMove" | "onMouseOut" | "onMouseOver" | "onPlaying" | "onPointerMove" | "onPointerOut" | "onPointerOver" | "onProgress" | "onScroll" | "onSeeking" | "onStalled" | "onSuspend" | "onTimeUpdate" | "onTouchMove" | "onTransitionEnd" | "onWaiting" | "onWheel" | "onMouseEnter" | "onMouseLeave" | "onPointerEnter" | "onPointerLeave" | "onChange" | "onSelect" | "onBeforeInput" | "onCompositionEnd" | "onCompositionStart" | "onCompositionUpdate" | "id" | "dir" | "slot" | "key" | "target" | "tag" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "type" | "useMap" | "width" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopyCapture" | "onCutCapture" | "onPasteCapture" | "onCompositionEndCapture" | "onCompositionStartCapture" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInputCapture" | "onInputCapture" | "onResetCapture" | "onSubmitCapture" | "onInvalidCapture" | "onLoadCapture" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPressCapture" | "onKeyUpCapture" | "onAbortCapture" | "onCanPlayCapture" | "onCanPlayThroughCapture" | "onDurationChangeCapture" | "onEmptiedCapture" | "onEncryptedCapture" | "onEndedCapture" | "onLoadedDataCapture" | "onLoadedMetadataCapture" | "onLoadStartCapture" | "onPauseCapture" | "onPlayCapture" | "onPlayingCapture" | "onProgressCapture" | "onRateChangeCapture" | "onSeekedCapture" | "onSeekingCapture" | "onStalledCapture" | "onSuspendCapture" | "onTimeUpdateCapture" | "onVolumeChangeCapture" | "onWaitingCapture" | "onAuxClickCapture" | "onClickCapture" | "onContextMenuCapture" | "onDoubleClickCapture" | "onDragCapture" | "onDragEndCapture" | "onDragEnterCapture" | "onDragExitCapture" | "onDragLeaveCapture" | "onDragOverCapture" | "onDragStartCapture" | "onDropCapture" | "onMouseDownCapture" | "onMouseMoveCapture" | "onMouseOutCapture" | "onMouseOverCapture" | "onMouseUpCapture" | "onSelectCapture" | "onTouchCancelCapture" | "onTouchEndCapture" | "onTouchMoveCapture" | "onTouchStartCapture" | "onPointerDownCapture" | "onPointerMoveCapture" | "onPointerUpCapture" | "onPointerCancelCapture" | "onPointerEnterCapture" | "onPointerLeaveCapture" | "onPointerOverCapture" | "onPointerOutCapture" | "onGotPointerCaptureCapture" | "onLostPointerCaptureCapture" | "onScrollCapture" | "onWheelCapture" | "onAnimationStartCapture" | "onAnimationEndCapture" | "onAnimationIterationCapture" | "onTransitionEndCapture" | "activated"> & React.RefAttributes<any>>;
+export declare const MenuItem: {
+    <Tag extends React.ElementType<any> = "div">(props: (MenuItemProps & {
+        tag?: Tag | undefined;
+        theme?: RMWC.ThemePropT;
+    } & React.HTMLProps<HTMLDivElement>) | (MenuItemProps & {
+        tag?: Tag | undefined;
+        theme?: RMWC.ThemePropT;
+    } & React.ComponentPropsWithRef<Tag>), ref: any): JSX.Element;
+    displayName: string;
+};
 /** A menu component for displaying lists items. */
-export declare const Menu: React.ForwardRefExoticComponent<Pick<MenuProps & Pick<RMWC.ComponentProps, "onError" | "className" | "prefix" | "size" | "children" | "value" | "ref" | "cite" | "data" | "form" | "label" | "span" | "style" | "summary" | "title" | "pattern" | "theme" | "onBlur" | "onClick" | "onContextMenu" | "onCopy" | "onCut" | "onAuxClick" | "onDoubleClick" | "onDragEnd" | "onDragStart" | "onDrop" | "onFocus" | "onInput" | "onInvalid" | "onKeyDown" | "onKeyPress" | "onKeyUp" | "onMouseDown" | "onMouseUp" | "onPaste" | "onPause" | "onPlay" | "onPointerCancel" | "onPointerDown" | "onPointerUp" | "onRateChange" | "onReset" | "onSeeked" | "onSubmit" | "onTouchCancel" | "onTouchEnd" | "onTouchStart" | "onVolumeChange" | "onAbort" | "onAnimationEnd" | "onAnimationIteration" | "onAnimationStart" | "onCanPlay" | "onCanPlayThrough" | "onDrag" | "onDragEnter" | "onDragExit" | "onDragLeave" | "onDragOver" | "onDurationChange" | "onEmptied" | "onEncrypted" | "onEnded" | "onGotPointerCapture" | "onLoad" | "onLoadedData" | "onLoadedMetadata" | "onLoadStart" | "onLostPointerCapture" | "onMouseMove" | "onMouseOut" | "onMouseOver" | "onPlaying" | "onPointerMove" | "onPointerOut" | "onPointerOver" | "onProgress" | "onScroll" | "onSeeking" | "onStalled" | "onSuspend" | "onTimeUpdate" | "onTouchMove" | "onTransitionEnd" | "onWaiting" | "onWheel" | "onMouseEnter" | "onMouseLeave" | "onPointerEnter" | "onPointerLeave" | "onChange" | "onBeforeInput" | "onCompositionEnd" | "onCompositionStart" | "onCompositionUpdate" | "id" | "dir" | "slot" | "key" | "target" | "tag" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "type" | "useMap" | "width" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopyCapture" | "onCutCapture" | "onPasteCapture" | "onCompositionEndCapture" | "onCompositionStartCapture" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInputCapture" | "onInputCapture" | "onResetCapture" | "onSubmitCapture" | "onInvalidCapture" | "onLoadCapture" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPressCapture" | "onKeyUpCapture" | "onAbortCapture" | "onCanPlayCapture" | "onCanPlayThroughCapture" | "onDurationChangeCapture" | "onEmptiedCapture" | "onEncryptedCapture" | "onEndedCapture" | "onLoadedDataCapture" | "onLoadedMetadataCapture" | "onLoadStartCapture" | "onPauseCapture" | "onPlayCapture" | "onPlayingCapture" | "onProgressCapture" | "onRateChangeCapture" | "onSeekedCapture" | "onSeekingCapture" | "onStalledCapture" | "onSuspendCapture" | "onTimeUpdateCapture" | "onVolumeChangeCapture" | "onWaitingCapture" | "onAuxClickCapture" | "onClickCapture" | "onContextMenuCapture" | "onDoubleClickCapture" | "onDragCapture" | "onDragEndCapture" | "onDragEnterCapture" | "onDragExitCapture" | "onDragLeaveCapture" | "onDragOverCapture" | "onDragStartCapture" | "onDropCapture" | "onMouseDownCapture" | "onMouseMoveCapture" | "onMouseOutCapture" | "onMouseOverCapture" | "onMouseUpCapture" | "onSelectCapture" | "onTouchCancelCapture" | "onTouchEndCapture" | "onTouchMoveCapture" | "onTouchStartCapture" | "onPointerDownCapture" | "onPointerMoveCapture" | "onPointerUpCapture" | "onPointerCancelCapture" | "onPointerEnterCapture" | "onPointerLeaveCapture" | "onPointerOverCapture" | "onPointerOutCapture" | "onGotPointerCaptureCapture" | "onLostPointerCaptureCapture" | "onScrollCapture" | "onWheelCapture" | "onAnimationStartCapture" | "onAnimationEndCapture" | "onAnimationIterationCapture" | "onTransitionEndCapture">, "onError" | "className" | "prefix" | "size" | "children" | "value" | "cite" | "data" | "form" | "label" | "span" | "style" | "summary" | "title" | "pattern" | "theme" | "onBlur" | "onClick" | "onClose" | "onContextMenu" | "onCopy" | "onCut" | "onAuxClick" | "onDoubleClick" | "onDragEnd" | "onDragStart" | "onDrop" | "onFocus" | "onInput" | "onInvalid" | "onKeyDown" | "onKeyPress" | "onKeyUp" | "onMouseDown" | "onMouseUp" | "onPaste" | "onPause" | "onPlay" | "onPointerCancel" | "onPointerDown" | "onPointerUp" | "onRateChange" | "onReset" | "onSeeked" | "onSubmit" | "onTouchCancel" | "onTouchEnd" | "onTouchStart" | "onVolumeChange" | "onAbort" | "onAnimationEnd" | "onAnimationIteration" | "onAnimationStart" | "onCanPlay" | "onCanPlayThrough" | "onDrag" | "onDragEnter" | "onDragExit" | "onDragLeave" | "onDragOver" | "onDurationChange" | "onEmptied" | "onEncrypted" | "onEnded" | "onGotPointerCapture" | "onLoad" | "onLoadedData" | "onLoadedMetadata" | "onLoadStart" | "onLostPointerCapture" | "onMouseMove" | "onMouseOut" | "onMouseOver" | "onPlaying" | "onPointerMove" | "onPointerOut" | "onPointerOver" | "onProgress" | "onScroll" | "onSeeking" | "onStalled" | "onSuspend" | "onTimeUpdate" | "onTouchMove" | "onTransitionEnd" | "onWaiting" | "onWheel" | "onMouseEnter" | "onMouseLeave" | "onPointerEnter" | "onPointerLeave" | "onChange" | "onSelect" | "onBeforeInput" | "onCompositionEnd" | "onCompositionStart" | "onCompositionUpdate" | "id" | "dir" | "slot" | "key" | "fixed" | "target" | "tag" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "type" | "useMap" | "width" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopyCapture" | "onCutCapture" | "onPasteCapture" | "onCompositionEndCapture" | "onCompositionStartCapture" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInputCapture" | "onInputCapture" | "onResetCapture" | "onSubmitCapture" | "onInvalidCapture" | "onLoadCapture" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPressCapture" | "onKeyUpCapture" | "onAbortCapture" | "onCanPlayCapture" | "onCanPlayThroughCapture" | "onDurationChangeCapture" | "onEmptiedCapture" | "onEncryptedCapture" | "onEndedCapture" | "onLoadedDataCapture" | "onLoadedMetadataCapture" | "onLoadStartCapture" | "onPauseCapture" | "onPlayCapture" | "onPlayingCapture" | "onProgressCapture" | "onRateChangeCapture" | "onSeekedCapture" | "onSeekingCapture" | "onStalledCapture" | "onSuspendCapture" | "onTimeUpdateCapture" | "onVolumeChangeCapture" | "onWaitingCapture" | "onAuxClickCapture" | "onClickCapture" | "onContextMenuCapture" | "onDoubleClickCapture" | "onDragCapture" | "onDragEndCapture" | "onDragEnterCapture" | "onDragExitCapture" | "onDragLeaveCapture" | "onDragOverCapture" | "onDragStartCapture" | "onDropCapture" | "onMouseDownCapture" | "onMouseMoveCapture" | "onMouseOutCapture" | "onMouseOverCapture" | "onMouseUpCapture" | "onSelectCapture" | "onTouchCancelCapture" | "onTouchEndCapture" | "onTouchMoveCapture" | "onTouchStartCapture" | "onPointerDownCapture" | "onPointerMoveCapture" | "onPointerUpCapture" | "onPointerCancelCapture" | "onPointerEnterCapture" | "onPointerLeaveCapture" | "onPointerOverCapture" | "onPointerOutCapture" | "onGotPointerCaptureCapture" | "onLostPointerCaptureCapture" | "onScrollCapture" | "onWheelCapture" | "onAnimationStartCapture" | "onAnimationEndCapture" | "onAnimationIterationCapture" | "onTransitionEndCapture" | "onOpen" | "apiRef" | "hoistToBody" | "anchorCorner" | "focusOnOpen"> & React.RefAttributes<any>>;
+export declare const Menu: {
+    <Tag extends React.ElementType<any> = "div">(props: (MenuProps & {
+        tag?: Tag | undefined;
+        theme?: RMWC.ThemePropT;
+    } & Pick<React.AllHTMLAttributes<HTMLInputElement>, "onError" | "className" | "cite" | "data" | "form" | "label" | "span" | "style" | "summary" | "title" | "pattern" | "prefix" | "size" | "children" | "value" | "onBlur" | "onClick" | "onContextMenu" | "onCopy" | "onCut" | "onAuxClick" | "onDoubleClick" | "onDragEnd" | "onDragStart" | "onDrop" | "onFocus" | "onInput" | "onInvalid" | "onKeyDown" | "onKeyPress" | "onKeyUp" | "onMouseDown" | "onMouseUp" | "onPaste" | "onPause" | "onPlay" | "onPointerCancel" | "onPointerDown" | "onPointerUp" | "onRateChange" | "onReset" | "onSeeked" | "onSubmit" | "onTouchCancel" | "onTouchEnd" | "onTouchStart" | "onVolumeChange" | "onAbort" | "onAnimationEnd" | "onAnimationIteration" | "onAnimationStart" | "onCanPlay" | "onCanPlayThrough" | "onDrag" | "onDragEnter" | "onDragExit" | "onDragLeave" | "onDragOver" | "onDurationChange" | "onEmptied" | "onEncrypted" | "onEnded" | "onGotPointerCapture" | "onLoad" | "onLoadedData" | "onLoadedMetadata" | "onLoadStart" | "onLostPointerCapture" | "onMouseMove" | "onMouseOut" | "onMouseOver" | "onPlaying" | "onPointerMove" | "onPointerOut" | "onPointerOver" | "onProgress" | "onScroll" | "onSeeking" | "onStalled" | "onSuspend" | "onTimeUpdate" | "onTouchMove" | "onTransitionEnd" | "onWaiting" | "onWheel" | "onMouseEnter" | "onMouseLeave" | "onPointerEnter" | "onPointerLeave" | "onChange" | "onBeforeInput" | "onCompositionEnd" | "onCompositionStart" | "onCompositionUpdate" | "id" | "dir" | "slot" | "target" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "type" | "useMap" | "width" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopyCapture" | "onCutCapture" | "onPasteCapture" | "onCompositionEndCapture" | "onCompositionStartCapture" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInputCapture" | "onInputCapture" | "onResetCapture" | "onSubmitCapture" | "onInvalidCapture" | "onLoadCapture" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPressCapture" | "onKeyUpCapture" | "onAbortCapture" | "onCanPlayCapture" | "onCanPlayThroughCapture" | "onDurationChangeCapture" | "onEmptiedCapture" | "onEncryptedCapture" | "onEndedCapture" | "onLoadedDataCapture" | "onLoadedMetadataCapture" | "onLoadStartCapture" | "onPauseCapture" | "onPlayCapture" | "onPlayingCapture" | "onProgressCapture" | "onRateChangeCapture" | "onSeekedCapture" | "onSeekingCapture" | "onStalledCapture" | "onSuspendCapture" | "onTimeUpdateCapture" | "onVolumeChangeCapture" | "onWaitingCapture" | "onAuxClickCapture" | "onClickCapture" | "onContextMenuCapture" | "onDoubleClickCapture" | "onDragCapture" | "onDragEndCapture" | "onDragEnterCapture" | "onDragExitCapture" | "onDragLeaveCapture" | "onDragOverCapture" | "onDragStartCapture" | "onDropCapture" | "onMouseDownCapture" | "onMouseMoveCapture" | "onMouseOutCapture" | "onMouseOverCapture" | "onMouseUpCapture" | "onSelectCapture" | "onTouchCancelCapture" | "onTouchEndCapture" | "onTouchMoveCapture" | "onTouchStartCapture" | "onPointerDownCapture" | "onPointerMoveCapture" | "onPointerUpCapture" | "onPointerCancelCapture" | "onPointerEnterCapture" | "onPointerLeaveCapture" | "onPointerOverCapture" | "onPointerOutCapture" | "onGotPointerCaptureCapture" | "onLostPointerCaptureCapture" | "onScrollCapture" | "onWheelCapture" | "onAnimationStartCapture" | "onAnimationEndCapture" | "onAnimationIterationCapture" | "onTransitionEndCapture"> & React.ClassAttributes<HTMLInputElement> & {
+        tag?: string | React.ComponentClass<any, any> | React.FunctionComponent<any> | undefined;
+        theme?: RMWC.ThemePropT;
+        ref?: ((instance: any) => void) | React.RefObject<any> | null | undefined;
+    }) | (MenuProps & {
+        tag?: Tag | undefined;
+        theme?: RMWC.ThemePropT;
+    } & React.ComponentPropsWithRef<Tag>), ref: any): JSX.Element;
+    displayName: string;
+};
 /****************************************************************
@@ -40,0 +72,0 @@ * Simple Menu

dist/menu.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
-var react_1 = tslib_1.__importDefault(require("react"));
+var react_1 = tslib_1.__importStar(require("react"));
 var list_1 = require("@rmwc/list");
@@ -10,3 +10,3 @@ var base_1 = require("@rmwc/base");
 /** A wrapper for menu items */
-exports.MenuItems = react_1.default.forwardRef(function MenuItems(props, ref) {
+exports.MenuItems = base_1.createComponent(function MenuItems(props, ref) {
     var className = base_1.useClassNames(props, ['mdc-list mdc-menu__items']);
@@ -17,6 +17,5 @@ return react_1.default.createElement(list_1.List, tslib_1.__assign({ role: "menu" }, props, { className: className, ref: ref }));
 /** 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. */
-exports.MenuItem = react_1.default.forwardRef(function MenuItem(props, ref) {
+exports.MenuItem = base_1.createComponent(function MenuItem(props, ref) {
     return react_1.default.createElement(list_1.ListItem, tslib_1.__assign({ role: "menuitem", tabIndex: 0 }, props, { ref: ref }));
 });
-exports.MenuItem.displayName = 'MenuItem';
 var isMenuItems = function (child) {
@@ -26,3 +25,3 @@ return base_1.getDisplayName(child) === 'MenuItems';
 /** A menu component for displaying lists items. */
-exports.Menu = react_1.default.forwardRef(function Menu(props, ref) {
+exports.Menu = base_1.createComponent(function Menu(props, ref) {
     var children = props.children, focusOnOpen = props.focusOnOpen, onSelect = props.onSelect, rest = tslib_1.__rest(props, ["children", "focusOnOpen", "onSelect"]);
@@ -36,3 +35,3 @@ var _a = menu_foundation_1.useMenuFoundation(props), rootEl = _a.rootEl, setListApi = _a.setListApi, setMenuSurfaceApi = _a.setMenuSurfaceApi;
         if (isMenuItems(child)) {
-            return react_1.default.cloneElement(child, tslib_1.__assign(tslib_1.__assign({}, (react_1.default.isValidElement(child) && child.props)), menuItemsProps));
+            return react_1.default.cloneElement(child, tslib_1.__assign(tslib_1.__assign({}, (react_1.default.isValidElement(child) ? child.props : {})), menuItemsProps));
         }
@@ -42,46 +41,28 @@ return child;
 });
-exports.Menu.displayName = 'Menu';
-var simpleMenuFactory = function (MenuComponent) { var _a; return _a = /** @class */ (function (_super) {
-        tslib_1.__extends(class_1, _super);
-        function class_1() {
-            var _this = _super !== null && _super.apply(this, arguments) || this;
-            _this.state = {
-                open: !!_this.props.open
-            };
-            return _this;
-        }
-        class_1.prototype.componentDidMount = function () {
-            this.syncWithOpenProp(this.props.open);
-        };
-        class_1.prototype.componentDidUpdate = function (nextProps) {
-            this.syncWithOpenProp(nextProps.open);
-        };
-        class_1.prototype.syncWithOpenProp = function (open) {
-            if (open !== undefined && this.state.open !== open) {
-                this.setState({ open: open });
+var simpleMenuFactory = function (MenuComponent) {
+    return function (props) {
+        var _a = tslib_1.__read(react_1.useState(!!props.open), 2), stateOpen = _a[0], setStateOpen = _a[1];
+        react_1.useEffect(function () {
+            if (props.open !== undefined && props.open !== stateOpen) {
+                setStateOpen(!!props.open);
             }
-        };
-        class_1.prototype.render = function () {
-            var _this = this;
-            var _a = this.props, handle = _a.handle, onClose = _a.onClose, children = _a.children, _b = _a.rootProps, rootProps = _b === void 0 ? {} : _b, open = _a.open, rest = tslib_1.__rest(_a, ["handle", "onClose", "children", "rootProps", "open"]);
-            var wrappedHandle = react_1.default.cloneElement(handle, tslib_1.__assign(tslib_1.__assign({}, handle.props), { onClick: function (evt) {
-                    _this.setState({ open: !_this.state.open });
-                    if (handle.props.onClick) {
-                        handle.props.onClick(evt);
-                    }
-                } }));
-            var wrappedOnClose = function (evt) {
-                _this.setState({ open: !!open || false });
-                if (onClose) {
-                    onClose(evt);
+        }, [props.open, stateOpen]);
+        var handle = props.handle, onClose = props.onClose, children = props.children, _b = props.rootProps, rootProps = _b === void 0 ? {} : _b, open = props.open, rest = tslib_1.__rest(props, ["handle", "onClose", "children", "rootProps", "open"]);
+        var wrappedHandle = react_1.default.cloneElement(handle, tslib_1.__assign(tslib_1.__assign({}, handle.props), { onClick: function (evt) {
+                setStateOpen(!stateOpen);
+                if (handle.props.onClick) {
+                    handle.props.onClick(evt);
                 }
-            };
-            return (react_1.default.createElement(menu_surface_1.MenuSurfaceAnchor, tslib_1.__assign({}, rootProps),
-                react_1.default.createElement(MenuComponent, tslib_1.__assign({}, rest, { onClose: wrappedOnClose, open: this.state.open }), children),
-                wrappedHandle));
+            } }));
+        var wrappedOnClose = function (evt) {
+            var _a;
+            setStateOpen(!!open || false);
+            (_a = onClose) === null || _a === void 0 ? void 0 : _a(evt);
         };
-        return class_1;
-    }(react_1.default.Component)),
-    _a.displayName = 'Simple' + MenuComponent.displayName,
-    _a; };
+        var RenderMenuComponent = MenuComponent;
+        return (react_1.default.createElement(menu_surface_1.MenuSurfaceAnchor, tslib_1.__assign({}, rootProps),
+            react_1.default.createElement(RenderMenuComponent, tslib_1.__assign({}, rest, { onClose: wrappedOnClose, open: stateOpen }), children),
+            wrappedHandle));
+    };
+};
 /** A Simplified menu component that allows you to pass a handle element and will automatically control the open state and add a MenuSurfaceAnchor */
@@ -88,0 +69,0 @@ exports.SimpleMenu = simpleMenuFactory(exports.Menu);

dist/readme.js

@@ -17,3 +17,5 @@ "use strict";
             '@material/menu-surface/dist/mdc.menu-surface.css',
-            '@material/list/dist/mdc.list.css'
+            '@material/ripple/dist/mdc.ripple.css',
+            '@material/list/dist/mdc.list.css',
+            '@rmwc/icon/icon.css'
         ], docsLink: "https://material.io/develop/web/components/menus/", examples: generated_examples_json_1.default },
@@ -79,8 +81,8 @@ react_1.default.createElement(_doc_utils_1.DocsSubtitle, null, "Basic Usage"),
         react_1.default.createElement(_doc_utils_1.DocProps, { src: generated_props_json_1.default, components: [
-                _1.Menu,
-                _1.MenuItem,
-                _1.MenuSurface,
-                _1.MenuSurfaceAnchor,
-                _1.SimpleMenu,
-                _1.SimpleMenuSurface
+                { displayName: 'Menu', component: _1.Menu },
+                { displayName: 'MenuItem', component: _1.MenuItem },
+                { displayName: 'MenuSurface', component: _1.MenuSurface },
+                { displayName: 'MenuSurfaceAnchor', component: _1.MenuSurfaceAnchor },
+                { displayName: 'SimpleMenu', component: _1.SimpleMenu },
+                { displayName: 'SimpleMenuSurface', component: _1.SimpleMenuSurface }
             ] })));
@@ -87,0 +89,0 @@ }

generated-props.json

@@ -319,2 +319,27 @@ {
     },
+    "MenuSurfaceAnchorProps": {
+      "documentation": {
+        "contents": [
+          "<p>MenuSurfaceAnchor</p>\n"
+        ],
+        "contentsRaw": "MenuSurfaceAnchor",
+        "metadata": {}
+      },
+      "fileName": "src/menu/menu-surface.tsx",
+      "flags": {
+        "isExported": true,
+        "isExternal": false,
+        "isOptional": false,
+        "isPrivate": false,
+        "isProtected": false,
+        "isPublic": false,
+        "isRest": false,
+        "isStatic": false
+      },
+      "kind": "interface",
+      "name": "MenuSurfaceAnchorProps",
+      "sourceUrl": "https://github.com/jamesmfriedman/rmwc/blob/master/src/menu/menu-surface.tsx#L86",
+      "methods": [],
+      "properties": []
+    },
     "MenuApi": {
@@ -334,3 +359,3 @@ "fileName": "src/menu/menu.tsx",
       "name": "MenuApi",
-      "sourceUrl": "https://github.com/jamesmfriedman/rmwc/blob/master/src/menu/menu.tsx#L25",
+      "sourceUrl": "https://github.com/jamesmfriedman/rmwc/blob/master/src/menu/menu.tsx#L30",
       "extends": [
@@ -477,3 +502,3 @@ "ListApi",
           "name": "items",
-          "sourceUrl": "https://github.com/jamesmfriedman/rmwc/blob/master/src/menu/menu.tsx#L26",
+          "sourceUrl": "https://github.com/jamesmfriedman/rmwc/blob/master/src/menu/menu.tsx#L31",
           "type": "() => HTMLLIElement[]"
@@ -609,3 +634,3 @@ },
       "name": "MenuProps",
-      "sourceUrl": "https://github.com/jamesmfriedman/rmwc/blob/master/src/menu/menu.tsx#L30",
+      "sourceUrl": "https://github.com/jamesmfriedman/rmwc/blob/master/src/menu/menu.tsx#L35",
       "extends": [
@@ -637,3 +662,3 @@ "any"
           "name": "apiRef",
-          "sourceUrl": "https://github.com/jamesmfriedman/rmwc/blob/master/src/menu/menu.tsx#L36",
+          "sourceUrl": "https://github.com/jamesmfriedman/rmwc/blob/master/src/menu/menu.tsx#L41",
           "type": "undefined | (api: MenuApi) => void"
@@ -662,3 +687,3 @@ },
           "name": "focusOnOpen",
-          "sourceUrl": "https://github.com/jamesmfriedman/rmwc/blob/master/src/menu/menu.tsx#L34",
+          "sourceUrl": "https://github.com/jamesmfriedman/rmwc/blob/master/src/menu/menu.tsx#L39",
           "type": "undefined | false | true"
@@ -687,3 +712,3 @@ },
           "name": "onSelect",
-          "sourceUrl": "https://github.com/jamesmfriedman/rmwc/blob/master/src/menu/menu.tsx#L32",
+          "sourceUrl": "https://github.com/jamesmfriedman/rmwc/blob/master/src/menu/menu.tsx#L37",
           "type": "undefined | (evt: MenuOnSelectEventT) => void"
@@ -714,3 +739,3 @@ }
       "name": "MenuItemsProps",
-      "sourceUrl": "https://github.com/jamesmfriedman/rmwc/blob/master/src/menu/menu.tsx#L40",
+      "sourceUrl": "https://github.com/jamesmfriedman/rmwc/blob/master/src/menu/menu.tsx#L50",
       "extends": [
@@ -888,3 +913,3 @@ "ListProps"
       "name": "MenuItemProps",
-      "sourceUrl": "https://github.com/jamesmfriedman/rmwc/blob/master/src/menu/menu.tsx#L53",
+      "sourceUrl": "https://github.com/jamesmfriedman/rmwc/blob/master/src/menu/menu.tsx#L63",
       "extends": [
@@ -1014,3 +1039,3 @@ "ListItemProps"
       "name": "SimpleMenuProps",
-      "sourceUrl": "https://github.com/jamesmfriedman/rmwc/blob/master/src/menu/menu.tsx#L114",
+      "sourceUrl": "https://github.com/jamesmfriedman/rmwc/blob/master/src/menu/menu.tsx#L122",
       "extends": [
@@ -1042,3 +1067,3 @@ "MenuProps"
           "name": "apiRef",
-          "sourceUrl": "https://github.com/jamesmfriedman/rmwc/blob/master/src/menu/menu.tsx#L36",
+          "sourceUrl": "https://github.com/jamesmfriedman/rmwc/blob/master/src/menu/menu.tsx#L41",
           "inheritedFrom": "MenuProps.apiRef",
@@ -1068,3 +1093,3 @@ "type": "undefined | (api: MenuApi) => void"
           "name": "children",
-          "sourceUrl": "https://github.com/jamesmfriedman/rmwc/blob/master/src/menu/menu.tsx#L120",
+          "sourceUrl": "https://github.com/jamesmfriedman/rmwc/blob/master/src/menu/menu.tsx#L128",
           "type": "React.ReactNode"
@@ -1093,3 +1118,3 @@ },
           "name": "focusOnOpen",
-          "sourceUrl": "https://github.com/jamesmfriedman/rmwc/blob/master/src/menu/menu.tsx#L34",
+          "sourceUrl": "https://github.com/jamesmfriedman/rmwc/blob/master/src/menu/menu.tsx#L39",
           "inheritedFrom": "MenuProps.focusOnOpen",
@@ -1119,3 +1144,3 @@ "type": "undefined | false | true"
           "name": "handle",
-          "sourceUrl": "https://github.com/jamesmfriedman/rmwc/blob/master/src/menu/menu.tsx#L116",
+          "sourceUrl": "https://github.com/jamesmfriedman/rmwc/blob/master/src/menu/menu.tsx#L124",
           "type": "ReactElement<any>"
@@ -1144,3 +1169,3 @@ },
           "name": "onSelect",
-          "sourceUrl": "https://github.com/jamesmfriedman/rmwc/blob/master/src/menu/menu.tsx#L32",
+          "sourceUrl": "https://github.com/jamesmfriedman/rmwc/blob/master/src/menu/menu.tsx#L37",
           "inheritedFrom": "MenuProps.onSelect",
@@ -1170,3 +1195,3 @@ "type": "undefined | (evt: MenuOnSelectEventT) => void"
           "name": "rootProps",
-          "sourceUrl": "https://github.com/jamesmfriedman/rmwc/blob/master/src/menu/menu.tsx#L118",
+          "sourceUrl": "https://github.com/jamesmfriedman/rmwc/blob/master/src/menu/menu.tsx#L126",
           "type": "Object"
@@ -1197,3 +1222,3 @@ }
       "name": "SimpleMenuSurfaceProps",
-      "sourceUrl": "https://github.com/jamesmfriedman/rmwc/blob/master/src/menu/menu.tsx#L124",
+      "sourceUrl": "https://github.com/jamesmfriedman/rmwc/blob/master/src/menu/menu.tsx#L132",
       "extends": [
@@ -1275,3 +1300,3 @@ "MenuSurfaceProps"
           "name": "children",
-          "sourceUrl": "https://github.com/jamesmfriedman/rmwc/blob/master/src/menu/menu.tsx#L130",
+          "sourceUrl": "https://github.com/jamesmfriedman/rmwc/blob/master/src/menu/menu.tsx#L138",
           "type": "React.ReactNode"
@@ -1325,3 +1350,3 @@ },
           "name": "handle",
-          "sourceUrl": "https://github.com/jamesmfriedman/rmwc/blob/master/src/menu/menu.tsx#L126",
+          "sourceUrl": "https://github.com/jamesmfriedman/rmwc/blob/master/src/menu/menu.tsx#L134",
           "type": "ReactElement<any>"
@@ -1450,3 +1475,3 @@ },
           "name": "rootProps",
-          "sourceUrl": "https://github.com/jamesmfriedman/rmwc/blob/master/src/menu/menu.tsx#L128",
+          "sourceUrl": "https://github.com/jamesmfriedman/rmwc/blob/master/src/menu/menu.tsx#L136",
           "type": "Object"
@@ -1470,3 +1495,3 @@ }
       "name": "SimpleMenuState",
-      "sourceUrl": "https://github.com/jamesmfriedman/rmwc/blob/master/src/menu/menu.tsx#L133",
+      "sourceUrl": "https://github.com/jamesmfriedman/rmwc/blob/master/src/menu/menu.tsx#L141",
       "methods": [],
@@ -1488,3 +1513,3 @@ "properties": [
           "name": "open",
-          "sourceUrl": "https://github.com/jamesmfriedman/rmwc/blob/master/src/menu/menu.tsx#L134",
+          "sourceUrl": "https://github.com/jamesmfriedman/rmwc/blob/master/src/menu/menu.tsx#L142",
           "type": "boolean"
@@ -1566,6 +1591,23 @@ }
       "name": "MenuOnSelectEventT",
-      "sourceUrl": "https://github.com/jamesmfriedman/rmwc/blob/master/src/menu/menu.tsx#L20",
+      "sourceUrl": "https://github.com/jamesmfriedman/rmwc/blob/master/src/menu/menu.tsx#L25",
       "type": "RMWC.CustomEventT<>"
+    },
+    "MenuHTMLProps": {
+      "fileName": "src/menu/menu.tsx",
+      "flags": {
+        "isExported": true,
+        "isExternal": false,
+        "isOptional": false,
+        "isPrivate": false,
+        "isProtected": false,
+        "isPublic": false,
+        "isRest": false,
+        "isStatic": false
+      },
+      "kind": "type alias",
+      "name": "MenuHTMLProps",
+      "sourceUrl": "https://github.com/jamesmfriedman/rmwc/blob/master/src/menu/menu.tsx#L44",
+      "type": "RMWC.HTMLProps<HTMLInputElement, Omit<AllHTMLAttributes<HTMLInputElement>, \"onSelect\">>"
     }
   }
 }

next/menu-foundation.d.ts

@@ -131,3 +131,3 @@ /// <reference types="react" />
         className?: string | undefined;
-        contentEditable?: boolean | "true" | "false" | "inherit" | undefined;
+        contentEditable?: boolean | "inherit" | "true" | "false" | undefined;
         contextMenu?: string | undefined;
@@ -144,3 +144,3 @@ dir?: string | undefined;
         title?: string | undefined;
-        translate?: "yes" | "no" | undefined;
+        translate?: "no" | "yes" | undefined;
         radioGroup?: string | undefined;
@@ -147,0 +147,0 @@ role?: string | undefined;

next/menu-surface-foundation.js

@@ -244,4 +244,5 @@ import { __assign, __read, __rest } from "tslib";
         };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     return __assign({}, elements);
 };

next/menu-surface.d.ts

@@ -36,10 +36,27 @@ import * as RMWC from '@rmwc/types';
 /** A generic menu component for displaying any type of content. */
-export declare const MenuSurface: React.ForwardRefExoticComponent<Pick<MenuSurfaceProps & RMWC.ComponentProps, "onError" | "className" | "prefix" | "size" | "children" | "value" | "cite" | "data" | "form" | "label" | "span" | "style" | "summary" | "title" | "pattern" | "theme" | "onBlur" | "onClick" | "onClose" | "onContextMenu" | "onCopy" | "onCut" | "onAuxClick" | "onDoubleClick" | "onDragEnd" | "onDragStart" | "onDrop" | "onFocus" | "onInput" | "onInvalid" | "onKeyDown" | "onKeyPress" | "onKeyUp" | "onMouseDown" | "onMouseUp" | "onPaste" | "onPause" | "onPlay" | "onPointerCancel" | "onPointerDown" | "onPointerUp" | "onRateChange" | "onReset" | "onSeeked" | "onSubmit" | "onTouchCancel" | "onTouchEnd" | "onTouchStart" | "onVolumeChange" | "onAbort" | "onAnimationEnd" | "onAnimationIteration" | "onAnimationStart" | "onCanPlay" | "onCanPlayThrough" | "onDrag" | "onDragEnter" | "onDragExit" | "onDragLeave" | "onDragOver" | "onDurationChange" | "onEmptied" | "onEncrypted" | "onEnded" | "onGotPointerCapture" | "onLoad" | "onLoadedData" | "onLoadedMetadata" | "onLoadStart" | "onLostPointerCapture" | "onMouseMove" | "onMouseOut" | "onMouseOver" | "onPlaying" | "onPointerMove" | "onPointerOut" | "onPointerOver" | "onProgress" | "onScroll" | "onSeeking" | "onStalled" | "onSuspend" | "onTimeUpdate" | "onTouchMove" | "onTransitionEnd" | "onWaiting" | "onWheel" | "onMouseEnter" | "onMouseLeave" | "onPointerEnter" | "onPointerLeave" | "onChange" | "onSelect" | "onBeforeInput" | "onCompositionEnd" | "onCompositionStart" | "onCompositionUpdate" | "id" | "dir" | "slot" | "key" | "fixed" | "target" | "tag" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "type" | "useMap" | "width" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopyCapture" | "onCutCapture" | "onPasteCapture" | "onCompositionEndCapture" | "onCompositionStartCapture" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInputCapture" | "onInputCapture" | "onResetCapture" | "onSubmitCapture" | "onInvalidCapture" | "onLoadCapture" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPressCapture" | "onKeyUpCapture" | "onAbortCapture" | "onCanPlayCapture" | "onCanPlayThroughCapture" | "onDurationChangeCapture" | "onEmptiedCapture" | "onEncryptedCapture" | "onEndedCapture" | "onLoadedDataCapture" | "onLoadedMetadataCapture" | "onLoadStartCapture" | "onPauseCapture" | "onPlayCapture" | "onPlayingCapture" | "onProgressCapture" | "onRateChangeCapture" | "onSeekedCapture" | "onSeekingCapture" | "onStalledCapture" | "onSuspendCapture" | "onTimeUpdateCapture" | "onVolumeChangeCapture" | "onWaitingCapture" | "onAuxClickCapture" | "onClickCapture" | "onContextMenuCapture" | "onDoubleClickCapture" | "onDragCapture" | "onDragEndCapture" | "onDragEnterCapture" | "onDragExitCapture" | "onDragLeaveCapture" | "onDragOverCapture" | "onDragStartCapture" | "onDropCapture" | "onMouseDownCapture" | "onMouseMoveCapture" | "onMouseOutCapture" | "onMouseOverCapture" | "onMouseUpCapture" | "onSelectCapture" | "onTouchCancelCapture" | "onTouchEndCapture" | "onTouchMoveCapture" | "onTouchStartCapture" | "onPointerDownCapture" | "onPointerMoveCapture" | "onPointerUpCapture" | "onPointerCancelCapture" | "onPointerEnterCapture" | "onPointerLeaveCapture" | "onPointerOverCapture" | "onPointerOutCapture" | "onGotPointerCaptureCapture" | "onLostPointerCaptureCapture" | "onScrollCapture" | "onWheelCapture" | "onAnimationStartCapture" | "onAnimationEndCapture" | "onAnimationIterationCapture" | "onTransitionEndCapture" | "onOpen" | "apiRef" | "hoistToBody" | "anchorCorner"> & React.RefAttributes<any>>;
+export declare const MenuSurface: {
+    <Tag extends React.ElementType<any> = "div">(props: (MenuSurfaceProps & {
+        tag?: Tag | undefined;
+        theme?: RMWC.ThemePropT;
+    } & React.HTMLProps<HTMLDivElement>) | (MenuSurfaceProps & {
+        tag?: Tag | undefined;
+        theme?: RMWC.ThemePropT;
+    } & React.ComponentPropsWithRef<Tag>), ref: any): JSX.Element;
+    displayName: string;
+};
 /****************************************************************
  * MenuSurfaceAnchor
  ****************************************************************/
+export interface MenuSurfaceAnchorProps {
+}
 /** A Menu Anchor. When using the anchorCorner prop of Menu, you must set MenuSurfaceAnchors css style position to absolute. */
-export declare function MenuSurfaceAnchor(props: RMWC.ComponentProps): JSX.Element;
-export declare namespace MenuSurfaceAnchor {
-    var displayName: string;
-}
+export declare const MenuSurfaceAnchor: {
+    <Tag extends React.ElementType<any> = "div">(props: (MenuSurfaceAnchorProps & {
+        tag?: Tag | undefined;
+        theme?: RMWC.ThemePropT;
+    } & React.HTMLProps<HTMLDivElement>) | (MenuSurfaceAnchorProps & {
+        tag?: Tag | undefined;
+        theme?: RMWC.ThemePropT;
+    } & React.ComponentPropsWithRef<Tag>), ref: any): JSX.Element;
+    displayName: string;
+};

next/menu-surface.js

 import { __assign, __rest } from "tslib";
 import React from 'react';
-import { useClassNames, Tag } from '@rmwc/base';
+import { useClassNames, Tag, createComponent } from '@rmwc/base';
 import { useMenuSurfaceFoundation } from './menu-surface-foundation';
@@ -9,3 +9,3 @@ /****************************************************************
 /** A generic menu component for displaying any type of content. */
-export var MenuSurface = React.forwardRef(function MenuSurface(props, ref) {
+export var MenuSurface = createComponent(function MenuSurface(props, ref) {
     var children = props.children, open = props.open, anchorCorner = props.anchorCorner, onOpen = props.onOpen, onClose = props.onClose, hoistToBody = props.hoistToBody, fixed = props.fixed, apiRef = props.apiRef, rest = __rest(props, ["children", "open", "anchorCorner", "onOpen", "onClose", "hoistToBody", "fixed", "apiRef"]);
@@ -21,11 +21,6 @@ var rootEl = useMenuSurfaceFoundation(props).rootEl;
 });
-MenuSurface.displayName = 'MenuSurface';
-/****************************************************************
- * MenuSurfaceAnchor
- ****************************************************************/
 /** A Menu Anchor. When using the anchorCorner prop of Menu, you must set MenuSurfaceAnchors css style position to absolute. */
-export function MenuSurfaceAnchor(props) {
+export var MenuSurfaceAnchor = createComponent(function MenuSurfaceAnchor(props, ref) {
     var className = useClassNames(props, ['mdc-menu-surface--anchor']);
-    return React.createElement(Tag, __assign({}, props, { className: className }));
-}
-MenuSurfaceAnchor.displayName = 'MenuSurfaceAnchor';
+    return React.createElement(Tag, __assign({}, props, { className: className, ref: ref }));
+});

next/menu.d.ts

@@ -24,2 +24,3 @@ import * as RMWC from '@rmwc/types';
 }
+export declare type MenuHTMLProps = RMWC.HTMLProps<HTMLInputElement, Omit<React.AllHTMLAttributes<HTMLInputElement>, 'onSelect'>>;
 /** A wrapper for menu items */
@@ -29,3 +30,12 @@ export interface MenuItemsProps extends ListProps {
 /** A wrapper for menu items */
-export declare const MenuItems: React.ForwardRefExoticComponent<Pick<MenuItemsProps & RMWC.ComponentProps, "onError" | "className" | "prefix" | "size" | "children" | "value" | "cite" | "data" | "form" | "label" | "span" | "style" | "summary" | "title" | "pattern" | "theme" | "onBlur" | "onClick" | "onContextMenu" | "onCopy" | "onCut" | "onAuxClick" | "onDoubleClick" | "onDragEnd" | "onDragStart" | "onDrop" | "onFocus" | "onInput" | "onInvalid" | "onKeyDown" | "onKeyPress" | "onKeyUp" | "onMouseDown" | "onMouseUp" | "onPaste" | "onPause" | "onPlay" | "onPointerCancel" | "onPointerDown" | "onPointerUp" | "onRateChange" | "onReset" | "onSeeked" | "onSubmit" | "onTouchCancel" | "onTouchEnd" | "onTouchStart" | "onVolumeChange" | "onAbort" | "onAnimationEnd" | "onAnimationIteration" | "onAnimationStart" | "onCanPlay" | "onCanPlayThrough" | "onDrag" | "onDragEnter" | "onDragExit" | "onDragLeave" | "onDragOver" | "onDurationChange" | "onEmptied" | "onEncrypted" | "onEnded" | "onGotPointerCapture" | "onLoad" | "onLoadedData" | "onLoadedMetadata" | "onLoadStart" | "onLostPointerCapture" | "onMouseMove" | "onMouseOut" | "onMouseOver" | "onPlaying" | "onPointerMove" | "onPointerOut" | "onPointerOver" | "onProgress" | "onScroll" | "onSeeking" | "onStalled" | "onSuspend" | "onTimeUpdate" | "onTouchMove" | "onTransitionEnd" | "onWaiting" | "onWheel" | "onMouseEnter" | "onMouseLeave" | "onPointerEnter" | "onPointerLeave" | "onChange" | "onSelect" | "onBeforeInput" | "onCompositionEnd" | "onCompositionStart" | "onCompositionUpdate" | "id" | "dir" | "slot" | "key" | "target" | "tag" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "type" | "useMap" | "width" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopyCapture" | "onCutCapture" | "onPasteCapture" | "onCompositionEndCapture" | "onCompositionStartCapture" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInputCapture" | "onInputCapture" | "onResetCapture" | "onSubmitCapture" | "onInvalidCapture" | "onLoadCapture" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPressCapture" | "onKeyUpCapture" | "onAbortCapture" | "onCanPlayCapture" | "onCanPlayThroughCapture" | "onDurationChangeCapture" | "onEmptiedCapture" | "onEncryptedCapture" | "onEndedCapture" | "onLoadedDataCapture" | "onLoadedMetadataCapture" | "onLoadStartCapture" | "onPauseCapture" | "onPlayCapture" | "onPlayingCapture" | "onProgressCapture" | "onRateChangeCapture" | "onSeekedCapture" | "onSeekingCapture" | "onStalledCapture" | "onSuspendCapture" | "onTimeUpdateCapture" | "onVolumeChangeCapture" | "onWaitingCapture" | "onAuxClickCapture" | "onClickCapture" | "onContextMenuCapture" | "onDoubleClickCapture" | "onDragCapture" | "onDragEndCapture" | "onDragEnterCapture" | "onDragExitCapture" | "onDragLeaveCapture" | "onDragOverCapture" | "onDragStartCapture" | "onDropCapture" | "onMouseDownCapture" | "onMouseMoveCapture" | "onMouseOutCapture" | "onMouseOverCapture" | "onMouseUpCapture" | "onSelectCapture" | "onTouchCancelCapture" | "onTouchEndCapture" | "onTouchMoveCapture" | "onTouchStartCapture" | "onPointerDownCapture" | "onPointerMoveCapture" | "onPointerUpCapture" | "onPointerCancelCapture" | "onPointerEnterCapture" | "onPointerLeaveCapture" | "onPointerOverCapture" | "onPointerOutCapture" | "onGotPointerCaptureCapture" | "onLostPointerCaptureCapture" | "onScrollCapture" | "onWheelCapture" | "onAnimationStartCapture" | "onAnimationEndCapture" | "onAnimationIterationCapture" | "onTransitionEndCapture" | "dense" | "apiRef" | "twoLine" | "avatarList" | "nonInteractive" | "onAction"> & React.RefAttributes<any>>;
+export declare const MenuItems: {
+    <Tag extends React.ElementType<any> = "div">(props: (MenuItemsProps & {
+        tag?: Tag | undefined;
+        theme?: RMWC.ThemePropT;
+    } & React.HTMLProps<HTMLDivElement>) | (MenuItemsProps & {
+        tag?: Tag | undefined;
+        theme?: RMWC.ThemePropT;
+    } & React.ComponentPropsWithRef<Tag>), ref: any): JSX.Element;
+    displayName: string;
+};
 /** 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. */
@@ -35,5 +45,27 @@ export interface MenuItemProps extends ListItemProps {
 /** 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. */
-export declare const MenuItem: React.ForwardRefExoticComponent<Pick<MenuItemProps & RMWC.ComponentProps, "onError" | "className" | "prefix" | "size" | "children" | "ripple" | "value" | "cite" | "data" | "form" | "label" | "span" | "style" | "summary" | "title" | "pattern" | "theme" | "onBlur" | "onClick" | "onContextMenu" | "onCopy" | "onCut" | "onAuxClick" | "onDoubleClick" | "onDragEnd" | "onDragStart" | "onDrop" | "onFocus" | "onInput" | "onInvalid" | "onKeyDown" | "onKeyPress" | "onKeyUp" | "onMouseDown" | "onMouseUp" | "onPaste" | "onPause" | "onPlay" | "onPointerCancel" | "onPointerDown" | "onPointerUp" | "onRateChange" | "onReset" | "onSeeked" | "onSubmit" | "onTouchCancel" | "onTouchEnd" | "onTouchStart" | "onVolumeChange" | "onAbort" | "onAnimationEnd" | "onAnimationIteration" | "onAnimationStart" | "onCanPlay" | "onCanPlayThrough" | "onDrag" | "onDragEnter" | "onDragExit" | "onDragLeave" | "onDragOver" | "onDurationChange" | "onEmptied" | "onEncrypted" | "onEnded" | "onGotPointerCapture" | "onLoad" | "onLoadedData" | "onLoadedMetadata" | "onLoadStart" | "onLostPointerCapture" | "onMouseMove" | "onMouseOut" | "onMouseOver" | "onPlaying" | "onPointerMove" | "onPointerOut" | "onPointerOver" | "onProgress" | "onScroll" | "onSeeking" | "onStalled" | "onSuspend" | "onTimeUpdate" | "onTouchMove" | "onTransitionEnd" | "onWaiting" | "onWheel" | "onMouseEnter" | "onMouseLeave" | "onPointerEnter" | "onPointerLeave" | "onChange" | "onSelect" | "onBeforeInput" | "onCompositionEnd" | "onCompositionStart" | "onCompositionUpdate" | "id" | "dir" | "slot" | "key" | "target" | "tag" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "type" | "useMap" | "width" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopyCapture" | "onCutCapture" | "onPasteCapture" | "onCompositionEndCapture" | "onCompositionStartCapture" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInputCapture" | "onInputCapture" | "onResetCapture" | "onSubmitCapture" | "onInvalidCapture" | "onLoadCapture" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPressCapture" | "onKeyUpCapture" | "onAbortCapture" | "onCanPlayCapture" | "onCanPlayThroughCapture" | "onDurationChangeCapture" | "onEmptiedCapture" | "onEncryptedCapture" | "onEndedCapture" | "onLoadedDataCapture" | "onLoadedMetadataCapture" | "onLoadStartCapture" | "onPauseCapture" | "onPlayCapture" | "onPlayingCapture" | "onProgressCapture" | "onRateChangeCapture" | "onSeekedCapture" | "onSeekingCapture" | "onStalledCapture" | "onSuspendCapture" | "onTimeUpdateCapture" | "onVolumeChangeCapture" | "onWaitingCapture" | "onAuxClickCapture" | "onClickCapture" | "onContextMenuCapture" | "onDoubleClickCapture" | "onDragCapture" | "onDragEndCapture" | "onDragEnterCapture" | "onDragExitCapture" | "onDragLeaveCapture" | "onDragOverCapture" | "onDragStartCapture" | "onDropCapture" | "onMouseDownCapture" | "onMouseMoveCapture" | "onMouseOutCapture" | "onMouseOverCapture" | "onMouseUpCapture" | "onSelectCapture" | "onTouchCancelCapture" | "onTouchEndCapture" | "onTouchMoveCapture" | "onTouchStartCapture" | "onPointerDownCapture" | "onPointerMoveCapture" | "onPointerUpCapture" | "onPointerCancelCapture" | "onPointerEnterCapture" | "onPointerLeaveCapture" | "onPointerOverCapture" | "onPointerOutCapture" | "onGotPointerCaptureCapture" | "onLostPointerCaptureCapture" | "onScrollCapture" | "onWheelCapture" | "onAnimationStartCapture" | "onAnimationEndCapture" | "onAnimationIterationCapture" | "onTransitionEndCapture" | "activated"> & React.RefAttributes<any>>;
+export declare const MenuItem: {
+    <Tag extends React.ElementType<any> = "div">(props: (MenuItemProps & {
+        tag?: Tag | undefined;
+        theme?: RMWC.ThemePropT;
+    } & React.HTMLProps<HTMLDivElement>) | (MenuItemProps & {
+        tag?: Tag | undefined;
+        theme?: RMWC.ThemePropT;
+    } & React.ComponentPropsWithRef<Tag>), ref: any): JSX.Element;
+    displayName: string;
+};
 /** A menu component for displaying lists items. */
-export declare const Menu: React.ForwardRefExoticComponent<Pick<MenuProps & Pick<RMWC.ComponentProps, "onError" | "className" | "prefix" | "size" | "children" | "value" | "ref" | "cite" | "data" | "form" | "label" | "span" | "style" | "summary" | "title" | "pattern" | "theme" | "onBlur" | "onClick" | "onContextMenu" | "onCopy" | "onCut" | "onAuxClick" | "onDoubleClick" | "onDragEnd" | "onDragStart" | "onDrop" | "onFocus" | "onInput" | "onInvalid" | "onKeyDown" | "onKeyPress" | "onKeyUp" | "onMouseDown" | "onMouseUp" | "onPaste" | "onPause" | "onPlay" | "onPointerCancel" | "onPointerDown" | "onPointerUp" | "onRateChange" | "onReset" | "onSeeked" | "onSubmit" | "onTouchCancel" | "onTouchEnd" | "onTouchStart" | "onVolumeChange" | "onAbort" | "onAnimationEnd" | "onAnimationIteration" | "onAnimationStart" | "onCanPlay" | "onCanPlayThrough" | "onDrag" | "onDragEnter" | "onDragExit" | "onDragLeave" | "onDragOver" | "onDurationChange" | "onEmptied" | "onEncrypted" | "onEnded" | "onGotPointerCapture" | "onLoad" | "onLoadedData" | "onLoadedMetadata" | "onLoadStart" | "onLostPointerCapture" | "onMouseMove" | "onMouseOut" | "onMouseOver" | "onPlaying" | "onPointerMove" | "onPointerOut" | "onPointerOver" | "onProgress" | "onScroll" | "onSeeking" | "onStalled" | "onSuspend" | "onTimeUpdate" | "onTouchMove" | "onTransitionEnd" | "onWaiting" | "onWheel" | "onMouseEnter" | "onMouseLeave" | "onPointerEnter" | "onPointerLeave" | "onChange" | "onBeforeInput" | "onCompositionEnd" | "onCompositionStart" | "onCompositionUpdate" | "id" | "dir" | "slot" | "key" | "target" | "tag" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "type" | "useMap" | "width" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopyCapture" | "onCutCapture" | "onPasteCapture" | "onCompositionEndCapture" | "onCompositionStartCapture" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInputCapture" | "onInputCapture" | "onResetCapture" | "onSubmitCapture" | "onInvalidCapture" | "onLoadCapture" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPressCapture" | "onKeyUpCapture" | "onAbortCapture" | "onCanPlayCapture" | "onCanPlayThroughCapture" | "onDurationChangeCapture" | "onEmptiedCapture" | "onEncryptedCapture" | "onEndedCapture" | "onLoadedDataCapture" | "onLoadedMetadataCapture" | "onLoadStartCapture" | "onPauseCapture" | "onPlayCapture" | "onPlayingCapture" | "onProgressCapture" | "onRateChangeCapture" | "onSeekedCapture" | "onSeekingCapture" | "onStalledCapture" | "onSuspendCapture" | "onTimeUpdateCapture" | "onVolumeChangeCapture" | "onWaitingCapture" | "onAuxClickCapture" | "onClickCapture" | "onContextMenuCapture" | "onDoubleClickCapture" | "onDragCapture" | "onDragEndCapture" | "onDragEnterCapture" | "onDragExitCapture" | "onDragLeaveCapture" | "onDragOverCapture" | "onDragStartCapture" | "onDropCapture" | "onMouseDownCapture" | "onMouseMoveCapture" | "onMouseOutCapture" | "onMouseOverCapture" | "onMouseUpCapture" | "onSelectCapture" | "onTouchCancelCapture" | "onTouchEndCapture" | "onTouchMoveCapture" | "onTouchStartCapture" | "onPointerDownCapture" | "onPointerMoveCapture" | "onPointerUpCapture" | "onPointerCancelCapture" | "onPointerEnterCapture" | "onPointerLeaveCapture" | "onPointerOverCapture" | "onPointerOutCapture" | "onGotPointerCaptureCapture" | "onLostPointerCaptureCapture" | "onScrollCapture" | "onWheelCapture" | "onAnimationStartCapture" | "onAnimationEndCapture" | "onAnimationIterationCapture" | "onTransitionEndCapture">, "onError" | "className" | "prefix" | "size" | "children" | "value" | "cite" | "data" | "form" | "label" | "span" | "style" | "summary" | "title" | "pattern" | "theme" | "onBlur" | "onClick" | "onClose" | "onContextMenu" | "onCopy" | "onCut" | "onAuxClick" | "onDoubleClick" | "onDragEnd" | "onDragStart" | "onDrop" | "onFocus" | "onInput" | "onInvalid" | "onKeyDown" | "onKeyPress" | "onKeyUp" | "onMouseDown" | "onMouseUp" | "onPaste" | "onPause" | "onPlay" | "onPointerCancel" | "onPointerDown" | "onPointerUp" | "onRateChange" | "onReset" | "onSeeked" | "onSubmit" | "onTouchCancel" | "onTouchEnd" | "onTouchStart" | "onVolumeChange" | "onAbort" | "onAnimationEnd" | "onAnimationIteration" | "onAnimationStart" | "onCanPlay" | "onCanPlayThrough" | "onDrag" | "onDragEnter" | "onDragExit" | "onDragLeave" | "onDragOver" | "onDurationChange" | "onEmptied" | "onEncrypted" | "onEnded" | "onGotPointerCapture" | "onLoad" | "onLoadedData" | "onLoadedMetadata" | "onLoadStart" | "onLostPointerCapture" | "onMouseMove" | "onMouseOut" | "onMouseOver" | "onPlaying" | "onPointerMove" | "onPointerOut" | "onPointerOver" | "onProgress" | "onScroll" | "onSeeking" | "onStalled" | "onSuspend" | "onTimeUpdate" | "onTouchMove" | "onTransitionEnd" | "onWaiting" | "onWheel" | "onMouseEnter" | "onMouseLeave" | "onPointerEnter" | "onPointerLeave" | "onChange" | "onSelect" | "onBeforeInput" | "onCompositionEnd" | "onCompositionStart" | "onCompositionUpdate" | "id" | "dir" | "slot" | "key" | "fixed" | "target" | "tag" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "type" | "useMap" | "width" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopyCapture" | "onCutCapture" | "onPasteCapture" | "onCompositionEndCapture" | "onCompositionStartCapture" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInputCapture" | "onInputCapture" | "onResetCapture" | "onSubmitCapture" | "onInvalidCapture" | "onLoadCapture" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPressCapture" | "onKeyUpCapture" | "onAbortCapture" | "onCanPlayCapture" | "onCanPlayThroughCapture" | "onDurationChangeCapture" | "onEmptiedCapture" | "onEncryptedCapture" | "onEndedCapture" | "onLoadedDataCapture" | "onLoadedMetadataCapture" | "onLoadStartCapture" | "onPauseCapture" | "onPlayCapture" | "onPlayingCapture" | "onProgressCapture" | "onRateChangeCapture" | "onSeekedCapture" | "onSeekingCapture" | "onStalledCapture" | "onSuspendCapture" | "onTimeUpdateCapture" | "onVolumeChangeCapture" | "onWaitingCapture" | "onAuxClickCapture" | "onClickCapture" | "onContextMenuCapture" | "onDoubleClickCapture" | "onDragCapture" | "onDragEndCapture" | "onDragEnterCapture" | "onDragExitCapture" | "onDragLeaveCapture" | "onDragOverCapture" | "onDragStartCapture" | "onDropCapture" | "onMouseDownCapture" | "onMouseMoveCapture" | "onMouseOutCapture" | "onMouseOverCapture" | "onMouseUpCapture" | "onSelectCapture" | "onTouchCancelCapture" | "onTouchEndCapture" | "onTouchMoveCapture" | "onTouchStartCapture" | "onPointerDownCapture" | "onPointerMoveCapture" | "onPointerUpCapture" | "onPointerCancelCapture" | "onPointerEnterCapture" | "onPointerLeaveCapture" | "onPointerOverCapture" | "onPointerOutCapture" | "onGotPointerCaptureCapture" | "onLostPointerCaptureCapture" | "onScrollCapture" | "onWheelCapture" | "onAnimationStartCapture" | "onAnimationEndCapture" | "onAnimationIterationCapture" | "onTransitionEndCapture" | "onOpen" | "apiRef" | "hoistToBody" | "anchorCorner" | "focusOnOpen"> & React.RefAttributes<any>>;
+export declare const Menu: {
+    <Tag extends React.ElementType<any> = "div">(props: (MenuProps & {
+        tag?: Tag | undefined;
+        theme?: RMWC.ThemePropT;
+    } & Pick<React.AllHTMLAttributes<HTMLInputElement>, "onError" | "className" | "cite" | "data" | "form" | "label" | "span" | "style" | "summary" | "title" | "pattern" | "prefix" | "size" | "children" | "value" | "onBlur" | "onClick" | "onContextMenu" | "onCopy" | "onCut" | "onAuxClick" | "onDoubleClick" | "onDragEnd" | "onDragStart" | "onDrop" | "onFocus" | "onInput" | "onInvalid" | "onKeyDown" | "onKeyPress" | "onKeyUp" | "onMouseDown" | "onMouseUp" | "onPaste" | "onPause" | "onPlay" | "onPointerCancel" | "onPointerDown" | "onPointerUp" | "onRateChange" | "onReset" | "onSeeked" | "onSubmit" | "onTouchCancel" | "onTouchEnd" | "onTouchStart" | "onVolumeChange" | "onAbort" | "onAnimationEnd" | "onAnimationIteration" | "onAnimationStart" | "onCanPlay" | "onCanPlayThrough" | "onDrag" | "onDragEnter" | "onDragExit" | "onDragLeave" | "onDragOver" | "onDurationChange" | "onEmptied" | "onEncrypted" | "onEnded" | "onGotPointerCapture" | "onLoad" | "onLoadedData" | "onLoadedMetadata" | "onLoadStart" | "onLostPointerCapture" | "onMouseMove" | "onMouseOut" | "onMouseOver" | "onPlaying" | "onPointerMove" | "onPointerOut" | "onPointerOver" | "onProgress" | "onScroll" | "onSeeking" | "onStalled" | "onSuspend" | "onTimeUpdate" | "onTouchMove" | "onTransitionEnd" | "onWaiting" | "onWheel" | "onMouseEnter" | "onMouseLeave" | "onPointerEnter" | "onPointerLeave" | "onChange" | "onBeforeInput" | "onCompositionEnd" | "onCompositionStart" | "onCompositionUpdate" | "id" | "dir" | "slot" | "target" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "type" | "useMap" | "width" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopyCapture" | "onCutCapture" | "onPasteCapture" | "onCompositionEndCapture" | "onCompositionStartCapture" | "onCompositionUpdateCapture" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInputCapture" | "onInputCapture" | "onResetCapture" | "onSubmitCapture" | "onInvalidCapture" | "onLoadCapture" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPressCapture" | "onKeyUpCapture" | "onAbortCapture" | "onCanPlayCapture" | "onCanPlayThroughCapture" | "onDurationChangeCapture" | "onEmptiedCapture" | "onEncryptedCapture" | "onEndedCapture" | "onLoadedDataCapture" | "onLoadedMetadataCapture" | "onLoadStartCapture" | "onPauseCapture" | "onPlayCapture" | "onPlayingCapture" | "onProgressCapture" | "onRateChangeCapture" | "onSeekedCapture" | "onSeekingCapture" | "onStalledCapture" | "onSuspendCapture" | "onTimeUpdateCapture" | "onVolumeChangeCapture" | "onWaitingCapture" | "onAuxClickCapture" | "onClickCapture" | "onContextMenuCapture" | "onDoubleClickCapture" | "onDragCapture" | "onDragEndCapture" | "onDragEnterCapture" | "onDragExitCapture" | "onDragLeaveCapture" | "onDragOverCapture" | "onDragStartCapture" | "onDropCapture" | "onMouseDownCapture" | "onMouseMoveCapture" | "onMouseOutCapture" | "onMouseOverCapture" | "onMouseUpCapture" | "onSelectCapture" | "onTouchCancelCapture" | "onTouchEndCapture" | "onTouchMoveCapture" | "onTouchStartCapture" | "onPointerDownCapture" | "onPointerMoveCapture" | "onPointerUpCapture" | "onPointerCancelCapture" | "onPointerEnterCapture" | "onPointerLeaveCapture" | "onPointerOverCapture" | "onPointerOutCapture" | "onGotPointerCaptureCapture" | "onLostPointerCaptureCapture" | "onScrollCapture" | "onWheelCapture" | "onAnimationStartCapture" | "onAnimationEndCapture" | "onAnimationIterationCapture" | "onTransitionEndCapture"> & React.ClassAttributes<HTMLInputElement> & {
+        tag?: string | React.ComponentClass<any, any> | React.FunctionComponent<any> | undefined;
+        theme?: RMWC.ThemePropT;
+        ref?: ((instance: any) => void) | React.RefObject<any> | null | undefined;
+    }) | (MenuProps & {
+        tag?: Tag | undefined;
+        theme?: RMWC.ThemePropT;
+    } & React.ComponentPropsWithRef<Tag>), ref: any): JSX.Element;
+    displayName: string;
+};
 /****************************************************************
@@ -40,0 +72,0 @@ * Simple Menu

next/menu.js

@@ -1,9 +0,9 @@
-import { __assign, __extends, __rest } from "tslib";
-import React from 'react';
+import { __assign, __read, __rest } from "tslib";
+import React, { useEffect, useState } from 'react';
 import { List, ListItem } from '@rmwc/list';
-import { getDisplayName, classNames, useClassNames } from '@rmwc/base';
+import { getDisplayName, classNames, useClassNames, createComponent } from '@rmwc/base';
 import { MenuSurface, MenuSurfaceAnchor } from './menu-surface';
 import { useMenuFoundation } from './menu-foundation';
 /** A wrapper for menu items */
-export var MenuItems = React.forwardRef(function MenuItems(props, ref) {
+export var MenuItems = createComponent(function MenuItems(props, ref) {
     var className = useClassNames(props, ['mdc-list mdc-menu__items']);
@@ -14,6 +14,5 @@ return React.createElement(List, __assign({ role: "menu" }, props, { className: className, ref: ref }));
 /** 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. */
-export var MenuItem = React.forwardRef(function MenuItem(props, ref) {
+export var MenuItem = createComponent(function MenuItem(props, ref) {
     return React.createElement(ListItem, __assign({ role: "menuitem", tabIndex: 0 }, props, { ref: ref }));
 });
-MenuItem.displayName = 'MenuItem';
 var isMenuItems = function (child) {
@@ -23,3 +22,3 @@ return getDisplayName(child) === 'MenuItems';
 /** A menu component for displaying lists items. */
-export var Menu = React.forwardRef(function Menu(props, ref) {
+export var Menu = createComponent(function Menu(props, ref) {
     var children = props.children, focusOnOpen = props.focusOnOpen, onSelect = props.onSelect, rest = __rest(props, ["children", "focusOnOpen", "onSelect"]);
@@ -33,3 +32,3 @@ var _a = useMenuFoundation(props), rootEl = _a.rootEl, setListApi = _a.setListApi, setMenuSurfaceApi = _a.setMenuSurfaceApi;
         if (isMenuItems(child)) {
-            return React.cloneElement(child, __assign(__assign({}, (React.isValidElement(child) && child.props)), menuItemsProps));
+            return React.cloneElement(child, __assign(__assign({}, (React.isValidElement(child) ? child.props : {})), menuItemsProps));
         }
@@ -39,46 +38,28 @@ return child;
 });
-Menu.displayName = 'Menu';
-var simpleMenuFactory = function (MenuComponent) { var _a; return _a = /** @class */ (function (_super) {
-        __extends(class_1, _super);
-        function class_1() {
-            var _this = _super !== null && _super.apply(this, arguments) || this;
-            _this.state = {
-                open: !!_this.props.open
-            };
-            return _this;
-        }
-        class_1.prototype.componentDidMount = function () {
-            this.syncWithOpenProp(this.props.open);
-        };
-        class_1.prototype.componentDidUpdate = function (nextProps) {
-            this.syncWithOpenProp(nextProps.open);
-        };
-        class_1.prototype.syncWithOpenProp = function (open) {
-            if (open !== undefined && this.state.open !== open) {
-                this.setState({ open: open });
+var simpleMenuFactory = function (MenuComponent) {
+    return function (props) {
+        var _a = __read(useState(!!props.open), 2), stateOpen = _a[0], setStateOpen = _a[1];
+        useEffect(function () {
+            if (props.open !== undefined && props.open !== stateOpen) {
+                setStateOpen(!!props.open);
             }
-        };
-        class_1.prototype.render = function () {
-            var _this = this;
-            var _a = this.props, handle = _a.handle, onClose = _a.onClose, children = _a.children, _b = _a.rootProps, rootProps = _b === void 0 ? {} : _b, open = _a.open, rest = __rest(_a, ["handle", "onClose", "children", "rootProps", "open"]);
-            var wrappedHandle = React.cloneElement(handle, __assign(__assign({}, handle.props), { onClick: function (evt) {
-                    _this.setState({ open: !_this.state.open });
-                    if (handle.props.onClick) {
-                        handle.props.onClick(evt);
-                    }
-                } }));
-            var wrappedOnClose = function (evt) {
-                _this.setState({ open: !!open || false });
-                if (onClose) {
-                    onClose(evt);
+        }, [props.open, stateOpen]);
+        var handle = props.handle, onClose = props.onClose, children = props.children, _b = props.rootProps, rootProps = _b === void 0 ? {} : _b, open = props.open, rest = __rest(props, ["handle", "onClose", "children", "rootProps", "open"]);
+        var wrappedHandle = React.cloneElement(handle, __assign(__assign({}, handle.props), { onClick: function (evt) {
+                setStateOpen(!stateOpen);
+                if (handle.props.onClick) {
+                    handle.props.onClick(evt);
                 }
-            };
-            return (React.createElement(MenuSurfaceAnchor, __assign({}, rootProps),
-                React.createElement(MenuComponent, __assign({}, rest, { onClose: wrappedOnClose, open: this.state.open }), children),
-                wrappedHandle));
+            } }));
+        var wrappedOnClose = function (evt) {
+            var _a;
+            setStateOpen(!!open || false);
+            (_a = onClose) === null || _a === void 0 ? void 0 : _a(evt);
         };
-        return class_1;
-    }(React.Component)),
-    _a.displayName = 'Simple' + MenuComponent.displayName,
-    _a; };
+        var RenderMenuComponent = MenuComponent;
+        return (React.createElement(MenuSurfaceAnchor, __assign({}, rootProps),
+            React.createElement(RenderMenuComponent, __assign({}, rest, { onClose: wrappedOnClose, open: stateOpen }), children),
+            wrappedHandle));
+    };
+};
 /** A Simplified menu component that allows you to pass a handle element and will automatically control the open state and add a MenuSurfaceAnchor */
@@ -85,0 +66,0 @@ export var SimpleMenu = simpleMenuFactory(Menu);

next/readme.js

@@ -15,3 +15,5 @@ import { __read } from "tslib";
             '@material/menu-surface/dist/mdc.menu-surface.css',
-            '@material/list/dist/mdc.list.css'
+            '@material/ripple/dist/mdc.ripple.css',
+            '@material/list/dist/mdc.list.css',
+            '@rmwc/icon/icon.css'
         ], docsLink: "https://material.io/develop/web/components/menus/", examples: examples },
@@ -77,8 +79,8 @@ React.createElement(DocsSubtitle, null, "Basic Usage"),
         React.createElement(DocProps, { src: propsSrc, components: [
-                Menu,
-                MenuItem,
-                MenuSurface,
-                MenuSurfaceAnchor,
-                SimpleMenu,
-                SimpleMenuSurface
+                { displayName: 'Menu', component: Menu },
+                { displayName: 'MenuItem', component: MenuItem },
+                { displayName: 'MenuSurface', component: MenuSurface },
+                { displayName: 'MenuSurfaceAnchor', component: MenuSurfaceAnchor },
+                { displayName: 'SimpleMenu', component: SimpleMenu },
+                { displayName: 'SimpleMenuSurface', component: SimpleMenuSurface }
             ] })));
@@ -85,0 +87,0 @@ }

package.json

 {
   "name": "@rmwc/menu",
-  "version": "6.0.0-alpha.11",
+  "version": "6.0.0-alpha.12",
   "description": "RMWC Menu component",
@@ -37,7 +37,7 @@ "main": "dist/index.js",
     "@material/menu-surface": "^4.0.0",
-    "@rmwc/base": "^6.0.0-alpha.11",
-    "@rmwc/list": "^6.0.0-alpha.11",
-    "@rmwc/types": "^6.0.0-alpha.6"
+    "@rmwc/base": "^6.0.0-alpha.12",
+    "@rmwc/list": "^6.0.0-alpha.12",
+    "@rmwc/types": "^6.0.0-alpha.12"
   },
-  "gitHead": "1106cd3c7be06e866f7854f4d3c78808eabe0164"
+  "gitHead": "acda27d1056c88c78ce26af6b291b0f23e5f5e30"
 }

README.md

@@ -9,3 +9,5 @@ # Menus
   - import **'@material/menu-surface/dist/mdc.menu-surface.css'**
+  - import **'@material/ripple/dist/mdc.ripple.css'**
   - import **'@material/list/dist/mdc.list.css'**
+  - import **'@rmwc/icon/icon.css'**
 - MDC Docs: [https://material.io/develop/web/components/menus/](https://material.io/develop/web/components/menus/)
@@ -181,4 +183,6 @@
 ## MenuSurfaceAnchor
+MenuSurfaceAnchor
 
 
+
 ## SimpleMenu
@@ -185,0 +189,0 @@ A Simplified menu component that allows you to pass a handle element and will automatically control the open state and add a MenuSurfaceAnchor

No alert changes

Improved metrics

Number of package files

44

increased by2.33%

Number of lines in readme file

220

increased by1.85%

Worsened metrics

Total package byte prevSize

384387

decreased by-16.22%

Lines of code

7932

decreased by-12%

Dependency changes

• Updated@rmwc/base@^6.0.0-alpha.12

• Updated@rmwc/list@^6.0.0-alpha.12

• Updated@rmwc/types@^6.0.0-alpha.12