react-aria-menubutton 7.0.3 → 8.0.0

package/dist/MenuItem.js

@@ -1,96 +0,0 @@
-'use strict';
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var React = require('react');
-var PropTypes = require('prop-types');
-var ManagerContext = require('./ManagerContext');
-
-var _require = require("./propTypes"),
-    refType = _require.refType;
-
-var specialAssign = require('./specialAssign');
-
-var checkedProps = {
-  ambManager: PropTypes.object.isRequired,
-  children: PropTypes.node.isRequired,
-  forwardedRef: refType,
-  tag: PropTypes.string,
-  text: PropTypes.string,
-  value: PropTypes.any
-};
-
-var AriaMenuButtonMenuItem = function (_React$Component) {
-  _inherits(AriaMenuButtonMenuItem, _React$Component);
-
-  function AriaMenuButtonMenuItem() {
-    var _temp, _this, _ret;
-
-    _classCallCheck(this, AriaMenuButtonMenuItem);
-
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, _React$Component.call.apply(_React$Component, [this].concat(args))), _this), _this.ref = React.createRef(), _this.handleKeyDown = function (event) {
-      if (event.key !== 'Enter' && event.key !== ' ') return;
-      if (_this.props.tag === 'a' && _this.props.href) return;
-      event.preventDefault();
-      _this.selectItem(event);
-    }, _this.selectItem = function (event) {
-      // If there's no value, we'll send the child
-      var value = typeof _this.props.value !== 'undefined' ? _this.props.value : _this.props.children;
-      _this.props.ambManager.handleSelection(value, event);
-    }, _this.setRef = function (instance) {
-      _this.ref.current = instance;
-      if (typeof _this.props.forwardedRef === "function") {
-        _this.props.forwardedRef(instance);
-      } else if (_this.props.forwardedRef) {
-        _this.props.forwardedRef.current = instance;
-      }
-    }, _temp), _possibleConstructorReturn(_this, _ret);
-  }
-
-  AriaMenuButtonMenuItem.prototype.componentDidMount = function componentDidMount() {
-    this.props.ambManager.addItem({
-      node: this.ref.current,
-      text: this.props.text
-    });
-  };
-
-  AriaMenuButtonMenuItem.prototype.render = function render() {
-    var menuItemProps = {
-      onClick: this.selectItem,
-      onKeyDown: this.handleKeyDown,
-      role: 'menuitem',
-      tabIndex: '-1',
-      ref: this.setRef
-    };
-
-    specialAssign(menuItemProps, this.props, checkedProps);
-
-    return React.createElement(this.props.tag, menuItemProps, this.props.children);
-  };
-
-  return AriaMenuButtonMenuItem;
-}(React.Component);
-
-AriaMenuButtonMenuItem.propTypes = checkedProps;
-AriaMenuButtonMenuItem.defaultProps = { tag: 'div' };
-
-
-module.exports = React.forwardRef(function (props, ref) {
-  return React.createElement(ManagerContext.Consumer, null, function (ambManager) {
-    var buttonProps = { ambManager: ambManager, forwardedRef: ref };
-    specialAssign(buttonProps, props, {
-      ambManager: checkedProps.ambManager,
-      children: checkedProps.children,
-      forwardedRef: checkedProps.forwardedRef
-    });
-    return React.createElement(AriaMenuButtonMenuItem, buttonProps, props.children);
-  });
-});

package/dist/Wrapper.js

