react-aria-menubutton - npm Package Compare versions

Comparing version 4.0.2 to 4.1.0

CHANGELOG.md

 # Changelog
 
+# 4.1.0
+
+- Add `openMenu()` and `closeMenu()` to API.
+- Improve (fix) UMD build.
+- Allow arbitrary props to pass through to Button, Menu, MenuItem, and Wrapper elements.
+
 # 4.0.2
@@ -4,0 +10,0 @@

index.js

@@ -0,1 +1,3 @@
+var externalStateControl = require('./lib/externalStateControl');
+
 module.exports = {
@@ -6,2 +8,4 @@ Wrapper: require('./lib/Wrapper'),
   MenuItem: require('./lib/MenuItem'),
+  openMenu: externalStateControl.openMenu,
+  closeMenu: externalStateControl.closeMenu,
 };

lib/Button.js

 var React = require('react');
+var specialAssign = require('./specialAssign');
 
+var checkedProps = {
+  children: React.PropTypes.node.isRequired,
+  disabled: React.PropTypes.bool,
+  tag: React.PropTypes.string,
+};
+
 module.exports = React.createClass({
   displayName: 'AriaMenuButton-Button',
 
-  propTypes: {
-    children: React.PropTypes.node.isRequired,
-    className: React.PropTypes.string,
-    disabled: React.PropTypes.bool,
-    id: React.PropTypes.string,
-    style: React.PropTypes.object,
-    tag: React.PropTypes.string,
-  },
+  propTypes: checkedProps,
 
@@ -67,6 +67,3 @@ contextTypes: {
 
-    return React.createElement(props.tag, {
-      className: props.className,
-      id: props.id,
-      style: props.style,
+    var buttonProps = {
       // "The menu button itself has a role of button."
@@ -82,4 +79,8 @@ role: 'button',
       onBlur: this.context.ambManager.handleBlur,
-    }, props.children);
+    };
+
+    specialAssign(buttonProps, props, checkedProps);
+
+    return React.createElement(props.tag, buttonProps, props.children);
   },
 });

lib/createManager.js

 var ReactDOM = require('react-dom');
 var createFocusGroup = require('focus-group');
+var externalStateControl = require('./externalStateControl');
 
