@rmwc/menu - npm Package Compare versions

Comparing version 5.3.1 to 5.4.0

dist/menu-surface.d.ts

@@ -7,2 +7,4 @@ import * as RMWC from '@rmwc/types';
 export declare type AnchorT = 'bottomEnd' | 'bottomLeft' | 'bottomRight' | 'bottomStart' | 'topEnd' | 'topLeft' | 'topRight' | 'topStart';
+export declare type MenuSurfaceOnOpenEventT = RMWC.CustomEventT<{}>;
+export declare type MenuSurfaceOnCloseEventT = RMWC.CustomEventT<{}>;
 export interface MenuSurfaceProps {
@@ -18,5 +20,5 @@ /** Opens the menu. */
     /** Callback for when the menu is opened. */
-    onOpen?: (evt: RMWC.CustomEventT<{}>) => void;
+    onOpen?: (evt: MenuSurfaceOnOpenEventT) => void;
     /** Callback for when the menu is closed. */
-    onClose?: (evt: RMWC.CustomEventT<{}>) => void;
+    onClose?: (evt: MenuSurfaceOnCloseEventT) => void;
     /** Children to render. */
@@ -27,2 +29,3 @@ children?: React.ReactNode;
 export declare class MenuSurface extends FoundationComponent<MDCMenuSurfaceFoundation, MenuSurfaceProps> {
+    static displayName: string;
     private root;
@@ -29,0 +32,0 @@ anchorElement: HTMLElement | null;

dist/menu-surface.js

@@ -251,2 +251,3 @@ "use strict";
     MenuSurface.prototype.hoistMenuToBody = function () {
+        var _this = this;
         if (this.root.ref && this.root.ref.parentElement) {
@@ -258,3 +259,5 @@ document.body.appendChild(this.root.ref.parentElement.removeChild(this.root.ref));
             if (this.props.open) {
-                this.foundation.autoPosition_();
+                // wait an extra frame so that the element is actually
+                // done being hoisted and painting. Fixes Issue #453
+                setTimeout(function () { return _this.foundation.autoPosition_(); });
             }
@@ -292,2 +295,3 @@ }
     };
+    MenuSurface.displayName = 'MenuSurface';
     return MenuSurface;
@@ -294,0 +298,0 @@ }(base_1.FoundationComponent));

dist/menu.d.ts

@@ -6,13 +6,14 @@ import * as RMWC from '@rmwc/types';
 import { FoundationComponent } from '@rmwc/base';
-import { MenuSurface, MenuSurfaceProps } from './menu-surface';
+import { MenuSurface, MenuSurfaceProps, MenuSurfaceOnOpenEventT } from './menu-surface';
 /****************************************************************
  * Menu
  ****************************************************************/
+export declare type MenuOnSelectEventT = RMWC.CustomEventT<{
+    index: number;
+    item: HTMLElement;
+}>;
 /** A menu component for displaying lists items. */
 export interface MenuProps extends MenuSurfaceProps {
-    /** Callback that fires when a Menu item is selected. */
-    onSelect?: (evt: RMWC.CustomEventT<{
-        index: number;
-        item: HTMLElement;
-    }>) => void;
+    /** Callback that fires when a Menu item is selected. evt.detail = { index: number; item: HTMLElement; } */
+    onSelect?: (evt: MenuOnSelectEventT) => void;
 }
@@ -42,3 +43,3 @@ /** A wrapper for menu items */
     handleKeydown(evt: React.KeyboardEvent & KeyboardEvent): void;
-    handleOpen(evt: RMWC.CustomEventT<{}>): void;
+    handleOpen(evt: MenuSurfaceOnOpenEventT): void;
     render(): JSX.Element;
@@ -45,0 +46,0 @@ }

dist/menu.js

@@ -213,3 +213,3 @@ "use strict";
     }(React.Component)),
-    _a.displayName = 'SimpleMenu',
+    _a.displayName = 'Simple' + MenuComponent.displayName,
     _a; };
@@ -216,0 +216,0 @@ /** A Simplified menu component that allows you to pass a handle element and will automatically control the open state and add a MenuSurfaceAnchor */

