@jmruthers/pace-core 0.5.191 → 0.6.1

package/src/hooks/__tests__/useStorage.unit.test.ts

@@ -38,7 +38,7 @@ const mockSupabase = {
 const mockFile = new File(['test content'], 'test.txt', { type: 'text/plain' });
 
 describe('useStorage Hook', () => {
-  const defaultProps = {
+  const baseProps = {
     supabase: mockSupabase,
     appName: 'test-app',
     orgId: 'test-org',
@@ -46,7 +46,7 @@ describe('useStorage Hook', () => {
 
     describe('Initial State', () => {
     it('should initialize with correct default values', () => {
-      const { result } = renderHook(() => useStorage(defaultProps));
+      const { result } = renderHook(() => useStorage(baseProps));
 
       expect(result.current.isUploading).toBe(false);
       expect(result.current.uploadError).toBe(null);
@@ -58,7 +58,7 @@ describe('useStorage Hook', () => {
     });
 
     it('should provide all required functions', () => {
-      const { result } = renderHook(() => useStorage(defaultProps));
+      const { result } = renderHook(() => useStorage(baseProps));
 
       expect(typeof result.current.uploadFile).toBe('function');
       expect(typeof result.current.getPublicUrl).toBe('function');
@@ -106,7 +106,7 @@ describe('useStorage Hook', () => {
       vi.mocked(uploadFile).mockResolvedValue(mockUploadResult);
       vi.mocked(listFiles).mockResolvedValue(mockListResult);
 
-      const { result } = renderHook(() => useStorage(defaultProps));
+      const { result } = renderHook(() => useStorage(baseProps));
 
       let uploadResult: any;
       await act(async () => {
@@ -132,7 +132,7 @@ describe('useStorage Hook', () => {
 
       vi.mocked(uploadFile).mockResolvedValue(mockUploadResult);
 
-      const { result } = renderHook(() => useStorage(defaultProps));
+      const { result } = renderHook(() => useStorage(baseProps));
 
       let uploadResult: any;
       await act(async () => {
@@ -153,7 +153,7 @@ describe('useStorage Hook', () => {
       vi.mocked(uploadFile).mockResolvedValue(mockUploadResult);
       vi.mocked(listFiles).mockResolvedValue({ files: [], totalCount: 0, hasMore: false });
 
-      const { result } = renderHook(() => useStorage(defaultProps));
+      const { result } = renderHook(() => useStorage(baseProps));
 
       const customOptions = {
         isPublic: true,
@@ -179,7 +179,7 @@ describe('useStorage Hook', () => {
     it('should handle upload exception', async () => {
       vi.mocked(uploadFile).mockRejectedValue(new Error('Network error'));
 
-      const { result } = renderHook(() => useStorage(defaultProps));
+      const { result } = renderHook(() => useStorage(baseProps));
 
       let uploadResult: any;
       await act(async () => {
@@ -197,7 +197,7 @@ describe('useStorage Hook', () => {
     it('should handle upload exception with non-Error object', async () => {
       vi.mocked(uploadFile).mockRejectedValue('String error');
 
-      const { result } = renderHook(() => useStorage(defaultProps));
+      const { result } = renderHook(() => useStorage(baseProps));
 
       let uploadResult: any;
       await act(async () => {
@@ -217,7 +217,7 @@ describe('useStorage Hook', () => {
       const mockUrl = 'https://example.com/public/test-file.txt';
       vi.mocked(getPublicUrl).mockReturnValue(mockUrl);
 
-      const { result } = renderHook(() => useStorage(defaultProps));
+      const { result } = renderHook(() => useStorage(baseProps));
 
       const url = result.current.getPublicUrl('test-org/public/test-file.txt');
 
@@ -229,7 +229,7 @@ describe('useStorage Hook', () => {
       const mockUrl = 'https://example.com/public/test-file.txt';
       vi.mocked(getPublicUrl).mockReturnValue(mockUrl);
 
-      const { result } = renderHook(() => useStorage(defaultProps));
+      const { result } = renderHook(() => useStorage(baseProps));
 
       const url = result.current.getFileUrl('test-org/public/test-file.txt');
 
@@ -245,7 +245,7 @@ describe('useStorage Hook', () => {
 
       vi.mocked(getSignedUrl).mockResolvedValue(mockSignedUrl);
 
-      const { result } = renderHook(() => useStorage(defaultProps));
+      const { result } = renderHook(() => useStorage(baseProps));
 
       let signedUrl: string | null = null;
       await act(async () => {
@@ -263,7 +263,7 @@ describe('useStorage Hook', () => {
     it('should handle signed URL failure', async () => {
       vi.mocked(getSignedUrl).mockRejectedValue(new Error('Signing failed'));
 
-      const { result } = renderHook(() => useStorage(defaultProps));
+      const { result } = renderHook(() => useStorage(baseProps));
 
       let signedUrl: string | null = null;
       await act(async () => {
@@ -276,7 +276,7 @@ describe('useStorage Hook', () => {
     it('should handle signed URL with null result', async () => {
       vi.mocked(getSignedUrl).mockResolvedValue(null);
 
-      const { result } = renderHook(() => useStorage(defaultProps));
+      const { result } = renderHook(() => useStorage(baseProps));
 
       let signedUrl: string | null = null;
       await act(async () => {
@@ -295,7 +295,7 @@ describe('useStorage Hook', () => {
       vi.mocked(deleteFile).mockResolvedValue(mockDeleteResult);
       vi.mocked(listFiles).mockResolvedValue(mockListResult);
 
-      const { result } = renderHook(() => useStorage(defaultProps));
+      const { result } = renderHook(() => useStorage(baseProps));
 
       let deleteResult: any;
       await act(async () => {
@@ -311,7 +311,7 @@ describe('useStorage Hook', () => {
 
       vi.mocked(deleteFile).mockResolvedValue(mockDeleteResult);
 
-      const { result } = renderHook(() => useStorage(defaultProps));
+      const { result } = renderHook(() => useStorage(baseProps));
 
       let deleteResult: any;
       await act(async () => {
@@ -324,7 +324,7 @@ describe('useStorage Hook', () => {
     it('should handle delete file exception', async () => {
       vi.mocked(deleteFile).mockRejectedValue(new Error('Network error'));
 
-      const { result } = renderHook(() => useStorage(defaultProps));
+      const { result } = renderHook(() => useStorage(baseProps));
 
       let deleteResult: any;
       await act(async () => {
@@ -344,7 +344,7 @@ describe('useStorage Hook', () => {
       vi.mocked(archiveFile).mockResolvedValue(mockArchiveResult);
       vi.mocked(listFiles).mockResolvedValue(mockListResult);
 
-      const { result } = renderHook(() => useStorage(defaultProps));
+      const { result } = renderHook(() => useStorage(baseProps));
 
       let archiveResult: any;
       await act(async () => {
@@ -363,7 +363,7 @@ describe('useStorage Hook', () => {
 
       vi.mocked(archiveFile).mockResolvedValue(mockArchiveResult);
 
-      const { result } = renderHook(() => useStorage(defaultProps));
+      const { result } = renderHook(() => useStorage(baseProps));
 
       let archiveResult: any;
       await act(async () => {
@@ -376,7 +376,7 @@ describe('useStorage Hook', () => {
     it('should handle archive file exception', async () => {
       vi.mocked(archiveFile).mockRejectedValue(new Error('Network error'));
 
-      const { result } = renderHook(() => useStorage(defaultProps));
+      const { result } = renderHook(() => useStorage(baseProps));
 
       let archiveResult: any;
       await act(async () => {
@@ -417,7 +417,7 @@ describe('useStorage Hook', () => {
 
       vi.mocked(listFiles).mockResolvedValue(mockListResult);
 
-      const { result } = renderHook(() => useStorage(defaultProps));
+      const { result } = renderHook(() => useStorage(baseProps));
 
       let listResult: any;
       await act(async () => {
@@ -439,7 +439,7 @@ describe('useStorage Hook', () => {
 
       vi.mocked(listFiles).mockResolvedValue(mockListResult);
 
-      const { result } = renderHook(() => useStorage(defaultProps));
+      const { result } = renderHook(() => useStorage(baseProps));
 
       const customOptions = {
         pathPrefix: 'documents',
@@ -465,7 +465,7 @@ describe('useStorage Hook', () => {
     it('should handle list files failure', async () => {
       vi.mocked(listFiles).mockRejectedValue(new Error('List failed'));
 
-      const { result } = renderHook(() => useStorage(defaultProps));
+      const { result } = renderHook(() => useStorage(baseProps));
 
       let listResult: any;
       await act(async () => {
@@ -481,7 +481,7 @@ describe('useStorage Hook', () => {
     it('should handle list files exception with non-Error object', async () => {
       vi.mocked(listFiles).mockRejectedValue('String error');
 
-      const { result } = renderHook(() => useStorage(defaultProps));
+      const { result } = renderHook(() => useStorage(baseProps));
 
       let listResult: any;
       await act(async () => {
@@ -497,7 +497,7 @@ describe('useStorage Hook', () => {
 
       vi.mocked(listFiles).mockResolvedValue(mockListResult);
 
-      const { result } = renderHook(() => useStorage(defaultProps));
+      const { result } = renderHook(() => useStorage(baseProps));
 
       await act(async () => {
         await result.current.refreshFiles();
@@ -519,7 +519,7 @@ describe('useStorage Hook', () => {
 
       vi.mocked(uploadFile).mockReturnValue(uploadPromise);
 
-      const { result } = renderHook(() => useStorage(defaultProps));
+      const { result } = renderHook(() => useStorage(baseProps));
 
       expect(result.current.isUploading).toBe(false);
 
@@ -545,7 +545,7 @@ describe('useStorage Hook', () => {
 
       vi.mocked(listFiles).mockReturnValue(listPromise);
 
-      const { result } = renderHook(() => useStorage(defaultProps));
+      const { result } = renderHook(() => useStorage(baseProps));
 
       expect(result.current.isListing).toBe(false);
 
@@ -566,13 +566,13 @@ describe('useStorage Hook', () => {
 
   describe('Aliases', () => {
     it('should provide isLoading alias for isListing', () => {
-      const { result } = renderHook(() => useStorage(defaultProps));
+      const { result } = renderHook(() => useStorage(baseProps));
 
       expect(result.current.isLoading).toBe(result.current.isListing);
     });
 
     it('should provide error alias for listError', () => {
-      const { result } = renderHook(() => useStorage(defaultProps));
+      const { result } = renderHook(() => useStorage(baseProps));
 
       expect(result.current.error).toBe(result.current.listError);
     });
@@ -580,7 +580,7 @@ describe('useStorage Hook', () => {
 });
 
 describe('useFileUpload Hook', () => {
-  const defaultProps = {
+  const baseProps = {
     supabase: mockSupabase,
     appName: 'test-app',
     orgId: 'test-org',
@@ -588,7 +588,7 @@ describe('useFileUpload Hook', () => {
 
     describe('Initial State', () => {
     it('should initialize with correct default values', () => {
-      const { result } = renderHook(() => useFileUpload(defaultProps));
+      const { result } = renderHook(() => useFileUpload(baseProps));
 
       expect(result.current.uploadProgress).toBe(0);
       expect(result.current.isUploading).toBe(false);
@@ -605,7 +605,7 @@ describe('useFileUpload Hook', () => {
 
       vi.mocked(uploadFile).mockResolvedValue(mockUploadResult);
 
-      const { result } = renderHook(() => useFileUpload(defaultProps));
+      const { result } = renderHook(() => useFileUpload(baseProps));
 
       let uploadResult: any;
       await act(async () => {
@@ -628,7 +628,7 @@ describe('useFileUpload Hook', () => {
 
       vi.mocked(uploadFile).mockReturnValue(uploadPromise);
 
-      const { result } = renderHook(() => useFileUpload(defaultProps));
+      const { result } = renderHook(() => useFileUpload(baseProps));
 
       act(() => {
         result.current.uploadWithProgress(mockFile);
@@ -670,7 +670,7 @@ describe('useFileUpload Hook', () => {
 
       vi.mocked(uploadFile).mockResolvedValue(mockUploadResult);
 
-      const { result } = renderHook(() => useFileUpload(defaultProps));
+      const { result } = renderHook(() => useFileUpload(baseProps));
 
       let uploadResult: any;
       await act(async () => {
@@ -686,7 +686,7 @@ describe('useFileUpload Hook', () => {
     it('should handle upload exception', async () => {
       vi.mocked(uploadFile).mockRejectedValue(new Error('Network error'));
 
-      const { result } = renderHook(() => useFileUpload(defaultProps));
+      const { result } = renderHook(() => useFileUpload(baseProps));
 
       let uploadResult: any;
       await act(async () => {
@@ -707,7 +707,7 @@ describe('useFileUpload Hook', () => {
 
       vi.mocked(uploadFile).mockResolvedValue(mockUploadResult);
 
-      const { result } = renderHook(() => useFileUpload(defaultProps));
+      const { result } = renderHook(() => useFileUpload(baseProps));
 
       await act(async () => {
         await result.current.uploadWithProgress(mockFile);
@@ -729,7 +729,7 @@ describe('useFileUpload Hook', () => {
 
       vi.mocked(uploadFile).mockResolvedValue(mockUploadResult);
 
-      const { result } = renderHook(() => useFileUpload(defaultProps));
+      const { result } = renderHook(() => useFileUpload(baseProps));
 
       const customOptions = {
         isPublic: true,

package/src/hooks/public/usePublicEvent.ts

@@ -54,7 +54,7 @@
  * - Error boundary integration
  *
  * @dependencies
- * - React 18+ - Hooks and effects
+ * - React 19+ - Hooks and effects
  * - @supabase/supabase-js - Database integration
  * - Event types - Type definitions
  */

package/src/hooks/public/usePublicEventLogo.ts

@@ -59,7 +59,7 @@
  * - Lazy loading support
  *
  * @dependencies
- * - React 18+ - Hooks and effects
+ * - React 19+ - Hooks and effects
  * - @supabase/supabase-js - Storage integration
  * - Event types - Type definitions
  */

package/src/hooks/public/usePublicRouteParams.ts

@@ -51,7 +51,7 @@
  * - Caching integration
  *
  * @dependencies
- * - React 18+ - Hooks and effects
+ * - React 19+ - Hooks and effects
  * - React Router - URL parameter extraction
  * - Event types - Type definitions
  */

package/src/hooks/services/useAuthService.ts

@@ -8,7 +8,7 @@
  * Provides authentication service with reactive state updates.
  */
 
-import { useContext, useReducer, useEffect } from 'react';
+import { useContext, useReducer, useEffect, useRef } from 'react';
 import { AuthServiceContext } from '../../providers/services/AuthServiceProvider';
 import { AuthService } from '../../services/AuthService';
 
@@ -19,11 +19,29 @@ export function useAuthService(): AuthService {
     throw new Error('useAuthService must be used within AuthServiceProvider');
   }
   
-  // Subscribe to service state changes
+  // Subscribe to service state changes with debouncing to prevent excessive re-renders
   const [, forceUpdate] = useReducer(x => x + 1, 0);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   
   useEffect(() => {
-    return context.authService.subscribe(() => forceUpdate());
+    const debouncedUpdate = () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      timeoutRef.current = setTimeout(() => {
+        forceUpdate();
+        timeoutRef.current = null;
+      }, 50); // 50ms debounce to batch rapid updates
+    };
+    
+    const unsubscribe = context.authService.subscribe(debouncedUpdate);
+    
+    return () => {
+      unsubscribe();
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
   }, [context.authService]);
   
   return context.authService;

package/src/hooks/services/useEventService.ts

@@ -8,7 +8,7 @@
  * Provides event service with reactive state updates.
  */
 
-import { useContext, useReducer, useEffect } from 'react';
+import { useContext, useReducer, useEffect, useRef } from 'react';
 import { EventServiceContext } from '../../providers/services/EventServiceProvider';
 import { EventService } from '../../services/EventService';
 
@@ -19,11 +19,29 @@ export function useEventService(): EventService {
     throw new Error('useEventService must be used within EventServiceProvider');
   }
   
-  // Subscribe to service state changes
+  // Subscribe to service state changes with debouncing to prevent excessive re-renders
   const [, forceUpdate] = useReducer(x => x + 1, 0);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   
   useEffect(() => {
-    return context.eventService.subscribe(() => forceUpdate());
+    const debouncedUpdate = () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      timeoutRef.current = setTimeout(() => {
+        forceUpdate();
+        timeoutRef.current = null;
+      }, 50); // 50ms debounce to batch rapid updates
+    };
+    
+    const unsubscribe = context.eventService.subscribe(debouncedUpdate);
+    
+    return () => {
+      unsubscribe();
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
   }, [context.eventService]);
   
   return context.eventService;

package/src/hooks/services/useInactivityService.ts

@@ -8,7 +8,7 @@
  * Provides inactivity service with reactive state updates.
  */
 
-import { useContext, useReducer, useEffect } from 'react';
+import { useContext, useReducer, useEffect, useRef } from 'react';
 import { InactivityServiceContext } from '../../providers/services/InactivityServiceProvider';
 import { InactivityService } from '../../services/InactivityService';
 
@@ -19,11 +19,29 @@ export function useInactivityService(): InactivityService {
     throw new Error('useInactivityService must be used within InactivityServiceProvider');
   }
   
-  // Subscribe to service state changes
+  // Subscribe to service state changes with debouncing to prevent excessive re-renders
   const [, forceUpdate] = useReducer(x => x + 1, 0);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   
   useEffect(() => {
-    return context.inactivityService.subscribe(() => forceUpdate());
+    const debouncedUpdate = () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      timeoutRef.current = setTimeout(() => {
+        forceUpdate();
+        timeoutRef.current = null;
+      }, 50); // 50ms debounce to batch rapid updates
+    };
+    
+    const unsubscribe = context.inactivityService.subscribe(debouncedUpdate);
+    
+    return () => {
+      unsubscribe();
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
   }, [context.inactivityService]);
   
   return context.inactivityService;

package/src/hooks/services/useOrganisationService.ts

@@ -8,7 +8,7 @@
  * Provides organisation service with reactive state updates.
  */
 
-import { useContext, useReducer, useEffect } from 'react';
+import { useContext, useReducer, useEffect, useRef } from 'react';
 import { OrganisationServiceContext } from '../../providers/services/OrganisationServiceProvider';
 import { OrganisationService } from '../../services/OrganisationService';
 
@@ -19,11 +19,29 @@ export function useOrganisationService(): OrganisationService {
     throw new Error('useOrganisationService must be used within OrganisationServiceProvider');
   }
   
-  // Subscribe to service state changes
+  // Subscribe to service state changes with debouncing to prevent excessive re-renders
   const [, forceUpdate] = useReducer(x => x + 1, 0);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   
   useEffect(() => {
-    return context.organisationService.subscribe(() => forceUpdate());
+    const debouncedUpdate = () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      timeoutRef.current = setTimeout(() => {
+        forceUpdate();
+        timeoutRef.current = null;
+      }, 50); // 50ms debounce to batch rapid updates
+    };
+    
+    const unsubscribe = context.organisationService.subscribe(debouncedUpdate);
+    
+    return () => {
+      unsubscribe();
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
   }, [context.organisationService]);
   
   return context.organisationService;

package/src/hooks/useDataTableState.ts

@@ -3,7 +3,7 @@
  * @description Hook for managing DataTable state
  */
 
-import { useState, useCallback, useMemo } from 'react';
+import { useState, useCallback } from 'react';
 import type { SortingState, ColumnFiltersState, ExpandedState } from '@tanstack/react-table';
 
 export interface DataTableState {
@@ -63,24 +63,14 @@ export function useDataTableState(options: UseDataTableStateOptions) {
     setSelectedRows([]);
   }, [initialPageSize]);
 
-  // Computed values
-  const paginatedData = useMemo(() => {
-    const start = pageIndex * pageSize;
-    const end = start + pageSize;
-    return data.slice(start, end);
-  }, [data, pageIndex, pageSize]);
+  // Computed values - React Compiler handles memoization automatically
+  const start = pageIndex * pageSize;
+  const end = start + pageSize;
+  const paginatedData = data.slice(start, end);
 
-  const totalPages = useMemo(() => {
-    return Math.ceil(data.length / pageSize);
-  }, [data.length, pageSize]);
-
-  const hasNextPage = useMemo(() => {
-    return pageIndex < totalPages - 1;
-  }, [pageIndex, totalPages]);
-
-  const hasPreviousPage = useMemo(() => {
-    return pageIndex > 0;
-  }, [pageIndex]);
+  const totalPages = Math.ceil(data.length / pageSize);
+  const hasNextPage = pageIndex < totalPages - 1;
+  const hasPreviousPage = pageIndex > 0;
 
   return {
     state: {

package/src/hooks/useFileDisplay.ts

@@ -391,12 +391,7 @@ export function useFileDisplay(
         // Category is stored in file_metadata JSONB field, not a direct column
         if (category) {
           // Single file mode - get files by category using RPC
-          logger.debug('useFileDisplay', 'Using RPC function for category filtering:', {
-            table_name,
-            record_id,
-            category,
-            organisation_id
-          });
+          // Removed verbose debug log - only log on errors
           files = await service.getFilesByCategory(
             table_name,
             record_id,
@@ -510,21 +505,13 @@ export function useFileDisplay(
       if (category && files.length > 0) {
         // Single file mode - get first file
         const firstFile = files[0];
-        logger.debug('useFileDisplay', 'Processing category files, first file:', {
-          id: firstFile.id,
-          file_path: firstFile.file_path,
-          is_public: firstFile.is_public,
-          has_file_metadata: !!firstFile.file_metadata,
-          category_in_metadata: firstFile.file_metadata?.category
-        });
-        
+        // Removed verbose debug logs - only log on errors
         setFileReference(firstFile);
         
         // Generate URL based on file visibility
         let url: string | null = null;
         if (firstFile.is_public) {
           url = getPublicUrl(supabase, firstFile.file_path, true);
-          logger.debug('useFileDisplay', 'Generated public URL:', url);
         } else {
           const signedUrlResult = await getSignedUrl(supabase, firstFile.file_path, {
             appName: 'pace-core',
@@ -533,9 +520,15 @@ export function useFileDisplay(
             expiresIn: 3600
           });
           url = signedUrlResult?.url || null;
-          logger.debug('useFileDisplay', 'Generated signed URL:', url ? 'URL generated' : 'URL generation failed');
+          // Only log if URL generation fails
+          if (!url) {
+            logger.warn('useFileDisplay', 'Failed to generate signed URL for file:', {
+              file_path: firstFile.file_path,
+              record_id,
+              table_name
+            });
+          }
         }
-        logger.debug('useFileDisplay', 'Setting file URL:', url ? 'URL set' : 'URL is null');
         setFileUrl(url);
       } else {
         // Multiple files mode - generate URLs for all files in batch

package/src/hooks/useFocusManagement.ts

@@ -11,8 +11,8 @@ export interface FocusManagementOptions {
 }
 
 export interface FocusManagementReturn {
-  containerRef: React.RefObject<HTMLDivElement>;
-  focusRef: React.RefObject<HTMLElement>;
+  containerRef: React.RefObject<HTMLDivElement | null>;
+  focusRef: React.RefObject<HTMLElement | null>;
   setFocus: (element: HTMLElement | null) => void;
   focusFirst: () => void;
   focusLast: () => void;

package/src/hooks/useFocusTrap.ts

@@ -16,7 +16,7 @@ export interface FocusTrapOptions {
 
 export interface FocusTrapReturn {
   /** Ref to attach to the container element */
-  containerRef: React.RefObject<HTMLElement>;
+  containerRef: React.RefObject<HTMLElement | null>;
   /** Focus the first focusable element */
   focusFirst: () => void;
   /** Focus the last focusable element */
@@ -58,9 +58,9 @@ export function useFocusTrap(options: FocusTrapOptions = {}): FocusTrapReturn {
       containerRef.current.querySelectorAll<HTMLElement>(focusableSelector)
     ).filter((element) => {
       return (
-        !element.hasAttribute('disabled') &&
-        !element.hasAttribute('hidden') &&
-        element.offsetParent !== null // visible check
+        // visible check
+        (!element.hasAttribute('disabled') &&
+        !element.hasAttribute('hidden') && element.offsetParent !== null)
       );
     });
   }, [focusableSelector]);