react-aria-menubutton
Advanced tools
Comparing version 0.5.0 to 0.5.1
# Changelog | ||
## 0.5.1 | ||
- Update build. | ||
## 0.5.0 | ||
@@ -4,0 +7,0 @@ - Make class names a little more explicit (change `menuWrapper--trans` to `menuWrapper--transition` and `li` to `menuItemWrapper`). |
@@ -14,5 +14,5 @@ 'use strict'; | ||
var _React = require('react'); | ||
var _React$Component$PropTypes = require('react'); | ||
var _React2 = _interopRequireWildcard(_React); | ||
var _React$Component$PropTypes2 = _interopRequireWildcard(_React$Component$PropTypes); | ||
@@ -38,10 +38,17 @@ var _import = require('./keys'); | ||
var CSSTransitionGroup = opts.reactAddons ? opts.reactAddons.CSSTransitionGroup : false; | ||
_cssClassnamer2['default'].init(opts.componentName, opts.namespace); | ||
var AriaMenuButton = (function (_React$Component) { | ||
function AriaMenuButton(props) { | ||
_classCallCheck(this, AriaMenuButton); | ||
var TransitionGroup = false; | ||
if (opts.transition) { | ||
if (opts.transition.displayName !== 'ReactCSSTransitionGroup') { | ||
throw new Error('createAriaMenuButtons `transition` option expects a ReactCSSTransitionGroup'); | ||
} | ||
TransitionGroup = opts.transition; | ||
} | ||
_React$Component.call(this, props); | ||
var MenuButton = (function (_Component) { | ||
function MenuButton(props) { | ||
_classCallCheck(this, MenuButton); | ||
_Component.call(this, props); | ||
this.state = { isOpen: !!props.startOpen }; | ||
@@ -51,19 +58,13 @@ this.focusManager = _focusManager2['default'](); | ||
_inherits(AriaMenuButton, _React$Component); | ||
_inherits(MenuButton, _Component); | ||
AriaMenuButton.prototype.shouldComponentUpdate = function shouldComponentUpdate(newProps, newState) { | ||
MenuButton.prototype.shouldComponentUpdate = function shouldComponentUpdate(newProps, newState) { | ||
return this.state.isOpen !== newState.isOpen || this.props.selectedValue !== newProps.selectedValue; | ||
}; | ||
AriaMenuButton.prototype.componentWillMount = function componentWillMount() { | ||
if (this.props.transition && !CSSTransitionGroup) { | ||
throw new Error('If you want to use transitions with ariaMenuButton, you need to pass it ' + 'React with addons'); | ||
} | ||
MenuButton.prototype.componentDidMount = function componentDidMount() { | ||
this.focusManager.trigger = _React$Component$PropTypes2['default'].findDOMNode(this.refs.trigger); | ||
}; | ||
AriaMenuButton.prototype.componentDidMount = function componentDidMount() { | ||
this.focusManager.trigger = _React2['default'].findDOMNode(this.refs.trigger); | ||
}; | ||
AriaMenuButton.prototype.openMenu = function openMenu() { | ||
MenuButton.prototype.openMenu = function openMenu() { | ||
var innerFocus = arguments[0] === undefined ? false : arguments[0]; | ||
@@ -74,3 +75,3 @@ | ||
AriaMenuButton.prototype.closeMenu = function closeMenu() { | ||
MenuButton.prototype.closeMenu = function closeMenu() { | ||
var _this = this; | ||
@@ -86,7 +87,7 @@ | ||
AriaMenuButton.prototype.toggleMenu = function toggleMenu() { | ||
MenuButton.prototype.toggleMenu = function toggleMenu() { | ||
if (this.state.isOpen) this.closeMenu();else this.openMenu(); | ||
}; | ||
AriaMenuButton.prototype.handleAnywhereKey = function handleAnywhereKey(e) { | ||
MenuButton.prototype.handleAnywhereKey = function handleAnywhereKey(e) { | ||
var key = e.key; | ||
@@ -117,3 +118,3 @@ var isLetterKey = isLetterKeyEvent(e); | ||
AriaMenuButton.prototype.handleTriggerKey = function handleTriggerKey(e) { | ||
MenuButton.prototype.handleTriggerKey = function handleTriggerKey(e) { | ||
var key = e.key; | ||
@@ -126,3 +127,3 @@ if (key !== keys.ENTER && key !== keys.SPACE) { | ||
AriaMenuButton.prototype.handleMenuKey = function handleMenuKey(e) { | ||
MenuButton.prototype.handleMenuKey = function handleMenuKey(e) { | ||
// "With focus on the drop-down menu, pressing Escape closes | ||
@@ -140,3 +141,3 @@ // the menu and returns focus to the button. | ||
AriaMenuButton.prototype.checkLetterKeys = function checkLetterKeys(kc) { | ||
MenuButton.prototype.checkLetterKeys = function checkLetterKeys(kc) { | ||
// "Typing a letter (printable character) key moves focus to the next | ||
@@ -147,6 +148,6 @@ // instance of a visible node whose title begins with that printable letter." | ||
AriaMenuButton.prototype.handleBlur = function handleBlur() { | ||
MenuButton.prototype.handleBlur = function handleBlur() { | ||
var _this2 = this; | ||
this.blurTimeout = setTimeout(function () { | ||
setTimeout(function () { | ||
var activeEl = document.activeElement; | ||
@@ -161,3 +162,3 @@ if (activeEl === _this2.focusManager.trigger) return; | ||
AriaMenuButton.prototype.handleSelection = function handleSelection(v) { | ||
MenuButton.prototype.handleSelection = function handleSelection(v) { | ||
if (this.props.closeOnSelection) this.closeMenu(); | ||
@@ -167,8 +168,7 @@ this.props.handleSelection(v); | ||
AriaMenuButton.prototype.handleOverlayClick = function handleOverlayClick() { | ||
console.log('overlay click triggered'); | ||
MenuButton.prototype.handleOverlayClick = function handleOverlayClick() { | ||
this.closeMenu(false); | ||
}; | ||
AriaMenuButton.prototype.render = function render() { | ||
MenuButton.prototype.render = function render() { | ||
var props = this.props; | ||
@@ -182,3 +182,3 @@ var isOpen = this.state.isOpen; | ||
var menu = isOpen ? _React2['default'].createElement(_Menu2['default'], _extends({}, props, { | ||
var menu = isOpen ? _React$Component$PropTypes2['default'].createElement(_Menu2['default'], _extends({}, props, { | ||
handleSelection: this.handleSelection.bind(this), | ||
@@ -188,10 +188,10 @@ receiveFocus: this.state.innerFocus, | ||
var menuWrapper = props.transition ? _React2['default'].createElement( | ||
CSSTransitionGroup, | ||
var menuWrapper = TransitionGroup ? _React$Component$PropTypes2['default'].createElement( | ||
TransitionGroup, | ||
{ transitionName: _cssClassnamer2['default'].applyNamespace('is'), | ||
component: 'div', | ||
className: [_cssClassnamer2['default'].componentPart('menuWrapper'), _cssClassnamer2['default'].componentPart('menuWrapper--trans')].join(' '), | ||
className: [_cssClassnamer2['default'].componentPart('menuWrapper'), _cssClassnamer2['default'].componentPart('menuWrapper--transition')].join(' '), | ||
onKeyDown: this.handleMenuKey.bind(this) }, | ||
menu | ||
) : _React2['default'].createElement( | ||
) : _React$Component$PropTypes2['default'].createElement( | ||
'div', | ||
@@ -215,3 +215,3 @@ { className: _cssClassnamer2['default'].componentPart('menuWrapper'), | ||
var outsideOverlay = !isOpen ? false : _React2['default'].createElement('div', { id: outsideId, | ||
var outsideOverlay = !isOpen ? false : _React$Component$PropTypes2['default'].createElement('div', { id: outsideId, | ||
onClick: this.handleOverlayClick.bind(this), | ||
@@ -227,3 +227,3 @@ ref: 'overlay', | ||
return _React2['default'].createElement( | ||
return _React$Component$PropTypes2['default'].createElement( | ||
'div', | ||
@@ -235,6 +235,6 @@ { id: props.id, | ||
outsideOverlay, | ||
_React2['default'].createElement( | ||
_React$Component$PropTypes2['default'].createElement( | ||
'div', | ||
{ style: innerStyle }, | ||
_React2['default'].createElement( | ||
_React$Component$PropTypes2['default'].createElement( | ||
'div', | ||
@@ -257,20 +257,17 @@ { id: triggerId, | ||
return AriaMenuButton; | ||
})(_React2['default'].Component); | ||
return MenuButton; | ||
})(_React$Component$PropTypes.Component); | ||
var pt = _React2['default'].PropTypes; | ||
AriaMenuButton.propTypes = { | ||
handleSelection: pt.func.isRequired, | ||
items: pt.arrayOf(pt.object).isRequired, | ||
triggerContent: pt.oneOfType([pt.string, pt.element]).isRequired, | ||
closeOnSelection: pt.bool, | ||
flushRight: pt.bool, | ||
id: pt.string, | ||
startOpen: pt.bool, | ||
selectedValue: pt.oneOfType([pt.string, pt.number, pt.bool]), | ||
transition: pt.bool | ||
MenuButton.propTypes = { | ||
handleSelection: _React$Component$PropTypes.PropTypes.func.isRequired, | ||
items: _React$Component$PropTypes.PropTypes.arrayOf(_React$Component$PropTypes.PropTypes.object).isRequired, | ||
triggerContent: _React$Component$PropTypes.PropTypes.oneOfType([_React$Component$PropTypes.PropTypes.string, _React$Component$PropTypes.PropTypes.element]).isRequired, | ||
closeOnSelection: _React$Component$PropTypes.PropTypes.bool, | ||
flushRight: _React$Component$PropTypes.PropTypes.bool, | ||
id: _React$Component$PropTypes.PropTypes.string, | ||
startOpen: _React$Component$PropTypes.PropTypes.bool, | ||
selectedValue: _React$Component$PropTypes.PropTypes.oneOfType([_React$Component$PropTypes.PropTypes.string, _React$Component$PropTypes.PropTypes.number, _React$Component$PropTypes.PropTypes.bool]) | ||
}; | ||
return AriaMenuButton; | ||
return MenuButton; | ||
} | ||
@@ -277,0 +274,0 @@ |
@@ -24,3 +24,4 @@ 'use strict'; | ||
} | ||
}; | ||
module.exports = exports['default']; |
@@ -13,5 +13,5 @@ 'use strict'; | ||
var _React = require('react'); | ||
var _React$Component$PropTypes = require('react'); | ||
var _React2 = _interopRequireWildcard(_React); | ||
var _React$Component$PropTypes2 = _interopRequireWildcard(_React$Component$PropTypes); | ||
@@ -26,12 +26,12 @@ var _MenuItem = require('./MenuItem'); | ||
var Menu = (function (_React$Component) { | ||
var Menu = (function (_Component) { | ||
function Menu() { | ||
_classCallCheck(this, Menu); | ||
if (_React$Component != null) { | ||
_React$Component.apply(this, arguments); | ||
if (_Component != null) { | ||
_Component.apply(this, arguments); | ||
} | ||
} | ||
_inherits(Menu, _React$Component); | ||
_inherits(Menu, _Component); | ||
@@ -55,8 +55,8 @@ Menu.prototype.shouldComponentUpdate = function shouldComponentUpdate(newProps) { | ||
var items = props.items.map(function (item, i) { | ||
return _React2['default'].createElement( | ||
return _React$Component$PropTypes2['default'].createElement( | ||
'li', | ||
{ key: i, | ||
className: _cssClassnamer2['default'].componentPart('li'), | ||
className: _cssClassnamer2['default'].componentPart('menuItemWrapper'), | ||
role: 'presentation' }, | ||
_React2['default'].createElement(_MenuItem2['default'], _extends({}, item, { | ||
_React$Component$PropTypes2['default'].createElement(_MenuItem2['default'], _extends({}, item, { | ||
focusManager: props.focusManager, | ||
@@ -71,3 +71,3 @@ handleSelection: props.handleSelection, | ||
return _React2['default'].createElement( | ||
return _React$Component$PropTypes2['default'].createElement( | ||
'ol', | ||
@@ -81,16 +81,14 @@ { className: menuClasses.join(' '), | ||
return Menu; | ||
})(_React2['default'].Component); | ||
})(_React$Component$PropTypes.Component); | ||
exports['default'] = Menu; | ||
var pt = _React2['default'].PropTypes; | ||
Menu.propTypes = { | ||
focusManager: pt.object.isRequired, | ||
items: pt.arrayOf(pt.object).isRequired, | ||
flushRight: pt.bool, | ||
handleSelection: pt.func, | ||
receiveFocus: pt.bool, | ||
selectedValue: pt.any | ||
focusManager: _React$Component$PropTypes.PropTypes.object.isRequired, | ||
items: _React$Component$PropTypes.PropTypes.arrayOf(_React$Component$PropTypes.PropTypes.object).isRequired, | ||
flushRight: _React$Component$PropTypes.PropTypes.bool, | ||
handleSelection: _React$Component$PropTypes.PropTypes.func, | ||
receiveFocus: _React$Component$PropTypes.PropTypes.bool, | ||
selectedValue: _React$Component$PropTypes.PropTypes.oneOfType([_React$Component$PropTypes.PropTypes.string, _React$Component$PropTypes.PropTypes.number, _React$Component$PropTypes.PropTypes.bool]) | ||
}; | ||
module.exports = exports['default']; |
@@ -11,5 +11,5 @@ 'use strict'; | ||
var _React = require('react'); | ||
var _React$PropTypes$Component = require('react'); | ||
var _React2 = _interopRequireWildcard(_React); | ||
var _React$PropTypes$Component2 = _interopRequireWildcard(_React$PropTypes$Component); | ||
@@ -22,12 +22,12 @@ var _ENTER$SPACE = require('./keys'); | ||
var MenuItem = (function (_React$Component) { | ||
var MenuItem = (function (_Component) { | ||
function MenuItem() { | ||
_classCallCheck(this, MenuItem); | ||
if (_React$Component != null) { | ||
_React$Component.apply(this, arguments); | ||
if (_Component != null) { | ||
_Component.apply(this, arguments); | ||
} | ||
} | ||
_inherits(MenuItem, _React$Component); | ||
_inherits(MenuItem, _Component); | ||
@@ -42,3 +42,3 @@ MenuItem.prototype.shouldComponentUpdate = function shouldComponentUpdate(newProps) { | ||
text: this.props.text, | ||
node: _React2['default'].findDOMNode(this) | ||
node: _React$PropTypes$Component2['default'].findDOMNode(this) | ||
}); | ||
@@ -75,3 +75,3 @@ }; | ||
// ... so not in tab order, but programatically focusable | ||
return _React2['default'].createElement( | ||
return _React$PropTypes$Component2['default'].createElement( | ||
'div', | ||
@@ -90,17 +90,15 @@ { id: props.id, | ||
return MenuItem; | ||
})(_React2['default'].Component); | ||
})(_React$PropTypes$Component.Component); | ||
exports['default'] = MenuItem; | ||
var pt = _React2['default'].PropTypes; | ||
MenuItem.propTypes = { | ||
focusManager: pt.object.isRequired, | ||
handleSelection: pt.func.isRequired, | ||
content: pt.oneOfType([pt.string, pt.element]).isRequired, | ||
id: pt.string, | ||
isSelected: pt.bool, | ||
text: pt.string, | ||
value: pt.oneOfType([pt.string, pt.number, pt.bool]) | ||
focusManager: _React$PropTypes$Component.PropTypes.object.isRequired, | ||
handleSelection: _React$PropTypes$Component.PropTypes.func.isRequired, | ||
content: _React$PropTypes$Component.PropTypes.oneOfType([_React$PropTypes$Component.PropTypes.string, _React$PropTypes$Component.PropTypes.element]).isRequired, | ||
id: _React$PropTypes$Component.PropTypes.string, | ||
isSelected: _React$PropTypes$Component.PropTypes.bool, | ||
text: _React$PropTypes$Component.PropTypes.string, | ||
value: _React$PropTypes$Component.PropTypes.oneOfType([_React$PropTypes$Component.PropTypes.string, _React$PropTypes$Component.PropTypes.number, _React$PropTypes$Component.PropTypes.bool]) | ||
}; | ||
module.exports = exports['default']; |
@@ -70,5 +70,5 @@ (function webpackUniversalModuleDefinition(root, factory) { | ||
var _React = __webpack_require__(1); | ||
var _React$Component$PropTypes = __webpack_require__(1); | ||
var _React2 = _interopRequireWildcard(_React); | ||
var _React$Component$PropTypes2 = _interopRequireWildcard(_React$Component$PropTypes); | ||
@@ -94,10 +94,17 @@ var _import = __webpack_require__(2); | ||
var CSSTransitionGroup = opts.reactAddons ? opts.reactAddons.CSSTransitionGroup : false; | ||
_cssClassnamer2['default'].init(opts.componentName, opts.namespace); | ||
var AriaMenuButton = (function (_React$Component) { | ||
function AriaMenuButton(props) { | ||
_classCallCheck(this, AriaMenuButton); | ||
var TransitionGroup = false; | ||
if (opts.transition) { | ||
if (opts.transition.displayName !== 'ReactCSSTransitionGroup') { | ||
throw new Error('createAriaMenuButtons `transition` option expects a ReactCSSTransitionGroup'); | ||
} | ||
TransitionGroup = opts.transition; | ||
} | ||
_React$Component.call(this, props); | ||
var MenuButton = (function (_Component) { | ||
function MenuButton(props) { | ||
_classCallCheck(this, MenuButton); | ||
_Component.call(this, props); | ||
this.state = { isOpen: !!props.startOpen }; | ||
@@ -107,19 +114,13 @@ this.focusManager = _focusManager2['default'](); | ||
_inherits(AriaMenuButton, _React$Component); | ||
_inherits(MenuButton, _Component); | ||
AriaMenuButton.prototype.shouldComponentUpdate = function shouldComponentUpdate(newProps, newState) { | ||
MenuButton.prototype.shouldComponentUpdate = function shouldComponentUpdate(newProps, newState) { | ||
return this.state.isOpen !== newState.isOpen || this.props.selectedValue !== newProps.selectedValue; | ||
}; | ||
AriaMenuButton.prototype.componentWillMount = function componentWillMount() { | ||
if (this.props.transition && !CSSTransitionGroup) { | ||
throw new Error('If you want to use transitions with ariaMenuButton, you need to pass it ' + 'React with addons'); | ||
} | ||
MenuButton.prototype.componentDidMount = function componentDidMount() { | ||
this.focusManager.trigger = _React$Component$PropTypes2['default'].findDOMNode(this.refs.trigger); | ||
}; | ||
AriaMenuButton.prototype.componentDidMount = function componentDidMount() { | ||
this.focusManager.trigger = _React2['default'].findDOMNode(this.refs.trigger); | ||
}; | ||
AriaMenuButton.prototype.openMenu = function openMenu() { | ||
MenuButton.prototype.openMenu = function openMenu() { | ||
var innerFocus = arguments[0] === undefined ? false : arguments[0]; | ||
@@ -130,3 +131,3 @@ | ||
AriaMenuButton.prototype.closeMenu = function closeMenu() { | ||
MenuButton.prototype.closeMenu = function closeMenu() { | ||
var _this = this; | ||
@@ -142,7 +143,7 @@ | ||
AriaMenuButton.prototype.toggleMenu = function toggleMenu() { | ||
MenuButton.prototype.toggleMenu = function toggleMenu() { | ||
if (this.state.isOpen) this.closeMenu();else this.openMenu(); | ||
}; | ||
AriaMenuButton.prototype.handleAnywhereKey = function handleAnywhereKey(e) { | ||
MenuButton.prototype.handleAnywhereKey = function handleAnywhereKey(e) { | ||
var key = e.key; | ||
@@ -173,3 +174,3 @@ var isLetterKey = isLetterKeyEvent(e); | ||
AriaMenuButton.prototype.handleTriggerKey = function handleTriggerKey(e) { | ||
MenuButton.prototype.handleTriggerKey = function handleTriggerKey(e) { | ||
var key = e.key; | ||
@@ -182,3 +183,3 @@ if (key !== keys.ENTER && key !== keys.SPACE) { | ||
AriaMenuButton.prototype.handleMenuKey = function handleMenuKey(e) { | ||
MenuButton.prototype.handleMenuKey = function handleMenuKey(e) { | ||
// "With focus on the drop-down menu, pressing Escape closes | ||
@@ -196,3 +197,3 @@ // the menu and returns focus to the button. | ||
AriaMenuButton.prototype.checkLetterKeys = function checkLetterKeys(kc) { | ||
MenuButton.prototype.checkLetterKeys = function checkLetterKeys(kc) { | ||
// "Typing a letter (printable character) key moves focus to the next | ||
@@ -203,6 +204,6 @@ // instance of a visible node whose title begins with that printable letter." | ||
AriaMenuButton.prototype.handleBlur = function handleBlur() { | ||
MenuButton.prototype.handleBlur = function handleBlur() { | ||
var _this2 = this; | ||
this.blurTimeout = setTimeout(function () { | ||
setTimeout(function () { | ||
var activeEl = document.activeElement; | ||
@@ -217,3 +218,3 @@ if (activeEl === _this2.focusManager.trigger) return; | ||
AriaMenuButton.prototype.handleSelection = function handleSelection(v) { | ||
MenuButton.prototype.handleSelection = function handleSelection(v) { | ||
if (this.props.closeOnSelection) this.closeMenu(); | ||
@@ -223,8 +224,7 @@ this.props.handleSelection(v); | ||
AriaMenuButton.prototype.handleOverlayClick = function handleOverlayClick() { | ||
console.log('overlay click triggered'); | ||
MenuButton.prototype.handleOverlayClick = function handleOverlayClick() { | ||
this.closeMenu(false); | ||
}; | ||
AriaMenuButton.prototype.render = function render() { | ||
MenuButton.prototype.render = function render() { | ||
var props = this.props; | ||
@@ -238,3 +238,3 @@ var isOpen = this.state.isOpen; | ||
var menu = isOpen ? _React2['default'].createElement(_Menu2['default'], _extends({}, props, { | ||
var menu = isOpen ? _React$Component$PropTypes2['default'].createElement(_Menu2['default'], _extends({}, props, { | ||
handleSelection: this.handleSelection.bind(this), | ||
@@ -244,10 +244,10 @@ receiveFocus: this.state.innerFocus, | ||
var menuWrapper = props.transition ? _React2['default'].createElement( | ||
CSSTransitionGroup, | ||
var menuWrapper = TransitionGroup ? _React$Component$PropTypes2['default'].createElement( | ||
TransitionGroup, | ||
{ transitionName: _cssClassnamer2['default'].applyNamespace('is'), | ||
component: 'div', | ||
className: [_cssClassnamer2['default'].componentPart('menuWrapper'), _cssClassnamer2['default'].componentPart('menuWrapper--trans')].join(' '), | ||
className: [_cssClassnamer2['default'].componentPart('menuWrapper'), _cssClassnamer2['default'].componentPart('menuWrapper--transition')].join(' '), | ||
onKeyDown: this.handleMenuKey.bind(this) }, | ||
menu | ||
) : _React2['default'].createElement( | ||
) : _React$Component$PropTypes2['default'].createElement( | ||
'div', | ||
@@ -271,3 +271,3 @@ { className: _cssClassnamer2['default'].componentPart('menuWrapper'), | ||
var outsideOverlay = !isOpen ? false : _React2['default'].createElement('div', { id: outsideId, | ||
var outsideOverlay = !isOpen ? false : _React$Component$PropTypes2['default'].createElement('div', { id: outsideId, | ||
onClick: this.handleOverlayClick.bind(this), | ||
@@ -283,3 +283,3 @@ ref: 'overlay', | ||
return _React2['default'].createElement( | ||
return _React$Component$PropTypes2['default'].createElement( | ||
'div', | ||
@@ -291,6 +291,6 @@ { id: props.id, | ||
outsideOverlay, | ||
_React2['default'].createElement( | ||
_React$Component$PropTypes2['default'].createElement( | ||
'div', | ||
{ style: innerStyle }, | ||
_React2['default'].createElement( | ||
_React$Component$PropTypes2['default'].createElement( | ||
'div', | ||
@@ -313,20 +313,17 @@ { id: triggerId, | ||
return AriaMenuButton; | ||
})(_React2['default'].Component); | ||
return MenuButton; | ||
})(_React$Component$PropTypes.Component); | ||
var pt = _React2['default'].PropTypes; | ||
AriaMenuButton.propTypes = { | ||
handleSelection: pt.func.isRequired, | ||
items: pt.arrayOf(pt.object).isRequired, | ||
triggerContent: pt.oneOfType([pt.string, pt.element]).isRequired, | ||
closeOnSelection: pt.bool, | ||
flushRight: pt.bool, | ||
id: pt.string, | ||
startOpen: pt.bool, | ||
selectedValue: pt.oneOfType([pt.string, pt.number, pt.bool]), | ||
transition: pt.bool | ||
MenuButton.propTypes = { | ||
handleSelection: _React$Component$PropTypes.PropTypes.func.isRequired, | ||
items: _React$Component$PropTypes.PropTypes.arrayOf(_React$Component$PropTypes.PropTypes.object).isRequired, | ||
triggerContent: _React$Component$PropTypes.PropTypes.oneOfType([_React$Component$PropTypes.PropTypes.string, _React$Component$PropTypes.PropTypes.element]).isRequired, | ||
closeOnSelection: _React$Component$PropTypes.PropTypes.bool, | ||
flushRight: _React$Component$PropTypes.PropTypes.bool, | ||
id: _React$Component$PropTypes.PropTypes.string, | ||
startOpen: _React$Component$PropTypes.PropTypes.bool, | ||
selectedValue: _React$Component$PropTypes.PropTypes.oneOfType([_React$Component$PropTypes.PropTypes.string, _React$Component$PropTypes.PropTypes.number, _React$Component$PropTypes.PropTypes.bool]) | ||
}; | ||
return AriaMenuButton; | ||
return MenuButton; | ||
} | ||
@@ -386,5 +383,5 @@ | ||
var _React = __webpack_require__(1); | ||
var _React$Component$PropTypes = __webpack_require__(1); | ||
var _React2 = _interopRequireWildcard(_React); | ||
var _React$Component$PropTypes2 = _interopRequireWildcard(_React$Component$PropTypes); | ||
@@ -399,12 +396,12 @@ var _MenuItem = __webpack_require__(6); | ||
var Menu = (function (_React$Component) { | ||
var Menu = (function (_Component) { | ||
function Menu() { | ||
_classCallCheck(this, Menu); | ||
if (_React$Component != null) { | ||
_React$Component.apply(this, arguments); | ||
if (_Component != null) { | ||
_Component.apply(this, arguments); | ||
} | ||
} | ||
_inherits(Menu, _React$Component); | ||
_inherits(Menu, _Component); | ||
@@ -428,8 +425,8 @@ Menu.prototype.shouldComponentUpdate = function shouldComponentUpdate(newProps) { | ||
var items = props.items.map(function (item, i) { | ||
return _React2['default'].createElement( | ||
return _React$Component$PropTypes2['default'].createElement( | ||
'li', | ||
{ key: i, | ||
className: _cssClassnamer2['default'].componentPart('li'), | ||
className: _cssClassnamer2['default'].componentPart('menuItemWrapper'), | ||
role: 'presentation' }, | ||
_React2['default'].createElement(_MenuItem2['default'], _extends({}, item, { | ||
_React$Component$PropTypes2['default'].createElement(_MenuItem2['default'], _extends({}, item, { | ||
focusManager: props.focusManager, | ||
@@ -444,3 +441,3 @@ handleSelection: props.handleSelection, | ||
return _React2['default'].createElement( | ||
return _React$Component$PropTypes2['default'].createElement( | ||
'ol', | ||
@@ -454,15 +451,13 @@ { className: menuClasses.join(' '), | ||
return Menu; | ||
})(_React2['default'].Component); | ||
})(_React$Component$PropTypes.Component); | ||
exports['default'] = Menu; | ||
var pt = _React2['default'].PropTypes; | ||
Menu.propTypes = { | ||
focusManager: pt.object.isRequired, | ||
items: pt.arrayOf(pt.object).isRequired, | ||
flushRight: pt.bool, | ||
handleSelection: pt.func, | ||
receiveFocus: pt.bool, | ||
selectedValue: pt.any | ||
focusManager: _React$Component$PropTypes.PropTypes.object.isRequired, | ||
items: _React$Component$PropTypes.PropTypes.arrayOf(_React$Component$PropTypes.PropTypes.object).isRequired, | ||
flushRight: _React$Component$PropTypes.PropTypes.bool, | ||
handleSelection: _React$Component$PropTypes.PropTypes.func, | ||
receiveFocus: _React$Component$PropTypes.PropTypes.bool, | ||
selectedValue: _React$Component$PropTypes.PropTypes.oneOfType([_React$Component$PropTypes.PropTypes.string, _React$Component$PropTypes.PropTypes.number, _React$Component$PropTypes.PropTypes.bool]) | ||
}; | ||
@@ -557,2 +552,3 @@ module.exports = exports['default']; | ||
} | ||
}; | ||
@@ -575,5 +571,5 @@ module.exports = exports['default']; | ||
var _React = __webpack_require__(1); | ||
var _React$PropTypes$Component = __webpack_require__(1); | ||
var _React2 = _interopRequireWildcard(_React); | ||
var _React$PropTypes$Component2 = _interopRequireWildcard(_React$PropTypes$Component); | ||
@@ -586,12 +582,12 @@ var _ENTER$SPACE = __webpack_require__(2); | ||
var MenuItem = (function (_React$Component) { | ||
var MenuItem = (function (_Component) { | ||
function MenuItem() { | ||
_classCallCheck(this, MenuItem); | ||
if (_React$Component != null) { | ||
_React$Component.apply(this, arguments); | ||
if (_Component != null) { | ||
_Component.apply(this, arguments); | ||
} | ||
} | ||
_inherits(MenuItem, _React$Component); | ||
_inherits(MenuItem, _Component); | ||
@@ -606,3 +602,3 @@ MenuItem.prototype.shouldComponentUpdate = function shouldComponentUpdate(newProps) { | ||
text: this.props.text, | ||
node: _React2['default'].findDOMNode(this) | ||
node: _React$PropTypes$Component2['default'].findDOMNode(this) | ||
}); | ||
@@ -639,3 +635,3 @@ }; | ||
// ... so not in tab order, but programatically focusable | ||
return _React2['default'].createElement( | ||
return _React$PropTypes$Component2['default'].createElement( | ||
'div', | ||
@@ -654,16 +650,14 @@ { id: props.id, | ||
return MenuItem; | ||
})(_React2['default'].Component); | ||
})(_React$PropTypes$Component.Component); | ||
exports['default'] = MenuItem; | ||
var pt = _React2['default'].PropTypes; | ||
MenuItem.propTypes = { | ||
focusManager: pt.object.isRequired, | ||
handleSelection: pt.func.isRequired, | ||
content: pt.oneOfType([pt.string, pt.element]).isRequired, | ||
id: pt.string, | ||
isSelected: pt.bool, | ||
text: pt.string, | ||
value: pt.oneOfType([pt.string, pt.number, pt.bool]) | ||
focusManager: _React$PropTypes$Component.PropTypes.object.isRequired, | ||
handleSelection: _React$PropTypes$Component.PropTypes.func.isRequired, | ||
content: _React$PropTypes$Component.PropTypes.oneOfType([_React$PropTypes$Component.PropTypes.string, _React$PropTypes$Component.PropTypes.element]).isRequired, | ||
id: _React$PropTypes$Component.PropTypes.string, | ||
isSelected: _React$PropTypes$Component.PropTypes.bool, | ||
text: _React$PropTypes$Component.PropTypes.string, | ||
value: _React$PropTypes$Component.PropTypes.oneOfType([_React$PropTypes$Component.PropTypes.string, _React$PropTypes$Component.PropTypes.number, _React$PropTypes$Component.PropTypes.bool]) | ||
}; | ||
@@ -670,0 +664,0 @@ module.exports = exports['default']; |
@@ -1,1 +0,1 @@ | ||
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.AriaMenuButton=t(require("react")):e.AriaMenuButton=t(e.react)}(this,function(e){return function(e){function t(o){if(n[o])return n[o].exports;var r=n[o]={exports:{},id:o,loaded:!1};return e[o].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){"use strict";function o(){var e=void 0===arguments[0]?{}:arguments[0],t=e.reactAddons?e.reactAddons.CSSTransitionGroup:!1;v["default"].init(e.componentName,e.namespace);var n=function(e){function n(t){s(this,n),e.call(this,t),this.state={isOpen:!!t.startOpen},this.focusManager=y["default"]()}return a(n,e),n.prototype.shouldComponentUpdate=function(e,t){return this.state.isOpen!==t.isOpen||this.props.selectedValue!==e.selectedValue},n.prototype.componentWillMount=function(){if(this.props.transition&&!t)throw new Error("If you want to use transitions with ariaMenuButton, you need to pass it React with addons")},n.prototype.componentDidMount=function(){this.focusManager.trigger=l["default"].findDOMNode(this.refs.trigger)},n.prototype.openMenu=function(){var e=void 0===arguments[0]?!1:arguments[0];this.setState({isOpen:!0,innerFocus:e})},n.prototype.closeMenu=function(){var e=this,t=void 0===arguments[0]?!0:arguments[0];this.setState({isOpen:!1,innerFocus:!1},function(){t&&e.focusManager.focusTrigger(),e.focusManager.currentFocus=-1})},n.prototype.toggleMenu=function(){this.state.isOpen?this.closeMenu():this.openMenu()},n.prototype.handleAnywhereKey=function(e){var t=e.key,n=r(e);(t===f.DOWN||n)&&(e.preventDefault(),t===f.DOWN?this.state.isOpen?this.focusManager.moveDown():this.openMenu(!0):n&&this.state.isOpen&&this.checkLetterKeys(e.keyCode))},n.prototype.handleTriggerKey=function(e){var t=e.key;(t===f.ENTER||t===f.SPACE)&&(e.preventDefault(),this.toggleMenu())},n.prototype.handleMenuKey=function(e){e.key===f.ESCAPE?this.closeMenu():e.key===f.UP&&this.state.isOpen&&(e.preventDefault(),this.focusManager.moveUp())},n.prototype.checkLetterKeys=function(e){this.focusManager.moveToLetter(String.fromCharCode(e))},n.prototype.handleBlur=function(){var e=this;this.blurTimeout=setTimeout(function(){var t=document.activeElement;t!==e.focusManager.trigger&&(e.focusManager.focusables.some(function(e){return e.node===t})||e.state.isOpen&&e.closeMenu(!1))},0)},n.prototype.handleSelection=function(e){this.props.closeOnSelection&&this.closeMenu(),this.props.handleSelection(e)},n.prototype.handleOverlayClick=function(){console.log("overlay click triggered"),this.closeMenu(!1)},n.prototype.render=function(){var e=this.props,n=this.state.isOpen,o=e.id?""+e.id+"-trigger":void 0,r=e.id?""+e.id+"-outside":void 0,i=[v["default"].componentPart("trigger")];n&&i.push(v["default"].applyNamespace("is-open"));var s=n?l["default"].createElement(h["default"],u({},e,{handleSelection:this.handleSelection.bind(this),receiveFocus:this.state.innerFocus,focusManager:this.focusManager})):!1,a=e.transition?l["default"].createElement(t,{transitionName:v["default"].applyNamespace("is"),component:"div",className:[v["default"].componentPart("menuWrapper"),v["default"].componentPart("menuWrapper--trans")].join(" "),onKeyDown:this.handleMenuKey.bind(this)},s):l["default"].createElement("div",{className:v["default"].componentPart("menuWrapper"),onKeyDown:this.handleMenuKey.bind(this)},s),c=n?{display:"inline-block",position:"relative",zIndex:"100"}:{},p=n?l["default"].createElement("div",{id:r,onClick:this.handleOverlayClick.bind(this),ref:"overlay",style:{cursor:"pointer",position:"fixed",top:0,bottom:0,left:0,right:0,zIndex:"99",WebkitTapHighlightColor:"rgba(0,0,0,0)"}}):!1;return l["default"].createElement("div",{id:e.id,className:v["default"].componentPart(),onKeyDown:this.handleAnywhereKey.bind(this),onBlur:this.handleBlur.bind(this)},p,l["default"].createElement("div",{style:c},l["default"].createElement("div",{id:o,className:i.join(" "),onClick:this.toggleMenu.bind(this),onKeyDown:this.handleTriggerKey.bind(this),ref:"trigger","aria-haspopup":!0,"aria-expanded":n,role:"button",tabIndex:"0"},e.triggerContent),a))},n}(l["default"].Component),o=l["default"].PropTypes;return n.propTypes={handleSelection:o.func.isRequired,items:o.arrayOf(o.object).isRequired,triggerContent:o.oneOfType([o.string,o.element]).isRequired,closeOnSelection:o.bool,flushRight:o.bool,id:o.string,startOpen:o.bool,selectedValue:o.oneOfType([o.string,o.number,o.bool]),transition:o.bool},n}function r(e){return e.keyCode>=f.LOWEST_LETTER_CODE&&e.keyCode<=f.HIGHEST_LETTER_CODE}var i=function(e){return e&&e.__esModule?e:{"default":e}},s=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},a=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(e.__proto__=t)},u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e};t.__esModule=!0,t["default"]=o;var c=n(1),l=i(c),p=n(2),f=i(p),d=n(3),h=i(d),m=n(4),y=i(m),g=n(5),v=i(g);e.exports=t["default"]},function(t,n,o){t.exports=e},function(e,t,n){"use strict";t.__esModule=!0;var o="Enter";t.ENTER=o;var r=" ";t.SPACE=r;var i="Escape";t.ESCAPE=i;var s="ArrowUp";t.UP=s;var a="ArrowDown";t.DOWN=a;var u=65;t.LOWEST_LETTER_CODE=u;var c=91;t.HIGHEST_LETTER_CODE=c},function(e,t,n){"use strict";var o=function(e){return e&&e.__esModule?e:{"default":e}},r=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},i=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(e.__proto__=t)},s=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e};t.__esModule=!0;var a=n(1),u=o(a),c=n(6),l=o(c),p=n(5),f=o(p),d=function(e){function t(){r(this,t),null!=e&&e.apply(this,arguments)}return i(t,e),t.prototype.shouldComponentUpdate=function(e){return this.props.selectedValue!==e.selectedValue},t.prototype.componentWillMount=function(){this.props.focusManager.focusables=[]},t.prototype.componentDidMount=function(){this.props.receiveFocus&&this.props.focusManager.move(0)},t.prototype.render=function(){var e=this.props,t=e.selectedValue,n=e.items.map(function(n,o){return u["default"].createElement("li",{key:o,className:f["default"].componentPart("li"),role:"presentation"},u["default"].createElement(l["default"],s({},n,{focusManager:e.focusManager,handleSelection:e.handleSelection,isSelected:n.value===t})))}),o=[f["default"].componentPart("menu")];return e.flushRight&&o.push(f["default"].componentPart("menu--flushRight")),u["default"].createElement("ol",{className:o.join(" "),role:"menu"},n)},t}(u["default"].Component);t["default"]=d;var h=u["default"].PropTypes;d.propTypes={focusManager:h.object.isRequired,items:h.arrayOf(h.object).isRequired,flushRight:h.bool,handleSelection:h.func,receiveFocus:h.bool,selectedValue:h.any},e.exports=t["default"]},function(e,t,n){"use strict";function o(){return Object.create(r)}t.__esModule=!0,t["default"]=o;var r={focusables:[],trigger:null,currentFocus:-1,move:function(e){this.focusables[e].node.focus(),this.currentFocus=e},moveUp:function(){var e=-1===this.currentFocus||0===this.currentFocus?this.focusables.length-1:this.currentFocus-1;this.move(e)},moveDown:function(){var e=-1===this.currentFocus||this.currentFocus===this.focusables.length-1?0:this.currentFocus+1;this.move(e)},moveToLetter:function(e){for(var t=this.focusables.slice(this.currentFocus+1).concat(this.focusables.slice(0,this.currentFocus+1)),n=0,o=t.length;o>n;n++){var r=t[n];if(!r.text&&!r.content.charAt)throw new Error("AriaMenuButton items must have textual `content` or a `text` prop");if(r.text){if(r.text.charAt(0).toLowerCase()!==e.toLowerCase())continue}else if(r.content.charAt(0).toLowerCase()!==e.toLowerCase())continue;return r.node.focus(),void(this.currentFocus=this.focusables.indexOf(r))}},focusTrigger:function(){this.trigger.focus()}};e.exports=t["default"]},function(e,t,n){"use strict";t.__esModule=!0,t["default"]={init:function(e,t){var n=void 0===arguments[0]?"AriaMenuButton":arguments[0];this.namespace=t,this.componentName=this.applyNamespace(n)},componentPart:function(e){return e?""+this.componentName+"-"+e:this.componentName},applyNamespace:function(e){return this.namespace?""+this.namespace+"-"+e:e}},e.exports=t["default"]},function(e,t,n){"use strict";var o=function(e){return e&&e.__esModule?e:{"default":e}},r=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},i=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(e.__proto__=t)};t.__esModule=!0;var s=n(1),a=o(s),u=n(2),c=n(5),l=o(c),p=function(e){function t(){r(this,t),null!=e&&e.apply(this,arguments)}return i(t,e),t.prototype.shouldComponentUpdate=function(e){return this.props.isSelected!==e.isSelected},t.prototype.componentDidMount=function(){this.props.focusManager.focusables.push({content:this.props.content,text:this.props.text,node:a["default"].findDOMNode(this)})},t.prototype.handleClick=function(e){var t=this.props;if(!t.isSelected){var n="undefined"!=typeof t.value?t.value:t.content;t.handleSelection(n,e)}},t.prototype.handleKey=function(e){(e.key===u.ENTER||e.key===u.SPACE)&&(e.preventDefault(),this.handleClick(e))},t.prototype.render=function(){var e=this.props,t=[l["default"].componentPart("menuItem")];return e.isSelected&&t.push(l["default"].applyNamespace("is-selected")),a["default"].createElement("div",{id:e.id,className:t.join(" "),onClick:this.handleClick.bind(this),onKeyDown:this.handleKey.bind(this),role:"menuitem",tabIndex:"-1","data-value":e.value},e.content)},t}(a["default"].Component);t["default"]=p;var f=a["default"].PropTypes;p.propTypes={focusManager:f.object.isRequired,handleSelection:f.func.isRequired,content:f.oneOfType([f.string,f.element]).isRequired,id:f.string,isSelected:f.bool,text:f.string,value:f.oneOfType([f.string,f.number,f.bool])},e.exports=t["default"]}])}); | ||
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.AriaMenuButton=t(require("react")):e.AriaMenuButton=t(e.react)}(this,function(e){return function(e){function t(o){if(n[o])return n[o].exports;var r=n[o]={exports:{},id:o,loaded:!1};return e[o].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){"use strict";function o(){var e=void 0===arguments[0]?{}:arguments[0];v["default"].init(e.componentName,e.namespace);var t=!1;if(e.transition){if("ReactCSSTransitionGroup"!==e.transition.displayName)throw new Error("createAriaMenuButtons `transition` option expects a ReactCSSTransitionGroup");t=e.transition}var n=function(e){function n(t){i(this,n),e.call(this,t),this.state={isOpen:!!t.startOpen},this.focusManager=m["default"]()}return a(n,e),n.prototype.shouldComponentUpdate=function(e,t){return this.state.isOpen!==t.isOpen||this.props.selectedValue!==e.selectedValue},n.prototype.componentDidMount=function(){this.focusManager.trigger=c["default"].findDOMNode(this.refs.trigger)},n.prototype.openMenu=function(){var e=void 0===arguments[0]?!1:arguments[0];this.setState({isOpen:!0,innerFocus:e})},n.prototype.closeMenu=function(){var e=this,t=void 0===arguments[0]?!0:arguments[0];this.setState({isOpen:!1,innerFocus:!1},function(){t&&e.focusManager.focusTrigger(),e.focusManager.currentFocus=-1})},n.prototype.toggleMenu=function(){this.state.isOpen?this.closeMenu():this.openMenu()},n.prototype.handleAnywhereKey=function(e){var t=e.key,n=r(e);(t===f.DOWN||n)&&(e.preventDefault(),t===f.DOWN?this.state.isOpen?this.focusManager.moveDown():this.openMenu(!0):n&&this.state.isOpen&&this.checkLetterKeys(e.keyCode))},n.prototype.handleTriggerKey=function(e){var t=e.key;(t===f.ENTER||t===f.SPACE)&&(e.preventDefault(),this.toggleMenu())},n.prototype.handleMenuKey=function(e){e.key===f.ESCAPE?this.closeMenu():e.key===f.UP&&this.state.isOpen&&(e.preventDefault(),this.focusManager.moveUp())},n.prototype.checkLetterKeys=function(e){this.focusManager.moveToLetter(String.fromCharCode(e))},n.prototype.handleBlur=function(){var e=this;setTimeout(function(){var t=document.activeElement;t!==e.focusManager.trigger&&(e.focusManager.focusables.some(function(e){return e.node===t})||e.state.isOpen&&e.closeMenu(!1))},0)},n.prototype.handleSelection=function(e){this.props.closeOnSelection&&this.closeMenu(),this.props.handleSelection(e)},n.prototype.handleOverlayClick=function(){this.closeMenu(!1)},n.prototype.render=function(){var e=this.props,n=this.state.isOpen,o=e.id?""+e.id+"-trigger":void 0,r=e.id?""+e.id+"-outside":void 0,s=[v["default"].componentPart("trigger")];n&&s.push(v["default"].applyNamespace("is-open"));var i=n?c["default"].createElement(h["default"],u({},e,{handleSelection:this.handleSelection.bind(this),receiveFocus:this.state.innerFocus,focusManager:this.focusManager})):!1,a=t?c["default"].createElement(t,{transitionName:v["default"].applyNamespace("is"),component:"div",className:[v["default"].componentPart("menuWrapper"),v["default"].componentPart("menuWrapper--transition")].join(" "),onKeyDown:this.handleMenuKey.bind(this)},i):c["default"].createElement("div",{className:v["default"].componentPart("menuWrapper"),onKeyDown:this.handleMenuKey.bind(this)},i),p=n?{display:"inline-block",position:"relative",zIndex:"100"}:{},l=n?c["default"].createElement("div",{id:r,onClick:this.handleOverlayClick.bind(this),ref:"overlay",style:{cursor:"pointer",position:"fixed",top:0,bottom:0,left:0,right:0,zIndex:"99",WebkitTapHighlightColor:"rgba(0,0,0,0)"}}):!1;return c["default"].createElement("div",{id:e.id,className:v["default"].componentPart(),onKeyDown:this.handleAnywhereKey.bind(this),onBlur:this.handleBlur.bind(this)},l,c["default"].createElement("div",{style:p},c["default"].createElement("div",{id:o,className:s.join(" "),onClick:this.toggleMenu.bind(this),onKeyDown:this.handleTriggerKey.bind(this),ref:"trigger","aria-haspopup":!0,"aria-expanded":n,role:"button",tabIndex:"0"},e.triggerContent),a))},n}(p.Component);return n.propTypes={handleSelection:p.PropTypes.func.isRequired,items:p.PropTypes.arrayOf(p.PropTypes.object).isRequired,triggerContent:p.PropTypes.oneOfType([p.PropTypes.string,p.PropTypes.element]).isRequired,closeOnSelection:p.PropTypes.bool,flushRight:p.PropTypes.bool,id:p.PropTypes.string,startOpen:p.PropTypes.bool,selectedValue:p.PropTypes.oneOfType([p.PropTypes.string,p.PropTypes.number,p.PropTypes.bool])},n}function r(e){return e.keyCode>=f.LOWEST_LETTER_CODE&&e.keyCode<=f.HIGHEST_LETTER_CODE}var s=function(e){return e&&e.__esModule?e:{"default":e}},i=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},a=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(e.__proto__=t)},u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e};t.__esModule=!0,t["default"]=o;var p=n(1),c=s(p),l=n(2),f=s(l),d=n(3),h=s(d),y=n(4),m=s(y),g=n(5),v=s(g);e.exports=t["default"]},function(t,n,o){t.exports=e},function(e,t,n){"use strict";t.__esModule=!0;var o="Enter";t.ENTER=o;var r=" ";t.SPACE=r;var s="Escape";t.ESCAPE=s;var i="ArrowUp";t.UP=i;var a="ArrowDown";t.DOWN=a;var u=65;t.LOWEST_LETTER_CODE=u;var p=91;t.HIGHEST_LETTER_CODE=p},function(e,t,n){"use strict";var o=function(e){return e&&e.__esModule?e:{"default":e}},r=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},s=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(e.__proto__=t)},i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e};t.__esModule=!0;var a=n(1),u=o(a),p=n(6),c=o(p),l=n(5),f=o(l),d=function(e){function t(){r(this,t),null!=e&&e.apply(this,arguments)}return s(t,e),t.prototype.shouldComponentUpdate=function(e){return this.props.selectedValue!==e.selectedValue},t.prototype.componentWillMount=function(){this.props.focusManager.focusables=[]},t.prototype.componentDidMount=function(){this.props.receiveFocus&&this.props.focusManager.move(0)},t.prototype.render=function(){var e=this.props,t=e.selectedValue,n=e.items.map(function(n,o){return u["default"].createElement("li",{key:o,className:f["default"].componentPart("menuItemWrapper"),role:"presentation"},u["default"].createElement(c["default"],i({},n,{focusManager:e.focusManager,handleSelection:e.handleSelection,isSelected:n.value===t})))}),o=[f["default"].componentPart("menu")];return e.flushRight&&o.push(f["default"].componentPart("menu--flushRight")),u["default"].createElement("ol",{className:o.join(" "),role:"menu"},n)},t}(a.Component);t["default"]=d,d.propTypes={focusManager:a.PropTypes.object.isRequired,items:a.PropTypes.arrayOf(a.PropTypes.object).isRequired,flushRight:a.PropTypes.bool,handleSelection:a.PropTypes.func,receiveFocus:a.PropTypes.bool,selectedValue:a.PropTypes.oneOfType([a.PropTypes.string,a.PropTypes.number,a.PropTypes.bool])},e.exports=t["default"]},function(e,t,n){"use strict";function o(){return Object.create(r)}t.__esModule=!0,t["default"]=o;var r={focusables:[],trigger:null,currentFocus:-1,move:function(e){this.focusables[e].node.focus(),this.currentFocus=e},moveUp:function(){var e=-1===this.currentFocus||0===this.currentFocus?this.focusables.length-1:this.currentFocus-1;this.move(e)},moveDown:function(){var e=-1===this.currentFocus||this.currentFocus===this.focusables.length-1?0:this.currentFocus+1;this.move(e)},moveToLetter:function(e){for(var t=this.focusables.slice(this.currentFocus+1).concat(this.focusables.slice(0,this.currentFocus+1)),n=0,o=t.length;o>n;n++){var r=t[n];if(!r.text&&!r.content.charAt)throw new Error("AriaMenuButton items must have textual `content` or a `text` prop");if(r.text){if(r.text.charAt(0).toLowerCase()!==e.toLowerCase())continue}else if(r.content.charAt(0).toLowerCase()!==e.toLowerCase())continue;return r.node.focus(),void(this.currentFocus=this.focusables.indexOf(r))}},focusTrigger:function(){this.trigger.focus()}};e.exports=t["default"]},function(e,t,n){"use strict";t.__esModule=!0,t["default"]={init:function(e,t){var n=void 0===arguments[0]?"AriaMenuButton":arguments[0];this.namespace=t,this.componentName=this.applyNamespace(n)},componentPart:function(e){return e?""+this.componentName+"-"+e:this.componentName},applyNamespace:function(e){return this.namespace?""+this.namespace+"-"+e:e}},e.exports=t["default"]},function(e,t,n){"use strict";var o=function(e){return e&&e.__esModule?e:{"default":e}},r=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},s=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(e.__proto__=t)};t.__esModule=!0;var i=n(1),a=o(i),u=n(2),p=n(5),c=o(p),l=function(e){function t(){r(this,t),null!=e&&e.apply(this,arguments)}return s(t,e),t.prototype.shouldComponentUpdate=function(e){return this.props.isSelected!==e.isSelected},t.prototype.componentDidMount=function(){this.props.focusManager.focusables.push({content:this.props.content,text:this.props.text,node:a["default"].findDOMNode(this)})},t.prototype.handleClick=function(e){var t=this.props;if(!t.isSelected){var n="undefined"!=typeof t.value?t.value:t.content;t.handleSelection(n,e)}},t.prototype.handleKey=function(e){(e.key===u.ENTER||e.key===u.SPACE)&&(e.preventDefault(),this.handleClick(e))},t.prototype.render=function(){var e=this.props,t=[c["default"].componentPart("menuItem")];return e.isSelected&&t.push(c["default"].applyNamespace("is-selected")),a["default"].createElement("div",{id:e.id,className:t.join(" "),onClick:this.handleClick.bind(this),onKeyDown:this.handleKey.bind(this),role:"menuitem",tabIndex:"-1","data-value":e.value},e.content)},t}(i.Component);t["default"]=l,l.propTypes={focusManager:i.PropTypes.object.isRequired,handleSelection:i.PropTypes.func.isRequired,content:i.PropTypes.oneOfType([i.PropTypes.string,i.PropTypes.element]).isRequired,id:i.PropTypes.string,isSelected:i.PropTypes.bool,text:i.PropTypes.string,value:i.PropTypes.oneOfType([i.PropTypes.string,i.PropTypes.number,i.PropTypes.bool])},e.exports=t["default"]}])}); |
{ | ||
"name": "react-aria-menubutton", | ||
"version": "0.5.0", | ||
"version": "0.5.1", | ||
"description": "A fully accessible, easily themeable, React-powered menu button", | ||
@@ -5,0 +5,0 @@ "main": "index.js", |
@@ -162,12 +162,4 @@ # react-aria-menubutton [![Build Status](https://travis-ci.org/davidtheclark/react-aria-menubutton.svg?branch=master)](https://travis-ci.org/davidtheclark/react-aria-menubutton) | ||
- **namespace**: Specify a namespace for css classes. [See above](#specify-your-own-namespace). | ||
- **transition**: If you want to animate the opening & closing of the menu, pass in [React's CSSTransitionGroup](https://facebook.github.io/react/docs/animation.html) here. For example, | ||
- **transition**: If you want to animate the opening & closing of the menu, pass in [React's CSSTransitionGroup](https://facebook.github.io/react/docs/animation.html) here. (See example above.) Make sure you read React's docs on the component and setup your CSS to properly work with it. | ||
```js | ||
var React = require('react/addons'); | ||
var createAriaMenuButton = require('react-aria-menubutton'); | ||
var AriaMenuButton = createAriaMenuButton({ transition: React.addons.CSSTransitionGroup }); | ||
``` | ||
Make sure you read React's docs on the component and setup your CSS to properly work with it. | ||
### AriaMenuButton | ||
@@ -174,0 +166,0 @@ |
91233
1696
216