react-aria-menubutton 7.0.2 → 8.0.0

package/src/MenuItem.js

@@ -1,84 +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,
-  forwardedRef: refType,
-  tag: PropTypes.string,
-  text: PropTypes.string,
-  value: PropTypes.any
-};
-
-class AriaMenuButtonMenuItem extends React.Component {
-  static propTypes = checkedProps;
-  static defaultProps = { tag: 'div' };
-
-  ref = React.createRef();
-
-  componentDidMount() {
-    this.props.ambManager.addItem({
-      node: this.ref.current,
-      text: this.props.text
-    });
-  }
-
-  handleKeyDown = event => {
-    if (event.key !== 'Enter' && event.key !== ' ') return;
-    if (this.props.tag === 'a' && this.props.href) return;
-    event.preventDefault();
-    this.selectItem(event);
-  };
-
-  selectItem = event => {
-    // If there's no value, we'll send the child
-    const value = typeof this.props.value !== 'undefined'
-      ? this.props.value
-      : this.props.children;
-    this.props.ambManager.handleSelection(value, event);
-  };
-
-  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 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
-    );
-  }
-}
-
-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(AriaMenuButtonMenuItem, buttonProps, props.children);
-  }
-));

package/src/Wrapper.js

@@ -1,54 +0,0 @@
-const React = require('react');
-const PropTypes = require('prop-types');
-const createManager = require('./createManager');
-const ManagerContext = require('./ManagerContext');
-const { refType } = require("./propTypes");
-const specialAssign = require('./specialAssign');
-
-const checkedProps = {
-  children: PropTypes.node.isRequired,
-  forwardedRef: refType,
-  onMenuToggle: PropTypes.func,
-  onSelection: PropTypes.func,
-  closeOnSelection: PropTypes.bool,
-  closeOnBlur: PropTypes.bool,
-  tag: PropTypes.string
-};
-
-class AriaMenuButtonWrapper extends React.Component {
-  static propTypes = checkedProps;
-  static defaultProps = { tag: 'div' };
-
-  constructor(props) {
-    super(props);
-    this.manager = createManager({
-      onMenuToggle: this.props.onMenuToggle,
-      onSelection: this.props.onSelection,
-      closeOnSelection: this.props.closeOnSelection,
-      closeOnBlur: this.props.closeOnBlur,
-      id: this.props.id
-    });
-  }
-
-  render() {
-    const wrapperProps = {};
-    specialAssign(wrapperProps, this.props, checkedProps);
-
-    return React.createElement(
-      ManagerContext.Provider,
-      { value: this.manager },
-      React.createElement(
-        this.props.tag,
-        wrapperProps,
-        this.props.children,
-      ),
-    );
-  }
-}
-
-module.exports = React.forwardRef((props, ref) => {
-  const wrapperProps = { forwardedRef: ref };
-  specialAssign(wrapperProps, props, { children: checkedProps.children, forwardedRef: checkedProps.forwardedRef });
-  specialAssign(wrapperProps, { forwardedRef: ref });
-  return React.createElement(AriaMenuButtonWrapper, wrapperProps, props.children);
-});

package/src/__tests__/Button.test.js

