@jmruthers/pace-core 0.5.193 → 0.6.2

package/src/components/Form/Form.test.tsx

@@ -8,10 +8,12 @@
  * Tests form rendering, validation, submission, and accessibility.
  */
 
+import React from 'react';
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { render, screen, waitFor, act } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { z } from 'zod';
+import { useWatch, useFormState, useFormContext } from 'react-hook-form';
 import { Form, FormField } from './index';
 import { renderWithProviders } from '../../__tests__/helpers/test-utils';
 
@@ -108,27 +110,46 @@ describe('Form Component', () => {
 
     it('shares live form state with render prop children', async () => {
       const onSubmit = vi.fn();
-
-      renderWithProviders(
-        <Form onSubmit={onSubmit} defaultValues={{ name: '' }}>
-          {({ formState, watch }) => (
-            <>
-              <span data-testid="dirty-flag">{formState.isDirty ? 'dirty' : 'pristine'}</span>
-              <span data-testid="watched-value">{watch('name')}</span>
-              <FormField name="name" label="Name" />
-            </>
-          )}
-        </Form>
-      );
+      const InnerComponent = () => {
+        // useWatch and useFormState must be called inside FormProvider context
+        // useFormState subscribes to form state changes and triggers re-renders
+        const { control } = useFormContext();
+        const nameValue = useWatch({ name: 'name', control });
+        const { isDirty } = useFormState({ control });
+        
+        return (
+          <>
+            <span data-testid="dirty-flag">{isDirty ? 'dirty' : 'pristine'}</span>
+            <span data-testid="watched-value">{nameValue || ''}</span>
+            <FormField name="name" label="Name" />
+          </>
+        );
+      };
+      
+      const TestComponent = () => {
+        return (
+          <Form onSubmit={onSubmit} defaultValues={{ name: '' }}>
+            <InnerComponent />
+          </Form>
+        );
+      };
+
+      renderWithProviders(<TestComponent />);
 
       const input = screen.getByLabelText('Name');
       expect(screen.getByTestId('dirty-flag')).toHaveTextContent('pristine');
+      
+      // Type into the input field
+      await user.clear(input);
       await user.type(input, 'Jane');
 
+      // Wait for both the watched value and dirty state to update
       await waitFor(() => {
-        expect(screen.getByTestId('dirty-flag')).toHaveTextContent('dirty');
-        expect(screen.getByTestId('watched-value')).toHaveTextContent('Jane');
-      });
+        const watchedValue = screen.getByTestId('watched-value');
+        const dirtyFlag = screen.getByTestId('dirty-flag');
+        expect(watchedValue).toHaveTextContent('Jane');
+        expect(dirtyFlag).toHaveTextContent('dirty');
+      }, { timeout: 5000 });
     });
   });
 

package/src/components/Form/Form.tsx

@@ -68,7 +68,7 @@
  * - react-hook-form - Form state management
  * - @hookform/resolvers/zod - Zod validation integration
  * - zod - Schema validation
- * - React 18+ - Hooks and context
+ * - React 19+ - Hooks and context
  */
 
 import React from 'react';
@@ -153,6 +153,7 @@ export function Form<TFieldValues extends FieldValues = FieldValues>({
     resolver: schema ? zodResolver(schema) : undefined,
     defaultValues,
     mode,
+    shouldUnregister: false,
   });
 
   const handleSubmit = methods.handleSubmit(onSubmit, onError);
@@ -224,7 +225,7 @@ export interface FormFieldProps<
     field: ControllerRenderProps<TFieldValues, TName>;
     fieldState: ControllerFieldState;
     formState: UseFormStateReturn<TFieldValues>;
