chore(deps): upgrade eslint

.eslintignore

@@ -2,4 +2,5 @@
 **/lib/
 **/coverage/
 **/node_modules/
-docs/
+docs/
+.eslintrc.js

.eslintrc.js

@@ -13,7 +13,6 @@ module.exports = {
     'plugin:react/recommended',
     'plugin:jsx-a11y/recommended',
     'prettier',
-    'prettier/react',
     'plugin:@typescript-eslint/eslint-recommended',
     'plugin:@typescript-eslint/recommended'
   ],
@@ -26,7 +25,8 @@ module.exports = {
       }
     ],
     '@typescript-eslint/camelcase': 'off',
-    '@typescript-eslint/explicit-function-return-type': 'off'
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/ban-ts-comment': 'warn'
   },
   settings: {
     react: {

package.json

@@ -14,7 +14,7 @@
     "dev:styles": "yarn --cwd=packages/styles dev",
     "dev:docs": "webpack-dev-server",
     "fmt": "prettier --write \"e2e/*.ts\" \"docs/**/*.{css,js}\" \"packages/react/**/*.{js,ts,tsx}\" \"packages/styles/*.css\" *.{js,json,md,ts}",
-    "lint": "eslint .",
+    "lint": "eslint . --quiet",
     "prebuild": "yarn clean",
     "predev": "yarn clean",
     "test": "yarn --cwd=packages/react test",
@@ -69,8 +69,8 @@
     "@types/react-router-dom": "^5.3.2",
     "@types/react-syntax-highlighter": "^11.0.4",
     "@types/webpack-env": "^1.18.0",
-    "@typescript-eslint/eslint-plugin": "^2.19.2",
-    "@typescript-eslint/parser": "^2.19.2",
+    "@typescript-eslint/eslint-plugin": "^5.59.9",
+    "@typescript-eslint/parser": "^5.59.9",
     "autoprefixer": "^9.7.6",
     "axe-core": "^4.3.5-canary.0ddc00b",
     "babel-loader": "^8.0.5",
@@ -85,10 +85,10 @@
     "css-minimizer-webpack-plugin": "^4.2.2",
     "enzyme": "^3.2.0",
     "enzyme-adapter-react-16": "^1.11.2",
-    "eslint": "^6.8.0",
-    "eslint-config-prettier": "^3.0.1",
-    "eslint-plugin-jsx-a11y": "^6.1.1",
-    "eslint-plugin-react": "^7.5.1",
+    "eslint": "^8.42.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-react": "^7.32.2",
     "express": "^4.17.3",
     "focusable": "^2.3.0",
     "fontsource-lato": "^4.0.0",

packages/react/__tests__/.eslintrc.js

@@ -1,5 +1,4 @@
 module.exports = {
-  extends: '../../../.eslintrc.js',
   rules: {
     '@typescript-eslint/explicit-function-return-type': 'off',
     '@typescript-eslint/no-empty-function': 'off'

packages/react/__tests__/svgMock.js

@@ -1 +1,2 @@
+// eslint-disable-next-line react/display-name
 module.exports = () => null;

packages/react/package.json

@@ -60,10 +60,6 @@
     "concurrently": "^5.3.0",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
-    "eslint": "^6.8.0",
-    "eslint-config-prettier": "^6.11.0",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-react": "^7.19.0",
     "jest": "^24.7.1",
     "jest-axe": "^3.4.0",
     "jsdom": "^16.2.2",

packages/react/src/components/Breadcrumb/BreadcrumbItem.tsx

@@ -1,10 +1,10 @@
 import React, { forwardRef } from 'react';
 import classnames from 'classnames';
-import { Cauldron } from '../../types';
+import PropTypes from 'prop-types';
 
-interface BreadcrumbItemProps extends React.HTMLAttributes<HTMLSpanElement> {}
+type BreadcrumbItemProps = React.HTMLAttributes<HTMLSpanElement>;
 
-const BreadcrumbItem = forwardRef<HTMLElement, BreadcrumbItemProps>(
+const BreadcrumbItem = forwardRef<HTMLElement, BreadcrumbItemProps>( // eslint-disable-line react/display-name
   ({ className, children, ...props }: BreadcrumbItemProps, ref) => (
     <span
       className={classnames('Breadcrumb__Item', className)}
@@ -16,5 +16,7 @@ const BreadcrumbItem = forwardRef<HTMLElement, BreadcrumbItemProps>(
     </span>
   )
 );
-
+BreadcrumbItem.propTypes = {
+  className: PropTypes.string
+};
 export default BreadcrumbItem;

packages/react/src/components/Card/CardContent.tsx

@@ -2,8 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 
-export interface CardContentProps
-  extends React.HTMLAttributes<HTMLDivElement> {}
+export type CardContentProps = React.HTMLAttributes<HTMLDivElement>;
 
 const CardContent = ({ className, ...other }: CardContentProps) => (
   <div className={classNames('Card__content', className)} {...other} />

packages/react/src/components/Card/CardFooter.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-export interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {}
+export type CardFooterProps = React.HTMLAttributes<HTMLDivElement>;
 
 const CardFooter = ({ className, ...other }: CardFooterProps) => (
   <div className={classNames('Card__footer', className)} {...other} />

packages/react/src/components/Card/CardHeader.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-export interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
+export type CardHeaderProps = React.HTMLAttributes<HTMLDivElement>;
 
 const CardHeader = ({ className, ...other }: CardHeaderProps) => (
   <div className={classNames('Card__header', className)} {...other} />

packages/react/src/components/ClickOutsideListener/index.tsx

@@ -93,7 +93,7 @@ export default class ClickOutsideListener extends React.Component<
     setRef;
     // If child has its own ref, we want to update
     // its ref with the newly cloned node
-    let { ref } = this.props.children as any;
+    const { ref } = this.props.children as any;
     setRef(ref, node);
   };
 

packages/react/src/components/Code/index.tsx

@@ -86,7 +86,8 @@ Code.propTypes = {
   children: PropTypes.string.isRequired,
   language: PropTypes.oneOf(['javascript', 'css', 'html', 'yaml']),
   className: PropTypes.string,
-  tabIndex: PropTypes.number
+  tabIndex: PropTypes.number,
+  scrollable: PropTypes.bool
 };
 
 export default Code;

packages/react/src/components/Dialog/index.tsx

@@ -31,7 +31,9 @@ interface DialogState {
   isolator?: AriaIsolate;
 }
 
-const noop = () => {};
+const noop = () => {
+  //not empty
+};
 
 export default class Dialog extends React.Component<DialogProps, DialogState> {
   static defaultProps = {
@@ -206,6 +208,10 @@ const DialogContent = ({
   </div>
 );
 DialogContent.displayName = 'DialogContent';
+DialogContent.propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.node
+};
 
 const DialogFooter = ({
   children,
@@ -217,5 +223,8 @@ const DialogFooter = ({
   </div>
 );
 DialogFooter.displayName = 'DialogFooter';
-
+DialogFooter.propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.node
+};
 export { Dialog, DialogContent, DialogFooter };

packages/react/src/components/ExpandCollapsePanel/ExpandCollapsePanel.tsx

@@ -51,6 +51,7 @@ export default class ExpandCollapsePanel extends React.Component<
   private styleTag: HTMLStyleElement;
 
   handleToggle = (e: React.MouseEvent<HTMLButtonElement>) => {
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
     const { onToggle = () => {} } = this.props;
     const { isOpen, controlled } = this.state;
     onToggle(e);

packages/react/src/components/Layout/index.tsx

@@ -7,6 +7,7 @@ export interface LayoutProps extends React.HTMLAttributes<HTMLDivElement> {
 
 export default class Layout extends React.Component<LayoutProps> {
   static defaultProps = {
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
     layoutRef: () => {}
   };
 

packages/react/src/components/Main/index.tsx

@@ -7,6 +7,7 @@ export interface MainProps extends React.HTMLAttributes<HTMLDivElement> {
 
 export default class Main extends Component<MainProps> {
   static defaultProps = {
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
     mainRef: () => {}
   };
 

packages/react/src/components/MenuItem/index.tsx

@@ -14,8 +14,11 @@ interface MenuItemProps extends React.HTMLAttributes<HTMLLIElement> {
 
 export default class MenuItem extends Component<MenuItemProps> {
   static defaultProps = {
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
     menuItemRef: () => {},
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
     onClick: () => {},
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
     onKeyDown: () => {},
     autoClickLink: true
   };

packages/react/src/components/Offscreen/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-export interface OffscreenProps extends React.HTMLAttributes<HTMLSpanElement> {}
+export type OffscreenProps = React.HTMLAttributes<HTMLSpanElement>;
 
 const Offscreen = (props: OffscreenProps) => (
   <span className="Offscreen" {...props} />

packages/react/src/components/OptionsMenu/OptionsMenu.tsx

@@ -40,7 +40,9 @@ export default class OptionsMenu extends Component<
   OptionsMenuState
 > {
   static defaultProps = {
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
     onClose: () => {},
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
     onSelect: () => {},
     align: 'right'
   };

packages/react/src/components/OptionsMenu/OptionsMenuItem.tsx

@@ -14,6 +14,7 @@ export interface OptionsMenuItemProps
 
 class OptionsMenuItemComponent extends React.Component<OptionsMenuItemProps> {
   static defaultProps = {
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
     onSelect: () => {}
   };
 

packages/react/src/components/OptionsMenu/OptionsMenuList.tsx

@@ -22,7 +22,9 @@ export default class OptionsMenuList extends React.Component<
 > {
   static defaultProps = {
     closeOnSelect: true,
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
     onSelect: () => {},
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
     onClose: () => {}
   };
 
@@ -172,6 +174,7 @@ export default class OptionsMenuList extends React.Component<
 
     // Key event is being handled in componentDidMount
     /* eslint-disable jsx-a11y/click-events-have-key-events */
+    /* eslint-disable jsx-a11y/role-supports-aria-props */
     return (
       <ClickOutsideListener
         onClickOutside={this.handleClickOutside}
@@ -182,7 +185,7 @@ export default class OptionsMenuList extends React.Component<
           {...other}
           className={classnames('OptionsMenu__list', className)}
           /* aria-expanded is not correct usage here, but the pattern library
-             currently styles the open state of the menu. based on this attribute */
+          currently styles the open state of the menu. based on this attribute */
           aria-expanded={show}
           role="menu"
           onClick={handleClick}

packages/react/src/components/Pointout/index.tsx

@@ -51,8 +51,10 @@ export default class Pointout extends React.Component<
   PointoutState
 > {
   static defaultProps = {
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
     ftpoRef: () => {},
     noArrow: false,
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
     onClose: () => {},
     dismissText: 'dismiss',
     previousText: 'previous',
@@ -273,7 +275,7 @@ export default class Pointout extends React.Component<
     const portalNode =
       (portal as React.RefObject<HTMLElement>)?.current ||
       (portal as HTMLElement);
-
+    // eslint-disable-next-line prefer-const
     let { top, left, width, height } = targetNode.getBoundingClientRect();
     if (portalNode && portalNode !== document.body) {
       // If the portal is not placed on document.body

packages/react/src/components/Tooltip/index.tsx

@@ -235,10 +235,16 @@ export const TooltipHead = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div className={classnames('TooltipHead', className)} {...other} />
 );
+TooltipHead.propTypes = {
+  className: PropTypes.string
+};
 
 export const TooltipContent = ({
   className,
   ...other
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div className={classnames('TooltipContent', className)} {...other} />
 );
+TooltipContent.propTypes = {
+  className: PropTypes.string
+};

packages/react/src/components/TopBar/TopBarMenu.tsx

@@ -24,7 +24,9 @@ export default class TopBarMenu extends React.Component<
   TopBarMenuState
 > {
   static defaultProps = {
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
     onKeyDown: () => {},
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
     menuItemRef: () => {}
   };
 

packages/react/src/components/TwoColumnPanel/ColumnGroupHeader.tsx

@@ -1,7 +1,8 @@
+import PropTypes from 'prop-types';
 import React, { forwardRef } from 'react';
 import classnames from 'classnames';
 
-interface ColumnGroupHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
+type ColumnGroupHeaderProps = React.HTMLAttributes<HTMLDivElement>;
 
 const ColumnGroupHeader = forwardRef<HTMLDivElement, ColumnGroupHeaderProps>(
   ({ className, children, ...props }, ref) => {
@@ -18,5 +19,7 @@ const ColumnGroupHeader = forwardRef<HTMLDivElement, ColumnGroupHeaderProps>(
 );
 
 ColumnGroupHeader.displayName = 'ColumnGroupHeader';
-
+ColumnGroupHeader.propTypes = {
+  className: PropTypes.string
+};
 export default ColumnGroupHeader;

packages/react/src/components/TwoColumnPanel/ColumnHeader.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import classnames from 'classnames';
+import PropTypes from 'prop-types';
 
-interface ColumnHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
+type ColumnHeaderProps = React.HTMLAttributes<HTMLDivElement>;
 
 const ColumnHeader = forwardRef<HTMLDivElement, ColumnHeaderProps>(
   ({ className, children, ...props }, ref) => {
@@ -18,5 +19,7 @@ const ColumnHeader = forwardRef<HTMLDivElement, ColumnHeaderProps>(
 );
 
 ColumnHeader.displayName = 'ColumnHeader';
-
+ColumnHeader.propTypes = {
+  className: PropTypes.string
+};
 export default ColumnHeader;

packages/react/src/components/TwoColumnPanel/ColumnList.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
 import classnames from 'classnames';
+import PropTypes from 'prop-types';
 
-interface ColumnListProps extends React.HTMLAttributes<HTMLDivElement> {}
+type ColumnListProps = React.HTMLAttributes<HTMLDivElement>;
 
 const ColumnList = forwardRef<HTMLDivElement, ColumnListProps>(
   ({ className, children, ...props }, ref) => {
@@ -18,5 +19,7 @@ const ColumnList = forwardRef<HTMLDivElement, ColumnListProps>(
 );
 
 ColumnList.displayName = 'ColumnList';
-
+ColumnList.propTypes = {
+  className: PropTypes.string
+};
 export default ColumnList;

packages/react/src/components/Workspace/index.tsx

@@ -11,7 +11,9 @@ export interface WorkspaceProps extends React.HTMLAttributes<HTMLDivElement> {
 
 export default class Workspace extends React.Component<WorkspaceProps> {
   static defaultProps = {
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
     workspaceRef: () => {},
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
     layoutRef: () => {},
     noSideBar: false
   };

packages/react/src/types.ts

@@ -1,5 +1,6 @@
 import { ReactElement, ReactFragment, ReactPortal } from 'react';
 
+// eslint-disable-next-line @typescript-eslint/no-namespace
 export namespace Cauldron {
   export type LabelProps =
     | { 'aria-label': string }