@@ -1,169 +0,0 @@
-const React = require('react');
-const ReactDOMServer = require('react-dom/server');
-const shallow = require('enzyme').shallow;
-const shallowToJson = require('enzyme-to-json').shallowToJson;
-const Button = require('../Button');
-const ManagerContext = require('../ManagerContext');
-const MockWrapper = require('./helpers/MockWrapper');
-const createMockKeyEvent = require('./helpers/createMockKeyEvent');
-const createMockManager = require('./helpers/createMockManager');
-const createManager = require('../createManager');
-
-const el = React.createElement;
-
-describe('<Button>', function() {
-  let shallowOptions;
-  let ambManager;
-  let downEvent;
-  let enterEvent;
-  let spaceEvent;
-  let escapeEvent;
-  let fEvent;
-
-  beforeEach(function() {
-    ambManager = createMockManager();
-    shallowOptions = {
-      wrappingComponent: ManagerContext.Provider,
-      wrappingComponentProps: { value: ambManager },
-    };
-    downEvent = createMockKeyEvent('ArrowDown');
-    enterEvent = createMockKeyEvent('Enter');
-    spaceEvent = createMockKeyEvent(' ');
-    escapeEvent = createMockKeyEvent('Escape');
-    fEvent = createMockKeyEvent(null, 70);
-  });
-
-  test('DOM with only required props and text child', function() {
-    const wrapper = shallow(el(Button, null, 'foo'), shallowOptions).dive().dive();
-    expect(shallowToJson(wrapper)).toMatchSnapshot();
-  });
-
-  test('no onBlur prop when closeOnBlur is false', function() {
-    const manager = createManager({ closeOnBlur: false });
-    const shallowOptions = {
-      wrappingComponent: ManagerContext.Provider,
-      wrappingComponentProps: { value: manager }
-    };
-    const wrapper = shallow(el(Button, null, ''), shallowOptions).dive().dive();
-    expect(shallowToJson(wrapper).props).not.toHaveProperty('onBlur');
-  });
-
-  test('DOM with all possible props and element child', function() {
-    const button = el(
-      Button,
-      {
-        id: 'foo',
-        className: 'bar',
-        style: { top: 2 },
-        tag: 'button',
-        disabled: true,
-        'data-something-something': 'seven' // arbitrary prop
-      },
-      el('span', null, 'hooha')
-    );
-    const wrapper = shallow(button, shallowOptions).dive().dive();
-    expect(shallowToJson(wrapper)).toMatchSnapshot();
-  });
-
-  test('click', function() {
-    const wrapper = shallow(el(Button, null, 'foo'), shallowOptions).dive().dive();
-    wrapper.simulate('click');
-
-    expect(ambManager.toggleMenu).toHaveBeenCalledTimes(1);
-  });
-
-  test('click when disabled', function() {
-    const wrapper = shallow(
-      el(Button, { disabled: true }, 'foo'),
-      shallowOptions
-    ).dive().dive();
-    wrapper.simulate('click');
-
-    expect(ambManager.toggleMenu).not.toHaveBeenCalled();
-  });
-
-  test('element has disabled attribute when disabled property is set to true', function() {
-    const wrapper = shallow(
-      el(Button, { disabled: true, tag: 'button' }, 'foo'),
-      shallowOptions
-    ).dive().dive();
-
-    expect(wrapper.props().disabled).toBeTruthy();
-  });
-
-  test('down arrow when closed', function() {
-    const wrapper = shallow(el(Button, null, 'foo'), shallowOptions).dive().dive();
-    wrapper.simulate('keyDown', downEvent);
-
-    expect(downEvent.preventDefault).toHaveBeenCalledTimes(1);
-    expect(ambManager.openMenu).toHaveBeenCalledTimes(1);
-    expect(ambManager.openMenu).toHaveBeenCalledWith();
-  });
-
-  test('down arrow when open', function() {
-    const wrapper = shallow(el(Button, null, 'foo'), shallowOptions).dive().dive();
-    ambManager.isOpen = true;
-    wrapper.simulate('keyDown', downEvent);
-
-    expect(downEvent.preventDefault).toHaveBeenCalledTimes(1);
-    expect(ambManager.openMenu).not.toHaveBeenCalled();
-  });
-
-  test('enter key', function() {
-    const wrapper = shallow(el(Button, null, 'foo'), shallowOptions).dive().dive();
-    wrapper.simulate('keyDown', enterEvent);
-
-    expect(enterEvent.preventDefault).toHaveBeenCalledTimes(1);
-    expect(ambManager.toggleMenu).toHaveBeenCalledTimes(1);
-  });
-
-  test('space key', function() {
-    const wrapper = shallow(el(Button, null, 'foo'), shallowOptions).dive().dive();
-    wrapper.simulate('keyDown', spaceEvent);
-
-    expect(spaceEvent.preventDefault).toHaveBeenCalledTimes(1);
-    expect(ambManager.toggleMenu).toHaveBeenCalledTimes(1);
-  });
-
-  test('escape key', function() {
-    const wrapper = shallow(el(Button, null, 'foo'), shallowOptions).dive().dive();
-    wrapper.simulate('keyDown', escapeEvent);
-
-    expect(ambManager.handleMenuKey).toHaveBeenCalledTimes(1);
-    expect(ambManager.handleMenuKey.mock.calls[0][0].key).toBe('Escape');
-  });
-
-  test('f key', function() {
-    const wrapper = shallow(el(Button, null, 'foo'), shallowOptions).dive().dive();
-    wrapper.simulate('keyDown', fEvent);
-
-    expect(ambManager.handleButtonNonArrowKey).toHaveBeenCalledTimes(1);
-    expect(ambManager.handleButtonNonArrowKey.mock.calls[0][0].keyCode).toBe(
-      70
-    );
-  });
-
-  test('enter key when disabled', function() {
-    const wrapper = shallow(
-      el(Button, { disabled: true }, 'foo'),
-      shallowOptions
-    ).dive().dive();
-    wrapper.simulate('keyDown', enterEvent);
-
-    expect(enterEvent.preventDefault).not.toHaveBeenCalled();
-    expect(ambManager.toggleMenu).not.toHaveBeenCalled();
-  });
-});
-
-describe('<Button> rendered via renderToString', function() {
-  test('does not throw', function() {
-    const output = ReactDOMServer.renderToString(
-      el(
-        MockWrapper,
-        { mockManager: createMockManager() },
-        el(Button, null, 'foo')
-      )
-    );
-    expect(output).toMatchSnapshot();
-  });
-});

