@rmwc/menu - npm Package Compare versions

Comparing version 6.1.4 to 7.0.0

dist/menu-surface/foundation.js

@@ -19,3 +19,3 @@ "use strict";
 var getAnchorCornerFromProp = function (anchorCorner) { return menu_surface_1.MDCMenuSurfaceFoundation.Corner[ANCHOR_CORNER_MAP[anchorCorner]]; };
-exports.useMenuSurfaceFoundation = function (props) {
+var useMenuSurfaceFoundation = function (props) {
     var _a = tslib_1.__read(react_1.useState(props.open), 2), open = _a[0], setOpen = _a[1];
@@ -177,7 +177,7 @@ var firstFocusableElementRef = react_1.useRef(null);
     var rootEl = elements.rootEl;
+    var onKeyDown = props.onKeyDown;
     var handleKeydown = react_1.useCallback(function (evt) {
-        var _a;
-        (_a = props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, evt);
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(evt);
         foundation.handleKeydown(evt);
-    }, [props.onKeyDown, foundation]);
+    }, [onKeyDown, foundation]);
     rootEl.setProp('onKeyDown', handleKeydown, true);
@@ -257,1 +257,2 @@ // fixed
 };
+exports.useMenuSurfaceFoundation = useMenuSurfaceFoundation;

dist/menu/foundation.js

@@ -8,3 +8,3 @@ "use strict";
 var base_1 = require("@rmwc/base");
-exports.useMenuFoundation = function (props) {
+var useMenuFoundation = function (props) {
     var menuSurfaceApi = react_1.useRef();
@@ -38,3 +38,3 @@ var listApi = react_1.useRef();
                     }
-                    return (_a = listApi.current) === null || _a === void 0 ? void 0 : _a.addClassToElementIndex.apply(_a, tslib_1.__spread(args));
+                    return (_a = listApi.current) === null || _a === void 0 ? void 0 : _a.addClassToElementIndex.apply(_a, tslib_1.__spreadArray([], tslib_1.__read(args)));
                 },
@@ -47,3 +47,3 @@ removeClassFromElementAtIndex: function () {
                     }
-                    return (_a = listApi.current) === null || _a === void 0 ? void 0 : _a.removeClassFromElementAtIndex.apply(_a, tslib_1.__spread(args));
+                    return (_a = listApi.current) === null || _a === void 0 ? void 0 : _a.removeClassFromElementAtIndex.apply(_a, tslib_1.__spreadArray([], tslib_1.__read(args)));
                 },
@@ -56,3 +56,3 @@ addAttributeToElementAtIndex: function () {
                     }
-                    return (_a = listApi.current) === null || _a === void 0 ? void 0 : _a.setAttributeForElementIndex.apply(_a, tslib_1.__spread(args));
+                    return (_a = listApi.current) === null || _a === void 0 ? void 0 : _a.setAttributeForElementIndex.apply(_a, tslib_1.__spreadArray([], tslib_1.__read(args)));
                 },
@@ -86,3 +86,3 @@ removeAttributeFromElementAtIndex: function (index, attr) {
                     }
-                    return (_a = listApi.current) === null || _a === void 0 ? void 0 : _a.focusItemAtIndex.apply(_a, tslib_1.__spread(args));
+                    return (_a = listApi.current) === null || _a === void 0 ? void 0 : _a.focusItemAtIndex.apply(_a, tslib_1.__spreadArray([], tslib_1.__read(args)));
                 },
@@ -94,12 +94,12 @@ focusListRoot: function () { var _a; return (_a = listApi.current) === null || _a === void 0 ? void 0 : _a.focusRoot(); }
     var rootEl = elements.rootEl;
