Fix TypeScript linting errors across components

- Fix RefObject type errors by updating function signatures to accept null
- Add proper type guards with isValidElement for React element checks
- Replace JSX.Element with ReactElement imports
- Fix ToggleEventHandler type mismatch in expandable component
- Add missing attributes property to ImportDeclaration type
- Use optional chaining for safer property access

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

Author: codyde

src/clientUtils.ts

@@ -4,7 +4,7 @@ type ClickOutsideCallback = (event: MouseEvent) => void;
 
 interface UseClickOutsideOpts<E extends HTMLElement> {
   handler: ClickOutsideCallback;
-  ref: React.RefObject<E>;
+  ref: React.RefObject<E | null>;
   enabled?: boolean;
 }
 

src/components/codeBlock/index.tsx

@@ -119,7 +119,7 @@ export function cleanCodeSnippet(rawCodeSnippet: string, options?: CleanCopyOpti
  * @param options - Configuration options for cleaning
  */
 export function useCleanSnippetInClipboard(
-  codeRef: RefObject<HTMLElement>,
+  codeRef: RefObject<HTMLElement | null>,
   options: CleanCopyOptions = {}
 ) {
   const {cleanDiffMarkers = true, cleanBashPrompt = true, language = ''} = options;

src/components/codeHighlights/codeHighlights.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import {Children, cloneElement, ReactElement, useEffect, useRef, useState} from 'react';
+import {Children, cloneElement, ReactElement, useEffect, useRef, useState, isValidElement} from 'react';
 import {Check, Clipboard} from 'react-feather';
 import styled from '@emotion/styled';
 import * as Sentry from '@sentry/nextjs';
@@ -19,20 +19,20 @@ export function makeHighlightBlocks(
   let highlightElementGroupCounter = 0;
 
   return items.reduce((arr: ChildrenItem[], child, index) => {
-    if (typeof child !== 'object') {
+    if (typeof child !== 'object' || !isValidElement(child)) {
       arr.push(child);
       return arr;
     }
 
     const element = child as ReactElement;
-    const classes = element.props.className;
+    const classes = element.props?.className;
 
     const isCodeLine = classes && classes.includes('code-line');
     if (!isCodeLine) {
       const updatedChild = cloneElement(
-        child as ReactElement,
+        element,
         element.props,
-        makeHighlightBlocks((child as ReactElement).props.children, language)
+        makeHighlightBlocks(element.props?.children, language)
       );
       arr.push(updatedChild);
       return arr;

src/components/codeKeywords/codeKeywords.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import {Children, cloneElement, ReactElement} from 'react';
+import {Children, cloneElement, ReactElement, isValidElement} from 'react';
 
 import {KeywordSelector} from './keywordSelector';
 import {OrgAuthTokenCreator} from './orgAuthTokenCreator';
@@ -15,19 +15,24 @@ export function makeKeywordsClickable(children: React.ReactNode) {
   const items = Children.toArray(children);
 
   return items.reduce((arr: ChildrenItem[], child) => {
-    if (typeof child !== 'string') {
+    if (typeof child !== 'string' && isValidElement(child)) {
+      const element = child as ReactElement;
       const updatedChild = cloneElement(
-        child as ReactElement,
+        element,
         {},
-        makeKeywordsClickable((child as ReactElement).props.children)
+        makeKeywordsClickable(element.props?.children)
       );
       arr.push(updatedChild);
       return arr;
     }
-    if (ORG_AUTH_TOKEN_REGEX.test(child)) {
-      makeOrgAuthTokenClickable(arr, child);
-    } else if (KEYWORDS_REGEX.test(child)) {
-      makeProjectKeywordsClickable(arr, child);
+    if (typeof child === 'string') {
+      if (ORG_AUTH_TOKEN_REGEX.test(child)) {
+        makeOrgAuthTokenClickable(arr, child);
+      } else if (KEYWORDS_REGEX.test(child)) {
+        makeProjectKeywordsClickable(arr, child);
+      } else {
+        arr.push(child);
+      }
     } else {
       arr.push(child);
     }

src/components/codeTabs.tsx

@@ -8,6 +8,7 @@ import {
   useEffect,
   useRef,
   useState,
+  isValidElement,
 } from 'react';
 import styled from '@emotion/styled';
 
@@ -45,7 +46,11 @@ const showSigninNote = (children: ReactNode) => {
     if (typeof node === 'string') {
       return KEYWORDS_REGEX.test(node) || ORG_AUTH_TOKEN_REGEX.test(node);
     }
-    return showSigninNote((node as ReactElement).props.children);
+    if (isValidElement(node)) {
+      const element = node as ReactElement;
+      return showSigninNote(element.props?.children);
+    }
+    return false;
   });
 };
 

src/components/configValue.tsx

@@ -1,12 +1,12 @@
-import {Fragment} from 'react';
+import {Fragment, ReactElement} from 'react';
 
 type Props = {
-  children: JSX.Element;
+  children: ReactElement;
   location: string;
   name: string;
 };
 
-const getDescriptiveLocation = (location: string): JSX.Element => {
+const getDescriptiveLocation = (location: string): ReactElement => {
   switch (location) {
     case 'env':
       return <Fragment>in System Environment</Fragment>;
@@ -29,7 +29,7 @@ const getDescriptiveLocation = (location: string): JSX.Element => {
   }
 };
 
-export function ConfigValue({name, location, children}: Props): JSX.Element {
+export function ConfigValue({name, location, children}: Props): ReactElement {
   return (
     <div style={{marginBottom: '2rem'}}>
       <h4 style={{marginBottom: 0, fontWeight: 'bold'}}>

src/components/expandable/index.tsx

@@ -134,7 +134,7 @@ export function Expandable({
     [emit, title]
   );
 
-  function toggleIsExpanded(event: React.MouseEvent<HTMLDetailsElement>) {
+  function toggleIsExpanded(event: React.SyntheticEvent<HTMLDetailsElement>) {
     const newVal = event.currentTarget.open;
     setIsExpanded(newVal);
 

src/components/sidebar/index.tsx

@@ -1,3 +1,4 @@
+import {ReactElement} from 'react';
 import {
   extractPlatforms,
   getCurrentGuide,
@@ -22,7 +23,7 @@ const activeLinkSelector = `.${styles.sidebar} .toc-item .active`;
 
 export const sidebarToggleId = styles['navbar-menu-toggle'];
 
-export async function Sidebar({path, versions}: SidebarProps): Promise<JSX.Element> {
+export async function Sidebar({path, versions}: SidebarProps): Promise<ReactElement> {
   const rootNode = await getDocsRootNode();
 
   if (isDeveloperDocs) {