package/src/__tests__/Menu.test.js

@@ -1,130 +0,0 @@
-const React = require('react');
-const ReactDOMServer = require('react-dom/server');
-const shallow = require('enzyme').shallow;
-const mount = require('enzyme').mount;
-const shallowToJson = require('enzyme-to-json').shallowToJson;
-const ManagerContext = require('../ManagerContext');
-const Menu = require('../Menu');
-const MockWrapper = require('./helpers/MockWrapper');
-const createMockManager = require('./helpers/createMockManager');
-const createManager = require('../createManager');
-
-const el = React.createElement;
-
-describe('<Menu>', function() {
-  let shallowOptions;
-  let ambManager;
-
-  beforeEach(function() {
-    ambManager = createMockManager();
-    shallowOptions = {
-      wrappingComponent: ManagerContext.Provider,
-      wrappingComponentProps: { value: ambManager }
-    };
-  });
-
-  test('closed Menu DOM with only required props and element child', function() {
-    const menuEl = el(Menu, null, el('div', null, 'foo'));
-    const wrapper = shallow(menuEl, shallowOptions).dive().dive();
-    expect(shallowToJson(wrapper)).toMatchSnapshot();
-  });
-
-  test('no onBlur prop when closeOnBlur is false', function() {
-    const manager = createManager({ closeOnBlur: false });
-    manager.isOpen = true;
-    const shallowOptions = {
-      wrappingComponent: ManagerContext.Provider,
-      wrappingComponentProps: { value: manager }
-    };
-    const menuEl = el(Menu, null, el('div', null, 'foo'));
-    const wrapper = shallow(menuEl, shallowOptions).dive().dive();
-    expect(shallowToJson(wrapper).props).not.toHaveProperty('onBlur');
-  });
-
-  test('open Menu DOM with only required props and element child', function() {
-    ambManager.isOpen = true;
-    const menuEl = el(Menu, null, el('div', null, el('div', null, 'foo')));
-    const wrapper = shallow(menuEl, shallowOptions).dive().dive();
-    expect(shallowToJson(wrapper)).toMatchSnapshot();
-  });
-
-  test('closed menu DOM with all possible props and function child', function() {
-    const childFunction = jest.fn().mockImplementation(function(menuState) {
-      return 'isOpen = ' + menuState.isOpen;
-    });
-    const menuEl = el(
-      Menu,
-      {
-        id: 'foo',
-        className: 'bar',
-        style: { bottom: 1 },
-        tag: 'ul',
-        'data-something-something': 'seven' // arbitrary prop
-      },
-      childFunction
-    );
-    const wrapper = shallow(menuEl, shallowOptions).dive().dive();
-    expect(shallowToJson(wrapper)).toMatchSnapshot();
-    expect(childFunction).toHaveBeenCalledTimes(1);
-    expect(childFunction.mock.calls[0]).toEqual([{ isOpen: false }]);
-  });
-
-  test('open menu DOM with all possible props and function child', function() {
-    ambManager.isOpen = true;
-    const childFunction = jest.fn().mockImplementation(function(menuState) {
-      return 'isOpen = ' + menuState.isOpen;
-    });
-    const menuEl = el(
-      Menu,
-      {
-        id: 'bar',
-        className: 'foo',
-        style: { left: 1 },
-        tag: 'section'
-      },
-      childFunction
-    );
-    const wrapper = shallow(menuEl, shallowOptions).dive().dive();
-    expect(shallowToJson(wrapper)).toMatchSnapshot();
-    expect(childFunction).toHaveBeenCalledTimes(1);
-    expect(childFunction.mock.calls[0]).toEqual([{ isOpen: true }]);
-  });
-
-  test('menu updating', function() {
-    ambManager.menuItems = [1, 2];
-    const childFunction = jest.fn();
-
-    class LittleApp extends React.Component {
-      state = { open: false };
-
-      toggleMenu = () => {
-        this.setState({ open: !this.state.open });
-      };
-
-      render() {
-        return el(
-          MockWrapper,
-          { mockManager: ambManager },
-          el(Menu, null, childFunction)
-        );
-      }
-    }
-
-    const wrapper = mount(el(LittleApp));
-    wrapper.instance().toggleMenu();
-    expect(ambManager.clearItems).toHaveBeenCalledTimes(1);
-  });
-});
-
-describe('<Menu> rendered via renderToString', function() {
-  test('does not throw', function() {
-    const output = ReactDOMServer.renderToString(
-      el(
-        MockWrapper,
-        { mockManager: createMockManager() },
-        el(Menu, null, el('div', null, 'foo'))
-      )
-    );
-    expect(output).toMatchSnapshot();
-  });
-});