+    var onClick = props.onClick;
     var handleClick = react_1.useCallback(function (evt) {
-        var _a;
-        (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, evt);
+        onClick === null || onClick === void 0 ? void 0 : onClick(evt);
         // fixes an issue with nested span element on list items
         var el = base_1.closest(evt.target, '.mdc-list-item');
         el && foundation.handleItemAction(el);
-    }, [foundation, props.onClick]);
+    }, [foundation, onClick]);
+    var onKeyDown = props.onKeyDown;
     var handleKeydown = react_1.useCallback(function (evt) {
-        var _a;
-        (_a = props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, evt);
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(evt);
         foundation.handleKeydown(evt);
@@ -116,7 +116,7 @@ // Jump through some hoops to find out
         }
-    }, [foundation, props.onKeyDown]);
+    }, [foundation, onKeyDown]);
+    var onOpen = props.onOpen, focusOnOpen = props.focusOnOpen;
     var handleOpen = react_1.useCallback(function (evt) {
-        var _a;
         var list = items();
-        if ((props.focusOnOpen || props.focusOnOpen === undefined) &&
+        if ((focusOnOpen || focusOnOpen === undefined) &&
             list.length > 0 &&
@@ -126,4 +126,4 @@ !list.some(function (el) { return el === document.activeElement; })) {
         }
-        (_a = props.onOpen) === null || _a === void 0 ? void 0 : _a.call(props, evt);
-    }, [props.onOpen, props.focusOnOpen, items]);
+        onOpen === null || onOpen === void 0 ? void 0 : onOpen(evt);
+    }, [onOpen, focusOnOpen, items]);
     rootEl.setProp('onKeyDown', handleKeydown, true);
@@ -141,1 +141,2 @@ rootEl.setProp('onClick', handleClick, true);
 };
+exports.useMenuFoundation = useMenuFoundation;

dist/readme.d.ts

 /// <reference types="react" />
-export default function (): JSX.Element;
+export default function Readme(): JSX.Element;
 export declare const galleryExample: JSX.Element;

dist/readme.js

@@ -15,3 +15,3 @@ "use strict";
 var checkbox_1 = require("../checkbox");