next/menu-surface.d.ts

@@ -7,2 +7,4 @@ import * as RMWC from '@rmwc/types';
 export declare type AnchorT = 'bottomEnd' | 'bottomLeft' | 'bottomRight' | 'bottomStart' | 'topEnd' | 'topLeft' | 'topRight' | 'topStart';
+export declare type MenuSurfaceOnOpenEventT = RMWC.CustomEventT<{}>;
+export declare type MenuSurfaceOnCloseEventT = RMWC.CustomEventT<{}>;
 export interface MenuSurfaceProps {
@@ -18,5 +20,5 @@ /** Opens the menu. */
     /** Callback for when the menu is opened. */
-    onOpen?: (evt: RMWC.CustomEventT<{}>) => void;
+    onOpen?: (evt: MenuSurfaceOnOpenEventT) => void;
     /** Callback for when the menu is closed. */
-    onClose?: (evt: RMWC.CustomEventT<{}>) => void;
+    onClose?: (evt: MenuSurfaceOnCloseEventT) => void;
     /** Children to render. */
@@ -27,2 +29,3 @@ children?: React.ReactNode;
 export declare class MenuSurface extends FoundationComponent<MDCMenuSurfaceFoundation, MenuSurfaceProps> {
+    static displayName: string;
     private root;
@@ -29,0 +32,0 @@ anchorElement: HTMLElement | null;

next/menu-surface.js

@@ -242,2 +242,3 @@ var __extends = (this && this.__extends) || (function () {
     MenuSurface.prototype.hoistMenuToBody = function () {
+        var _this = this;
         if (this.root.ref && this.root.ref.parentElement) {
@@ -249,3 +250,5 @@ document.body.appendChild(this.root.ref.parentElement.removeChild(this.root.ref));
             if (this.props.open) {
-                this.foundation.autoPosition_();
+                // wait an extra frame so that the element is actually
+                // done being hoisted and painting. Fixes Issue #453
+                setTimeout(function () { return _this.foundation.autoPosition_(); });
             }
@@ -283,2 +286,3 @@ }
     };
+    MenuSurface.displayName = 'MenuSurface';
     return MenuSurface;
@@ -285,0 +289,0 @@ }(FoundationComponent));

next/menu.d.ts

@@ -6,13 +6,14 @@ import * as RMWC from '@rmwc/types';
 import { FoundationComponent } from '@rmwc/base';
-import { MenuSurface, MenuSurfaceProps } from './menu-surface';
+import { MenuSurface, MenuSurfaceProps, MenuSurfaceOnOpenEventT } from './menu-surface';
 /****************************************************************
  * Menu
  ****************************************************************/
+export declare type MenuOnSelectEventT = RMWC.CustomEventT<{
+    index: number;
+    item: HTMLElement;
+}>;
 /** A menu component for displaying lists items. */
 export interface MenuProps extends MenuSurfaceProps {
-    /** Callback that fires when a Menu item is selected. */
-    onSelect?: (evt: RMWC.CustomEventT<{
-        index: number;
-        item: HTMLElement;
-    }>) => void;
+    /** Callback that fires when a Menu item is selected. evt.detail = { index: number; item: HTMLElement; } */
+    onSelect?: (evt: MenuOnSelectEventT) => void;
 }
@@ -42,3 +43,3 @@ /** A wrapper for menu items */
     handleKeydown(evt: React.KeyboardEvent & KeyboardEvent): void;
-    handleOpen(evt: RMWC.CustomEventT<{}>): void;
+    handleOpen(evt: MenuSurfaceOnOpenEventT): void;
     render(): JSX.Element;
@@ -45,0 +46,0 @@ }

next/menu.js

@@ -204,3 +204,3 @@ var __extends = (this && this.__extends) || (function () {
     }(React.Component)),
-    _a.displayName = 'SimpleMenu',
+    _a.displayName = 'Simple' + MenuComponent.displayName,
     _a; };
@@ -207,0 +207,0 @@ /** A Simplified menu component that allows you to pass a handle element and will automatically control the open state and add a MenuSurfaceAnchor */