package/src/__tests__/MenuItem.test.js

@@ -1,106 +0,0 @@
-const React = require('react');
-const ReactDOMServer = require('react-dom/server');
-const shallow = require('enzyme').shallow;
-const shallowToJson = require('enzyme-to-json').shallowToJson;
-const ManagerContext = require('../ManagerContext');
-const MenuItem = require('../MenuItem');
-const MockWrapper = require('./helpers/MockWrapper');
-const createMockKeyEvent = require('./helpers/createMockKeyEvent');
-const createMockManager = require('./helpers/createMockManager');
-
-const el = React.createElement;
-
-describe('<MenuItem>', function() {
-  let shallowOptions;
-  let ambManager;
-
-  beforeEach(function() {
-    ambManager = createMockManager();
-    shallowOptions = {
-      wrappingComponent: ManagerContext.Provider,
-      wrappingComponentProps: { value: ambManager }
-    };
-  });
-
-  it('DOM with only required props', function() {
-    const menuItem = el(MenuItem, null, 'foo');
-    const wrapper = shallow(menuItem, shallowOptions).dive().dive();
-    expect(shallowToJson(wrapper)).toMatchSnapshot();
-  });
-
-  it('DOM with all possible props and element child', function() {
-    const menuItem = el(
-      MenuItem,
-      {
-        className: 'foobar',
-        id: 'hogwash',
-        tag: 'li',
-        style: { right: '1em' },
-        text: 'horse',
-        value: 'lamb',
-        'data-something-something': 'seven' // arbitrary prop
-      },
-      el('a', { href: '#' }, 'foo')
-    );
-    const wrapper = shallow(menuItem, shallowOptions).dive().dive();
-    expect(shallowToJson(wrapper)).toMatchSnapshot();
-  });
-
-  it('click without specified value prop', function() {
-    const mockEvent = { bee: 'baa' };
-    const menuItem = el(MenuItem, null, 'foo');
-    const wrapper = shallow(menuItem, shallowOptions).dive().dive();
-    wrapper.simulate('click', mockEvent);
-    expect(ambManager.handleSelection).toHaveBeenCalledTimes(1);
-    expect(ambManager.handleSelection.mock.calls[0]).toEqual([
-      'foo',
-      mockEvent
-    ]);
-  });
-
-  it('click with specified value prop', function() {
-    const mockEvent = { bee: 'baa' };
-    const menuItem = el(MenuItem, { value: 'bar' }, 'foo');
-    const wrapper = shallow(menuItem, shallowOptions).dive().dive();
-    wrapper.simulate('click', mockEvent);
-    expect(ambManager.handleSelection).toHaveBeenCalledTimes(1);
-    expect(ambManager.handleSelection.mock.calls[0]).toEqual([
-      'bar',
-      mockEvent
-    ]);
-  });
-
-  it('click with specified value prop', function() {
-    const mockEnterEvent = createMockKeyEvent('Enter');
-    const mockSpaceEvent = createMockKeyEvent(' ');
-    const mockEscapeEvent = createMockKeyEvent('Escape');
-    const menuItem = el(MenuItem, null, 'foo');
-    const wrapper = shallow(menuItem, shallowOptions).dive().dive();
-
-    wrapper.simulate('keyDown', mockEnterEvent);
-    wrapper.simulate('keyDown', mockSpaceEvent);
-    wrapper.simulate('keyDown', mockEscapeEvent);
-    expect(ambManager.handleSelection).toHaveBeenCalledTimes(2);
-    expect(ambManager.handleSelection.mock.calls[0]).toEqual([
-      'foo',
-      mockEnterEvent
-    ]);
-    expect(ambManager.handleSelection.mock.calls[1]).toEqual([
-      'foo',
-      mockSpaceEvent
-    ]);
-  });
-});
-
-describe('<MenuItem> rendered via renderToString', function() {
-  it('does not throw', function() {
-    const output = ReactDOMServer.renderToString(
-      el(
-        MockWrapper,
-        { mockManager: createMockManager() },
-        el(MenuItem, null, 'foo')
-      )
-    );
-    expect(output).toMatchSnapshot();
-  });
-});