-function default_1() {
+function Readme() {
     return (react_1.default.createElement(_doc_utils_1.Docs, { title: "Menus", lead: "Menus display a list of choices on a transient sheet of material.", module: "@rmwc/menu", styles: [
@@ -85,3 +85,4 @@ '@material/menu/dist/mdc.menu.css',
         react_1.default.createElement(_doc_utils_1.DocsP, null, "You can specify any element or selector you want, but the simplest method is to pass `true` and use RMWC's built in `Portal` component."),
-        react_1.default.createElement(_doc_utils_1.DocsExample, { codeOnly: true }, /* jsx */ "\n          // Somewhere at the top level of your app\n          // Render the RMWC Portal\n          // You only have to do this once\n          import React from 'react';\n          import { Portal } from '@rmwc/base';\n\n          export default function App() {\n            return (\n              <div>\n                ...\n                <Portal />\n              </div>\n            )\n          }\n        "),
+        react_1.default.createElement(_doc_utils_1.DocsExample, { codeOnly: true }, 
+        /* jsx */ "\n          // Somewhere at the top level of your app\n          // Render the RMWC Portal\n          // You only have to do this once\n          import React from 'react';\n          import { Portal } from '@rmwc/base';\n\n          export default function App() {\n            return (\n              <div>\n                ...\n                <Portal />\n              </div>\n            )\n          }\n        "),
         react_1.default.createElement(_doc_utils_1.DocsP, null, "Now you can use the `renderToPortal` prop. Below is a contrived example of a menu being cut off due to `overflow: hidden`."),
@@ -111,3 +112,3 @@ react_1.default.createElement(_doc_utils_1.DocsExample, null, function Example() {
 }
-exports.default = default_1;
+exports.default = Readme;
 exports.galleryExample = (react_1.default.createElement("div", { "aria-hidden": "false", className: "mdc-menu  mdc-menu-surface--open mdc-menu-surface", style: { position: 'static' } },
@@ -114,0 +115,0 @@ react_1.default.createElement("div", { role: "menu", className: "mdc-list mdc-menu__items mdc-list" },

next/menu-surface/foundation.js

@@ -173,7 +173,7 @@ import { __assign, __read, __rest } from "tslib";
     var rootEl = elements.rootEl;
+    var onKeyDown = props.onKeyDown;
     var handleKeydown = useCallback(function (evt) {
-        var _a;
-        (_a = props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, evt);
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(evt);
         foundation.handleKeydown(evt);
-    }, [props.onKeyDown, foundation]);
+    }, [onKeyDown, foundation]);
     rootEl.setProp('onKeyDown', handleKeydown, true);
@@ -180,0 +180,0 @@ // fixed

next/menu/foundation.js

@@ -1,2 +0,2 @@
-import { __assign, __read, __rest, __spread } from "tslib";
+import { __assign, __read, __rest, __spreadArray } from "tslib";
 import { useCallback, useRef, useEffect } from 'react';
@@ -34,3 +34,3 @@ import { MDCMenuFoundation } from '@material/menu';
                     }
-                    return (_a = listApi.current) === null || _a === void 0 ? void 0 : _a.addClassToElementIndex.apply(_a, __spread(args));
+                    return (_a = listApi.current) === null || _a === void 0 ? void 0 : _a.addClassToElementIndex.apply(_a, __spreadArray([], __read(args)));
                 },
@@ -43,3 +43,3 @@ removeClassFromElementAtIndex: function () {
                     }
-                    return (_a = listApi.current) === null || _a === void 0 ? void 0 : _a.removeClassFromElementAtIndex.apply(_a, __spread(args));
+                    return (_a = listApi.current) === null || _a === void 0 ? void 0 : _a.removeClassFromElementAtIndex.apply(_a, __spreadArray([], __read(args)));
                 },
@@ -52,3 +52,3 @@ addAttributeToElementAtIndex: function () {
                     }
-                    return (_a = listApi.current) === null || _a === void 0 ? void 0 : _a.setAttributeForElementIndex.apply(_a, __spread(args));
+                    return (_a = listApi.current) === null || _a === void 0 ? void 0 : _a.setAttributeForElementIndex.apply(_a, __spreadArray([], __read(args)));
                 },
@@ -82,3 +82,3 @@ removeAttributeFromElementAtIndex: function (index, attr) {
                     }
-                    return (_a = listApi.current) === null || _a === void 0 ? void 0 : _a.focusItemAtIndex.apply(_a, __spread(args));
+                    return (_a = listApi.current) === null || _a === void 0 ? void 0 : _a.focusItemAtIndex.apply(_a, __spreadArray([], __read(args)));
                 },
@@ -90,12 +90,12 @@ focusListRoot: function () { var _a; return (_a = listApi.current) === null || _a === void 0 ? void 0 : _a.focusRoot(); }
     var rootEl = elements.rootEl;
+    var onClick = props.onClick;
     var handleClick = useCallback(function (evt) {
-        var _a;
-        (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, evt);
+        onClick === null || onClick === void 0 ? void 0 : onClick(evt);
         // fixes an issue with nested span element on list items
         var el = closest(evt.target, '.mdc-list-item');
         el && foundation.handleItemAction(el);
-    }, [foundation, props.onClick]);
+    }, [foundation, onClick]);
+    var onKeyDown = props.onKeyDown;
     var handleKeydown = useCallback(function (evt) {
-        var _a;
-        (_a = props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, evt);
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(evt);
         foundation.handleKeydown(evt);
@@ -112,7 +112,7 @@ // Jump through some hoops to find out
         }
-    }, [foundation, props.onKeyDown]);
+    }, [foundation, onKeyDown]);
+    var onOpen = props.onOpen, focusOnOpen = props.focusOnOpen;
     var handleOpen = useCallback(function (evt) {
-        var _a;
         var list = items();
-        if ((props.focusOnOpen || props.focusOnOpen === undefined) &&
+        if ((focusOnOpen || focusOnOpen === undefined) &&
             list.length > 0 &&
@@ -122,4 +122,4 @@ !list.some(function (el) { return el === document.activeElement; })) {
         }
-        (_a = props.onOpen) === null || _a === void 0 ? void 0 : _a.call(props, evt);
-    }, [props.onOpen, props.focusOnOpen, items]);
+        onOpen === null || onOpen === void 0 ? void 0 : onOpen(evt);
+    }, [onOpen, focusOnOpen, items]);
     rootEl.setProp('onKeyDown', handleKeydown, true);
@@ -126,0 +126,0 @@ rootEl.setProp('onClick', handleClick, true);

next/readme.d.ts

 /// <reference types="react" />
-export default function (): JSX.Element;
+export default function Readme(): JSX.Element;
 export declare const galleryExample: JSX.Element;

next/readme.js