package.json

 {
   "name": "@rmwc/menu",
-  "version": "5.3.1",
+  "version": "5.4.0",
   "description": "RMWC Menu component",
@@ -35,9 +35,9 @@ "main": "dist/index.js",
   "dependencies": {
-    "@material/menu": "^1.0.0",
-    "@material/menu-surface": "^1.0.0",
-    "@rmwc/base": "^5.3.1",
-    "@rmwc/list": "^5.3.1",
-    "@rmwc/types": "^5.3.1"
+    "@material/menu": "^1.1.1",
+    "@material/menu-surface": "^1.1.1",
+    "@rmwc/base": "^5.4.0",
+    "@rmwc/list": "^5.4.0",
+    "@rmwc/types": "^5.4.0"
   },
-  "gitHead": "5ae98ed32a2827431980ce949d5c95078ea9e3c9"
+  "gitHead": "8b3ddc7d3562c36c46e980516a3929e364800d00"
 }

README.md

@@ -148,8 +148,8 @@ # Menus
 | `children` | `React.ReactNode` | Children to render. |
-| `fixed` | `undefined | false | true` | Make the menu position fixed. |
-| `hoistToBody` | `undefined | false | true` | Moves the menu to the body. Useful for situations where the content might be cutoff by an overflow: hidden container. |
-| `onClose` | `undefined | (evt: RMWC.CustomEventT<{}>) => void` | Callback for when the menu is closed. |
-| `onOpen` | `undefined | (evt: RMWC.CustomEventT<{}>) => void` | Callback for when the menu is opened. |
-| `onSelect` | `undefined | (evt: RMWC.CustomEventT<>) => void` | Callback that fires when a Menu item is selected. |
-| `open` | `undefined | false | true` | Opens the menu. |
+| `fixed` | `undefined \| false \| true` | Make the menu position fixed. |
+| `hoistToBody` | `undefined \| false \| true` | Moves the menu to the body. Useful for situations where the content might be cutoff by an overflow: hidden container. |
+| `onClose` | `undefined \| (evt: MenuSurfaceOnCloseEventT) => void` | Callback for when the menu is closed. |
+| `onOpen` | `undefined \| (evt: MenuSurfaceOnOpenEventT) => void` | Callback for when the menu is opened. |
+| `onSelect` | `undefined \| (evt: MenuOnSelectEventT) => void` | Callback that fires when a Menu item is selected. evt.detail = { index: number; item: HTMLElement; } |
+| `open` | `undefined \| false \| true` | Opens the menu. |
 
@@ -164,11 +164,22 @@
 |------|------|-------------|
-| `activated` | `undefined | false | true` | A modifier for an active state. |
-| `disabled` | `undefined | false | true` | A modifier for a disabled state. |
+| `activated` | `undefined \| false \| true` | A modifier for an active state. |
+| `disabled` | `undefined \| false \| true` | A modifier for a disabled state. |
 | `ripple` | `RipplePropT` | Adds a ripple effect to the component |
-| `selected` | `undefined | false | true` | A modifier for a selected state. |
+| `selected` | `undefined \| false \| true` | A modifier for a selected state. |
 
 
-## 
+## MenuSurface
+### Props
 
+| Name | Type | Description |
+|------|------|-------------|
+| `anchorCorner` | `AnchorT` | Manually position the menu to one of the corners. |
+| `children` | `React.ReactNode` | Children to render. |
+| `fixed` | `undefined \| false \| true` | Make the menu position fixed. |
+| `hoistToBody` | `undefined \| false \| true` | Moves the menu to the body. Useful for situations where the content might be cutoff by an overflow: hidden container. |
+| `onClose` | `undefined \| (evt: MenuSurfaceOnCloseEventT) => void` | Callback for when the menu is closed. |
+| `onOpen` | `undefined \| (evt: MenuSurfaceOnOpenEventT) => void` | Callback for when the menu is opened. |
+| `open` | `undefined \| false \| true` | Opens the menu. |
 
+
 ## MenuSurfaceAnchor
