@jmruthers/pace-core 0.5.191 → 0.6.1

package/src/components/Progress/Progress.tsx

@@ -57,7 +57,7 @@
  * - Minimal DOM structure (native HTML element)
  *
  * @dependencies
- * - React 18+ - Hooks and refs
+ * - React 19+ - Hooks and refs
  * - Tailwind CSS - Styling
  */
 

package/src/components/ProtectedRoute/ProtectedRoute.test.tsx

@@ -165,12 +165,8 @@ describe('ProtectedRoute Component', () => {
 
       expect(screen.getByTestId('outlet')).toBeInTheDocument();
       
-      // Wait a bit for the logger to be called (it's called during render)
-      await waitFor(() => {
-        expect(consoleDebugSpy).toHaveBeenCalledWith(
-          expect.stringContaining('[DEBUG] [ProtectedRoute] Events available but none selected - allowing render so selector is visible')
-        );
-      }, { timeout: 1000 });
+      // Note: ProtectedRoute no longer logs this debug message - it just allows rendering
+      // The component allows rendering when events exist but none selected to make the selector visible
     });
 
     it('renders session restoration loader when session is restoring', () => {
@@ -461,9 +457,9 @@ describe('ProtectedRoute Component', () => {
       renderWithProviders(<ProtectedRoute requireEvent={true} />);
 
       expect(screen.getByTestId('outlet')).toBeInTheDocument();
-      expect(consoleDebugSpy).toHaveBeenCalledWith(
-        expect.stringContaining('[DEBUG] [ProtectedRoute] Events available but none selected - allowing render so selector is visible')
-      );
+      
+      // Note: ProtectedRoute no longer logs this debug message - it just allows rendering
+      // The component allows rendering when events exist but none selected to make the selector visible
     });
 
     it('renders outlet when event is selected', () => {

package/src/components/ProtectedRoute/ProtectedRoute.tsx

@@ -359,7 +359,6 @@ export function ProtectedRoute({
   // The event selector will be visible and user can select, or auto-selection will kick in
   if (!selectedEvent) {
     // Log for debugging - this is expected behavior, not an error
-    logger.debug('ProtectedRoute', 'Events available but none selected - allowing render so selector is visible');
     return <Outlet />;
   }
 

package/src/components/PublicLayout/PublicPageLayout.tsx

@@ -58,7 +58,7 @@
  * - Error handling for invalid routes
  *
  * @dependencies
- * - React 18+ - Component framework
+ * - React 19+ - Component framework
  * - React Router - Routing integration
  * - Public hooks - Data access
  * - Tailwind CSS - Styling

package/src/components/PublicLayout/PublicPageProvider.tsx

@@ -102,7 +102,6 @@ export function PublicPageProvider({ children, appName }: PublicPageProviderProp
       return null;
     }
     const client = createClient<Database>(supabaseUrl, supabaseKey);
-    logger.info('PublicPageProvider', 'Supabase client created successfully for public pages');
     return client;
   }, [supabaseUrl, supabaseKey]);
 

package/src/components/Select/Select.tsx

@@ -53,7 +53,7 @@ export interface UseSelectStateProps {
 export interface UseSelectEventsProps {
   state: SelectState;
   actions: SelectActions;
-  selectRef: React.RefObject<HTMLElement>;
+  selectRef: React.RefObject<HTMLElement | null>;
 }
 
 export interface UseSelectSearchProps {
@@ -299,12 +299,13 @@ export const useSelectSearch = ({
         if (!React.isValidElement(child)) return child;
 
         // Check if this is a SelectItem by looking for the data-testid or value prop
-        const isSelectItem = child.props && 
-          (child.props['data-testid'] === 'select-item' || 
-           child.props.value !== undefined);
+        const childProps = child.props as { 'data-testid'?: string; value?: unknown; children?: React.ReactNode; [key: string]: unknown };
+        const isSelectItem = childProps && 
+          (childProps['data-testid'] === 'select-item' || 
+           childProps.value !== undefined);
 
         if (isSelectItem) {
-          const childText = React.Children.toArray(child.props.children).join(' ').toLowerCase();
+          const childText = React.Children.toArray(childProps.children).join(' ').toLowerCase();
           const searchLower = searchTerm.toLowerCase();
           
           if (childText.includes(searchLower)) {
@@ -313,8 +314,8 @@ export const useSelectSearch = ({
           return null;
         }
 
-        if (child.props.children) {
-          const filteredChildChildren = filterChildren(child.props.children);
+        if (childProps.children) {
+          const filteredChildChildren = filterChildren(childProps.children);
           if (React.Children.count(filteredChildChildren) > 0) {
             return React.cloneElement(child, {}, filteredChildChildren);
           }
@@ -359,8 +360,11 @@ const useSelectContext = () => {
 const getTextContent = (children: React.ReactNode): string => {
   if (typeof children === 'string') return children;
   if (typeof children === 'number') return children.toString();
-  if (React.isValidElement(children) && children.props.children) {
-    return getTextContent(children.props.children);
+  if (React.isValidElement(children)) {
+    const props = children.props as { children?: React.ReactNode; [key: string]: unknown };
+    if (props.children) {
+      return getTextContent(props.children);
+    }
   }
   if (Array.isArray(children)) {
     return children.map(getTextContent).join('');
@@ -443,7 +447,7 @@ export const Select = React.forwardRef<HTMLFormElement, SelectProps & UseSelectS
     const internalRef = React.useRef<HTMLFormElement>(null);
     const selectRef = React.useMemo(() => {
       if (ref && typeof ref === 'object' && 'current' in ref) {
-        return ref as React.RefObject<HTMLFormElement>;
+        return ref as React.RefObject<HTMLFormElement | null>;
       }
       return internalRef;
     }, [ref]);
@@ -620,7 +624,7 @@ export const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerPr
     const opensUpward = direction === 'up';
 
     // Use ref to store the latest handleClick to avoid re-creating the effect
-    const handleClickRef = React.useRef<(e: React.MouseEvent) => void>();
+    const handleClickRef = React.useRef<(e: React.MouseEvent) => void>(undefined);
     
     const handleClick = React.useCallback((e: React.MouseEvent) => {
       if (disabled) {
@@ -687,22 +691,26 @@ export const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerPr
     };
 
     if (asChild) {
-      const childChildren = React.Children.toArray((children as React.ReactElement).props.children);
-      const hasChevron = childChildren.some(child => 
-        React.isValidElement(child) && 
-        (child.type === ChevronDown || 
-         (child.type === 'svg' && child.props['data-testid'] === 'chevron-down') ||
-         (typeof child === 'object' && 'type' in child && typeof child.type === 'function' && child.type.name === 'ChevronDown'))
-      );
+      const childElement = children as React.ReactElement<{ children?: React.ReactNode; [key: string]: unknown }>;
+      const childChildren = React.Children.toArray(childElement.props.children);
+      const hasChevron = childChildren.some(child => {
+        if (React.isValidElement(child)) {
+          const childProps = child.props as { 'data-testid'?: string; [key: string]: unknown };
+          return child.type === ChevronDown || 
+                 (child.type === 'svg' && childProps['data-testid'] === 'chevron-down') ||
+                 (typeof child === 'object' && 'type' in child && typeof child.type === 'function' && child.type.name === 'ChevronDown');
+        }
+        return false;
+      });
 
       // Merge child's className with triggerProps className
-      const childClassName = (children as React.ReactElement).props.className;
+      const childClassName = (children as React.ReactElement<any>).props.className;
       const mergedClassName = cn(
         triggerProps.className,
         childClassName
       );
 
-      return React.cloneElement(children as React.ReactElement, {
+      return React.cloneElement(children as React.ReactElement<any>, {
         ...triggerProps,
         className: mergedClassName,
         children: hasChevron ? childChildren : [
@@ -915,8 +923,11 @@ export const SelectItem = React.forwardRef<HTMLLIElement, SelectItemProps>(
     const getTextContent = (children: React.ReactNode): string => {
       if (typeof children === 'string') return children;
       if (typeof children === 'number') return children.toString();
-      if (React.isValidElement(children) && children.props.children) {
-        return getTextContent(children.props.children);
+      if (React.isValidElement(children)) {
+        const props = children.props as { children?: React.ReactNode; [key: string]: unknown };
+        if (props.children) {
+          return getTextContent(props.children);
+        }
       }
       if (Array.isArray(children)) {
         return children.map(getTextContent).join('');

package/src/components/SessionRestorationLoader/SessionRestorationLoader.tsx

@@ -30,7 +30,7 @@
  * - High contrast support
  *
  * @dependencies
- * - React 18+ - Component framework
+ * - React 19+ - Component framework
  * - LoadingSpinner - Spinner component
  * - Tailwind CSS - Styling
  */

package/src/components/Table/Table.tsx

@@ -85,7 +85,7 @@
  * - Caption for table description
  *
  * @dependencies
- * - React 18+ - Hooks and refs
+ * - React 19+ - Hooks and refs
  * - Tailwind CSS - Styling
  */
 

package/src/components/Textarea/Textarea.tsx

@@ -93,35 +93,33 @@ export interface TextareaProps
  * />
  * ```
  */
-const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ className, variant = 'default', size = 'md', error, ...props }, ref) => {
-    return (
-      <textarea
-        className={cn(
-          // Base styles (matching Input component)
-          'flex w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
-          
-          // Variant styles
-          {
-            'border-input': variant === 'default' && !error,
-            'border-destructive focus-visible:ring-destructive': variant === 'destructive' || error,
-          },
-          
-          // Size styles
-          {
-            'min-h-[60px] px-2 py-1 text-xs': size === 'sm',
-            'min-h-[80px] px-3 py-2 text-sm': size === 'md',
-            'min-h-[100px] px-4 py-3 text-base': size === 'lg',
-          },
-          
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    );
-  }
-);
+function Textarea({ className, variant = 'default', size = 'md', error, ref, ...props }: TextareaProps & { ref?: React.Ref<HTMLTextAreaElement> }) {
+  return (
+    <textarea
+      className={cn(
+        // Base styles (matching Input component)
+        'flex w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+        
+        // Variant styles
+        {
+          'border-input': variant === 'default' && !error,
+          'border-destructive focus-visible:ring-destructive': variant === 'destructive' || error,
+        },
+        
+        // Size styles
+        {
+          'min-h-[60px] px-2 py-1 text-xs': size === 'sm',
+          'min-h-[80px] px-3 py-2 text-sm': size === 'md',
+          'min-h-[100px] px-4 py-3 text-base': size === 'lg',
+        },
+        
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+}
 
 Textarea.displayName = 'Textarea';
 

package/src/components/Toast/Toast.tsx

@@ -81,7 +81,7 @@
  * @dependencies
  * - @radix-ui/react-toast - Core toast functionality
  * - lucide-react - Icons
- * - React 18+ - Hooks and refs
+ * - React 19+ - Hooks and refs
  * - Tailwind CSS - Styling
  */
 

package/src/components/Tooltip/Tooltip.tsx

@@ -67,7 +67,7 @@
  *
  * @dependencies
  * - @radix-ui/react-tooltip - Core tooltip functionality
- * - React 18+ - Hooks and refs
+ * - React 19+ - Hooks and refs
  * - Tailwind CSS - Styling and animations
  */
 

package/src/components/UserMenu/UserMenu.tsx

@@ -90,7 +90,7 @@
  * - Optimized avatar rendering
  *
  * @dependencies
- * - React 18+ - Hooks and memo
+ * - React 19+ - Hooks and memo
  * - @supabase/supabase-js - User type
  * - lucide-react - Icons
  * - DropdownMenu components

package/src/hooks/__tests__/hooks.integration.test.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { screen, fireEvent, waitFor, act } from '@testing-library/react';
 import { renderHook } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 import { vi, describe, it, beforeEach, afterEach } from 'vitest';
 import { renderWithProviders } from '../../__tests__/helpers/test-utils';
@@ -16,7 +17,7 @@ import { Button } from '../../components/Button/Button';
 import { Input } from '../../components/Input/Input';
 import { Form } from '../../components/Form/Form';
 import { z } from 'zod';
-import { useForm } from 'react-hook-form';
+import { useForm, useFormState } from 'react-hook-form';
 
 // Mock the Logger module
 vi.mock('../../utils/core/logger', () => {
@@ -137,47 +138,57 @@ const ValidatedForm = ({ onSubmit }: ValidatedFormProps = {}) => {
       onSubmit={handleSubmit}
     >
       {(methods) => (
-        <>
-          <div>
-            <Input
-              {...methods.register('name')}
-              data-testid="name-input"
-              placeholder="Name"
-            />
-            {methods.formState.errors.name && (
-              <div data-testid="name-error">{methods.formState.errors.name.message}</div>
-            )}
-          </div>
-          <div>
-            <Input
-              {...methods.register('email')}
-              data-testid="email-input"
-              placeholder="Email"
-            />
-            {methods.formState.errors.email && (
-              <div data-testid="email-error">{methods.formState.errors.email.message}</div>
-            )}
-          </div>
-          <div>
-            <Input
-              {...methods.register('age', { valueAsNumber: true })}
-              data-testid="age-input"
-              type="number"
-              placeholder="Age"
-            />
-            {methods.formState.errors.age && (
-              <div data-testid="age-error">{methods.formState.errors.age.message}</div>
-            )}
-          </div>
-          <Button type="submit" data-testid="submit-button">
-            Submit
-          </Button>
-        </>
+        <ValidatedFormFields methods={methods} />
       )}
     </Form>
   );
 };
 
+// Separate component to use useFormState hook for reactive error updates
+const ValidatedFormFields = ({ methods }: { methods: ReturnType<typeof useForm> }) => {
+  // Use useFormState to subscribe to form state changes, including errors
+  const { errors } = useFormState({ control: methods.control });
+  
+  return (
+    <>
+      <div>
+        <Input
+          {...methods.register('name')}
+          data-testid="name-input"
+          placeholder="Name"
+        />
+        {errors.name && (
+          <div data-testid="name-error">{errors.name.message}</div>
+        )}
+      </div>
+      <div>
+        <Input
+          {...methods.register('email')}
+          data-testid="email-input"
+          placeholder="Email"
+        />
+        {errors.email && (
+          <div data-testid="email-error">{errors.email.message}</div>
+        )}
+      </div>
+      <div>
+        <Input
+          {...methods.register('age', { valueAsNumber: true })}
+          data-testid="age-input"
+          type="number"
+          placeholder="Age"
+        />
+        {errors.age && (
+          <div data-testid="age-error">{errors.age.message}</div>
+        )}
+      </div>
+      <Button type="submit" data-testid="submit-button">
+        Submit
+      </Button>
+    </>
+  );
+};
+
 // Test component for useKeyboardShortcuts integration
 const KeyboardShortcutsComponent = () => {
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -312,14 +323,13 @@ describe('Hooks Integration', () => {
     });
 
     it('handles rapid input changes correctly', async () => {
+      const user = userEvent.setup();
       renderWithProviders(<DebouncedSearch />);
 
       const searchInput = screen.getByTestId('search-input');
       
-      // Type rapidly
-      fireEvent.change(searchInput, { target: { value: 'a' } });
-      fireEvent.change(searchInput, { target: { value: 'ab' } });
-      fireEvent.change(searchInput, { target: { value: 'abc' } });
+      // Type rapidly using userEvent
+      await user.type(searchInput, 'abc');
 
       // Should not show results immediately
       expect(screen.queryByTestId('result-0')).not.toBeInTheDocument();
@@ -329,7 +339,10 @@ describe('Hooks Integration', () => {
         expect(screen.getByTestId('debounced-term')).toHaveTextContent('Debounced: abc');
       }, { timeout: 400 });
 
-      expect(screen.getByTestId('result-0')).toHaveTextContent('Result for: abc');
+      // Wait for results to appear after debounced term updates
+      await waitFor(() => {
+        expect(screen.getByTestId('result-0')).toHaveTextContent('Result for: abc');
+      }, { timeout: 500 });
     });
   });
 
@@ -362,6 +375,7 @@ describe('Hooks Integration', () => {
 
   describe('useZodForm Integration', () => {
     it('validates form with real-time feedback', async () => {
+      const user = userEvent.setup();
       renderWithProviders(<ValidatedForm />);
 
       const nameInput = screen.getByTestId('name-input');
@@ -369,21 +383,32 @@ describe('Hooks Integration', () => {
       const ageInput = screen.getByTestId('age-input');
       const submitButton = screen.getByTestId('submit-button');
 
-      // Test validation errors
-      await act(async () => {
-        fireEvent.change(nameInput, { target: { value: 'a' } });
-        fireEvent.change(emailInput, { target: { value: 'invalid-email' } });
-        fireEvent.change(ageInput, { target: { value: '15' } });
-      });
-      await act(async () => {
-        fireEvent.click(submitButton);
-      });
+      // Test validation errors - use userEvent for proper async handling
+      await user.clear(nameInput);
+      await user.type(nameInput, 'a');
+      await user.clear(emailInput);
+      await user.type(emailInput, 'invalid-email');
+      await user.clear(ageInput);
+      await user.type(ageInput, '15');
+      
+      // Submit the form to trigger validation
+      await user.click(submitButton);
 
+      // Wait for validation errors to appear after form submission
+      // The render prop function needs to re-render when formState.errors changes
+      // Wait for all errors to appear together
       await waitFor(() => {
-        expect(screen.getByTestId('name-error')).toHaveTextContent('Name must be at least 2 characters');
-        expect(screen.getByTestId('email-error')).toHaveTextContent('Invalid email address');
-        expect(screen.getByTestId('age-error')).toHaveTextContent('Must be at least 18 years old');
-      });
+        const nameError = screen.queryByTestId('name-error');
+        const emailError = screen.queryByTestId('email-error');
+        const ageError = screen.queryByTestId('age-error');
+        
+        expect(nameError).toBeInTheDocument();
+        expect(nameError).toHaveTextContent('Name must be at least 2 characters');
+        expect(emailError).toBeInTheDocument();
+        expect(emailError).toHaveTextContent('Invalid email address');
+        expect(ageError).toBeInTheDocument();
+        expect(ageError).toHaveTextContent('Must be at least 18 years old');
+      }, { timeout: 5000 });
     });
 
     it('submits form with valid data', async () => {

package/src/hooks/__tests__/useSecureDataAccess.unit.test.tsx

@@ -5,7 +5,7 @@ import { useUnifiedAuth } from '../../providers';
 import { useOrganisations } from '../../hooks/useOrganisations';
 import { testDataGenerators } from '../../__tests__/helpers/test-utils';
 import { useResolvedScope } from '../../rbac/hooks/useResolvedScope';
-import { useSuperAdminBypass } from '../../rbac/hooks/useSuperAdminBypass';
+import { useOrganisationSecurity } from '../useOrganisationSecurity';
 
 // Mock dependencies
 vi.mock('../../providers', () => ({
@@ -28,8 +28,8 @@ vi.mock('../../rbac/hooks/useResolvedScope', () => ({
   useResolvedScope: vi.fn(),
 }));
 
-vi.mock('../../rbac/hooks/useSuperAdminBypass', () => ({
-  useSuperAdminBypass: vi.fn(),
+vi.mock('../useOrganisationSecurity', () => ({
+  useOrganisationSecurity: vi.fn(),
 }));
 
 const mockUseUnifiedAuth = {
@@ -114,10 +114,17 @@ describe('useSecureDataAccess', () => {
       isLoading: false,
       error: null,
     });
-    // Default mock for useSuperAdminBypass - not super admin
-    vi.mocked(useSuperAdminBypass).mockReturnValue({
-      isSuperAdmin: false,
-    });
+    // Default mock for useOrganisationSecurity - not super admin
+    vi.mocked(useOrganisationSecurity).mockReturnValue({
+      superAdminContext: { isSuperAdmin: false, hasGlobalAccess: false, canManageAllOrganisations: false },
+      validateOrganisationAccess: vi.fn(),
+      hasMinimumRole: vi.fn(),
+      canAccessChildOrganisations: vi.fn(),
+      checkPermission: vi.fn(),
+      getPermissions: vi.fn(),
+      logOrganisationAccess: vi.fn(),
+      canManageOrganisation: vi.fn(),
+    } as any);
   });
 
   describe('validateContext', () => {