@@ -12,3 +12,3 @@ import { __read } from "tslib";
 import { Checkbox } from '../checkbox';
-export default function () {
+export default function Readme() {
     return (React.createElement(Docs, { title: "Menus", lead: "Menus display a list of choices on a transient sheet of material.", module: "@rmwc/menu", styles: [
@@ -82,3 +82,4 @@ '@material/menu/dist/mdc.menu.css',
         React.createElement(DocsP, null, "You can specify any element or selector you want, but the simplest method is to pass `true` and use RMWC's built in `Portal` component."),
-        React.createElement(DocsExample, { codeOnly: true }, /* jsx */ "\n          // Somewhere at the top level of your app\n          // Render the RMWC Portal\n          // You only have to do this once\n          import React from 'react';\n          import { Portal } from '@rmwc/base';\n\n          export default function App() {\n            return (\n              <div>\n                ...\n                <Portal />\n              </div>\n            )\n          }\n        "),
+        React.createElement(DocsExample, { codeOnly: true }, 
+        /* jsx */ "\n          // Somewhere at the top level of your app\n          // Render the RMWC Portal\n          // You only have to do this once\n          import React from 'react';\n          import { Portal } from '@rmwc/base';\n\n          export default function App() {\n            return (\n              <div>\n                ...\n                <Portal />\n              </div>\n            )\n          }\n        "),
         React.createElement(DocsP, null, "Now you can use the `renderToPortal` prop. Below is a contrived example of a menu being cut off due to `overflow: hidden`."),
@@ -85,0 +86,0 @@ React.createElement(DocsExample, null, function Example() {

package.json

 {
   "name": "@rmwc/menu",
-  "version": "6.1.4",
+  "version": "7.0.0",
   "description": "RMWC Menu component",
@@ -35,4 +35,4 @@ "main": "dist/index.js",
   "peerDependencies": {
-    "react": "^16.3.x",
-    "react-dom": "^16.3.x"
+    "react": ">=16.8.x",
+    "react-dom": ">=16.8.x"
   },
@@ -42,7 +42,7 @@ "dependencies": {
     "@material/menu-surface": "^5.1.0",
-    "@rmwc/base": "^6.1.4",
-    "@rmwc/list": "^6.1.4",
-    "@rmwc/types": "^6.0.5"
+    "@rmwc/base": "^7.0.0",
+    "@rmwc/list": "^7.0.0",
+    "@rmwc/types": "^7.0.0"
   },
-  "gitHead": "c33a09f349373930ac817c89f21b3246f9e332c2"
+  "gitHead": "4c1d2d84d146b1baa5f764be95b1a3ed73e11424"
 }

README.md

@@ -29,4 +29,4 @@ # Menus
         open={open}
-        onSelect={evt => console.log(evt.detail.index)}
-        onClose={evt => setOpen(false)}
+        onSelect={(evt) => console.log(evt.detail.index)}
+        onClose={(evt) => setOpen(false)}
       >
@@ -40,3 +40,3 @@ <MenuItem>Cookies</MenuItem>
 
-      <Button raised onClick={evt => setOpen(!open)}>
+      <Button raised onClick={(evt) => setOpen(!open)}>
         Menu
@@ -55,3 +55,3 @@ </Button>
     <MenuSurfaceAnchor>
-      <MenuSurface open={open} onClose={evt => setOpen(false)}>
+      <MenuSurface open={open} onClose={(evt) => setOpen(false)}>
         <div style={{ padding: '1rem', width: '8rem' }}>
@@ -62,3 +62,3 @@ Make the content whatever you want.
 
-      <Button raised onClick={evt => setOpen(!open)}>
+      <Button raised onClick={(evt) => setOpen(!open)}>
         Menu Surface
@@ -77,7 +77,7 @@ </Button>
     <MenuSurfaceAnchor>
-      <MenuSurface open={open} onClose={evt => setOpen(false)}>
+      <MenuSurface open={open} onClose={(evt) => setOpen(false)}>
         <div style={{ padding: '1rem', width: '8rem' }}>Menu</div>
       </MenuSurface>
       {/** The handle can be any component you want */}
-      <IconButton icon="menu" onClick={evt => setOpen(!open)} />
+      <IconButton icon="menu" onClick={(evt) => setOpen(!open)} />
     </MenuSurfaceAnchor>
@@ -114,5 +114,4 @@ );
 function Example() {
-  const [anchorCorner, setAnchorCorner] = React.useState(
-    'topLeft'
-  );
+  const [anchorCorner, setAnchorCorner] =
+    React.useState('topLeft');
 
@@ -133,3 +132,3 @@ return (
         label="anchorCorner"
-        onChange={evt => setAnchorCorner(evt.currentTarget.value)}
+        onChange={(evt) => setAnchorCorner(evt.currentTarget.value)}
         options={[
@@ -159,2 +158,3 @@ 'topLeft',
 
+  `
   // Somewhere at the top level of your app
@@ -174,2 +174,3 @@ // Render the RMWC Portal
   }
+`
 
@@ -196,3 +197,3 @@ ```
           <Menu open renderToPortal={renderToPortal}>
-            {options.map(o => (
+            {options.map((o) => (
               <MenuItem key={o}>{o}</MenuItem>
@@ -205,3 +206,3 @@ ))}
         checked={renderToPortal}
-        onChange={evt => setRenderToPortal(evt.currentTarget.checked)}
+        onChange={(evt) => setRenderToPortal(evt.currentTarget.checked)}
         label="renderToPortal"
@@ -230,12 +231,4 @@ />
 
-### Props
 
-| Name | Type | Description |
-|------|------|-------------|
-| `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. |
 
-
 ## MenuSurface
@@ -285,14 +278,6 @@ ### Props
 |------|------|-------------|
-| `anchorCorner` | `AnchorT` | Manually position the menu to one of the corners. |
-| `apiRef` | `undefined \| (api: MenuSurfaceApi \| null) => void` | An internal api for cross component communication. |
 | `children` | `React.ReactNode` | Children to render |
-| `fixed` | `undefined \| false \| true` | Make the menu position fixed. |
-| `foundationRef` | `React.Ref<MDCMenuSurfaceFoundation>` | Advanced: A reference to the MDCFoundation. |
 | `handle` | `ReactElement<any>` | An element that will open the menu when clicked |
-| `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. |
-| `renderToPortal` | `PortalPropT` | Renders the menu to a portal. Useful for situations where the content might be cutoff by an overflow: hidden container. You can pass "true" to render to the default RMWC portal. |
 | `rootProps` | `Object` | By default, props spread to the Menu component. These will spread to the MenuSurfaceAnchor which is useful for things like overall positioning of the anchor. |
 
 

No alert changes

Improved metrics

Lines of code

1751

increased by0.17%

Worsened metrics

Total package byte prevSize

104935

decreased by-0.83%

Number of lines in readme file

271

decreased by-5.24%

Dependency changes

• + Added@rmwc/base@7.0.3(transitive)

• + Added@rmwc/icon@7.0.3(transitive)

• + Added@rmwc/list@7.0.3(transitive)

• + Added@rmwc/provider@7.0.3(transitive)

• + Added@rmwc/ripple@7.0.3(transitive)

• + Added@rmwc/types@7.0.3(transitive)

• + Addedreact@19.0.0(transitive)

• + Addedreact-dom@19.0.0(transitive)

• + Addedscheduler@0.25.0(transitive)

• + Addedtslib@2.8.1(transitive)

• - Removed@rmwc/base@6.1.4(transitive)

• - Removed@rmwc/icon@6.1.4(transitive)

• - Removed@rmwc/list@6.1.4(transitive)

• - Removed@rmwc/provider@6.1.4(transitive)

• - Removed@rmwc/ripple@6.1.4(transitive)

• - Removed@rmwc/types@6.0.5(transitive)

• - Removedjs-tokens@4.0.0(transitive)

• - Removedloose-envify@1.4.0(transitive)

• - Removedobject-assign@4.1.1(transitive)

• - Removedprop-types@15.8.1(transitive)

• - Removedreact@16.14.0(transitive)

• - Removedreact-dom@16.14.0(transitive)

• - Removedreact-is@16.13.1(transitive)

• - Removedscheduler@0.19.1(transitive)

• Updated@rmwc/base@^7.0.0

• Updated@rmwc/list@^7.0.0

• Updated@rmwc/types@^7.0.0