Update styled-components, jest-styled-components, and GBTK packages to latest versions

.eslintrc.js

@@ -67,6 +67,7 @@ module.exports = {
     '@typescript-eslint/no-shadow': ['error'],
     'react/jsx-no-useless-fragment': 'off',
     'jsx-a11y/control-has-associated-label': 'off',
+    'jsx-a11y/label-has-associated-control': 'off',
   },
   overrides: [
     {

browser/help/faq/mitochondrial-dna/__snapshots__/HaplogroupAndAncestryFilterTable.spec.tsx.snap

@@ -7,15 +7,12 @@ exports[`has no unexpected changes 1`] = `
   padding: 0.375em 1.5em 0.375em 0.75em;
   border: 1px solid #6c757d;
   border-radius: 0.25em;
-  -webkit-appearance: none;
-  -moz-appearance: none;
   appearance: none;
   background-image: url('data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7');
   background-position: center right;
   background-repeat: no-repeat;
   font-size: 1em;
   line-height: 1.25;
-  margin: 1em 1em 0 0;
 }
 
 .c0:focus {
@@ -24,8 +21,12 @@ exports[`has no unexpected changes 1`] = `
   box-shadow: 0 0 0 0.2em rgba(70,130,180,0.5);
 }
 
+.c1 {
+  margin: 1em 1em 0 0;
+}
+
 <select
-    className="c0"
+    className="c0 c1"
     id="haplogroup-selected"
     onChange={[Function]}
     value="All"
@@ -190,15 +191,12 @@ exports[`has no unexpected changes 1`] = `
   padding: 0.375em 1.5em 0.375em 0.75em;
   border: 1px solid #6c757d;
   border-radius: 0.25em;
-  -webkit-appearance: none;
-  -moz-appearance: none;
   appearance: none;
   background-image: url('data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7');
   background-position: center right;
   background-repeat: no-repeat;
   font-size: 1em;
   line-height: 1.25;
-  margin: 1em 1em 0 0;
 }
 
 .c0:focus {
@@ -207,8 +205,12 @@ exports[`has no unexpected changes 1`] = `
   box-shadow: 0 0 0 0.2em rgba(70,130,180,0.5);
 }
 
+.c1 {
+  margin: 1em 1em 0 0;
+}
+
 <select
-    className="c0"
+    className="c0 c1"
     id="ancestry-selected"
     onChange={[Function]}
     value="All"
@@ -276,8 +278,6 @@ exports[`has no unexpected changes 1`] = `
   .c0 {
   border-collapse: collapse;
   border-spacing: 0;
-  margin-top: 1em;
-  margin-bottom: 1em;
 }
 
 .c0 td,
@@ -312,9 +312,6 @@ exports[`has no unexpected changes 1`] = `
   cursor: pointer;
   font: inherit;
   outline: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
   user-select: none;
 }
 