@@ -18,2 +19,6 @@ var focusGroupOptions = {
 
+    if (this.options.id) {
+      externalStateControl.registerManager(this.options.id, this);
+    }
+
     this.handleBlur = handleBlur.bind(this);
@@ -69,2 +74,3 @@ this.handleSelection = handleSelection.bind(this);
   openMenu: function(openOptions) {
+    if (this.isOpen) return;
     openOptions = openOptions || {};
@@ -83,2 +89,3 @@ this.isOpen = true;
   closeMenu: function(closeOptions) {
+    if (!this.isOpen) return;
     closeOptions = closeOptions || {};
@@ -85,0 +92,0 @@ this.isOpen = false;

lib/Menu.js

 var React = require('react');
 var ReactDOM = require('react-dom');
 var createTapListener = require('teeny-tap');
+var specialAssign = require('./specialAssign');
 
+var checkedProps = {
+  children: React.PropTypes.oneOfType([
+    React.PropTypes.func,
+    React.PropTypes.node,
+  ]).isRequired,
+  tag: React.PropTypes.string,
+};
+
 module.exports = React.createClass({
   displayName: 'AriaMenuButton-Menu',
 
-  propTypes: {
-    children: React.PropTypes.oneOfType([
-      React.PropTypes.func,
-      React.PropTypes.node,
-    ]).isRequired,
-    id: React.PropTypes.string,
-    className: React.PropTypes.string,
-    style: React.PropTypes.object,
-    tag: React.PropTypes.string,
-  },
+  propTypes: checkedProps,
 
@@ -77,11 +77,12 @@ getDefaultProps: function() {
 
-    return React.createElement(props.tag, {
-      className: props.className,
-      id: props.id,
-      style: props.style,
+    var menuProps = {
       onKeyDown: ambManager.handleMenuKey,
       role: 'menu',
       onBlur: ambManager.handleBlur,
-    }, childrenToRender);
+    };
+
+    specialAssign(menuProps, props, checkedProps);
+
+    return React.createElement(props.tag, menuProps, childrenToRender);
   },
 });

lib/MenuItem.js

 var React = require('react');
+var specialAssign = require('./specialAssign');
 
+var checkedProps = {
+  children: React.PropTypes.node.isRequired,
+  tag: React.PropTypes.string,
+  text: React.PropTypes.string,
+  value: React.PropTypes.any,
+};
+
 module.exports = React.createClass({
   displayName: 'AriaMenuButton-MenuItem',
 
-  propTypes: {
-    children: React.PropTypes.node.isRequired,
-    className: React.PropTypes.string,
-    id: React.PropTypes.string,
-    style: React.PropTypes.object,
-    tag: React.PropTypes.string,
-    text: React.PropTypes.string,
-    value: React.PropTypes.any,
-  },
+  propTypes: checkedProps,
 
@@ -51,6 +51,4 @@ getDefaultProps: function() {
     var props = this.props;
-    return React.createElement(props.tag, {
-      className: props.className,
-      id: props.id,
-      style: props.style,
+
+    var menuItemProps = {
       onClick: this.selectItem,
@@ -61,4 +59,8 @@ onKeyDown: this.handleKeyDown,
       ref: this.registerNode,
-    }, props.children);
+    };
+
+    specialAssign(menuItemProps, props, checkedProps);
+
+    return React.createElement(props.tag, menuItemProps, props.children);
   },
 });

lib/Wrapper.js

 var React = require('react');
 var createManager = require('./createManager');
+var specialAssign = require('./specialAssign');
 
+var checkedProps = {
+  children: React.PropTypes.node.isRequired,
+  onSelection: React.PropTypes.func.isRequired,
+  closeOnSelection: React.PropTypes.bool,
+  tag: React.PropTypes.string,
+};
+
 module.exports = React.createClass({
   displayName: 'AriaMenuButton-Wrapper',
 
-  propTypes: {
-    children: React.PropTypes.node.isRequired,
-    onSelection: React.PropTypes.func.isRequired,
-    closeOnSelection: React.PropTypes.bool,
-    id: React.PropTypes.string,
-    className: React.PropTypes.string,
-    style: React.PropTypes.object,
-    tag: React.PropTypes.string,
-  },
+  propTypes: checkedProps,
 
@@ -35,2 +35,3 @@ getDefaultProps: function() {
       closeOnSelection: this.props.closeOnSelection,
+      id: this.props.id,
     });
@@ -41,8 +42,6 @@ },
     var props = this.props;
-    return React.createElement(props.tag, {
-      id: props.id,
-      className: props.className,
-      style: props.style,
-    }, props.children);
+    var wrapperProps = {};
+    specialAssign(wrapperProps, props, checkedProps);
+    return React.createElement(props.tag, wrapperProps, props.children);
   },
 });

package.json

 {
   "name": "react-aria-menubutton",
-  "version": "4.0.2",
+  "version": "4.1.0",
   "description": "A fully accessible and flexible React-powered menu button",
@@ -8,4 +8,4 @@ "main": "index.js",
     "lint": "eslint .",
-    "demo-bundle": "browserify demo/js/demo.js -t babelify --extension=.jsx -o demo/demo-bundle.js",
-    "demo-watch": "watchify demo/js/demo.js -d -t babelify --extension=.jsx -o demo/demo-bundle.js -v",
+    "demo-bundle": "webpack --config ./webpack-demo.config.js",
+    "demo-watch": "webpack --config ./webpack-demo.config.js --watch",
     "demo-dev": "npm run demo-watch & http-server demo",
@@ -15,3 +15,3 @@ "test-dev": "zuul --local 8080 --open -- test",
     "test": "zuul -- test",
-    "umd": "browserify index.js -p bundle-collapser/plugin -x react -x react-dom -t babelify --standalone ariaMenuButton | uglifyjs --compress --mangle > umd/ariaMenuButton.js"
+    "umd": "webpack --config ./webpack-umd.config.js"
   },