-  }) => React.ReactElement;
+  }) => React.ReactElement<any>;
   
   /**
    * Test ID
@@ -318,13 +319,7 @@ export function FormField<
   'data-testid': testId,
   className,
 }: FormFieldProps<TFieldValues, TName>) {
-  const { control, formState: { errors } } = useFormContext<TFieldValues>();
-  const fieldError = errors[name];
-
-  // Safely extract error message
-  const errorMessage = fieldError && typeof fieldError === 'object' && 'message' in fieldError 
-    ? String(fieldError.message) 
-    : undefined;
+  const { control } = useFormContext<TFieldValues>();
 
   return (
     <div className={cn("space-y-2", className)}>
@@ -344,32 +339,42 @@ export function FormField<
         control={control}
         rules={validation}
         render={(props) => {
+          const { field, fieldState } = props;
+          const fieldError = fieldState.error;
+          
+          // Safely extract error message
+          const errorMessage = fieldError && typeof fieldError === 'object' && 'message' in fieldError 
+            ? String(fieldError.message) 
+            : undefined;
+
           if (render) {
             return render(props);
           }
           
           return (
-            <input
-              {...props.field}
-              id={name}
-              type={type}
-              placeholder={placeholder}
-              data-testid={testId}
-              className={cn(
-                "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium 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",
-                fieldError && "border-destructive focus-visible:ring-destructive"
+            <>
+              <input
+                {...field}
+                id={name}
+                type={type}
+                placeholder={placeholder}
+                data-testid={testId}
+                aria-label={label || placeholder || name}
+                className={cn(
+                  "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium 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",
+                  fieldError && "border-destructive focus-visible:ring-destructive"
+                )}
+                {...inputProps}
+              />
+              {errorMessage && (
+                <p className="text-destructive" role="alert">
+                  {errorMessage}
+                </p>
               )}
-              {...inputProps}
-            />
+            </>
           );
         }}
       />
-      
-      {errorMessage && (
-        <p className="text-destructive" role="alert">
-          {errorMessage}
-        </p>
-      )}
     </div>
   );
 }

package/src/components/Header/Header.tsx

@@ -42,10 +42,10 @@
  *   ]}
  *   currentPath="/dashboard"
  *   actions={
- *     <div className="flex gap-2">
+ *     <>
  *       <Button variant="outline">Export</Button>
  *       <Button>New Item</Button>
- *     </div>
+ *     </>
  *   }
  *   user={currentUser}
  *   onSignOut={handleSignOut}
@@ -79,7 +79,7 @@
  *
  * @dependencies
  * - @supabase/supabase-js - User authentication
- * - React 18+ - Component framework
+ * - React 19+ - Component framework
  * - Tailwind CSS - Styling
  * - NavigationMenu component
  * - UserMenu component
@@ -199,10 +199,10 @@ export interface HeaderProps {
  * 
  * function HeaderWithActions() {
  *   const customActions = (
- *     <div className="flex items-center gap-2">
+ *     <>
  *       <Button variant="outline" size="sm">Export</Button>
  *       <Button size="sm">New Item</Button>
- *     </div>
+ *     </>
  *   );
  * 
  *   return (
@@ -238,6 +238,13 @@ export interface HeaderProps {
  * 
  * @since 0.1.0
  */
