@rmwc/menu - npm Package Compare versions

Comparing version 5.0.2-alpha.0 to 5.0.3-alpha.0

dist/index.js

@@ -1,9 +0,7 @@
-define(["require", "exports", "./menu", "./menu-surface"], function (require, exports, menu_1, menu_surface_1) {
-    "use strict";
-    function __export(m) {
-        for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
-    }
-    Object.defineProperty(exports, "__esModule", { value: true });
-    __export(menu_1);
-    __export(menu_surface_1);
-});
+"use strict";
+function __export(m) {
+    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
+}
+Object.defineProperty(exports, "__esModule", { value: true });
+__export(require("./menu"));
+__export(require("./menu-surface"));

dist/menu-surface.d.ts

 import * as RMWC from '@rmwc/types';
 import * as React from 'react';
-import { CustomEventT, FoundationComponent } from '@rmwc/base';
+import { FoundationComponent } from '@rmwc/base';
 export declare type AnchorT = 'bottomEnd' | 'bottomLeft' | 'bottomRight' | 'bottomStart' | 'topEnd' | 'topLeft' | 'topRight' | 'topStart';
@@ -13,5 +13,5 @@ export interface MenuSurfaceProps {
     /** Callback for when the menu is opened. */
-    onOpen?: (evt: CustomEventT<{}>) => void;
+    onOpen?: (evt: RMWC.CustomEventT<{}>) => void;
     /** Callback for when the menu is closed. */
-    onClose?: (evt: CustomEventT<{}>) => void;
+    onClose?: (evt: RMWC.CustomEventT<{}>) => void;
     /** Children to render. */
@@ -23,3 +23,3 @@ children?: React.ReactNode;
  ****************************************************************/
-export declare const MenuSurfaceRoot: React.ComponentType<RMWC.ComponentProps<any>>;
+export declare const MenuSurfaceRoot: React.ComponentType<RMWC.ComponentProps>;
 /** A generic menu component for displaying any type of content. */
@@ -35,3 +35,2 @@ export declare class MenuSurface extends FoundationComponent<MenuSurfaceProps> {
     componentDidMount(): void;
-    /** @param {boolean} value */
     open: any;
@@ -87,2 +86,2 @@ getDefaultFoundation(): any;
 /** A Menu Anchor. When using the anchorCorner prop of Menu, you must set MenuSurfaceAnchors css style position to absolute. */
-export declare const MenuSurfaceAnchor: React.ComponentType<RMWC.ComponentProps<any>>;
+export declare const MenuSurfaceAnchor: React.ComponentType<RMWC.ComponentProps>;

dist/menu-surface.js

@@ -0,1 +1,2 @@
+"use strict";
 var __extends = (this && this.__extends) || (function () {
@@ -41,221 +42,219 @@ var extendStatics = function (d, b) {
 };
-define(["require", "exports", "react", "@material/menu-surface", "@rmwc/base"], function (require, exports, React, menu_surface_1, base_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    React = __importStar(React);
-    var ANCHOR_CORNER_MAP = {
-        bottomEnd: 'BOTTOM_END',
-        bottomLeft: 'BOTTOM_LEFT',
-        bottomRight: 'BOTTOM_RIGHT',
-        bottomStart: 'BOTTOM_START',
-        topEnd: 'TOP_END',
-        topLeft: 'TOP_LEFT',
-        topRight: 'TOP_RIGHT',
-        topStart: 'TOP_START'
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = __importStar(require("react"));
+var menu_surface_1 = require("@material/menu-surface");
+var base_1 = require("@rmwc/base");
+var ANCHOR_CORNER_MAP = {
+    bottomEnd: 'BOTTOM_END',
+    bottomLeft: 'BOTTOM_LEFT',
+    bottomRight: 'BOTTOM_RIGHT',
+    bottomStart: 'BOTTOM_START',
+    topEnd: 'TOP_END',
+    topLeft: 'TOP_LEFT',
+    topRight: 'TOP_RIGHT',
+    topStart: 'TOP_START'
+};
+var getAnchorCornerFromProp = function (anchorCorner) { return menu_surface_1.MDCMenuSurfaceFoundation.Corner[ANCHOR_CORNER_MAP[anchorCorner]]; };
+/****************************************************************
+ * MenuSurface
+ ****************************************************************/
+exports.MenuSurfaceRoot = base_1.componentFactory({
+    displayName: 'MenuSurfaceRoot',
+    classNames: function (props) { return [
+        'mdc-menu-surface',
+        {
+            'mdc-menu-surface--fixed': props.fixed
+        }
+    ]; },
+    consumeProps: ['fixed']
+});
+/** A generic menu component for displaying any type of content. */
+var MenuSurface = /** @class */ (function (_super) {
+    __extends(MenuSurface, _super);
+    function MenuSurface(props) {
+        var _this = _super.call(this, props) || this;
+        _this.root = _this.createElement('root');
+        _this.anchorElement = null;
+        _this.previousFocus = null;
+        _this.firstFocusableElement = null;
+        _this.lastFocusableElement = null;
+        _this.hoisted = false;
+        _this.handleKeydown = _this.handleKeydown.bind(_this);
+        _this.handleBodyClick = _this.handleBodyClick.bind(_this);
+        return _this;
+    }
+    MenuSurface.prototype.componentDidMount = function () {
+        _super.prototype.componentDidMount.call(this);
+        if (this.root.ref &&
+            this.root.ref.parentElement &&
+            this.root.ref.parentElement.classList.contains(menu_surface_1.MDCMenuSurfaceFoundation.cssClasses.ANCHOR)) {
+            this.anchorElement = this.root.ref.parentElement;
+        }
     };
-    var getAnchorCornerFromProp = function (anchorCorner) { return menu_surface_1.MDCMenuSurfaceFoundation.Corner[ANCHOR_CORNER_MAP[anchorCorner]]; };
-    /****************************************************************
-     * MenuSurface
-     ****************************************************************/
-    exports.MenuSurfaceRoot = base_1.componentFactory({
-        displayName: 'MenuSurfaceRoot',
-        classNames: function (props) { return [
-            'mdc-menu-surface',
-            {
-                'mdc-menu-surface--fixed': props.fixed
+    Object.defineProperty(MenuSurface.prototype, "open", {
+        get: function () {
+            return this.foundation.isOpen();
+        },
+        set: function (value) {
+            if (value) {
+                var focusableElements = this.root.ref
+                    ? this.root.ref.querySelectorAll(menu_surface_1.MDCMenuSurfaceFoundation.strings.FOCUSABLE_ELEMENTS)
+                    : [];
+                this.firstFocusableElement =
+                    focusableElements.length > 0 ? focusableElements[0] : null;
+                this.lastFocusableElement =
+                    focusableElements.length > 0
+                        ? focusableElements[focusableElements.length - 1]
+                        : null;
+                this.registerBodyClickListener();
+                this.foundation.open();
             }
-        ]; },
-        consumeProps: ['fixed']
+            else {
+                this.deregisterBodyClickListener();
+                this.foundation.close();
+            }
+        },
+        enumerable: true,
+        configurable: true
     });
-    /** A generic menu component for displaying any type of content. */
-    var MenuSurface = /** @class */ (function (_super) {
-        __extends(MenuSurface, _super);
-        function MenuSurface(props) {
-            var _this = _super.call(this, props) || this;
-            _this.root = _this.createElement('root');
-            _this.anchorElement = null;
-            _this.previousFocus = null;
-            _this.firstFocusableElement = null;
-            _this.lastFocusableElement = null;
-            _this.hoisted = false;
-            _this.handleKeydown = _this.handleKeydown.bind(_this);
-            _this.handleBodyClick = _this.handleBodyClick.bind(_this);
-            return _this;
-        }
-        MenuSurface.prototype.componentDidMount = function () {
-            _super.prototype.componentDidMount.call(this);
-            if (this.root.ref &&
-                this.root.ref.parentElement &&
-                this.root.ref.parentElement.classList.contains(menu_surface_1.MDCMenuSurfaceFoundation.cssClasses.ANCHOR)) {
-                this.anchorElement = this.root.ref.parentElement;
+    MenuSurface.prototype.getDefaultFoundation = function () {
+        var _this = this;
+        return new menu_surface_1.MDCMenuSurfaceFoundation(__assign({ addClass: function (className) { return _this.root.addClass(className); }, removeClass: function (className) { return _this.root.removeClass(className); }, hasClass: function (className) {
+                return className === 'mdc-menu-surface' ? true : _this.root.hasClass(className);
+            }, hasAnchor: function () { return !!_this.anchorElement; }, notifyClose: function () {
+                _this.emit('onClose', {});
+            }, notifyOpen: function () {
+                _this.emit('onOpen', {});
+            }, isElementInContainer: function (el) {
+                return _this.root.ref === el || (_this.root.ref && _this.root.ref.contains(el));
+            }, isRtl: function () {
+                return _this.root.ref &&
+                    getComputedStyle(_this.root.ref).getPropertyValue('direction') === 'rtl';
+            }, setTransformOrigin: function (origin) {
+                _this.root.setStyle(menu_surface_1.util.getTransformPropertyName(window) + "-origin", origin);
+            } }, this.getFocusAdapterMethods(), this.getDimensionAdapterMethods()));
+    };
+    MenuSurface.prototype.getFocusAdapterMethods = function () {
+        var _this = this;
+        return {
+            isFocused: function () { return document.activeElement === _this.root.ref; },
+            saveFocus: function () {
+                _this.previousFocus = document.activeElement;
+            },
+            restoreFocus: function () {
+                if (_this.root.ref && _this.root.ref.contains(document.activeElement)) {
+                    if (_this.previousFocus && _this.previousFocus.focus) {
+                        _this.previousFocus.focus();
+                    }
+                }
+            },
+            isFirstElementFocused: function () {
+                return _this.firstFocusableElement &&
+                    _this.firstFocusableElement === document.activeElement;
+            },
+            isLastElementFocused: function () {
+                return _this.firstFocusableElement &&
+                    _this.firstFocusableElement === document.activeElement;
+            },
+            focusFirstElement: function () {
+                return _this.firstFocusableElement &&
+                    _this.firstFocusableElement.focus &&
+                    _this.firstFocusableElement.focus();
+            },
+            focusLastElement: function () {
+                return _this.firstFocusableElement &&
+                    _this.firstFocusableElement.focus &&
+                    _this.firstFocusableElement.focus();
             }
         };
-        Object.defineProperty(MenuSurface.prototype, "open", {
-            get: function () {
-                return this.foundation.isOpen();
+    };
+    MenuSurface.prototype.getDimensionAdapterMethods = function () {
+        var _this = this;
+        return {
+            getInnerDimensions: function () {
+                return {
+                    width: _this.root.ref && _this.root.ref.offsetWidth,
+                    height: _this.root.ref && _this.root.ref.offsetHeight
+                };
             },
-            /** @param {boolean} value */
-            set: function (value) {
-                if (value) {
-                    var focusableElements = this.root.ref
-                        ? this.root.ref.querySelectorAll(menu_surface_1.MDCMenuSurfaceFoundation.strings.FOCUSABLE_ELEMENTS)
-                        : [];
-                    this.firstFocusableElement =
-                        focusableElements.length > 0 ? focusableElements[0] : null;
-                    this.lastFocusableElement =
-                        focusableElements.length > 0
-                            ? focusableElements[focusableElements.length - 1]
-                            : null;
-                    this.registerBodyClickListener();
-                    this.foundation.open();
-                }
-                else {
-                    this.deregisterBodyClickListener();
-                    this.foundation.close();
-                }
+            getAnchorDimensions: function () {
+                return _this.anchorElement && _this.anchorElement.getBoundingClientRect();
             },
-            enumerable: true,
-            configurable: true
-        });
-        MenuSurface.prototype.getDefaultFoundation = function () {
-            var _this = this;
-            return new menu_surface_1.MDCMenuSurfaceFoundation(__assign({ addClass: function (className) { return _this.root.addClass(className); }, removeClass: function (className) { return _this.root.removeClass(className); }, hasClass: function (className) {
-                    return className === 'mdc-menu-surface' ? true : _this.root.hasClass(className);
-                }, hasAnchor: function () { return !!_this.anchorElement; }, notifyClose: function () {
-                    _this.emit('onClose', {});
-                }, notifyOpen: function () {
-                    _this.emit('onOpen', {});
-                }, isElementInContainer: function (el) {
-                    return _this.root.ref === el || (_this.root.ref && _this.root.ref.contains(el));
-                }, isRtl: function () {
-                    return _this.root.ref &&
-                        getComputedStyle(_this.root.ref).getPropertyValue('direction') === 'rtl';
-                }, setTransformOrigin: function (origin) {
-                    _this.root.setStyle(menu_surface_1.util.getTransformPropertyName(window) + "-origin", origin);
-                } }, this.getFocusAdapterMethods(), this.getDimensionAdapterMethods()));
-        };
-        MenuSurface.prototype.getFocusAdapterMethods = function () {
-            var _this = this;
-            return {
-                isFocused: function () { return document.activeElement === _this.root.ref; },
-                saveFocus: function () {
-                    _this.previousFocus = document.activeElement;
-                },
-                restoreFocus: function () {
-                    if (_this.root.ref && _this.root.ref.contains(document.activeElement)) {
-                        if (_this.previousFocus && _this.previousFocus.focus) {
-                            _this.previousFocus.focus();
-                        }
-                    }
-                },
-                isFirstElementFocused: function () {
-                    return _this.firstFocusableElement &&
-                        _this.firstFocusableElement === document.activeElement;
-                },
-                isLastElementFocused: function () {
-                    return _this.firstFocusableElement &&
-                        _this.firstFocusableElement === document.activeElement;
-                },
-                focusFirstElement: function () {
-                    return _this.firstFocusableElement &&
-                        _this.firstFocusableElement.focus &&
-                        _this.firstFocusableElement.focus();
-                },
-                focusLastElement: function () {
-                    return _this.firstFocusableElement &&
-                        _this.firstFocusableElement.focus &&
-                        _this.firstFocusableElement.focus();
-                }
-            };
-        };
-        MenuSurface.prototype.getDimensionAdapterMethods = function () {
-            var _this = this;
-            return {
-                getInnerDimensions: function () {
-                    return {
-                        width: _this.root.ref && _this.root.ref.offsetWidth,
-                        height: _this.root.ref && _this.root.ref.offsetHeight
-                    };
-                },
-                getAnchorDimensions: function () {
-                    return _this.anchorElement && _this.anchorElement.getBoundingClientRect();
-                },
-                getWindowDimensions: function () {
-                    return { width: window.innerWidth, height: window.innerHeight };
-                },
-                getBodyDimensions: function () {
-                    return {
-                        width: document.body.clientWidth,
-                        height: document.body.clientHeight
-                    };
-                },
-                getWindowScroll: function () {
-                    return { x: window.pageXOffset, y: window.pageYOffset };
-                },
-                setPosition: function (position) {
-                    _this.root.setStyle('left', 'left' in position ? position.left : null);
-                    _this.root.setStyle('right', 'right' in position ? position.right : null);
-                    _this.root.setStyle('top', 'top' in position ? position.top : null);
-                    _this.root.setStyle('bottom', 'bottom' in position ? position.bottom : null);
-                },
-                setMaxHeight: function (height) {
-                    _this.root.setStyle('maxHeight', height);
-                }
-            };
-        };
-        MenuSurface.prototype.sync = function (props, prevProps) {
-            var _this = this;
-            // fixed
-            this.syncProp(props.fixed, prevProps.fixed, function () {
-                _this.foundation.setFixedPosition(props.fixed);
-            });
-            // anchorCorner
-            var anchorCorner = props.anchorCorner && getAnchorCornerFromProp(props.anchorCorner);
-            this.syncProp(anchorCorner, this.foundation.anchorCorner_, function () {
-                _this.foundation.setAnchorCorner(anchorCorner);
-                _this.foundation.dimensions_ = _this.foundation.adapter_.getInnerDimensions();
-                _this.foundation.autoPosition_();
-            });
-            // open
-            this.syncProp(!!props.open, this.open, function () {
-                _this.open = !!props.open;
-            });
-        };
-        MenuSurface.prototype.hoistMenuToBody = function () {
-            if (this.root.ref && this.root.ref.parentElement) {
-                document.body.appendChild(this.root.ref.parentElement.removeChild(this.root.ref));
-                this.hoisted = true;
-                this.foundation.setIsHoisted(true);
+            getWindowDimensions: function () {
+                return { width: window.innerWidth, height: window.innerHeight };
+            },
+            getBodyDimensions: function () {
+                return {
+                    width: document.body.clientWidth,
+                    height: document.body.clientHeight
+                };
+            },
+            getWindowScroll: function () {
+                return { x: window.pageXOffset, y: window.pageYOffset };
+            },
+            setPosition: function (position) {
+                _this.root.setStyle('left', 'left' in position ? position.left : null);
+                _this.root.setStyle('right', 'right' in position ? position.right : null);
+                _this.root.setStyle('top', 'top' in position ? position.top : null);
+                _this.root.setStyle('bottom', 'bottom' in position ? position.bottom : null);
+            },
+            setMaxHeight: function (height) {
+                _this.root.setStyle('maxHeight', height);
             }
         };
-        MenuSurface.prototype.setAnchorCorner = function (corner) {
-            this.foundation.setAnchorCorner(corner);
-        };
-        MenuSurface.prototype.registerBodyClickListener = function () {
-            document.body.addEventListener('click', this.handleBodyClick);
-        };
-        MenuSurface.prototype.deregisterBodyClickListener = function () {
-            document.body.removeEventListener('click', this.handleBodyClick);
-        };
-        MenuSurface.prototype.handleBodyClick = function (evt) {
-            this.foundation && this.foundation.handleBodyClick(evt);
-        };
-        MenuSurface.prototype.handleKeydown = function (evt) {
-            this.props.onKeyDown && this.props.onKeyDown(evt);
-        };
-        MenuSurface.prototype.render = function () {
-            var _a = this.props, children = _a.children, open = _a.open, anchorCorner = _a.anchorCorner, onOpen = _a.onOpen, onClose = _a.onClose, rest = __rest(_a, ["children", "open", "anchorCorner", "onOpen", "onClose"]);
-            return (React.createElement(exports.MenuSurfaceRoot, __assign({}, this.root.props(rest), { ref: this.root.setRef, onKeyDown: this.handleKeydown }), children));
-        };
-        return MenuSurface;
-    }(base_1.FoundationComponent));
-    exports.MenuSurface = MenuSurface;
-    /****************************************************************
-     * MenuSurfaceAnchor
-     ****************************************************************/
-    /** A Menu Anchor. When using the anchorCorner prop of Menu, you must set MenuSurfaceAnchors css style position to absolute. */
-    exports.MenuSurfaceAnchor = base_1.componentFactory({
-        displayName: 'MenuSurfaceAnchor',
-        classNames: ['mdc-menu-surface--anchor']
-    });
+    };
+    MenuSurface.prototype.sync = function (props, prevProps) {
+        var _this = this;
+        // fixed
+        this.syncProp(props.fixed, prevProps.fixed, function () {
+            _this.foundation.setFixedPosition(props.fixed);
+        });
+        // anchorCorner
+        var anchorCorner = props.anchorCorner && getAnchorCornerFromProp(props.anchorCorner);
+        this.syncProp(anchorCorner, this.foundation.anchorCorner_, function () {
+            _this.foundation.setAnchorCorner(anchorCorner);
+            _this.foundation.dimensions_ = _this.foundation.adapter_.getInnerDimensions();
+            _this.foundation.autoPosition_();
+        });
+        // open
+        this.syncProp(!!props.open, this.open, function () {
+            _this.open = !!props.open;
+        });
+    };
+    MenuSurface.prototype.hoistMenuToBody = function () {
+        if (this.root.ref && this.root.ref.parentElement) {
+            document.body.appendChild(this.root.ref.parentElement.removeChild(this.root.ref));
+            this.hoisted = true;
+            this.foundation.setIsHoisted(true);
+        }
+    };
+    MenuSurface.prototype.setAnchorCorner = function (corner) {
+        this.foundation.setAnchorCorner(corner);
+    };
+    MenuSurface.prototype.registerBodyClickListener = function () {
+        document.body.addEventListener('click', this.handleBodyClick);
+    };
+    MenuSurface.prototype.deregisterBodyClickListener = function () {
+        document.body.removeEventListener('click', this.handleBodyClick);
+    };
+    MenuSurface.prototype.handleBodyClick = function (evt) {
+        this.foundation && this.foundation.handleBodyClick(evt);
+    };
+    MenuSurface.prototype.handleKeydown = function (evt) {
+        this.props.onKeyDown && this.props.onKeyDown(evt);
+    };
+    MenuSurface.prototype.render = function () {
+        var _a = this.props, children = _a.children, open = _a.open, anchorCorner = _a.anchorCorner, onOpen = _a.onOpen, onClose = _a.onClose, rest = __rest(_a, ["children", "open", "anchorCorner", "onOpen", "onClose"]);
+        return (React.createElement(exports.MenuSurfaceRoot, __assign({}, this.root.props(rest), { ref: this.root.setRef, onKeyDown: this.handleKeydown }), children));
+    };
+    return MenuSurface;
+}(base_1.FoundationComponent));
+exports.MenuSurface = MenuSurface;
+/****************************************************************
+ * MenuSurfaceAnchor
+ ****************************************************************/
+/** A Menu Anchor. When using the anchorCorner prop of Menu, you must set MenuSurfaceAnchors css style position to absolute. */
+exports.MenuSurfaceAnchor = base_1.componentFactory({
+    displayName: 'MenuSurfaceAnchor',
+    classNames: ['mdc-menu-surface--anchor']
 });

dist/menu.d.ts

 import * as RMWC from '@rmwc/types';
 import * as React from 'react';
 import { List, ListItemProps } from '@rmwc/list';
-import { FoundationComponent, CustomEventT } from '@rmwc/base';
+import { FoundationComponent } from '@rmwc/base';
 import { MenuSurface, MenuSurfaceProps } from './menu-surface';
@@ -11,3 +11,3 @@ /****************************************************************
     /** Callback that fires when a Menu item is selected. */
-    onSelect?: (evt: CustomEventT<{
+    onSelect?: (evt: RMWC.CustomEventT<{
         index: number;
@@ -17,8 +17,8 @@ item: HTMLElement;
 }
-export declare const MenuRoot: React.ComponentType<MenuProps & RMWC.ComponentProps<any>>;
-export declare const MenuItems: React.ComponentType<RMWC.ComponentProps<any>>;
+export declare const MenuRoot: React.ComponentType<MenuProps & RMWC.ComponentProps>;
+export declare const MenuItems: React.ComponentType<RMWC.ComponentProps>;
 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.ComponentType<MenuItemProps & RMWC.ComponentProps<any>>;
+export declare const MenuItem: React.ComponentType<MenuItemProps & RMWC.ComponentProps>;
 /** A menu component for displaying lists items. */
@@ -37,3 +37,3 @@ export declare class Menu extends FoundationComponent<MenuProps> {
     handleKeydown(evt: React.KeyboardEvent): void;
-    handleOpen(evt: CustomEventT<{}>): void;
+    handleOpen(evt: RMWC.CustomEventT<{}>): void;
     render(): JSX.Element;
@@ -40,0 +40,0 @@ }

dist/menu.js

@@ -0,1 +1,2 @@
+"use strict";
 var __extends = (this && this.__extends) || (function () {
@@ -41,183 +42,185 @@ var extendStatics = function (d, b) {
 };
-define(["require", "exports", "react", "@material/menu", "@rmwc/list", "@rmwc/base", "./menu-surface"], function (require, exports, React, menu_1, list_1, base_1, menu_surface_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    React = __importStar(React);
-    exports.MenuRoot = base_1.componentFactory({
-        displayName: 'MenuRoot',
-        classNames: function (props) { return [
-            'mdc-menu',
-            'mdc-menu-surface',
-            {
-                'mdc-menu-surface--fixed': props.fixed
-            }
-        ]; },
-        consumeProps: ['fixed'],
-        defaultProps: {
-            tabIndex: -1
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = __importStar(require("react"));
+// @ts-ignore
+var menu_1 = require("@material/menu");
+var list_1 = require("@rmwc/list");
+var base_1 = require("@rmwc/base");
+var menu_surface_1 = require("./menu-surface");
+exports.MenuRoot = base_1.componentFactory({
+    displayName: 'MenuRoot',
+    classNames: function (props) { return [
+        'mdc-menu',
+        'mdc-menu-surface',
+        {
+            'mdc-menu-surface--fixed': props.fixed
         }
+    ]; },
+    consumeProps: ['fixed'],
+    defaultProps: {
+        tabIndex: -1
+    }
+});
+exports.MenuItems = base_1.componentFactory({
+    displayName: 'MenuItems',
+    tag: list_1.List,
+    classNames: ['mdc-list mdc-menu__items'],
+    defaultProps: {
+        role: 'menu'
+    }
+});
+/** 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 = base_1.componentFactory({
+    displayName: 'MenuItem',
+    tag: list_1.ListItem,
+    defaultProps: {
+        role: 'menuitem',
+        tabIndex: 0
+    }
+});
+/** A menu component for displaying lists items. */
+var Menu = /** @class */ (function (_super) {
+    __extends(Menu, _super);
+    function Menu(props) {
+        var _this = _super.call(this, props) || this;
+        _this.list = null;
+        _this.menuSurface = null;
+        _this.handleKeydown = _this.handleKeydown.bind(_this);
+        _this.handleClick = _this.handleClick.bind(_this);
+        _this.handleOpen = _this.handleOpen.bind(_this);
+        return _this;
+    }
+    Object.defineProperty(Menu.prototype, "items", {
+        get: function () {
+            return this.list ? this.list.listElements : [];
+        },
+        enumerable: true,
+        configurable: true
     });
-    exports.MenuItems = base_1.componentFactory({
-        displayName: 'MenuItems',
-        tag: list_1.List,
-        classNames: ['mdc-list mdc-menu__items'],
-        defaultProps: {
-            role: 'menu'
+    Menu.prototype.hoistMenuToBody = function () {
+        this.menuSurface && this.menuSurface.hoistMenuToBody();
+    };
+    Menu.prototype.setAnchorCorner = function (corner) {
+        this.menuSurface && this.menuSurface.setAnchorCorner(corner);
+    };
+    Menu.prototype.setAnchorElement = function (element) {
+        this.menuSurface && (this.menuSurface.anchorElement = element);
+    };
+    Menu.prototype.getDefaultFoundation = function () {
+        var _this = this;
+        return new menu_1.MDCMenuFoundation({
+            addClassToElementAtIndex: function (index, className) {
+                var list = _this.items;
+                list[index].classList.add(className);
+            },
+            removeClassFromElementAtIndex: function (index, className) {
+                var list = _this.items;
+                list[index].classList.remove(className);
+            },
+            addAttributeToElementAtIndex: function (index, attr, value) {
+                var list = _this.items;
+                list[index].setAttribute(attr, value);
+            },
+            removeAttributeFromElementAtIndex: function (index, attr) {
+                var list = _this.items;
+                list[index].removeAttribute(attr);
+            },
+            elementContainsClass: function (element, className) {
+                return element.classList.contains(className);
+            },
+            closeSurface: function () {
+                _this.menuSurface && (_this.menuSurface.open = false);
+            },
+            getElementIndex: function (element) {
+                return _this.items.indexOf(element);
+            },
+            getParentElement: function (element) { return element.parentElement; },
+            getSelectedElementIndex: function (selectionGroup) {
+                return _this.items.indexOf(selectionGroup.querySelector("." + menu_1.MDCMenuFoundation.cssClasses.MENU_SELECTED_LIST_ITEM));
+            },
+            notifySelected: function (evtData) {
+                return _this.emit('onSelect', {
+                    index: evtData.index,
+                    item: _this.items[evtData.index]
+                });
+            }
+        });
+    };
+    Menu.prototype.handleClick = function (evt) {
+        this.props.onClick && this.props.onClick(evt);
+        this.foundation.handleClick(evt);
+    };
+    Menu.prototype.handleKeydown = function (evt) {
+        this.props.onKeyDown && this.props.onKeyDown(evt);
+        this.foundation.handleKeydown(evt);
+    };
+    Menu.prototype.handleOpen = function (evt) {
+        this.props.onOpen && this.props.onOpen(evt);
+        var list = this.items;
+        if (list.length > 0 && !list.some(function (el) { return el === document.activeElement; })) {
+            list[0].focus();
         }
-    });
-    /** 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 = base_1.componentFactory({
-        displayName: 'MenuItem',
-        tag: list_1.ListItem,
-        defaultProps: {
-            role: 'menuitem',
-            tabIndex: 0
-        }
-    });
-    /** A menu component for displaying lists items. */
-    var Menu = /** @class */ (function (_super) {
-        __extends(Menu, _super);
-        function Menu(props) {
-            var _this = _super.call(this, props) || this;
-            _this.list = null;
-            _this.menuSurface = null;
-            _this.handleKeydown = _this.handleKeydown.bind(_this);
-            _this.handleClick = _this.handleClick.bind(_this);
-            _this.handleOpen = _this.handleOpen.bind(_this);
+    };
+    Menu.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, children = _a.children, anchorCorner = _a.anchorCorner, rest = __rest(_a, ["children", "anchorCorner"]);
+        return (React.createElement(menu_surface_1.MenuSurface, __assign({}, rest, { "aria-hidden": !rest.open, className: "mdc-menu " + (rest.className || ''), onKeyDown: this.handleKeydown, onClick: this.handleClick, onOpen: this.handleOpen, ref: function (menuSurfaceApi) {
+                return (_this.menuSurface = menuSurfaceApi);
+            } }),
+            React.createElement(exports.MenuItems, { ref: function (listApi) { return (_this.list = listApi); } }, children)));
+    };
+    Menu.displayName = 'Menu';
+    return Menu;
+}(base_1.FoundationComponent));
+exports.Menu = 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;
         }
-        Object.defineProperty(Menu.prototype, "items", {
-            get: function () {
-                return this.list ? this.list.listElements : [];
-            },
-            enumerable: true,
-            configurable: true
-        });
-        Menu.prototype.hoistMenuToBody = function () {
-            this.menuSurface && this.menuSurface.hoistMenuToBody();
+        class_1.prototype.componentWillMount = function () {
+            this.syncWithOpenProp(this.props.open);
         };
-        Menu.prototype.setAnchorCorner = function (corner) {
-            this.menuSurface && this.menuSurface.setAnchorCorner(corner);
+        class_1.prototype.componentWillReceiveProps = function (nextProps) {
+            this.syncWithOpenProp(nextProps.open);
         };
-        Menu.prototype.setAnchorElement = function (element) {
-            this.menuSurface && (this.menuSurface.anchorElement = element);
-        };
-        Menu.prototype.getDefaultFoundation = function () {
-            var _this = this;
-            return new menu_1.MDCMenuFoundation({
-                addClassToElementAtIndex: function (index, className) {
-                    var list = _this.items;
-                    list[index].classList.add(className);
-                },
-                removeClassFromElementAtIndex: function (index, className) {
-                    var list = _this.items;
-                    list[index].classList.remove(className);
-                },
-                addAttributeToElementAtIndex: function (index, attr, value) {
-                    var list = _this.items;
-                    list[index].setAttribute(attr, value);
-                },
-                removeAttributeFromElementAtIndex: function (index, attr) {
-                    var list = _this.items;
-                    list[index].removeAttribute(attr);
-                },
-                elementContainsClass: function (element, className) {
-                    return element.classList.contains(className);
-                },
-                closeSurface: function () {
-                    _this.menuSurface && (_this.menuSurface.open = false);
-                },
-                getElementIndex: function (element) {
-                    return _this.items.indexOf(element);
-                },
-                getParentElement: function (element) { return element.parentElement; },
-                getSelectedElementIndex: function (selectionGroup) {
-                    return _this.items.indexOf(selectionGroup.querySelector("." + menu_1.MDCMenuFoundation.cssClasses.MENU_SELECTED_LIST_ITEM));
-                },
-                notifySelected: function (evtData) {
-                    return _this.emit('onSelect', {
-                        index: evtData.index,
-                        item: _this.items[evtData.index]
-                    });
-                }
-            });
-        };
-        Menu.prototype.handleClick = function (evt) {
-            this.props.onClick && this.props.onClick(evt);
-            this.foundation.handleClick(evt);
-        };
-        Menu.prototype.handleKeydown = function (evt) {
-            this.props.onKeyDown && this.props.onKeyDown(evt);
-            this.foundation.handleKeydown(evt);
-        };
-        Menu.prototype.handleOpen = function (evt) {
-            this.props.onOpen && this.props.onOpen(evt);
-            var list = this.items;
-            if (list.length > 0 && !list.some(function (el) { return el === document.activeElement; })) {
-                list[0].focus();
+        class_1.prototype.syncWithOpenProp = function (open) {
+            if (open !== undefined && this.state.open !== open) {
+                this.setState({ open: open });
             }
         };
-        Menu.prototype.render = function () {
+        class_1.prototype.render = function () {
             var _this = this;
-            var _a = this.props, children = _a.children, anchorCorner = _a.anchorCorner, rest = __rest(_a, ["children", "anchorCorner"]);
-            return (React.createElement(menu_surface_1.MenuSurface, __assign({}, rest, { "aria-hidden": !rest.open, className: "mdc-menu " + (rest.className || ''), onKeyDown: this.handleKeydown, onClick: this.handleClick, onOpen: this.handleOpen, ref: function (menuSurfaceApi) {
-                    return (_this.menuSurface = menuSurfaceApi);
-                } }),
-                React.createElement(exports.MenuItems, { ref: function (listApi) { return (_this.list = listApi); } }, children)));
-        };
-        Menu.displayName = 'Menu';
-        return Menu;
-    }(base_1.FoundationComponent));
-    exports.Menu = 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.componentWillMount = function () {
-                this.syncWithOpenProp(this.props.open);
-            };
-            class_1.prototype.componentWillReceiveProps = function (nextProps) {
-                this.syncWithOpenProp(nextProps.open);
-            };
-            class_1.prototype.syncWithOpenProp = function (open) {
-                if (open !== undefined && this.state.open !== open) {
-                    this.setState({ open: open });
+            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({}, 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);
                 }
             };
-            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({}, 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);
-                    }
-                };
-                return (React.createElement(menu_surface_1.MenuSurfaceAnchor, __assign({}, rootProps),
-                    React.createElement(MenuComponent, __assign({}, rest, { onClose: wrappedOnClose, open: this.state.open }), children),
-                    wrappedHandle));
-            };
-            return class_1;
-        }(React.Component)),
-        _a.displayName = 'SimpleMenu',
-        _a; };
-    /**
-     * A Simplified menu component that allows you to pass a handle element and will automatically control the open state and add a MenuSurfaceAnchor
-     */
-    exports.SimpleMenu = simpleMenuFactory(Menu);
-    /**
-     * The same as SimpleMenu, but a generic surface.
-     */
-    exports.SimpleMenuSurface = simpleMenuFactory(menu_surface_1.MenuSurface);
-});
+            return (React.createElement(menu_surface_1.MenuSurfaceAnchor, __assign({}, rootProps),
+                React.createElement(MenuComponent, __assign({}, rest, { onClose: wrappedOnClose, open: this.state.open }), children),
+                wrappedHandle));
+        };
+        return class_1;
+    }(React.Component)),
+    _a.displayName = 'SimpleMenu',
+    _a; };
+/**
+ * A Simplified menu component that allows you to pass a handle element and will automatically control the open state and add a MenuSurfaceAnchor
+ */
+exports.SimpleMenu = simpleMenuFactory(Menu);
+/**
+ * The same as SimpleMenu, but a generic surface.
+ */
+exports.SimpleMenuSurface = simpleMenuFactory(menu_surface_1.MenuSurface);

next/menu-surface.d.ts

 import * as RMWC from '@rmwc/types';
 import * as React from 'react';
-import { CustomEventT, FoundationComponent } from '@rmwc/base';
+import { FoundationComponent } from '@rmwc/base';
 export declare type AnchorT = 'bottomEnd' | 'bottomLeft' | 'bottomRight' | 'bottomStart' | 'topEnd' | 'topLeft' | 'topRight' | 'topStart';
@@ -13,5 +13,5 @@ export interface MenuSurfaceProps {
     /** Callback for when the menu is opened. */
-    onOpen?: (evt: CustomEventT<{}>) => void;
+    onOpen?: (evt: RMWC.CustomEventT<{}>) => void;
     /** Callback for when the menu is closed. */
-    onClose?: (evt: CustomEventT<{}>) => void;
+    onClose?: (evt: RMWC.CustomEventT<{}>) => void;
     /** Children to render. */
@@ -23,3 +23,3 @@ children?: React.ReactNode;
  ****************************************************************/
-export declare const MenuSurfaceRoot: React.ComponentType<RMWC.ComponentProps<any>>;
+export declare const MenuSurfaceRoot: React.ComponentType<RMWC.ComponentProps>;
 /** A generic menu component for displaying any type of content. */
@@ -35,3 +35,2 @@ export declare class MenuSurface extends FoundationComponent<MenuSurfaceProps> {
     componentDidMount(): void;
-    /** @param {boolean} value */
     open: any;
@@ -87,2 +86,2 @@ getDefaultFoundation(): any;
 /** A Menu Anchor. When using the anchorCorner prop of Menu, you must set MenuSurfaceAnchors css style position to absolute. */
-export declare const MenuSurfaceAnchor: React.ComponentType<RMWC.ComponentProps<any>>;
+export declare const MenuSurfaceAnchor: React.ComponentType<RMWC.ComponentProps>;

next/menu-surface.js

@@ -90,3 +90,2 @@ var __extends = (this && this.__extends) || (function () {
         },
-        /** @param {boolean} value */
         set: function (value) {
@@ -93,0 +92,0 @@ if (value) {

next/menu.d.ts

 import * as RMWC from '@rmwc/types';
 import * as React from 'react';
 import { List, ListItemProps } from '@rmwc/list';
-import { FoundationComponent, CustomEventT } from '@rmwc/base';
+import { FoundationComponent } from '@rmwc/base';
 import { MenuSurface, MenuSurfaceProps } from './menu-surface';
@@ -11,3 +11,3 @@ /****************************************************************
     /** Callback that fires when a Menu item is selected. */
-    onSelect?: (evt: CustomEventT<{
+    onSelect?: (evt: RMWC.CustomEventT<{
         index: number;
@@ -17,8 +17,8 @@ item: HTMLElement;
 }
-export declare const MenuRoot: React.ComponentType<MenuProps & RMWC.ComponentProps<any>>;
-export declare const MenuItems: React.ComponentType<RMWC.ComponentProps<any>>;
+export declare const MenuRoot: React.ComponentType<MenuProps & RMWC.ComponentProps>;
+export declare const MenuItems: React.ComponentType<RMWC.ComponentProps>;
 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.ComponentType<MenuItemProps & RMWC.ComponentProps<any>>;
+export declare const MenuItem: React.ComponentType<MenuItemProps & RMWC.ComponentProps>;
 /** A menu component for displaying lists items. */
@@ -37,3 +37,3 @@ export declare class Menu extends FoundationComponent<MenuProps> {
     handleKeydown(evt: React.KeyboardEvent): void;
-    handleOpen(evt: CustomEventT<{}>): void;
+    handleOpen(evt: RMWC.CustomEventT<{}>): void;
     render(): JSX.Element;
@@ -40,0 +40,0 @@ }

package.json

 {
   "name": "@rmwc/menu",
-  "version": "5.0.2-alpha.0",
+  "version": "5.0.3-alpha.0",
   "description": "RMWC Menu component",
@@ -36,6 +36,6 @@ "main": "dist/index.js",
     "@material/menu-surface": "^0.43.0",
-    "@rmwc/base": "^5.0.2-alpha.0",
-    "@rmwc/list": "^5.0.2-alpha.0"
+    "@rmwc/base": "^5.0.3-alpha.0",
+    "@rmwc/list": "^5.0.3-alpha.0"
   },
-  "gitHead": "69fbf9ddbdad8cf2b014443c386e1c125a9cee79"
+  "gitHead": "32b316530fb6c1c78e2335bc56d9be85e3cb3752"
 }

No alert changes

Improved metrics

Total package byte prevSize

287375

increased by0.76%

Number of package files

25

increased by13.64%

Lines of code

10355

increased by0.74%

Dependency changes

• Updated@rmwc/base@^5.0.3-alpha.0

• Updated@rmwc/list@^5.0.3-alpha.0