@@ -1,74 +0,0 @@
-'use strict';
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var React = require('react');
-var PropTypes = require('prop-types');
-var createManager = require('./createManager');
-var ManagerContext = require('./ManagerContext');
-
-var _require = require("./propTypes"),
-    refType = _require.refType;
-
-var specialAssign = require('./specialAssign');
-
-var checkedProps = {
-  children: PropTypes.node.isRequired,
-  forwardedRef: refType,
-  onMenuToggle: PropTypes.func,
-  onSelection: PropTypes.func,
-  closeOnSelection: PropTypes.bool,
-  closeOnBlur: PropTypes.bool,
-  tag: PropTypes.string
-};
-
-var managerOptionsFromProps = function managerOptionsFromProps(props) {
-  return {
-    onMenuToggle: props.onMenuToggle,
-    onSelection: props.onSelection,
-    closeOnSelection: props.closeOnSelection,
-    closeOnBlur: props.closeOnBlur,
-    id: props.id
-  };
-};
-
-var AriaMenuButtonWrapper = function (_React$Component) {
-  _inherits(AriaMenuButtonWrapper, _React$Component);
-
-  function AriaMenuButtonWrapper(props) {
-    _classCallCheck(this, AriaMenuButtonWrapper);
-
-    var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
-
-    _this.manager = createManager(managerOptionsFromProps(props));
-    return _this;
-  }
-
-  AriaMenuButtonWrapper.prototype.componentDidUpdate = function componentDidUpdate() {
-    this.manager.updateOptions(managerOptionsFromProps(this.props));
-  };
-
-  AriaMenuButtonWrapper.prototype.render = function render() {
-    var wrapperProps = {};
-    specialAssign(wrapperProps, this.props, checkedProps);
-
-    return React.createElement(ManagerContext.Provider, { value: this.manager }, React.createElement(this.props.tag, wrapperProps, this.props.children));
-  };
-
-  return AriaMenuButtonWrapper;
-}(React.Component);
-
-AriaMenuButtonWrapper.propTypes = checkedProps;
-AriaMenuButtonWrapper.defaultProps = { tag: 'div' };
-
-
-module.exports = React.forwardRef(function (props, ref) {
-  var wrapperProps = { forwardedRef: ref };
-  specialAssign(wrapperProps, props, { children: checkedProps.children, forwardedRef: checkedProps.forwardedRef });
-  specialAssign(wrapperProps, { forwardedRef: ref });
-  return React.createElement(AriaMenuButtonWrapper, wrapperProps, props.children);
-});

package/dist/createManager.js

