lint issues related to dropdown

Author: RoyEJohnson

src/app/components/jsx-helpers/raw-html.tsx

@@ -34,11 +34,12 @@ function activateScripts(el: HTMLElement) {
     processOne();
 }
 
-type RawHTMLArgs = {
+type RawHTMLArgs = ({
     Tag?: string;
     html?: TrustedHTML;
     embed?: boolean;
-} & React.HTMLAttributes<HTMLDivElement>;
+    href?: string;
+} & React.HTMLAttributes<HTMLDivElement>);
 
 export default function RawHTML({
     Tag = 'div',

src/app/layouts/default/header/menus/main-menu/dropdown/dropdown.tsx

@@ -117,7 +117,7 @@ function DropdownController({
     closeDesktopMenu: () => void;
     topRef: React.RefObject<HTMLAnchorElement>;
     closeMenu: () => void;
-    openMenu: (event: React.MouseEvent | React.KeyboardEvent) => void;
+    openMenu: (event: React.MouseEvent) => void;
     label: string;
 }) {
     const {activeDropdown, prefix} = useDropdownContext();

src/app/layouts/default/header/menus/main-menu/dropdown/use-menu-controls.ts

@@ -6,7 +6,7 @@ export default function useMenuControls({
     topRef,
     label
 }: {
-    topRef: React.MutableRefObject<HTMLAnchorElement>;
+    topRef: React.MutableRefObject<HTMLAnchorElement | null>;
     label: string;
 }) {
     const {setSubmenuLabel, setActiveDropdown} = useDropdownContext();

src/app/layouts/default/header/menus/main-menu/dropdown/use-navigate-by-key.ts

@@ -1,29 +1,30 @@
 import useDropdownContext from '../../dropdown-context';
 import {isMobileDisplay} from '~/helpers/device';
 
-function findNext(dropdownRef: React.MutableRefObject<HTMLDivElement>) {
+function findNext(dropdownRef: React.MutableRefObject<HTMLDivElement | null>) {
     const nextSib = document.activeElement?.nextElementSibling;
 
     if (nextSib?.matches('a')) {
         return nextSib as HTMLAnchorElement;
     }
-    const targets = Array.from(dropdownRef.current.querySelectorAll('a'));
+    const targets = Array.from(dropdownRef.current?.querySelectorAll('a') ?? []);
     const idx = targets.indexOf(document.activeElement as HTMLAnchorElement);
     const nextIdx = (idx + 1) % targets.length;
 
     return targets[nextIdx];
 }
 
+// eslint-disable-next-line complexity
 function findPrev(
-    topRef: React.MutableRefObject<HTMLAnchorElement>,
-    dropdownRef: React.MutableRefObject<HTMLDivElement>
+    topRef: React.MutableRefObject<HTMLAnchorElement | null>,
+    dropdownRef: React.MutableRefObject<HTMLDivElement | null>
 ) {
     const prevSib = document.activeElement?.previousElementSibling;
 
     if (prevSib?.matches('a')) {
         return prevSib as HTMLAnchorElement;
     }
-    const targets = Array.from(dropdownRef.current.querySelectorAll('a'));
+    const targets = Array.from(dropdownRef.current?.querySelectorAll('a') ?? []);
     const idx = targets.indexOf(document.activeElement as HTMLAnchorElement);
 
     if (idx === 0) {
@@ -40,8 +41,8 @@ export default function useNavigateByKey({
     closeMenu,
     closeDesktopMenu
 }: {
-    topRef: React.MutableRefObject<HTMLAnchorElement>;
-    dropdownRef: React.MutableRefObject<HTMLDivElement>;
+    topRef: React.MutableRefObject<HTMLAnchorElement | null>;
+    dropdownRef: React.MutableRefObject<HTMLDivElement | null>;
     closeMenu: () => void;
     closeDesktopMenu: () => void;
 }) {
@@ -69,15 +70,15 @@ export default function useNavigateByKey({
             case 'ArrowDown':
                 event.preventDefault();
                 if (document.activeElement === topRef.current) {
-                    (dropdownRef.current.firstChild as HTMLAnchorElement)?.focus();
+                    (dropdownRef.current?.firstChild as HTMLAnchorElement)?.focus();
                 } else {
                     findNext(dropdownRef).focus();
                 }
                 break;
             case 'ArrowUp':
                 event.preventDefault();
                 if (document.activeElement !== topRef.current) {
-                    findPrev(topRef, dropdownRef).focus();
+                    findPrev(topRef, dropdownRef)?.focus();
                 }
                 break;
             case 'Escape':