Merge pull request #324 from MetroStar/comet-uswds-2.4.0

Upgrade to Comet USWDS 2.4.0

package.json

@@ -33,7 +33,7 @@
   "dependencies": {
     "@metrostar/comet-data-viz": "1.1.5",
     "@metrostar/comet-extras": "1.4.0",
-    "@metrostar/comet-uswds": "2.3.0",
+    "@metrostar/comet-uswds": "2.4.0",
     "@tanstack/react-query": "5.51.21",
     "@tanstack/react-table": "8.20.1",
     "@uswds/uswds": "3.8.1",

src/components/header/header.tsx

@@ -1,12 +1,12 @@
-import { Banner, Icon, Search } from '@metrostar/comet-uswds';
+import { Banner, Icon, Search, useHeader } from '@metrostar/comet-uswds';
 import { SearchFormElements } from '@src/types/form';
 import { APP_TITLE } from '@src/utils/constants';
-import navigation from '@uswds/uswds/js/usa-header';
 import React, { FormEvent, SyntheticEvent, useEffect, useState } from 'react';
 import { Link, NavLink, useLocation, useNavigate } from 'react-router-dom';
 import useAuth from '../../hooks/use-auth';
 
 export const Header = (): React.ReactElement => {
+  const { on, off } = useHeader();
   const [showMenu, setShowMenu] = useState(false);
 
   const navigate = useNavigate();
@@ -21,11 +21,11 @@ export const Header = (): React.ReactElement => {
   // Ensure navigation JS is loaded
   useEffect(() => {
     const bodyElement = document.body;
-    navigation.on(bodyElement);
+    on(bodyElement);
 
     // Ensure cleanup after the effect
     return () => {
-      navigation.off(bodyElement);
+      off(bodyElement);
     };
   });
 

src/types.d.ts

@@ -1 +0,0 @@
-declare module '@uswds/uswds/js/usa-header';