package/src/__tests__/__snapshots__/Button.test.js.snap

@@ -1,41 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Button> DOM with all possible props and element child 1`] = `
-<button
-  aria-disabled={true}
-  aria-expanded={false}
-  aria-haspopup={true}
-  className="bar"
-  data-something-something="seven"
-  disabled={true}
-  id="foo"
-  onClick={[Function]}
-  onKeyDown={[Function]}
-  role="button"
-  style={
-    Object {
-      "top": 2,
-    }
-  }
-  tabIndex=""
->
-  <span>
-    hooha
-  </span>
-</button>
-`;
-
-exports[`<Button> DOM with only required props and text child 1`] = `
-<span
-  aria-expanded={false}
-  aria-haspopup={true}
-  onClick={[Function]}
-  onKeyDown={[Function]}
-  role="button"
-  tabIndex="0"
->
-  foo
-</span>
-`;
-
-exports[`<Button> rendered via renderToString does not throw 1`] = `"<div><span role=\\"button\\" tabindex=\\"0\\" aria-haspopup=\\"true\\" aria-expanded=\\"false\\">foo</span></div>"`;

package/src/__tests__/__snapshots__/Menu.test.js.snap

@@ -1,54 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<Menu> closed Menu DOM with only required props and element child 1`] = `""`;
-
-exports[`<Menu> closed menu DOM with all possible props and function child 1`] = `
-<ul
-  className="bar"
-  data-something-something="seven"
-  id="foo"
-  onKeyDown={[Function]}
-  role="menu"
-  style={
-    Object {
-      "bottom": 1,
-    }
-  }
-  tabIndex={-1}
->
-  isOpen = false
-</ul>
-`;
-
-exports[`<Menu> open Menu DOM with only required props and element child 1`] = `
-<div
-  onKeyDown={[Function]}
-  role="menu"
-  tabIndex={-1}
->
-  <div>
-    <div>
-      foo
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<Menu> open menu DOM with all possible props and function child 1`] = `
-<section
-  className="foo"
-  id="bar"
-  onKeyDown={[Function]}
-  role="menu"
-  style={
-    Object {
-      "left": 1,
-    }
-  }
-  tabIndex={-1}
->
-  isOpen = true
-</section>
-`;
-
-exports[`<Menu> rendered via renderToString does not throw 1`] = `"<div></div>"`;

package/src/__tests__/__snapshots__/MenuItem.test.js.snap

@@ -1,37 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<MenuItem> DOM with all possible props and element child 1`] = `
-<li
-  className="foobar"
-  data-something-something="seven"
-  id="hogwash"
-  onClick={[Function]}
-  onKeyDown={[Function]}
-  role="menuitem"
-  style={
-    Object {
-      "right": "1em",
-    }
-  }
-  tabIndex="-1"
->
-  <a
-    href="#"
-  >
-    foo
-  </a>
-</li>
-`;
-
-exports[`<MenuItem> DOM with only required props 1`] = `
-<div
-  onClick={[Function]}
-  onKeyDown={[Function]}
-  role="menuitem"
-  tabIndex="-1"
->
-  foo
-</div>
-`;
-
-exports[`<MenuItem> rendered via renderToString does not throw 1`] = `"<div><div role=\\"menuitem\\" tabindex=\\"-1\\">foo</div></div>"`;