feat(Nav)!: migrate to restart/ui

BREAKING CHANGE: removed keyboard navigation

Author: kyletsang

src/Nav.tsx

@@ -5,31 +5,22 @@ import all from 'prop-types-extra/lib/all';
 import * as React from 'react';
 import { useContext } from 'react';
 import { useUncontrolled } from 'uncontrollable';
-
+import BaseNav, { NavProps as BaseNavProps } from '@restart/ui/Nav';
+import { EventKey } from '@restart/ui/types';
 import { useBootstrapPrefix } from './ThemeProvider';
 import NavbarContext from './NavbarContext';
 import CardHeaderContext from './CardHeaderContext';
-import AbstractNav from './AbstractNav';
 import NavItem from './NavItem';
 import NavLink from './NavLink';
-import {
-  BsPrefixProps,
-  BsPrefixRefForwardingComponent,
-  SelectCallback,
-} from './helpers';
-import { EventKey } from './types';
-
-export interface NavProps
-  extends BsPrefixProps,
-    Omit<React.HTMLAttributes<HTMLElement>, 'onSelect'> {
+import { BsPrefixProps, BsPrefixRefForwardingComponent } from './helpers';
+
+export interface NavProps extends BsPrefixProps, BaseNavProps {
   navbarBsPrefix?: string;
   cardHeaderBsPrefix?: string;
   variant?: 'tabs' | 'pills';
-  activeKey?: EventKey;
   defaultActiveKey?: EventKey;
   fill?: boolean;
   justify?: boolean;
-  onSelect?: SelectCallback;
   navbar?: boolean;
   navbarScroll?: boolean;
 }
@@ -149,7 +140,7 @@ const Nav: BsPrefixRefForwardingComponent<'div', NavProps> = React.forwardRef<
   }
 
   return (
-    <AbstractNav
+    <BaseNav
       as={as}
       ref={ref}
       activeKey={activeKey}

src/NavContext.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { EventKey } from './types';
+import { EventKey } from '@restart/ui/types';
 
 interface NavContextType {
   role?: string; // used by NavLink to determine it's role

test/NavLinkSpec.js

@@ -29,31 +29,6 @@ describe('<NavLink>', () => {
     );
   });
 
-  it('Should call `onSelect` when item is selected', (done) => {
-    function handleSelect(key, event) {
-      assert.equal(key, '2');
-      assert.ok(event.target.tagName === 'A');
-      done();
-    }
-    mount(
-      <NavLink eventKey="2" onSelect={handleSelect}>
-        <span>Item content</span>
-      </NavLink>,
-    ).simulate('click');
-  });
-
-  it('Should not call `onSelect` when item disabled and is selected', () => {
-    function handleSelect() {
-      throw new Error('onSelect should not be called');
-    }
-
-    mount(
-      <NavLink disabled onSelect={handleSelect}>
-        <span>Item content</span>
-      </NavLink>,
-    ).simulate('click');
-  });
-
   describe('Web Accessibility', () => {
     it('Should add aria-selected to the link when role is "tab"', () => {
       mount(

test/NavSpec.js

@@ -128,7 +128,7 @@ describe('<Nav>', () => {
         </NavDropdown>
       </Nav>,
     )
-      .find('DropdownItem')
+      .find('a.dropdown-item')
       .simulate('click');
 
     onSelectSpy.should.have.been.calledOnce;
@@ -151,140 +151,6 @@ describe('<Nav>', () => {
     mount(<Nav navbar justify />);
   });
 
-  describe('keyboard navigation', () => {
-    let wrapper;
-    let selectSpy;
-    let keyDownSpy;
-
-    beforeEach(() => {
-      selectSpy = sinon.spy((activeKey) => {
-        wrapper.setProps({ activeKey });
-      });
-      keyDownSpy = sinon.spy();
-
-      wrapper = mount(
-        <Nav
-          activeKey={1}
-          onSelect={selectSpy}
-          onKeyDown={keyDownSpy}
-          role="tablist"
-        >
-          <Nav.Link eventKey={1}>Nav.Link 1 content</Nav.Link>
-          <Nav.Link eventKey={2} disabled>
-            Nav.Link 2 content
-          </Nav.Link>
-          <Nav.Link eventKey={3}>Nav.Link 3 content</Nav.Link>
-          <Nav.Link eventKey={4} disabled>
-            Nav.Link 4 content
-          </Nav.Link>
-          <Nav.Link eventKey={5}>Nav.Link 5 content</Nav.Link>
-        </Nav>,
-        { attachTo: mountPoint },
-      );
-    });
-
-    afterEach(() => wrapper.unmount());
-
-    it('should not allow focusing on disabled tabs', () => {
-      const links = wrapper.find('a').map((n) => n.getDOMNode());
-
-      expect(links[0].getAttribute('tabindex')).to.not.equal('-1');
-      expect(links[1].getAttribute('tabindex')).to.equal('-1');
-      expect(links[2].getAttribute('tabindex')).to.not.equal('-1');
-      expect(links[3].getAttribute('tabindex')).to.equal('-1');
-      expect(links[4].getAttribute('tabindex')).to.not.equal('-1');
-    });
-
-    it('should focus the next tab on arrow key', () => {
-      const anchors = wrapper.find('a');
-
-      anchors
-        .at(0)
-        .tap((a) => a.getDOMNode().focus())
-        .simulate('keydown', {
-          key: 'ArrowRight',
-        });
-
-      expect(wrapper.prop('activeKey')).to.equal('3');
-
-      expect(document.activeElement).to.equal(anchors.at(2).getDOMNode());
-    });
-
-    it('should focus the previous tab on arrow key', () => {
-      wrapper.setProps({ activeKey: 5 });
-
-      const anchors = wrapper.find('a');
-
-      anchors
-        .at(4)
-        .tap((a) => a.getDOMNode().focus())
-        .simulate('keydown', {
-          key: 'ArrowLeft',
-        });
-
-      expect(wrapper.prop('activeKey')).to.equal('3');
-      expect(document.activeElement).to.equal(anchors.at(2).getDOMNode());
-    });
-
-    it('should wrap to the next tab on arrow key', () => {
-      wrapper.setProps({ activeKey: 5 });
-      const anchors = wrapper.find('a');
-
-      anchors
-        .at(4)
-        .tap((a) => a.getDOMNode().focus())
-        .simulate('keydown', {
-          key: 'ArrowDown',
-        });
-
-      expect(wrapper.prop('activeKey')).to.equal('1');
-      expect(document.activeElement).to.equal(anchors.at(0).getDOMNode());
-    });
-
-    it('should wrap to the previous tab on arrow key', () => {
-      const anchors = wrapper.find('a');
-
-      anchors
-        .at(0)
-        .tap((a) => a.getDOMNode().focus())
-        .simulate('keydown', {
-          key: 'ArrowUp',
-        });
-
-      expect(wrapper.prop('activeKey')).to.equal('5');
-      expect(document.activeElement).to.equal(anchors.at(4).getDOMNode());
-    });
-
-    it('should forward to a onKeyDown listener', () => {
-      const anchors = wrapper.find('a');
-
-      anchors
-        .at(0)
-        .tap((a) => a.getDOMNode().focus())
-        .simulate('keydown', {
-          key: 'ArrowUp',
-        });
-
-      sinon.assert.calledOnce(keyDownSpy);
-    });
-
-    ['a', 'b', 'left', 'up'].forEach(({ key }) => {
-      it(`should ignore non-arrow keys: case ${key}`, () => {
-        const anchors = wrapper.find('a');
-
-        anchors
-          .at(0)
-          .tap((a) => a.getDOMNode().focus())
-          .simulate('keydown', {
-            key,
-          });
-
-        expect(document.activeElement).to.equal(anchors.at(0).getDOMNode());
-        sinon.assert.calledOnce(keyDownSpy);
-      });
-    });
-  });
-
   describe('Web Accessibility', () => {
     it('should have tablist and tab roles', () => {
       const wrapper = mount(