@@ -330,12 +327,17 @@ exports[`has no unexpected changes 1`] = `
   font-weight: bold;
 }
 
-.c0 td {
+.c1 {
+  margin-top: 1em;
+  margin-bottom: 1em;
+}
+
+.c1 td {
   text-align: right;
 }
 
 <table
-    className="c0"
+    className="c0 c1"
   >
     <thead>
       <tr>

browser/help/faq/mitochondrial-dna/how-many-samples-are-in-each-mtdna-haplogroup-for-each-nuclear-ancestry-population.tsx

@@ -57,7 +57,7 @@ const HaplogroupAndAncestryFilterTable = () => {
       <HaplogroupOrAncestrySelector
         id="haplogroup-selected"
         value={haplogroupSelected}
-        onChange={(e) => {
+        onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
           setHaplogroupSelected(e.target.value)
         }}
       >
@@ -76,7 +76,7 @@ const HaplogroupAndAncestryFilterTable = () => {
       <HaplogroupOrAncestrySelector
         id="ancestry-selected"
         value={ancestrySelected}
-        onChange={(e) => {
+        onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
           setAncestrySelected(e.target.value)
         }}
       >

browser/package.json

@@ -15,12 +15,12 @@
     "@gnomad/dataset-metadata": "*",
     "@gnomad/identifiers": "3.0.1",
     "@gnomad/markdown-loader": "2.0.1",
-    "@gnomad/region-viewer": "^6.0.0",
-    "@gnomad/track-genes": "4.0.0",
-    "@gnomad/track-regions": "3.0.0",
-    "@gnomad/track-transcripts": "4.0.0",
-    "@gnomad/track-variants": "3.0.0",
-    "@gnomad/ui": "^3.0.0",
+    "@gnomad/region-viewer": "6.1.0",
+    "@gnomad/track-genes": "4.1.0",
+    "@gnomad/track-regions": "3.1.0",
+    "@gnomad/track-transcripts": "4.1.0",
+    "@gnomad/track-variants": "3.1.0",
+    "@gnomad/ui": "3.1.0",
     "@visx/axis": "^3.0.0",
     "@visx/group": "^3.0.0",
     "@visx/legend": "^3.12.0",
@@ -49,7 +49,7 @@
     "react-slider": "^1.3.1",
     "react-window": "^1.7.1",
     "style-loader": "^3.3.1",
-    "styled-components": "^4.2.0",
+    "styled-components": "^6.1.19",
     "typescript": "^5.0.4",
     "whatwg-fetch": "^3.5.0"
   },
@@ -67,7 +67,6 @@
     "@types/react-slider": "^1.3.1",
     "@types/react-test-renderer": "^18.0.0",
     "@types/react-window": "^1.8.5",
-    "@types/styled-components": "^5.1.28",
     "babel-loader": "^8.2.2",
     "babel-plugin-styled-components": "^1.10.7",
     "copy-webpack-plugin": "^7.0.0",
@@ -77,7 +76,7 @@
     "file-loader": "^6.2.0",
     "fishery": "^2.2.2",
     "html-webpack-plugin": "^5.2.0",
-    "jest-styled-components": "^6.0.0",
+    "jest-styled-components": "^7.2.0",
     "react-test-renderer": "^18.0.0",
     "ts-loader": "^9.3.1",
     "ts-migrate": "^0.1.30",

browser/src/AcOfOnePage.tsx

@@ -78,7 +78,6 @@ const AcOfOnePage = () => {
       <MarkdownContent dangerouslySetInnerHTML={{ __html: acOfOnePartThree.html }} />
 
       <h2>References</h2>
-      {/* @ts-expect-error */}
       <OrderedList>
         <PaperCitation
           authorList="Lek, M., Karczewski, K., Minikel, E."
@@ -102,14 +101,12 @@ const AcOfOnePage = () => {
           doiLink="https://doi.org/10.1038/s41586-020-2287-8"
         />
 
-        {/* @ts-expect-error */}
         <ListItem>
           <ExternalLink href="https://databrowser.researchallofus.org/snvsindels">
             https://databrowser.researchallofus.org/snvsindels
           </ExternalLink>
         </ListItem>
 
-        {/* @ts-expect-error */}
         <ListItem>
           <ExternalLink href="https://genebass.org">https://genebass.org</ExternalLink>
         </ListItem>
@@ -172,7 +169,6 @@ const AcOfOnePage = () => {
           doiLink="https://doi.org/10.1126/sciadv.abe9986"
         />
 
-        {/* @ts-expect-error */}
         <ListItem>
           <ExternalLink href="https://www.ncbi.nlm.nih.gov/clinvar/">
             https://www.ncbi.nlm.nih.gov/clinvar/

browser/src/AnchorLink.tsx

@@ -26,14 +26,9 @@ const AnchorWrapper = styled.span`
 `
 
 export const withAnchor = (Component: any) => {
-  // theme was added as an additional prop to allow for conditional styling
-  //   of a given styled component as the 'Component' parameter. The theme prop
-  //   is a keyword with Styled Components and allows the table of contents to
-  //   dynamically grab all '<SectionTitles> from a page to use in the ToC, while
-  //   still allowing each <SectionTitle> to render differently.
-  const ComposedComponent = ({ children, id, theme }: any) => (
+  const ComposedComponent = ({ children, id, ...props }: any) => (
     <AnchorWrapper>
-      <Component theme={theme}>
+      <Component {...props}>
         <AnchorLink href={`#${id}`} id={id}>
           <img src={LinkIcon} alt="" aria-hidden="true" height={12} width={12} />
         </AnchorLink>

browser/src/AttributeList.tsx

@@ -45,7 +45,6 @@ export const AttributeListItem = ({ children, label, tooltip }: AttributeListIte
       {tooltip ? (
         // @ts-expect-error TS(2322) FIXME: Type '{ children: Element; tooltip: any; }' is not... Remove this comment to see the full error message
         <TooltipAnchor tooltip={tooltip}>
-          {/* @ts-expect-error TS(2745) FIXME: This JSX tag's 'children' prop expects type 'never... Remove this comment to see the full error message */}
           <TooltipHint>{label}</TooltipHint>
         </TooltipAnchor>
       ) : (

browser/src/ClinvarVariantsTrack/ClinvarBinnedVariantsPlot.tsx

@@ -43,12 +43,10 @@ const formatTooltip = (bin: any, includedCategories: IncludedCategories) => {
   return (
     <TooltipContent>
       This bin contains:
-      {/* @ts-expect-error TS(2745) FIXME: This JSX tag's 'children' prop expects type 'never... Remove this comment to see the full error message */}
       <List>
         {CLINICAL_SIGNIFICANCE_CATEGORIES.filter((category) => includedCategories[category]).map(
           (category) => {
             return (
-              // @ts-expect-error TS(2769) FIXME: No overload matches this call.
               <ListItem key={category}>
                 {/* @ts-expect-error TS(7053) FIXME: Element implicitly has an 'any' type because expre... Remove this comment to see the full error message */}
                 {bin[category]} {CLINICAL_SIGNIFICANCE_CATEGORY_LABELS[category].toLowerCase()}{' '}