@@ -1,163 +0,0 @@
-'use strict';
-
-var createFocusGroup = require('focus-group');
-var externalStateControl = require('./externalStateControl');
-
-var focusGroupOptions = {
-  wrap: true,
-  stringSearch: true
-};
-
-var protoManager = {
-  init: function init(options) {
-    this.updateOptions(options);
-
-    this.handleBlur = handleBlur.bind(this);
-    this.handleSelection = handleSelection.bind(this);
-    this.handleMenuKey = handleMenuKey.bind(this);
-
-    // "With focus on the drop-down menu, the Up and Down Arrow
-    // keys move focus within the menu items, "wrapping" at the top and bottom."
-    // "Typing a letter (printable character) key moves focus to the next
-    // instance of a visible node whose title begins with that printable letter."
-    //
-    // All of the above is handled by focus-group.
-    this.focusGroup = createFocusGroup(focusGroupOptions);
-
-    // These component references are added when the relevant components mount
-    this.button = null;
-    this.menu = null;
-
-    // State trackers
-    this.isOpen = false;
-  },
-  updateOptions: function updateOptions(options) {
-    var oldOptions = this.options;
-
-    this.options = options || this.options || {};
-
-    if (typeof this.options.closeOnSelection === 'undefined') {
-      this.options.closeOnSelection = true;
-    }
-
-    if (typeof this.options.closeOnBlur === 'undefined') {
-      this.options.closeOnBlur = true;
-    }
-
-    if (this.options.id) {
-      externalStateControl.registerManager(this.options.id, this);
-    }
-
-    if (oldOptions && oldOptions.id && oldOptions.id !== this.options.id) {
-      externalStateControl.unregisterManager(this.options.id, this);
-    }
-  },
-  focusItem: function focusItem(index) {
-    this.focusGroup.focusNodeAtIndex(index);
-  },
-  addItem: function addItem(item) {
-    this.focusGroup.addMember(item);
-  },
-  clearItems: function clearItems() {
-    this.focusGroup.clearMembers();
-  },
-  handleButtonNonArrowKey: function handleButtonNonArrowKey(event) {
-    this.focusGroup._handleUnboundKey(event);
-  },
-  destroy: function destroy() {
-    this.button = null;
-    this.menu = null;
-    this.focusGroup.deactivate();
-    clearTimeout(this.blurTimer);
-    clearTimeout(this.moveFocusTimer);
-  },
-  update: function update() {
-    this.menu.setState({ isOpen: this.isOpen });
-    this.button.setState({ menuOpen: this.isOpen });
-    this.options.onMenuToggle && this.options.onMenuToggle({ isOpen: this.isOpen });
-  },
-  openMenu: function openMenu(openOptions) {
-    if (this.isOpen) return;
-    openOptions = openOptions || {};
-    if (openOptions.focusMenu === undefined) {
-      openOptions.focusMenu = true;
-    }
-    this.isOpen = true;
-    this.update();
-    this.focusGroup.activate();
-    if (openOptions.focusMenu) {
-      var self = this;
-      this.moveFocusTimer = setTimeout(function () {
-        self.focusItem(0);
-      }, 0);
-    }
-  },
-  closeMenu: function closeMenu(closeOptions) {
-    if (!this.isOpen) return;
-    closeOptions = closeOptions || {};
-    this.isOpen = false;
-    this.update();
-    if (closeOptions.focusButton) {
-      this.button.ref.current.focus();
-    }
-  },
-  toggleMenu: function toggleMenu(closeOptions, openOptions) {
-    closeOptions = closeOptions || {};
-    openOptions = openOptions || {};
-    if (this.isOpen) {
-      this.closeMenu(closeOptions);
-    } else {
-      this.openMenu(openOptions);
-    }
-  }
-};
-
-function handleBlur() {
-  var self = this;
-  self.blurTimer = setTimeout(function () {
-    if (!self.button) return;
-    var buttonNode = self.button.ref.current;
-    if (!buttonNode) return;
-    var activeEl = buttonNode.ownerDocument.activeElement;
-    if (buttonNode && activeEl === buttonNode) return;
-    var menuNode = self.menu.ref.current;
-    if (menuNode === activeEl) {
-      self.focusItem(0);
-      return;
-    }
-    if (menuNode && menuNode.contains(activeEl)) return;
-    if (self.isOpen) self.closeMenu({ focusButton: false });
-  }, 0);
-}
-
-function handleSelection(value, event) {
-  if (this.options.closeOnSelection) this.closeMenu({ focusButton: true });
-  if (this.options.onSelection) this.options.onSelection(value, event);
-}
-
-function handleMenuKey(event) {
-  if (this.isOpen) {
-    switch (event.key) {
-      // With focus on the drop-down menu, pressing Escape closes
-      // the menu and returns focus to the button.
-      case 'Escape':
-        event.preventDefault();
-        this.closeMenu({ focusButton: true });
-        break;
-      case 'Home':
-        event.preventDefault();
-        this.focusGroup.moveFocusToFirst();
-        break;
-      case 'End':
-        event.preventDefault();
-        this.focusGroup.moveFocusToLast();
-        break;
-    }
-  }
-}
-
-module.exports = function (options) {
-  var newManager = Object.create(protoManager);
-  newManager.init(options);
-  return newManager;
-};

package/dist/externalStateControl.js

@@ -1,32 +0,0 @@
-'use strict';
-
-var registeredManagers = {};
-
-var errorCommon = 'a menu outside a mounted Wrapper with an id, or a menu that does not exist';
-
-function registerManager(menuId, manager) {
-  registeredManagers[menuId] = manager;
-}
-
-function unregisterManager(menuId) {
-  delete registeredManagers[menuId];
-}
-
-function openMenu(menuId, openOptions) {
-  var manager = registeredManagers[menuId];
-  if (!manager) throw new Error('Cannot open ' + errorCommon);
-  manager.openMenu(openOptions);
-}
-
-function closeMenu(menuId, closeOptions) {
-  var manager = registeredManagers[menuId];
-  if (!manager) throw new Error('Cannot close ' + errorCommon);
-  manager.closeMenu(closeOptions);
-}
-
-module.exports = {
-  registerManager: registerManager,
-  unregisterManager: unregisterManager,
-  openMenu: openMenu,
-  closeMenu: closeMenu
-};

package/dist/index.js

@@ -1,12 +0,0 @@
-'use strict';
-
-var externalStateControl = require('./externalStateControl');
-
-module.exports = {
-  Wrapper: require('./Wrapper'),
-  Button: require('./Button'),
-  Menu: require('./Menu'),
-  MenuItem: require('./MenuItem'),
-  openMenu: externalStateControl.openMenu,
-  closeMenu: externalStateControl.closeMenu
-};

