@jmruthers/pace-core 0.5.190 → 0.5.191

package/src/components/AddressField/README.md

@@ -154,7 +154,7 @@ if (address) {
 
 ## ParsedAddress Type
 
-The `onChange` callback receives a `ParsedAddress` object matching the `pace_address` table structure:
+The `onChange` callback receives a `ParsedAddress` object matching the `core_address` table structure:
 
 ```typescript
 interface ParsedAddress {
@@ -202,7 +202,7 @@ The component uses intelligent caching to reduce API costs:
 
 The `place_id` is a stable identifier for a location that doesn't change. It's crucial for:
 
-1. **Storing in Database**: Save `place_id` in your `pace_address` table
+1. **Storing in Database**: Save `place_id` in your `core_address` table
 2. **Retrieving Later**: Use `getAddressByPlaceId()` to get full address without autocomplete
 3. **Verification**: Verify addresses haven't changed
 4. **Cost Efficiency**: Place details lookups are cheaper than autocomplete searches
@@ -215,7 +215,7 @@ The `place_id` is a stable identifier for a location that doesn't change. It's c
   apiKey={apiKey}
   onChange={async (address) => {
     // Store in database
-    await supabase.from('pace_address').insert({
+    await supabase.from('core_address').insert({
       place_id: address.place_id, // Store this!
       full_address: address.full_address,
       lat: address.lat,
@@ -257,16 +257,16 @@ The component handles various error scenarios:
 - **Rate Limiting**: Informs user about quota limits
 - **Invalid Requests**: Validates input and displays errors
 
-## Integration with pace_address Table
+## Integration with core_address Table
 
-The `ParsedAddress` type matches the `pace_address` table structure, making it easy to store results:
+The `ParsedAddress` type matches the `core_address` table structure, making it easy to store results:
 
 ```tsx
 <AddressField
   apiKey={apiKey}
   onChange={async (address) => {
     const { data, error } = await supabase
-      .from('pace_address')
+      .from('core_address')
       .insert({
         place_id: address.place_id,
         full_address: address.full_address,

package/src/components/OrganisationSelector/OrganisationSelector.tsx

@@ -53,7 +53,7 @@
  * - Secure organisation data handling
  */
 
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useMemo } from 'react';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../Select';
 import { Alert, AlertDescription } from '../Alert/Alert';
 import { Button } from '../Button/Button';
@@ -118,6 +118,9 @@ export function OrganisationSelector({
     refreshOrganisations
   } = useOrganisations();
 
+  // Removed debug logging useEffect - it was causing render loops because organisations array
+  // is recreated on every render, triggering the effect constantly
+
 
   const handleOrganisationChange = useCallback(async (orgId: string) => {
     if (disabled || isLoading) return;
@@ -242,23 +245,37 @@ export function OrganisationSelector({
     </Alert>
   );
 
-  // Normal selector state - with null check
+  // Normal selector state - allow opening even if no organisation is selected
+  const isSelectDisabled = disabled || isLoading;
+
+  // Memoize the value to prevent render loops
+  const selectValue = useMemo(() => {
+    return selectedOrganisation?.id || '';
+  }, [selectedOrganisation?.id]);
+
   return (
-    <div className={`space-y-2 ${className}`}>
+    <div className={className}>
       <Select 
-        value={selectedOrganisation?.id || ''}
+        value={selectValue}
         onValueChange={handleOrganisationChange}
-        disabled={disabled || isLoading || !selectedOrganisation}
+        disabled={isSelectDisabled}
       >
-        <SelectTrigger className={`${isLoading ? 'opacity-50' : ''}`}>
-          <div className="flex items-center gap-2">
-            {isLoading ? (
-              <LoadingSpinner size="sm" />
-            ) : (
-              <Building2 className="size-4 text-muted-foreground" />
+        <SelectTrigger 
+          className="text-left"
+          variant="outline"
+        >
+          <SelectValue placeholder={placeholder}>
+            {selectedOrganisation && (
+              <div className="flex items-center gap-2">
+                {isLoading ? (
+                  <LoadingSpinner size="sm" />
+                ) : (
+                  <Building2 className="size-4 flex-shrink-0" />
+                )}
+                <span className="truncate">{selectedOrganisation.display_name}</span>
+              </div>
             )}
-            <SelectValue placeholder={placeholder} />
-          </div>
+          </SelectValue>
         </SelectTrigger>
         <SelectContent>
           {organisations.map((org) => {
@@ -298,8 +315,11 @@ export function OrganisationSelector({
           })}
         </SelectContent>
       </Select>
-      
-      {switchErrorDisplay}
+      {switchErrorDisplay && (
+        <div className="mt-2">
+          {switchErrorDisplay}
+        </div>
+      )}
     </div>
   );
 } 

package/src/components/Select/Select.test.tsx

@@ -465,11 +465,14 @@ describe('Select Component', () => {
       await user.click(screen.getByRole('combobox'));
       expect(screen.getByRole('listbox')).toBeInTheDocument();
       
+      // Wait for the event listener to be added (100ms delay in implementation)
+      await new Promise(resolve => setTimeout(resolve, 150));
+      
       await user.click(document.body);
       
       await waitFor(() => {
         expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
-      });
+      }, { timeout: 2000 });
     });
 
     it('prevents opening when trigger is disabled', async () => {

package/src/components/Select/Select.tsx

@@ -145,7 +145,9 @@ export const useSelectState = ({
   }, [controlledValue, onValueChange, controlledOpen, onOpenChange]);
 
   const setOpen = React.useCallback((newOpen: boolean) => {
-    if (disabled) return;
+    if (disabled) {
+      return;
+    }
     
     // Close all other select dropdowns when opening this one
     if (newOpen) {
@@ -210,24 +212,30 @@ export const useSelectEvents = ({ state, actions, selectRef }: UseSelectEventsPr
 
   // Handle click outside to close dropdown
   React.useEffect(() => {
+    if (!state.open) return;
+
     const handleClickOutside = (event: MouseEvent) => {
       const selectElement = selectRef.current;
-      const clickedElement = event.target as Element;
-      const isSelectItem = clickedElement?.closest('[data-testid="select-item"]');
-      const isSearchInput = clickedElement?.closest('[data-testid="select-search-input"]');
-      const isSelectContent = clickedElement?.closest('[data-testid="select-content"]');
+      if (!selectElement) return;
       
-      if (state.open && selectElement && !selectElement.contains(event.target as Node) && !isSelectItem && !isSearchInput && !isSelectContent && !isSelecting) {
+      const target = event.target as Node;
+      
+      // Close if clicking outside the select element
+      if (!selectElement.contains(target) && !isSelecting) {
         actions.setOpen(false);
       }
     };
 
-    if (state.open) {
-      document.addEventListener('mousedown', handleClickOutside);
+    // Add a small delay to avoid closing immediately when opening
+      // The delay ensures the click event that opened the dropdown has fully processed
+      const timeoutId = setTimeout(() => {
+        document.addEventListener('click', handleClickOutside, true); // Use capture phase
+      }, 100); // Small delay to let the opening click complete
+    
       return () => {
-        document.removeEventListener('mousedown', handleClickOutside);
+        clearTimeout(timeoutId);
+        document.removeEventListener('click', handleClickOutside, true);
       };
-    }
   }, [state.open, actions, selectRef, isSelecting]);
 
   // Handle SelectItem mousedown events
@@ -588,6 +596,10 @@ export const Select = React.forwardRef<HTMLFormElement, SelectProps & UseSelectS
         className={cn("relative", className)}
         data-value={state.value}
         data-testid="select-root"
+        onSubmit={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+        }}
       >
         <SelectContext.Provider value={contextValue}>
           {children}
@@ -607,9 +619,25 @@ export const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerPr
     const { open, disabled, value, actions, direction = 'down' } = useSelectContext();
     const opensUpward = direction === 'up';
 
-    const handleClick = () => {
+    // Use ref to store the latest handleClick to avoid re-creating the effect
+    const handleClickRef = React.useRef<(e: React.MouseEvent) => void>();
+    
+    const handleClick = React.useCallback((e: React.MouseEvent) => {
+      if (disabled) {
+        e.preventDefault();
+        e.stopPropagation();
+        return;
+      }
+      
+      e.preventDefault();
+      e.stopPropagation();
       actions.setOpen(!open);
-    };
+    }, [disabled, open, actions]);
+
+    // Update ref whenever handleClick changes
+    React.useEffect(() => {
+      handleClickRef.current = handleClick;
+    }, [handleClick]);
 
     const handleKeyDown = (e: React.KeyboardEvent) => {
       if (disabled) return;
@@ -690,9 +718,19 @@ export const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerPr
       });
     }
 
+
+    // Simple ref forwarding
+    const handleRef = React.useCallback((node: HTMLButtonElement | null) => {
+      if (typeof ref === 'function') {
+        ref(node);
+      } else if (ref) {
+        (ref as React.MutableRefObject<HTMLButtonElement | null>).current = node;
+      }
+    }, [ref]);
+
     return (
       <Button
-        ref={ref}
+        ref={handleRef}
         type="button"
         role="combobox"
         aria-expanded={open}
@@ -713,7 +751,9 @@ export const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerPr
           textOverflow: 'ellipsis',
           whiteSpace: 'nowrap'
         }}
-        onClick={handleClick}
+        onClick={(e) => {
+          handleClick(e);
+        }}
         onKeyDown={handleKeyDown}
         data-testid="select-trigger"
         data-value={value}
@@ -741,7 +781,12 @@ export const SelectValue = React.forwardRef<HTMLSpanElement, SelectValueProps>(
     const { selectedText } = useSelectContext();
 
     return (
-      <span ref={ref} data-testid="select-value">
+      <span 
+        ref={ref} 
+        data-testid="select-value"
+        style={{ pointerEvents: 'none' }}
+        className="pointer-events-none"
+      >
         {children || (selectedText ? selectedText : placeholder)}
       </span>
     );

package/src/hooks/__tests__/usePermissionCache.simple.test.ts

@@ -0,0 +1,192 @@
+import { renderHook, waitFor } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import React from 'react';
+import { TestWrapper } from '../../__tests__/helpers/test-utils';
+import { useRBAC } from '../../rbac/hooks/useRBAC';
+
+// Mock the useRBAC hook
+vi.mock('../../rbac/hooks/useRBAC');
+
+// Mock isPermittedCached from RBAC API (used by usePermissionCache)
+vi.mock('../../rbac/api', async () => {
+  const actual = await vi.importActual('../../rbac/api');
+  return {
+    ...actual,
+    isPermittedCached: vi.fn().mockResolvedValue(true),
+  };
+});
+
+// Mock logger
+vi.mock('../../utils/core/logger', () => {
+  const mockLoggerInstance = {
+    debug: vi.fn(),
+    info: vi.fn(),
+    warn: vi.fn(),
+    error: vi.fn(),
+  };
+  return {
+    createLogger: vi.fn(() => mockLoggerInstance),
+    logger: mockLoggerInstance,
+  };
+});
+
+// Mock useOrganisations hook (required by usePermissionCache)
+const mockOrganisationContext = {
+  selectedOrganisation: {
+    id: 'test-org-id',
+    name: 'Test Organisation',
+    display_name: 'Test Organisation',
+    slug: 'test-org',
+    description: 'Test organisation',
+    subscription_tier: 'basic',
+    settings: {},
+    is_active: true,
+    created_at: '2023-01-01T00:00:00Z',
+    updated_at: '2023-01-01T00:00:00Z',
+  },
+  organisations: [],
+  userMemberships: [],
+  isLoading: false,
+  error: null,
+  hasValidOrganisationContext: true,
+  setSelectedOrganisation: vi.fn(),
+  switchOrganisation: vi.fn().mockResolvedValue(undefined),
+  getUserRole: vi.fn().mockReturnValue('member'),
+  validateOrganisationAccess: vi.fn().mockReturnValue(true),
+  ensureOrganisationContext: vi.fn().mockReturnValue(null),
+  refreshOrganisations: vi.fn().mockResolvedValue(undefined),
+  getPrimaryOrganisation: vi.fn().mockReturnValue(null),
+  isOrganisationSecure: vi.fn().mockReturnValue(true),
+};
+
+vi.mock('../useOrganisations', () => ({
+  useOrganisations: () => mockOrganisationContext,
+}));
+
+// Mock useUnifiedAuth (required by usePermissionCache)
+const mockUseUnifiedAuthFn = vi.fn(() => ({
+  user: { id: 'test-user-id' },
+  session: null,
+  appName: 'test-app',
+  selectedOrganisation: { id: 'test-org-id' },
+  selectedEvent: null,
+  supabase: {},
+  isLoading: false,
+  error: null,
+}));
+vi.mock('../../providers/services/UnifiedAuthProvider', () => ({
+  useUnifiedAuth: () => mockUseUnifiedAuthFn(),
+  UnifiedAuthProvider: ({ children }: { children: React.ReactNode }) => children,
+}));
+
+// Mock useEvents hook (optional - wrapped in try/catch in usePermissionCache)
+vi.mock('../useEvents', () => ({
+  useEvents: vi.fn(() => ({
+    selectedEvent: { event_id: 'event-123' },
+    events: [],
+    isLoading: false,
+    error: null,
+  })),
+}));
+
+const mockUseRBAC = vi.mocked(useRBAC);
+
+// Import after mocking
+import { usePermissionCache } from '../usePermissionCache';
+import { isPermittedCached } from '../../rbac/api';
+const mockIsPermittedCached = vi.mocked(isPermittedCached);
+
+describe('usePermissionCache - Simple Tests', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    
+    // Reset isPermittedCached mock
+    mockIsPermittedCached.mockClear();
+    mockIsPermittedCached.mockResolvedValue(true);
+    
+    // Mock the useRBAC hook return value
+    mockUseRBAC.mockReturnValue({
+      hasPermission: vi.fn().mockResolvedValue(true),
+      user: { id: 'test-user-id' }
+    });
+  });
+
+  afterEach(() => {
+    vi.clearAllTimers();
+  });
+
+  it('should render without errors', () => {
+    const { result } = renderHook(() => usePermissionCache(), {
+      wrapper: TestWrapper
+    });
+
+    expect(result.current).toHaveProperty('checkPermission');
+    expect(result.current).toHaveProperty('checkMultiplePermissions');
+    expect(result.current).toHaveProperty('getCachedPermissions');
+    expect(result.current).toHaveProperty('invalidateCache');
+    expect(result.current).toHaveProperty('getDebugInfo');
+    expect(result.current).toHaveProperty('getAuditTrail');
+  });
+
+  it('should check permission and return result', async () => {
+    mockIsPermittedCached.mockResolvedValueOnce(true);
+    mockUseRBAC.mockReturnValue({
+      hasPermission: vi.fn().mockResolvedValue(true),
+      user: { id: 'test-user-id' }
+    });
+
+    const { result } = renderHook(() => usePermissionCache(), {
+      wrapper: TestWrapper
+    });
+
+    const permission = await result.current.checkPermission('read', 'dashboard');
+
+    expect(permission).toBe(true);
+    expect(mockIsPermittedCached).toHaveBeenCalled();
+  });
+
+  it('should handle permission check errors gracefully', async () => {
+    const { logger } = await import('../../utils/core/logger');
+    mockIsPermittedCached.mockRejectedValueOnce(new Error('Database error'));
+    
+    mockUseRBAC.mockReturnValue({
+      hasPermission: vi.fn().mockResolvedValue(true),
+      user: { id: 'test-user-id' }
+    });
+
+    const { result } = renderHook(() => usePermissionCache(), {
+      wrapper: TestWrapper
+    });
+
+    const permission = await result.current.checkPermission('read', 'dashboard');
+
+    expect(permission).toBe(false);
+    // Verify error was logged using logger
+    expect(logger.error).toHaveBeenCalled();
+  });
+
+  it('should provide debug information', () => {
+    const { result } = renderHook(() => usePermissionCache(), {
+      wrapper: TestWrapper
+    });
+
+    const debugInfo = result.current.getDebugInfo();
+
+    expect(debugInfo).toHaveProperty('cacheSize');
+    expect(debugInfo).toHaveProperty('cacheHits');
+    expect(debugInfo).toHaveProperty('cacheMisses');
+    expect(debugInfo).toHaveProperty('totalChecks');
+    expect(debugInfo).toHaveProperty('averageResponseTime');
+    expect(debugInfo).toHaveProperty('lastInvalidation');
+  });
+
+  it('should provide audit trail', () => {
+    const { result } = renderHook(() => usePermissionCache(), {
+      wrapper: TestWrapper
+    });
+
+    const auditTrail = result.current.getAuditTrail();
+
+    expect(Array.isArray(auditTrail)).toBe(true);
+  });
+});