@@ -57,9 +57,7 @@ "babel": {
   "devDependencies": {
-    "babel-preset-es2015": "6.5.0",
+    "babel-loader": "6.2.4",
+    "babel-preset-es2015": "6.6.0",
     "babel-preset-react": "6.5.0",
-    "babelify": "7.2.0",
-    "browserify": "13.0.0",
-    "bundle-collapser": "1.2.1",
-    "eslint": "2.0.0",
-    "http-server": "0.8.5",
+    "eslint": "2.3.0",
+    "http-server": "0.9.0",
     "react": "0.14.7",
@@ -69,8 +67,7 @@ "react-addons-css-transition-group": "0.14.7",
     "react-dom": "0.14.7",
-    "sinon": "1.17.2",
-    "tape": "4.4.0",
-    "uglify-js": "2.6.1",
-    "watchify": "3.7.0",
+    "sinon": "1.17.3",
+    "tape": "4.5.1",
+    "webpack": "1.12.14",
     "zuul": "3.9.0"
   }
 }

README.md

@@ -73,3 +73,3 @@ # react-aria-menubutton [![Build Status](https://travis-ci.org/davidtheclark/react-aria-menubutton.svg?branch=master)](https://travis-ci.org/davidtheclark/react-aria-menubutton)
 
-But if you need a UMD version (which will include `focus-group` and `teeny-tap` in the bundle, but of course not React), you can get it via npmcdm at `https://npmcdn.com/react-aria-menubutton@[version-of-choice]/umd/ariaMenuButton.js`.
+But if you need a UMD version (which will include `focus-group` and `teeny-tap` in the bundle, but of course not `React` or `ReactDOM`), you can get it via npmcdm at `https://npmcdn.com/react-aria-menubutton@[version-of-choice]/umd/ReactAriaMenuButton.js`.
 If you don't know about npmcdn, [read about it here](https://npmcdn.com).
@@ -263,8 +263,2 @@
 
-**id** { String }: An id value.
-
-**className** { String }: A class value.
-
-**style** { Object }: An object for inline styles.
-
 ### `Button`
@@ -286,8 +280,4 @@
 
-**id** { String }: An id value.
+*Any additional props (e.g. `id`, `className`, `data-whatever`) are passed directly to the HTML element.*
 
-**className** { String }: A class value.
-
-**style** { Object }: An object for inline styles.
-
 ### `Menu`
@@ -316,8 +306,4 @@
 
-**id** { String }: An id value.
+*Any additional props (e.g. `id`, `className`, `data-whatever`) are passed directly to the HTML element.*
 
-**className** { String }: A class value.
-
-**style** { Object }: An object for inline styles.
-
 ### `MenuItem`
@@ -351,8 +337,24 @@
 
-**id** { String }: An id value.
+*Any additional props (e.g. `id`, `className`, `data-whatever`) are passed directly to the DOM element.*
 
-**className** { String }: A class value.
+### openMenu(wrapperId[, openOptions])
 
-**style** { Object }: An object for inline styles.
+Open a modal programmatically.
 
+*For this to work, you must provide an `id` prop to the `Wrapper` of the menu.* That `id` should be your first argument to `openMenu()`.
+
+These are the `openOptions`:
+
+- **focusMenu** { Boolean }: If `true`, the menu's first item will receive focus when the menu opens. Default: `false`.
+
+### closeMenu(wrapperId[, closeOptions])
+
+Close a modal programmatically.
+
+*For this to work, you must provide an `id` prop to the `Wrapper` of the menu.* That `id` should be your first argument to `closeMenu()`.
+
+These are the `closeOptions`:
+
+- **focusButton** { Boolean }: If `true`, the widget's button will receive focus when the menu closes. Default: `false`.
+
 ## Contributing & Development
@@ -359,0 +361,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

45539

increased by12.58%

Dev dependency count

13

decreased by-18.75%

Number of package files

16

increased by33.33%

Lines of code

437

increased by14.1%

Number of lines in readme file

362

increased by0.56%

Number of low supply chain risk alerts

0

decreased by-100%

No dependency changes