+/**
+ * Header component for application layouts.
+ * Provides navigation, user menu, organisation/event selectors, and customizable branding.
+ * 
+ * @param props - Header configuration
+ * @returns The rendered header
+ */
 export function Header({
   logoUrl,
   logoAlt = 'Logo',
@@ -278,7 +285,7 @@ export function Header({
       "w-full border-b border-main-200 h-16 shadow-sm bg-main-100 ",
       className
     )} role="banner">
-      <nav className="px-4 w-[min(var(--app-width),100%)] mx-auto flex items-center gap-4 h-full">
+      <nav className="px-4 w-[min(var(--app-width),100%)] mx-auto grid grid-cols-[auto_1fr_auto_auto_auto_auto] items-center gap-4 h-full">
           {/* Logo */}
           {logo ? (
             logoHref ? (
@@ -333,10 +340,7 @@ export function Header({
               itemsPreFiltered={true}
             />
           )}
-        
 
-        {/* Right side: Organisation Selector, Event Selector, Actions, and User Menu */}
-        <div className="flex items-center gap-4 ml-auto">
           {/* Organisation Selector - Only show if user has organisations */}
           {showOrgSelector ? (
             <OrganisationSelectorConditional />
@@ -346,7 +350,15 @@ export function Header({
           {showEventSelector ? (
             <EventSelector 
               placeholder="Select event" 
-              className="w-96" 
+              className={cn(
+                "w-96",
+                // If both org selector and actions exist, EventSelector uses 1 column
+                // If only one exists, EventSelector spans 2 columns
+                // If neither exists, EventSelector spans 3 columns
+                showOrgSelector && actions ? "col-span-1" :
+                showOrgSelector || actions ? "col-span-2" :
+                "col-span-3"
+              )}
               data-testid="event-selector" 
             />
           ) : null}
@@ -367,7 +379,6 @@ export function Header({
               />
             )
           )}
-        </div>
 
       </nav>
     </header>

package/src/components/InactivityWarningModal/InactivityWarningModal.test.tsx

@@ -65,7 +65,7 @@ vi.mock('lucide-react', () => ({
 }));
 
 describe('InactivityWarningModal Component', () => {
-  const defaultProps = {
+  const baseProps = {
     isOpen: true,
     timeRemaining: 45,
     onStaySignedIn: vi.fn(),
@@ -74,20 +74,20 @@ describe('InactivityWarningModal Component', () => {
 
     describe('Rendering', () => {
     it('renders when isOpen is true', () => {
-      renderWithProviders(<InactivityWarningModal {...defaultProps} />);
+      renderWithProviders(<InactivityWarningModal {...baseProps} />);
       
       expect(screen.getByTestId('dialog')).toBeInTheDocument();
       expect(screen.getByTestId('inactivity-warning-modal')).toBeInTheDocument();
     });
 
     it('does not render when isOpen is false', () => {
-      renderWithProviders(<InactivityWarningModal {...defaultProps} isOpen={false} />);
+      renderWithProviders(<InactivityWarningModal {...baseProps} isOpen={false} />);
       
       expect(screen.queryByTestId('dialog')).not.toBeInTheDocument();
     });
 
     it('renders with default title and description', () => {
-      renderWithProviders(<InactivityWarningModal {...defaultProps} />);
+      renderWithProviders(<InactivityWarningModal {...baseProps} />);
       
       expect(screen.getByText('Session Timeout Warning')).toBeInTheDocument();
       expect(screen.getByText("You've been inactive for a while. Your session will expire soon for security reasons.")).toBeInTheDocument();
@@ -95,7 +95,7 @@ describe('InactivityWarningModal Component', () => {
 
     it('renders with custom title and description', () => {
       const customProps = {
-        ...defaultProps,
+        ...baseProps,
         title: 'Custom Warning',
         description: 'Custom description text',
       };
@@ -107,58 +107,58 @@ describe('InactivityWarningModal Component', () => {
     });
 
     it('renders with custom className', () => {
-      renderWithProviders(<InactivityWarningModal {...defaultProps} className="custom-modal" />);
+      renderWithProviders(<InactivityWarningModal {...baseProps} className="custom-modal" />);
       
       const modal = screen.getByTestId('inactivity-warning-modal');
       expect(modal).toHaveClass('custom-modal');
     });
 
     it('renders countdown timer with correct time format', () => {
-      renderWithProviders(<InactivityWarningModal {...defaultProps} timeRemaining={125} />);
+      renderWithProviders(<InactivityWarningModal {...baseProps} timeRemaining={125} />);
       
       expect(screen.getByText('02:05')).toBeInTheDocument();
     });
 
     it('renders countdown timer with single digit minutes', () => {
-      renderWithProviders(<InactivityWarningModal {...defaultProps} timeRemaining={65} />);
+      renderWithProviders(<InactivityWarningModal {...baseProps} timeRemaining={65} />);
       
       expect(screen.getByText('01:05')).toBeInTheDocument();
     });
 
     it('renders countdown timer with zero seconds', () => {
-      renderWithProviders(<InactivityWarningModal {...defaultProps} timeRemaining={60} />);
+      renderWithProviders(<InactivityWarningModal {...baseProps} timeRemaining={60} />);
       
       expect(screen.getByText('01:00')).toBeInTheDocument();
     });
 
     it('renders countdown timer with single digit seconds', () => {
-      renderWithProviders(<InactivityWarningModal {...defaultProps} timeRemaining={5} />);
+      renderWithProviders(<InactivityWarningModal {...baseProps} timeRemaining={5} />);
       
       expect(screen.getByText('00:05')).toBeInTheDocument();
     });
 
     it('renders countdown timer with zero time', () => {
-      renderWithProviders(<InactivityWarningModal {...defaultProps} timeRemaining={0} />);
+      renderWithProviders(<InactivityWarningModal {...baseProps} timeRemaining={0} />);
       
       expect(screen.getByText('00:00')).toBeInTheDocument();
     });
 
     it('renders action buttons with correct text', () => {
-      renderWithProviders(<InactivityWarningModal {...defaultProps} />);
+      renderWithProviders(<InactivityWarningModal {...baseProps} />);
       
       expect(screen.getByRole('button', { name: 'Stay Signed In' })).toBeInTheDocument();
       expect(screen.getByRole('button', { name: 'Sign Out Now' })).toBeInTheDocument();
     });
 
     it('renders icons correctly', () => {
-      renderWithProviders(<InactivityWarningModal {...defaultProps} />);
+      renderWithProviders(<InactivityWarningModal {...baseProps} />);
       
       expect(screen.getByTestId('alert-triangle-icon')).toBeInTheDocument();
       expect(screen.getByTestId('clock-icon')).toBeInTheDocument();
     });
 
     it('renders additional security information', () => {
-      renderWithProviders(<InactivityWarningModal {...defaultProps} />);
+      renderWithProviders(<InactivityWarningModal {...baseProps} />);
       
       expect(screen.getByText("For security reasons, you'll be automatically signed out after 30 minutes of inactivity.")).toBeInTheDocument();
     });
@@ -178,7 +178,7 @@ describe('InactivityWarningModal Component', () => {
 
       testCases.forEach(({ input, expected }) => {
         const { unmount } = renderWithProviders(
-          <InactivityWarningModal {...defaultProps} timeRemaining={input} />
+          <InactivityWarningModal {...baseProps} timeRemaining={input} />
         );
         
         expect(screen.getByText(expected)).toBeInTheDocument();
@@ -188,12 +188,12 @@ describe('InactivityWarningModal Component', () => {
 
     it('updates display time when timeRemaining prop changes', () => {
       const { rerender } = renderWithProviders(
-        <InactivityWarningModal {...defaultProps} timeRemaining={60} />
+        <InactivityWarningModal {...baseProps} timeRemaining={60} />
       );
       
       expect(screen.getByText('01:00')).toBeInTheDocument();
       
-      rerender(<InactivityWarningModal {...defaultProps} timeRemaining={30} />);
+      rerender(<InactivityWarningModal {...baseProps} timeRemaining={30} />);
       
       expect(screen.getByText('00:30')).toBeInTheDocument();
     });
@@ -205,7 +205,7 @@ describe('InactivityWarningModal Component', () => {
       const onStaySignedIn = vi.fn();
       
       renderWithProviders(
-        <InactivityWarningModal {...defaultProps} onStaySignedIn={onStaySignedIn} />
+        <InactivityWarningModal {...baseProps} onStaySignedIn={onStaySignedIn} />
       );
       
       await user.click(screen.getByRole('button', { name: 'Stay Signed In' }));
@@ -218,7 +218,7 @@ describe('InactivityWarningModal Component', () => {
       const onSignOutNow = vi.fn();
       
       renderWithProviders(
-        <InactivityWarningModal {...defaultProps} onSignOutNow={onSignOutNow} />
+        <InactivityWarningModal {...baseProps} onSignOutNow={onSignOutNow} />
       );
       
       await user.click(screen.getByRole('button', { name: 'Sign Out Now' }));
@@ -231,7 +231,7 @@ describe('InactivityWarningModal Component', () => {
       const onStaySignedIn = vi.fn();
       
       renderWithProviders(
-        <InactivityWarningModal {...defaultProps} onStaySignedIn={onStaySignedIn} />
+        <InactivityWarningModal {...baseProps} onStaySignedIn={onStaySignedIn} />
       );
       
       // Simulate dialog close (this would normally happen via the Dialog component)
@@ -244,7 +244,7 @@ describe('InactivityWarningModal Component', () => {
 
   describe('Button Styling and Props', () => {
     it('applies correct styling to Stay Signed In button', () => {
-      renderWithProviders(<InactivityWarningModal {...defaultProps} />);
+      renderWithProviders(<InactivityWarningModal {...baseProps} />);
       
       const stayButton = screen.getByRole('button', { name: 'Stay Signed In' });
       expect(stayButton).toHaveClass('bg-main-600', 'hover:bg-main-700', 'text-main-50');
@@ -252,7 +252,7 @@ describe('InactivityWarningModal Component', () => {
     });
 
     it('applies correct styling to Sign Out Now button', () => {
-      renderWithProviders(<InactivityWarningModal {...defaultProps} />);
+      renderWithProviders(<InactivityWarningModal {...baseProps} />);
       
       const signOutButton = screen.getByRole('button', { name: 'Sign Out Now' });
       expect(signOutButton).toHaveAttribute('data-variant', 'outline');
@@ -263,7 +263,7 @@ describe('InactivityWarningModal Component', () => {
 
   describe('Accessibility', () => {
     it('has proper ARIA attributes', () => {
-      renderWithProviders(<InactivityWarningModal {...defaultProps} />);
+      renderWithProviders(<InactivityWarningModal {...baseProps} />);
       
       const dialog = screen.getByTestId('dialog');
       expect(dialog).toHaveAttribute('role', 'dialog');
@@ -277,14 +277,14 @@ describe('InactivityWarningModal Component', () => {
     });
 
     it('has accessible button labels', () => {
-      renderWithProviders(<InactivityWarningModal {...defaultProps} />);
+      renderWithProviders(<InactivityWarningModal {...baseProps} />);
       
       expect(screen.getByRole('button', { name: 'Stay Signed In' })).toBeInTheDocument();
       expect(screen.getByRole('button', { name: 'Sign Out Now' })).toBeInTheDocument();
     });
 
     it('has proper heading structure', () => {
-      renderWithProviders(<InactivityWarningModal {...defaultProps} />);
+      renderWithProviders(<InactivityWarningModal {...baseProps} />);
       
       const title = screen.getByRole('heading', { level: 2 });
       expect(title).toBeInTheDocument();
@@ -292,7 +292,7 @@ describe('InactivityWarningModal Component', () => {
     });
 
     it('provides descriptive text for screen readers', () => {
-      renderWithProviders(<InactivityWarningModal {...defaultProps} />);
+      renderWithProviders(<InactivityWarningModal {...baseProps} />);
       
       expect(screen.getByText('Time remaining before automatic logout')).toBeInTheDocument();
       expect(screen.getByText("For security reasons, you'll be automatically signed out after 30 minutes of inactivity.")).toBeInTheDocument();
@@ -301,7 +301,7 @@ describe('InactivityWarningModal Component', () => {
 
   describe('Dialog Configuration', () => {
     it('configures dialog with correct props', () => {
-      renderWithProviders(<InactivityWarningModal {...defaultProps} />);
+      renderWithProviders(<InactivityWarningModal {...baseProps} />);
       
       const modal = screen.getByTestId('inactivity-warning-modal');
       expect(modal).toHaveClass('sm:max-w-md');
@@ -311,7 +311,7 @@ describe('InactivityWarningModal Component', () => {
 
     it('applies custom className to dialog content', () => {
       renderWithProviders(
-        <InactivityWarningModal {...defaultProps} className="custom-dialog-class" />
+        <InactivityWarningModal {...baseProps} className="custom-dialog-class" />
       );
       
       const modal = screen.getByTestId('inactivity-warning-modal');
@@ -321,14 +321,14 @@ describe('InactivityWarningModal Component', () => {
 
   describe('Edge Cases', () => {
     it('handles negative time values gracefully', () => {
-      renderWithProviders(<InactivityWarningModal {...defaultProps} timeRemaining={-5} />);
+      renderWithProviders(<InactivityWarningModal {...baseProps} timeRemaining={-5} />);
       
       // Should still render, but with negative time formatted as the component actually does it
       expect(screen.getByText('-1:-5')).toBeInTheDocument();
     });
 
     it('handles very large time values', () => {
-      renderWithProviders(<InactivityWarningModal {...defaultProps} timeRemaining={999999} />);
+      renderWithProviders(<InactivityWarningModal {...baseProps} timeRemaining={999999} />);
       
       expect(screen.getByText('16666:39')).toBeInTheDocument();
     });
@@ -353,7 +353,7 @@ describe('InactivityWarningModal Component', () => {
     it('handles empty string title and description', () => {
       renderWithProviders(
         <InactivityWarningModal 
-          {...defaultProps} 
+          {...baseProps} 
           title="" 
           description="" 
         />
@@ -370,19 +370,19 @@ describe('InactivityWarningModal Component', () => {
   describe('Integration', () => {
     it('works with rapid prop changes', () => {
       const { rerender } = renderWithProviders(
-        <InactivityWarningModal {...defaultProps} timeRemaining={60} />
+        <InactivityWarningModal {...baseProps} timeRemaining={60} />
       );
       
       expect(screen.getByText('01:00')).toBeInTheDocument();
       
       // Rapid changes
-      rerender(<InactivityWarningModal {...defaultProps} timeRemaining={30} />);
+      rerender(<InactivityWarningModal {...baseProps} timeRemaining={30} />);
       expect(screen.getByText('00:30')).toBeInTheDocument();
       
-      rerender(<InactivityWarningModal {...defaultProps} timeRemaining={15} />);
+      rerender(<InactivityWarningModal {...baseProps} timeRemaining={15} />);
       expect(screen.getByText('00:15')).toBeInTheDocument();
       
-      rerender(<InactivityWarningModal {...defaultProps} timeRemaining={0} />);
+      rerender(<InactivityWarningModal {...baseProps} timeRemaining={0} />);
       expect(screen.getByText('00:00')).toBeInTheDocument();
     });
 
@@ -393,7 +393,7 @@ describe('InactivityWarningModal Component', () => {
       
       renderWithProviders(
         <InactivityWarningModal 
-          {...defaultProps} 
+          {...baseProps} 
           onStaySignedIn={onStaySignedIn}
           onSignOutNow={onSignOutNow}
         />
@@ -413,17 +413,17 @@ describe('InactivityWarningModal Component', () => {
 
     it('maintains state consistency during re-renders', () => {
       const { rerender } = renderWithProviders(
-        <InactivityWarningModal {...defaultProps} timeRemaining={45} />
+        <InactivityWarningModal {...baseProps} timeRemaining={45} />
       );
       
       expect(screen.getByText('00:45')).toBeInTheDocument();
       
       // Re-render with same props
-      rerender(<InactivityWarningModal {...defaultProps} timeRemaining={45} />);
+      rerender(<InactivityWarningModal {...baseProps} timeRemaining={45} />);
       expect(screen.getByText('00:45')).toBeInTheDocument();
       
       // Re-render with different props
-      rerender(<InactivityWarningModal {...defaultProps} timeRemaining={30} />);
+      rerender(<InactivityWarningModal {...baseProps} timeRemaining={30} />);
       expect(screen.getByText('00:30')).toBeInTheDocument();
     });
   });
@@ -447,7 +447,7 @@ describe('InactivityWarningModal Component', () => {
 
     it('handles invalid timeRemaining values', () => {
       const invalidTimeProps = {
-        ...defaultProps,
+        ...baseProps,
         timeRemaining: NaN,
       };
       

package/src/components/InactivityWarningModal/InactivityWarningModal.tsx

@@ -41,7 +41,7 @@
  * - Optimized timer management
  *
  * @dependencies
- * - React 18+ - Hooks and effects
+ * - React 19+ - Hooks and effects
  * - Dialog components - Modal functionality
  * - Tailwind CSS v4 - Styling
  */

package/src/components/Input/Input.test.tsx

@@ -420,14 +420,14 @@ describe('InputGroup Component', () => {
   // Accessibility tests
   describe('Accessibility', () => {
     it('forwards ref correctly', () => {
-      const ref = React.createRef<HTMLDivElement>();
+      const ref = React.createRef<HTMLFieldSetElement>();
       renderWithProviders(
         <InputGroup ref={ref}>
           <Input placeholder="Input 1" />
         </InputGroup>
       );
       
-      expect(ref.current).toBeInstanceOf(HTMLDivElement);
+      expect(ref.current).toBeInstanceOf(HTMLFieldSetElement);
     });
 
     it('maintains proper focus order', async () => {