@@ -186,14 +197,14 @@
 | `children` | `React.ReactNode` | Children to render |
-| `fixed` | `undefined | false | true` | Make the menu position fixed. |
+| `fixed` | `undefined \| false \| true` | Make the menu position fixed. |
 | `handle` | `ReactElement<any>` | An element that will open the menu when clicked |
-| `hoistToBody` | `undefined | false | true` | Moves the menu to the body. Useful for situations where the content might be cutoff by an overflow: hidden container. |
-| `onClose` | `undefined | (evt: RMWC.CustomEventT<{}>) => void` | Callback for when the menu is closed. |
-| `onOpen` | `undefined | (evt: RMWC.CustomEventT<{}>) => void` | Callback for when the menu is opened. |
-| `onSelect` | `undefined | (evt: RMWC.CustomEventT<>) => void` | Callback that fires when a Menu item is selected. |
-| `open` | `undefined | false | true` | Opens the menu. |
+| `hoistToBody` | `undefined \| false \| true` | Moves the menu to the body. Useful for situations where the content might be cutoff by an overflow: hidden container. |
+| `onClose` | `undefined \| (evt: MenuSurfaceOnCloseEventT) => void` | Callback for when the menu is closed. |
+| `onOpen` | `undefined \| (evt: MenuSurfaceOnOpenEventT) => void` | Callback for when the menu is opened. |
+| `onSelect` | `undefined \| (evt: MenuOnSelectEventT) => void` | Callback that fires when a Menu item is selected. evt.detail = { index: number; item: HTMLElement; } |
+| `open` | `undefined \| false \| true` | Opens the menu. |
 | `rootProps` | `Object` | By default, props spread to the Menu component. These will spread to the MenuSurfaceAnchor which is useful for things like overall positioning of the anchor. |
 
 
-## SimpleMenu
-A Simplified menu component that allows you to pass a handle element and will automatically control the open state and add a MenuSurfaceAnchor
+## SimpleMenuSurface
+The same as SimpleMenu, but a generic surface.
 
@@ -206,11 +217,10 @@ ### Props
 | `children` | `React.ReactNode` | Children to render |
-| `fixed` | `undefined | false | true` | Make the menu position fixed. |
+| `fixed` | `undefined \| false \| true` | Make the menu position fixed. |
 | `handle` | `ReactElement<any>` | An element that will open the menu when clicked |
-| `hoistToBody` | `undefined | false | true` | Moves the menu to the body. Useful for situations where the content might be cutoff by an overflow: hidden container. |
-| `onClose` | `undefined | (evt: RMWC.CustomEventT<{}>) => void` | Callback for when the menu is closed. |
-| `onOpen` | `undefined | (evt: RMWC.CustomEventT<{}>) => void` | Callback for when the menu is opened. |
-| `onSelect` | `undefined | (evt: RMWC.CustomEventT<>) => void` | Callback that fires when a Menu item is selected. |
-| `open` | `undefined | false | true` | Opens the menu. |
+| `hoistToBody` | `undefined \| false \| true` | Moves the menu to the body. Useful for situations where the content might be cutoff by an overflow: hidden container. |
+| `onClose` | `undefined \| (evt: MenuSurfaceOnCloseEventT) => void` | Callback for when the menu is closed. |
+| `onOpen` | `undefined \| (evt: MenuSurfaceOnOpenEventT) => void` | Callback for when the menu is opened. |
+| `open` | `undefined \| false \| true` | Opens the menu. |
 | `rootProps` | `Object` | By default, props spread to the Menu component. These will spread to the MenuSurfaceAnchor which is useful for things like overall positioning of the anchor. |
 
 

No alert changes

Improved metrics

Total package byte prevSize

754582

increased by1.53%

Lines of code

15710

increased by1.66%

Number of lines in readme file

223

increased by4.69%

Dependency changes

• Updated@material/menu@^1.1.1

• Updated@material/menu-surface@^1.1.1

• Updated@rmwc/base@^5.4.0

• Updated@rmwc/list@^5.4.0

• Updated@rmwc/types@^5.4.0