feat: Added support for node v16 (#1068)

feat: Added support for Node 16

.github/workflows/ci.yml

@@ -1,10 +1,19 @@
 name: Node.js CI
 
-on: [push, pull_request]
+on:
+  push:
+    branches:
+    - master
+  pull_request:
+    branches:
+    - '**'
 
 jobs:
-  build:
+  tests:
     runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node: [12, 14, 16]
     steps:
     - name: Checkout
       uses: actions/checkout@v2
@@ -13,7 +22,7 @@ jobs:
     - name: Setup Nodejs
       uses: actions/setup-node@v2
       with:
-        node-version: 12
+        node-version: ${{ matrix.node }}
     - name: Install dependencies
       run: npm ci
     - name: Lint
@@ -32,6 +41,6 @@ jobs:
       id: extract_branch
     - name: Preview semantic-release version
       env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          NPM_TOKEN: ${{ secrets.SEMANTIC_RELEASE_NPM_TOKEN }}
-      run: npx semantic-release --dry-run --branches=${{ steps.extract_branch.outputs.branch }}
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        NPM_TOKEN: ${{ secrets.SEMANTIC_RELEASE_NPM_TOKEN }}
+      run: npx semantic-release --dry-run --branches=${{ steps.extract_branch.outputs.branch}}

package.json

@@ -67,7 +67,7 @@
     "@babel/plugin-proposal-object-rest-spread": "^7.16.7",
     "@babel/preset-env": "^7.16.8",
     "@babel/preset-react": "^7.16.7",
-    "@edx/eslint-config": "^1.3.0",
+    "@edx/eslint-config": "^2.0.0",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
@@ -82,11 +82,11 @@
     "eslint-plugin-import": "^2.25.3",
     "eslint-plugin-jsx-a11y": "^6.3.1",
     "eslint-plugin-react": "^7.20.6",
-    "eslint-plugin-react-hooks": "^1.7.0",
+    "eslint-plugin-react-hooks": "^4.0.0",
     "husky": "^2.0.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^24.5.0",
-    "jest-cli": "^24.7.1",
+    "jest": "^25.0.0",
+    "jest-cli": "^25.0.0",
     "markdown-loader-jest": "^0.1.1",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",

src/Button/deprecated/Button.test.jsx

@@ -11,9 +11,11 @@ describe('<Button />', () => {
   let button;
 
   beforeEach(() => {
+    const app = document.createElement('div');
+    document.body.appendChild(app);
     wrapper = mount(<Button
       {...defaultProps}
-    />);
+    />, { attachTo: app });
 
     button = wrapper.find('button');
   });

src/Card/CardHeader.jsx

@@ -31,12 +31,11 @@ const CardHeader = React.forwardRef(({
         {title && <div className={`pgn__card-header-title-${size}`}>{title}</div>}
         {subtitle && <div className={`pgn__card-header-subtitle-${size}`}>{subtitle}</div>}
       </div>
-      {actions
-        && (
+      {actions && (
         <div className="pgn__card-header-actions">
           {size !== 'md' ? cloneActions(actions) : actions}
         </div>
-        )}
+      )}
     </div>
   );
 });
@@ -49,7 +48,7 @@ CardHeader.propTypes = {
   /** The class name for the CardHeader component */
   className: PropTypes.string,
   /** The title for the CardHeader component */
-  title: PropTypes.node.isRequired,
+  title: PropTypes.node,
   /** The size of the CardHeader component */
   size: PropTypes.oneOf(['sm', 'md']),
   /** The subtitle of the CardHeader component */
@@ -60,6 +59,7 @@ CardHeader.defaultProps = {
   actions: null,
   className: null,
   size: 'md',
+  title: null,
   subtitle: null,
 };
 

src/DataTable/CollapsibleButtonGroup.jsx

@@ -84,12 +84,12 @@ CollapsibleButtonGroup.defaultProps = {
 };
 
 CollapsibleButtonGroup.propTypes = {
-  /** class names for the div wrapping the button components */
+  /** Class names for the div wrapping the button components */
   className: PropTypes.string,
+  /** Array of action objects, containing a component and their callback args */
   actions: PropTypes.arrayOf(PropTypes.shape({
     component: PropTypes.oneOfType([PropTypes.func, PropTypes.element]).isRequired,
-    // eslint-disable-next-line react/forbid-prop-types
-    args: PropTypes.object,
+    args: PropTypes.shape({}),
   })).isRequired,
 };
 

src/DataTable/filters/CheckboxFilter.jsx

@@ -64,7 +64,7 @@ CheckboxFilter.propTypes = {
       number: PropTypes.number,
     })).isRequired,
     getHeaderProps: PropTypes.func.isRequired,
-    filterValue: PropTypes.arrayOf(PropTypes.any),
+    filterValue: PropTypes.string,
   }).isRequired,
 };
 

