Merge branch 'ReactTypesGauntlet'

Author: hatton

package.json

@@ -31,10 +31,10 @@
         "@devexpress/dx-react-core": "^2.4.1",
         "@devexpress/dx-react-grid": "^2.4.1",
         "@devexpress/dx-react-grid-material-ui": "^2.4.1",
-        "@material-ui/core": "^4.9.1",
-        "@material-ui/icons": "^4.9.1",
-        "@material-ui/lab": "^4.0.0-alpha.43",
-        "@material-ui/styles": "^4.9.0",
+        "@material-ui/core": "^4.12.4",
+        "@material-ui/icons": "^4.11.3",
+        "@material-ui/lab": "^4.0.0-alpha.61",
+        "@material-ui/styles": "^4.11.5",
         "@nivo/bar": "^0.69.1",
         "@nivo/core": "^0.69.0",
         "@nivo/geo": "^0.69.0",
@@ -51,7 +51,7 @@
         "match-sorter": "^4.0.1",
         "mobx": "^6.0.4",
         "mobx-react-lite": "^3.1.6",
-        "prop-types": "^15.7.2",
+        "prop-types": "^15.8.1",
         "qs": "^6.7.0",
         "query-string": "^7.1.1",
         "react": "^16.11.0",
@@ -66,7 +66,7 @@
         "react-json-view": "^1.19.1",
         "react-lazyload": "^2.6.5",
         "react-router-dom": "^5.1.2",
-        "react-scripts": "4.0.3",
+        "react-scripts": "5.0.1",
         "react-storage-hooks": "^4.0.0",
         "react-tooltip-lite": "^1.12.0",
         "react-truncate-markup": "^5.0.0",
@@ -88,7 +88,6 @@
         "not op_mini all"
     ],
     "devDependencies": {
-        "@babel/core": "^7.18.6",
         "@babel/preset-react": "^7.18.6",
         "@babel/preset-typescript": "^7.18.6",
         "@crowdin/crowdin-api-client": "^1.9.0",
@@ -114,13 +113,13 @@
         "@types/react-dom": "^16.9.2",
         "@types/react-helmet": "^6.1.5",
         "@types/react-lazyload": "^2.6.0",
-        "@types/react-router-dom": "^5.1.5",
+        "@types/react-router-dom": "^5.3.3",
         "@types/react-select": "^3.0.11",
         "@types/storybook__addon-info": "^4.1.2",
         "@types/storybook__react": "^4.0.2",
         "@types/swiper": "^5.4.1",
-        "@typescript-eslint/eslint-plugin": "^4.28.2",
-        "@typescript-eslint/parser": "^4.28.2",
+        "@typescript-eslint/eslint-plugin": "^5.38.0",
+        "@typescript-eslint/parser": "^5.38.0",
         "async-retry": "^1.3.1",
         "bloom-player": "^2.1.8",
         "concurrently": "^5.1.0",

src/components/BlorgLink.tsx

@@ -6,8 +6,14 @@ import { Link as MuiLink } from "@material-ui/core";
 // for a discussion around how react-router link doesn't handle
 // external links, see https://github.com/ReactTraining/react-router/issues/1147
 
-export interface IBlorgLinkProps
-    extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+export interface IBlorgLinkProps {
+    // we'd prefer this extends but mismatching definitions have killed it for now
+    //extends React.AnchorHTMLAttributes<HTMLAnchorElement>
+    onClick?: (e: any) => void;
+    target?: string;
+    className?: string;
+    role?: string;
+    title?: string;
     href: string; // href is part of React.AnchorHTMLAttributes<HTMLAnchorElement> but optional; we want required
     newTabIfEmbedded?: boolean;
     alwaysnewtab?: boolean;
@@ -25,6 +31,7 @@ export const BlorgLink: React.FunctionComponent<IBlorgLinkProps> = (props) => {
 
     const isInIframe = window.self !== window.top;
 
+    /* REVIEW: this is causing problems... something is sneaking through that we don't want:*/
     const { newTabIfEmbedded, alwaysnewtab, ...propsToPassDown } = props; // Prevent React warnings
 
     // ABOUT MuiLink: we're using this to get the themed color for the link
@@ -56,7 +63,11 @@ export const BlorgLink: React.FunctionComponent<IBlorgLinkProps> = (props) => {
             // the Nielsen Norman Group: https://www.nngroup.com/articles/new-browser-windows-and-tabs/
             return (
                 // just a normal <a></a> element, styled to fit the theme
-                <MuiLink {...propsToPassDown} color={props.color || "primary"}>
+                <MuiLink
+                    {...propsToPassDown}
+                    target={props.target}
+                    color={props.color || "primary"}
+                >
                     {props.children}
                 </MuiLink>
             );
@@ -71,12 +82,11 @@ export const BlorgLink: React.FunctionComponent<IBlorgLinkProps> = (props) => {
         /* The initial slash keeps url from just being 'tacked on' to existing url; not what we want here. */
         to = `/${to}`;
     }
-
     return (
         <MuiLink
-            {...propsToPassDown}
+            to={props.href}
+            className={props.className}
             component={RouterLink}
-            to={to}
             color={props.color || "primary"}
         >
             {props.children}