package/dist/propTypes.js

@@ -1,7 +0,0 @@
-"use strict";
-
-var PropTypes = require("prop-types");
-
-module.exports = {
-  refType: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.elementType })])
-};

package/dist/specialAssign.js

@@ -1,11 +0,0 @@
-"use strict";
-
-module.exports = function (a, b, reserved) {
-  reserved = reserved || {};
-  // This will get id, className, style, etc.
-  for (var x in b) {
-    if (!b.hasOwnProperty(x)) continue;
-    if (reserved[x]) continue;
-    a[x] = b[x];
-  }
-};

package/src/Button.js

@@ -1,129 +0,0 @@
-const React = require('react');
-const PropTypes = require('prop-types');
-const ManagerContext = require('./ManagerContext');
-const { refType } = require("./propTypes");
-const specialAssign = require('./specialAssign');
-
-const checkedProps = {
-  ambManager: PropTypes.object.isRequired,
-  children: PropTypes.node.isRequired,
-  disabled: PropTypes.bool,
-  forwardedRef: refType,
-  tag: PropTypes.string
-};
-
-// List retrieved from https://www.w3schools.com/tags/att_disabled.asp
-const disabledSupportedTags = () => [
-  'button',
-  'fieldset',
-  'input',
-  'optgroup',
-  'option',
-  'select',
-  'textarea'
-];
-
-class AriaMenuButtonButton extends React.Component {
-  static propTypes = checkedProps;
-
-  static defaultProps = { tag: 'span' };
-
-  ref = React.createRef();
-
-  componentDidMount() {
-    this.props.ambManager.button = this;
-  }
-
-  componentWillUnmount() {
-    this.props.ambManager.destroy();
-  }
-
-  handleKeyDown = event => {
-    if (this.props.disabled) return;
-
-    const ambManager = this.props.ambManager;
-
-    switch (event.key) {
-      case 'ArrowDown':
-        event.preventDefault();
-        if (!ambManager.isOpen) {
-          ambManager.openMenu();
-        } else {
-          ambManager.focusItem(0);
-        }
-        break;
-      case 'Enter':
-      case ' ':
-        event.preventDefault();
-        ambManager.toggleMenu();
-        break;
-      case 'Escape':
-        ambManager.handleMenuKey(event);
-        break;
-      default:
-        // (Potential) letter keys
-        ambManager.handleButtonNonArrowKey(event);
-    }
-  };
-
-  handleClick = () => {
-    if (this.props.disabled) return;
-    this.props.ambManager.toggleMenu({}, { focusMenu: false });
-  };
-
-  setRef = instance => {
-    this.ref.current = instance;
-    if (typeof this.props.forwardedRef === "function") {
-      this.props.forwardedRef(instance);
-    } else if (this.props.forwardedRef) {
-      this.props.forwardedRef.current = instance;
-    }
-  };
-
-  render() {
-    const props = this.props;
-    const ambManager = this.props.ambManager;
-
-    const buttonProps = {
-      // "The menu button itself has a role of button."
-      role: 'button',
-      tabIndex: props.disabled ? '' : '0',
-      // "The menu button has an aria-haspopup property, set to true."
-      'aria-haspopup': true,
-      'aria-expanded': ambManager.isOpen,
-      'aria-disabled': props.disabled,
-      onKeyDown: this.handleKeyDown,
-      onClick: this.handleClick
-    };
-
-    const reserved = {};
-    specialAssign(reserved, checkedProps);
-    // The disabled property should be passed down to the Button element
-    // if the tag has support for disabled attribute. So it needs to be removed
-    // from the reserved property object
-    if (disabledSupportedTags().indexOf(props.tag) >= 0) {
-      delete reserved.disabled;
-    }
-    if (ambManager.options.closeOnBlur) {
-      buttonProps.onBlur = ambManager.handleBlur;
-    }
-    specialAssign(buttonProps, props, reserved);
-    specialAssign(buttonProps, { ref: this.setRef });
-
-    return React.createElement(props.tag, buttonProps, props.children);
-  }
-}
-
-module.exports = React.forwardRef((props, ref) => React.createElement(
-  ManagerContext.Consumer,
-  null,
-  (ambManager) => {
-    const buttonProps = { ambManager, forwardedRef: ref };
-    specialAssign(buttonProps, props, {
-      ambManager: checkedProps.ambManager,
-      children: checkedProps.children,
-      forwardedRef: checkedProps.forwardedRef
-    });
-    return React.createElement(AriaMenuButtonButton, buttonProps, props.children);
-  }
-));