src/DataTable/filters/MultiSelectDropdownFilter.jsx

@@ -68,7 +68,7 @@ MultiSelectDropdownFilter.propTypes = {
     })).isRequired,
     /** Generates a key unique to the column being filtered */
     getHeaderProps: PropTypes.func.isRequired,
-    filterValue: PropTypes.arrayOf([PropTypes.number, PropTypes.string]),
+    filterValue: PropTypes.string,
   }).isRequired,
 };
 

src/Dropdown/deprecated/Dropdown.test.jsx

@@ -55,7 +55,10 @@ describe('<Dropdown />', () => {
   });
 
   describe('Mouse Interactions', () => {
-    const wrapper = mount(<Dropdown>{menuContent}</Dropdown>);
+    const app = document.createElement('div');
+    document.body.appendChild(app);
+
+    const wrapper = mount(<Dropdown>{menuContent}</Dropdown>, { attachTo: app });
     const menuTrigger = wrapper.find('button');
     const menuContainer = wrapper.find('.dropdown-menu');
     const menuItems = wrapper.find('.dropdown-menu a');
@@ -94,7 +97,10 @@ describe('<Dropdown />', () => {
 
   describe('Keyboard Interactions', () => {
     // Note: menuContent has three items
-    const wrapper = mount(<Dropdown>{menuContent}</Dropdown>);
+    const app = document.createElement('div');
+    document.body.appendChild(app);
+
+    const wrapper = mount(<Dropdown>{menuContent}</Dropdown>, { attachTo: app });
     const menuTrigger = wrapper.find('button');
     const menuContainer = wrapper.find('.dropdown-menu');
     const menuItems = wrapper.find('.dropdown-menu a');

src/Icon/index.jsx

@@ -73,7 +73,10 @@ Icon.propTypes = {
   /** An icon component to render. Example import of a Paragon icon component: `import { Check } from '@edx/paragon/dist/icon';` */
   src: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
   /** HTML element attributes to pass through to the underlying svg element */
-  svgAttrs: PropTypes.object, // eslint-disable-line
+  svgAttrs: PropTypes.shape({
+    'aria-label': PropTypes.string,
+    'aria-labelledby': PropTypes.string,
+  }),
   // eslint-disable-next-line max-len
   /** the `id` property of the Icon element, by default this value is generated with the `newId` function with the `prefix` of `Icon`. */
   id: PropTypes.string,

src/InputSelect/index.jsx

@@ -71,7 +71,7 @@ Select.propTypes = {
   ]),
   options: PropTypes.oneOfType([
     PropTypes.arrayOf(PropTypes.string),
-    PropTypes.arrayOf(PropTypes.object),
+    PropTypes.arrayOf(PropTypes.shape({})),
   ]).isRequired,
 };
 

src/Menu/SelectMenu.test.jsx

@@ -6,6 +6,8 @@ import { Add, Check } from '../../icons';
 import Hyperlink from '../Hyperlink';
 import Button from '../Button';
 
+const app = document.createElement('div');
+document.body.appendChild(app);
 const selectMenu = mount((
   <SelectMenu>
     <MenuItem> A Menu Item</MenuItem>
@@ -22,7 +24,7 @@ const selectMenu = mount((
     <MenuItem>Kainian</MenuItem>
     <MenuItem>M. Hortens</MenuItem>
   </SelectMenu>
-));
+), { attachTo: app });
 
 const menuTrigger = selectMenu.find(Button);
 

src/Menu/__snapshots__/SelectMenu.test.jsx.snap

@@ -46,21 +46,6 @@ exports[`Rendering Beahvior Renders as expected 1`] = `
         }
       }
     >
-      <div
-        data-focus-guard={true}
-        style={
-          Object {
-            "height": "0px",
-            "left": "1px",
-            "overflow": "hidden",
-            "padding": 0,
-            "position": "fixed",
-            "top": "1px",
-            "width": "1px",
-          }
-        }
-        tabIndex={-1}
-      />
       <div
         data-focus-guard={true}
         style={

src/Modal/ModalDialogHeroBackground.jsx

@@ -25,7 +25,7 @@ ModalDialogHeroBackground.propTypes = {
   backgroundSrc: PropTypes.string,
   children: PropTypes.node,
   className: PropTypes.string,
-  style: PropTypes.object, // eslint-disable-line
+  style: PropTypes.shape({}),
 };
 
 ModalDialogHeroBackground.defaultProps = {

src/Modal/PopperElement.jsx

@@ -21,8 +21,9 @@ const PopperElement = ({
 
 PopperElement.propTypes = {
   children: PropTypes.node,
-  // eslint-disable-next-line react/forbid-prop-types
-  target: PropTypes.object.isRequired,
+  target: PropTypes.shape({
+    current: PropTypes.node,
+  }).isRequired,
   strategy: PropTypes.oneOf(['absolute', 'fixed']),
   placement: PropTypes.oneOf([
     'auto',
@@ -41,7 +42,7 @@ PopperElement.propTypes = {
     'left-start',
     'left-end',
   ]),
-  modifiers: PropTypes.arrayOf(PropTypes.object),
+  modifiers: PropTypes.arrayOf(PropTypes.shape({})),
 };
 
 PopperElement.defaultProps = {

src/Modal/index.jsx

@@ -274,7 +274,7 @@ Modal.propTypes = {
   /** an array of either elements or shapes that take the form of the buttonPropTypes. See the [buttonPropTypes](https://github.com/edx/paragon/blob/master/src/Button/index.jsx#L40) for a list of acceptable props to pass as part of a button. */
   buttons: PropTypes.arrayOf(PropTypes.oneOfType([
     PropTypes.element,
-    PropTypes.object, // TODO: Only accept nodes in the future
+    PropTypes.shape({}), // TODO: Only accept nodes in the future
   ])),
   /** specifies the display text of the default Close button. It defaults to "Close". */
   closeText: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),

src/Overlay/index.jsx

@@ -65,8 +65,7 @@ Overlay.propTypes = {
   /** The placement of the `Overlay` in relation to it's target. */
   placement: PropTypes.oneOf(PLACEMENT_VARIANTS),
   /** A set of popper options and props passed directly to `Popper`. */
-  // eslint-disable-next-line react/forbid-prop-types
-  popperConfig: PropTypes.object,
+  popperConfig: PropTypes.shape({}),
   /** Specify whether the overlay should trigger `onHide` when the user clicks outside the overlay. */
   rootClose: PropTypes.bool,
   /** Specify event for triggering a “root close” toggle. */
@@ -97,7 +96,7 @@ OverlayTrigger.propTypes = {
   /** The initial visibility state of the `Overlay`. */
   defaultShow: PropTypes.bool,
   /** A millisecond delay amount to show and hide the `Overlay` once triggered. */
-  delay: PropTypes.oneOfType([PropTypes.number, PropTypes.object]),
+  delay: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({})]),
   /** The initial flip state of the `Overlay`. */
   flip: PropTypes.bool,
   onHide: PropTypes.instanceOf(null),
@@ -112,8 +111,7 @@ OverlayTrigger.propTypes = {
   /** The placement of the `Overlay` in relation to it's target. */
   placement: PropTypes.oneOf(PLACEMENT_VARIANTS),
   /** A `Popper.js` config object passed to the the underlying popper instance. */
-  // eslint-disable-next-line react/forbid-prop-types
-  popperConfig: PropTypes.object,
+  popperConfig: PropTypes.shape({}),
   /**
    * The visibility of the `Overlay`. `show` is a controlled prop so should
    * be paired with `onToggle` to avoid breaking user interactions.

src/Pagination/Pagination.test.jsx

@@ -78,7 +78,9 @@ describe('<Pagination />', () => {
         ...baseProps,
         currentPage: 2,
       };
-      const wrapper = mount(<Pagination {...props} />);
+      const app = document.createElement('div');
+      document.body.appendChild(app);
+      const wrapper = mount(<Pagination {...props} />, { attachTo: app });
       wrapper.find('button.previous').simulate('click');
       expect(wrapper.find('button.next').instance()).toEqual(document.activeElement);
     });
@@ -88,7 +90,9 @@ describe('<Pagination />', () => {
         ...baseProps,
         currentPage: baseProps.pageCount - 1,
       };
-      const wrapper = mount(<Pagination {...props} />);
+      const app = document.createElement('div');
+      document.body.appendChild(app);
+      const wrapper = mount(<Pagination {...props} />, { attachTo: app });
       wrapper.find('button.next').simulate('click');
       expect(wrapper.find('button.previous').instance()).toEqual(document.activeElement);
     });

src/Popover/index.jsx

@@ -65,16 +65,15 @@ WrapperPopover.propTypes = {
       PropTypes.func,
       PropTypes.shape({ current: PropTypes.element }),
     ]),
-    style: PropTypes.object, // eslint-disable-line
+    style: PropTypes.shape({}),
   }),
   /**
    * When this prop is set, it creates a `Popover` with
    * a `Popover.Content` inside passing the children directly to it.
    */
   content: PropTypes.bool,
   /** A `Popper.js` config object passed to the the underlying popper instance. */
-  // eslint-disable-next-line react/forbid-prop-types
-  popper: PropTypes.any,
+  popper: PropTypes.shape({}),
   /** Whether the `Overlay` is shown. */
   show: PropTypes.bool,
   /** Specifies the content of the `Overlay` */

src/SearchField/SearchFieldClearButton.jsx

@@ -12,12 +12,14 @@ const SearchFieldClearButton = (props) => {
   }
 
   const handleClick = () => {
-    refs.input.current?.focus();
+    if (refs.input.current) {
+      refs.input.current.focus();
+    }
   };
 
   return (
     // eslint-disable-next-line react/button-has-type
-    <button type="reset" className="btn" {...props} disabled={disabled} onClick={handleClick}>
+    <button type="reset" className="btn" disabled={disabled} onClick={handleClick} {...props}>
       {icons.clear}
       <span className="sr-only">{screenReaderText.clearButton}</span>
     </button>

src/SearchField/__snapshots__/SearchField.test.jsx.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<SearchField /> with basic usage should match the snapshot 1`] = `"<div class=\\"pgn__searchfield d-flex\\"><form role=\\"search\\" class=\\"d-flex align-items-center w-100\\"><label for=\\"pgn-searchfield-input-1\\" class=\\"m-0\\"><span class=\\"sr-only\\">search</span></label><input type=\\"text\\" class=\\"form-control\\" role=\\"searchbox\\" id=\\"pgn-searchfield-input-1\\" name=\\"searchfield-input\\" value=\\"\\"/><button type=\\"submit\\" class=\\"btn\\"><svg aria-hidden=\\"true\\" focusable=\\"false\\" data-prefix=\\"fas\\" data-icon=\\"search\\" class=\\"svg-inline--fa fa-search fa-w-16 \\" role=\\"img\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 512 512\\"><path fill=\\"currentColor\\" d=\\"M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z\\"></path></svg><span class=\\"sr-only\\">submit search</span></button></form></div>"`;
+exports[`<SearchField /> with basic usage should match the snapshot 1`] = `"<div class=\\"pgn__searchfield d-flex\\"><form role=\\"search\\" class=\\"d-flex align-items-center w-100\\"><label for=\\"pgn-searchfield-input-1\\" class=\\"m-0\\"><span class=\\"sr-only\\">search</span></label><input type=\\"text\\" class=\\"form-control\\" role=\\"searchbox\\" id=\\"pgn-searchfield-input-1\\" name=\\"searchfield-input\\" value=\\"\\"/><button type=\\"submit\\" class=\\"btn\\"><svg aria-hidden=\\"true\\" focusable=\\"false\\" data-prefix=\\"fas\\" data-icon=\\"search\\" class=\\"svg-inline--fa fa-search \\" role=\\"img\\" xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 512 512\\"><path fill=\\"currentColor\\" d=\\"M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z\\"></path></svg><span class=\\"sr-only\\">submit search</span></button></form></div>"`;

src/StatusAlert/StatusAlert.test.jsx

@@ -101,7 +101,9 @@ describe('<StatusAlert />', () => {
 
   describe('invalid keystrokes do nothing', () => {
     beforeEach(() => {
-      wrapper = mount(<StatusAlert {...defaultProps} />);
+      const app = document.createElement('div');
+      document.body.appendChild(app);
+      wrapper = mount(<StatusAlert {...defaultProps} />, { attachTo: app });
     });
 
     it('does nothing on invalid keystroke q', () => {
@@ -126,8 +128,10 @@ describe('<StatusAlert />', () => {
   });
   describe('focus functions properly', () => {
     it('focus function changes focus', () => {
-      wrapper = mount(<div><Button.Deprecated label="test" /><StatusAlert {...defaultProps} /></div>);
-
+      const app = document.createElement('div');
+      document.body.appendChild(app);
+      wrapper = mount(<div><Button.Deprecated label="test" /><StatusAlert {...defaultProps} /></div>,
+        { attachTo: app });
       const buttons = wrapper.find('button');
 
       // move focus away from default StatusAlert xButton

src/Table/index.jsx

@@ -172,7 +172,7 @@ Table.propTypes = {
 6. `width` (string; conditionally required) only if `hasFixedColumnWidths` is set to `true`, the `<td>` elements' `class` attributes will be set to this value. This allows restricting columns to specific widths. See [Bootstrap's grid documentation](https://getbootstrap.com/docs/4.0/layout/grid/) for `col` class names that can be used.
 
 The order of objects in `columns` specifies the order of the columns in the table. */
-  data: PropTypes.arrayOf(PropTypes.object).isRequired,
+  data: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
   /** specifies the order and contents of the table's columns and provides display strings for each column's heading. It is composed of an ordered array of objects. Each object contains the following keys:
 
 1. `label` (string or element; required) contains the display string for each column's heading.