package/src/ManagerContext.js

@@ -1,5 +0,0 @@
-const React = require('react');
-
-const AriaMenuButtonManagerContext = React.createContext();
-
-module.exports = AriaMenuButtonManagerContext;

package/src/Menu.js

@@ -1,118 +0,0 @@
-const React = require('react');
-const PropTypes = require('prop-types');
-const createTapListener = require('teeny-tap');
-const ManagerContext = require('./ManagerContext');
-const { refType } = require("./propTypes");
-const specialAssign = require('./specialAssign');
-
-const checkedProps = {
-  ambManager: PropTypes.object.isRequired,
-  children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
-  forwardedRef: refType,
-  tag: PropTypes.string
-};
-
-class AriaMenuButtonMenu extends React.Component {
-  static propTypes = checkedProps;
-  static defaultProps = { tag: 'div' };
-
-  ref = React.createRef();
-
-  componentDidMount() {
-    this.props.ambManager.menu = this;
-  }
-
-  componentDidUpdate() {
-    const ambManager = this.props.ambManager;
-    if (!ambManager.options.closeOnBlur) return;
-    if (ambManager.isOpen && !this.tapListener) {
-      this.addTapListener();
-    } else if (!ambManager.isOpen && this.tapListener) {
-      this.tapListener.remove();
-      delete this.tapListener;
-    }
-
-    if (!ambManager.isOpen) {
-      // Clear the ambManager's items, so they
-      // can be reloaded next time this menu opens
-      ambManager.clearItems();
-    }
-  }
-
-  componentWillUnmount() {
-    if (this.tapListener) this.tapListener.remove();
-    this.props.ambManager.destroy();
-  }
-
-  addTapListener = () => {
-    const el = this.ref.current;
-    if (!el) return;
-    const doc = el.ownerDocument;
-    if (!doc) return;
-    this.tapListener = createTapListener(doc.documentElement, this.handleTap);
-  };
-
-  handleTap = event => {
-    if (this.ref.current.contains(event.target)) return;
-    if (
-      this.props.ambManager.button.ref.current.contains(
-        event.target
-      )
-    )
-      return;
-    this.props.ambManager.closeMenu();
-  };
-
-  setRef = instance => {
-    this.ref.current = instance;
-    if (typeof this.props.forwardedRef === "function") {
-      this.props.forwardedRef(instance);
-    } else if (this.props.forwardedRef) {
-      this.props.forwardedRef.current = instance;
-    }
-  };
-
-  render() {
-    const props = this.props;
-    const ambManager = this.props.ambManager;
-
-    const childrenToRender = (function() {
-      if (typeof props.children === 'function') {
-        return props.children({ isOpen: ambManager.isOpen });
-      }
-      if (ambManager.isOpen) return props.children;
-      return false;
-    })();
-
-    if (!childrenToRender) return false;
-
-    const menuProps = {
-      onKeyDown: ambManager.handleMenuKey,
-      role: 'menu',
-      tabIndex: -1
-    };
-
-    if (ambManager.options.closeOnBlur) {
-      menuProps.onBlur = ambManager.handleBlur;
-    }
-
-    specialAssign(menuProps, props, checkedProps);
-    specialAssign(menuProps, { ref: this.setRef });
-
-    return React.createElement(props.tag, menuProps, childrenToRender);
-  }
-}
-
-module.exports = React.forwardRef((props, ref) => React.createElement(
-  ManagerContext.Consumer,
-  null,
-  (ambManager) => {
-    const buttonProps = { ambManager, forwardedRef: ref };
-    specialAssign(buttonProps, props, {
-      ambManager: checkedProps.ambManager,
-      children: checkedProps.children,
-      forwardedRef: checkedProps.forwardedRef
-    });
-    return React.createElement(AriaMenuButtonMenu, buttonProps, props.children);
-  }
-));