@jmruthers/pace-core 0.6.4 → 0.6.6

package/src/components/PublicLayout/PublicLayout.test.tsx

@@ -241,15 +241,19 @@ describe('[component] PublicPageLayout', () => {
     });
 
     it('renders loading state with proper layout classes', () => {
-      const { container } = render(
+      render(
         <PublicPageLayout eventCode="EVENT123" isLoading={true}>
           <div>Test Content</div>
         </PublicPageLayout>
       );
 
-      const loadingContainer = container.querySelector('.min-h-screen');
+      // The loading state renders a <p> tag with grid and place-items-center classes
+      // There may be multiple "Loading..." texts (from LoadingSpinner mock and actual text)
+      // So we query by the container element using getAllByText and find the one in the <p> tag
+      const loadingTexts = screen.getAllByText('Loading...');
+      const loadingContainer = loadingTexts.find(text => text.closest('p'))?.closest('p');
       expect(loadingContainer).toBeInTheDocument();
-      expect(loadingContainer).toHaveClass('bg-background', 'flex', 'items-center', 'justify-center');
+      expect(loadingContainer).toHaveClass('grid', 'place-items-center', 'text-center', 'size-full');
     });
   });
 

package/src/components/PublicLayout/PublicPageLayout.tsx

@@ -312,14 +312,11 @@ export function PublicPageLayout({
       return <LoadingFallback />;
     }
     return (
-      <div className="min-h-screen bg-background flex items-center justify-center">
-        <div className="max-w-md mx-auto text-center px-4">
-          <LoadingSpinner size="lg" className="mx-auto mb-4" />
-          {loadingMessage && (
-            <p className="text-sec-600">{loadingMessage}</p>
-          )}
-        </div>
-      </div>
+      <p className="grid place-items-center text-center size-full">
+        <LoadingSpinner
+          size="lg"/><br />
+        {loadingMessage || 'Loading...'}
+        </p>
     );
   }
 

package/src/components/Select/Select.tsx

@@ -40,20 +40,20 @@ import { getTextContent } from "./utils/text";
  * Provides select dropdown functionality with search, keyboard navigation, and accessibility.
  * 
  * @param props - Select configuration
- * @param ref - Forwarded ref to the form element
+ * @param ref - Forwarded ref to the fieldset element
  * @returns The rendered select component
  */
-export const Select = React.forwardRef<HTMLFormElement, SelectProps & UseSelectStateProps>(
+export const Select = React.forwardRef<HTMLFieldSetElement, SelectProps & UseSelectStateProps>(
   ({ 
     children,
     className,
     direction = 'down',
     ...selectProps
   }, ref) => {
-    const internalRef = React.useRef<HTMLFormElement>(null);
+    const internalRef = React.useRef<HTMLFieldSetElement>(null);
     const selectRef = React.useMemo(() => {
       if (ref && typeof ref === 'object' && 'current' in ref) {
-        return ref as React.RefObject<HTMLFormElement | null>;
+        return ref as React.RefObject<HTMLFieldSetElement | null>;
       }
       return internalRef;
     }, [ref]);
@@ -201,20 +201,16 @@ export const Select = React.forwardRef<HTMLFormElement, SelectProps & UseSelectS
     }), [state, actions, registerItem, unregisterItem, direction]);
 
     return (
-      <form
+      <fieldset
         ref={selectRef}
-        className={cn("relative", className)}
+        className={cn("relative border-0 p-0 m-0", className)}
         data-value={state.value}
         data-testid="select-root"
-        onSubmit={(e) => {
-          e.preventDefault();
-          e.stopPropagation();
-        }}
       >
         <SelectContext.Provider value={contextValue}>
           {children}
         </SelectContext.Provider>
-      </form>
+      </fieldset>
     );
   }
 );
@@ -304,6 +300,18 @@ export const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerPr
       ...props
     };
 
+    // Call all hooks unconditionally at the top level
+    // Hooks must be called in the same order on every render
+    // Simple ref forwarding - must be called before any early returns
+    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]);
+
+    // Early return after all hooks have been called
     if (asChild) {
       const childElement = children as React.ReactElement<{ children?: React.ReactNode; [key: string]: unknown }>;
       const childChildren = React.Children.toArray(childElement.props.children);
@@ -340,16 +348,6 @@ 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={handleRef}
@@ -574,6 +572,8 @@ export const SelectItem = React.forwardRef<HTMLLIElement, SelectItemProps>(
     
     const handleMouseDown = (e: React.MouseEvent) => {
       if (!disabled) {
+        // CRITICAL FIX: Prevent event from bubbling to avoid interference with table row interactions
+        e.stopPropagation();
         const event = new CustomEvent('selectItemMouseDown', { detail: { value } });
         document.dispatchEvent(event);
       }
@@ -581,6 +581,8 @@ export const SelectItem = React.forwardRef<HTMLLIElement, SelectItemProps>(
 
     const handleClick = (e: React.MouseEvent) => {
       if (!disabled) {
+        // CRITICAL FIX: Prevent event from bubbling to avoid interference with table row clicks
+        e.stopPropagation();
         if (onClick) {
           onClick(e);
         }

package/src/components/Select/types.ts

@@ -74,7 +74,7 @@ export interface SelectContextValue extends SelectState {
  */
 export interface SelectProps
   extends Omit<
-    React.HTMLAttributes<HTMLFormElement>,
+    React.HTMLAttributes<HTMLFieldSetElement>,
     "onChange" | "onKeyDown" | "onFocus" | "onBlur"
   > {
   children: React.ReactNode;

package/src/components/UserMenu/UserMenu.test.tsx

@@ -21,7 +21,7 @@ vi.mock('lucide-react', () => ({
 
 // Mock the PasswordChangeForm component
 vi.mock('../PasswordChange/PasswordChangeForm', () => ({
-  PasswordChangeForm: ({ onSubmit }: { onSubmit: (values: { newPassword: string; confirmPassword: string }) => Promise<{ error?: { message?: string; code?: string } }> }) => {
+  PasswordChangeForm: ({ onSubmit, onSuccess }: { onSubmit: (values: { newPassword: string; confirmPassword: string }) => Promise<{ error?: { message?: string; code?: string } }>; onSuccess?: () => void }) => {
     const [isSubmitting, setIsSubmitting] = React.useState(false);
     const [error, setError] = React.useState<string | null>(null);
     
@@ -33,6 +33,9 @@ vi.mock('../PasswordChange/PasswordChangeForm', () => ({
         const result = await onSubmit({ newPassword: 'newpass123', confirmPassword: 'newpass123' });
         if (result.error) {
           setError(result.error.message);
+        } else {
+          // Call onSuccess on successful password change
+          onSuccess?.();
         }
       } catch (err) {
         const errorObj = err instanceof Error ? err : new Error('An unexpected error occurred');
@@ -92,9 +95,7 @@ vi.mock('../Select', () => ({
 // Mock the Dialog components
 vi.mock('../Dialog', () => ({
   Dialog: ({ children, open, onOpenChange }: { children: React.ReactNode; open: boolean; onOpenChange: (open: boolean) => void }) => (
-    <div data-testid="dialog" data-open={open}>
-      {children}
-    </div>
+    open ? <div data-testid="dialog" role="dialog" data-open={open}>{children}</div> : null
   ),
   DialogContent: ({ children, className }: { children: React.ReactNode; className?: string }) => (
     <div data-testid="dialog-content" className={className}>
@@ -109,12 +110,17 @@ vi.mock('../Dialog', () => ({
   DialogTitle: ({ children }: { children: React.ReactNode }) => (
     <h2 data-testid="dialog-title">{children}</h2>
   ),
+  DialogDescription: ({ children }: { children: React.ReactNode }) => (
+    <p data-testid="dialog-description">{children}</p>
+  ),
   DialogTrigger: ({ children, asChild }: { children: React.ReactNode; asChild?: boolean }) => (
     <div data-testid="dialog-trigger">
       {asChild ? children : <button>{children}</button>}
     </div>
   ),
-  DialogOverlay: () => <div data-testid="dialog-overlay" />,
+  DialogClose: ({ children, onClick }: { children?: React.ReactNode; onClick?: () => void }) => (
+    <button data-testid="dialog-close" onClick={onClick}>{children || 'Close'}</button>
+  ),
 }));
 
 // Mock the Avatar component
@@ -412,6 +418,32 @@ describe('UserMenu Component', () => {
       });
     });
 
+    it('closes dialog when password change succeeds', async () => {
+      const user = createMockUser();
+      const handleChangePassword = vi.fn().mockResolvedValue({});
+      const userEventInstance = userEvent.setup();
+      
+      renderWithProviders(<UserMenu user={user} onChangePassword={handleChangePassword} />);
+      
+      const trigger = screen.getByRole('button', { name: 'Test User' });
+      await userEventInstance.click(trigger);
+      
+      const changePasswordButton = screen.getByTestId('select-item-change-password');
+      await userEventInstance.click(changePasswordButton);
+      
+      // Verify dialog is open
+      expect(screen.getByTestId('dialog-content')).toBeInTheDocument();
+      
+      const submitButton = screen.getByRole('button', { name: 'Change Password' });
+      await userEventInstance.click(submitButton);
+      
+      // Wait for dialog to close
+      await waitFor(() => {
+        const dialog = screen.queryByTestId('dialog-content');
+        expect(dialog).not.toBeInTheDocument();
+      }, { timeout: 3000 });
+    });
+
     it('keeps dialog open when password change fails', async () => {
       const user = createMockUser();
       const handleChangePassword = vi.fn().mockResolvedValue({ error: { message: 'Password too weak' } });
@@ -434,7 +466,7 @@ describe('UserMenu Component', () => {
         expect(screen.getByTestId('error-message')).toHaveTextContent('Password too weak');
       });
       
-      // Dialog should still be open
+      // Dialog should still be open (onSuccess should not be called when there's an error)
       expect(screen.getByTestId('dialog-content')).toBeInTheDocument();
     });
 

package/src/components/UserMenu/UserMenu.tsx

@@ -117,9 +117,7 @@ import {
   Dialog,
   DialogContent,
   DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-  DialogOverlay
+  DialogTitle
 } from '../Dialog';
 import { PasswordChangeForm, PasswordChangeFormError } from '../PasswordChange/PasswordChangeForm';
 import { Avatar } from '../Avatar';
@@ -144,8 +142,8 @@ export const UserMenu = React.memo<UserMenuProps>(function UserMenu({
   className,
   showAvatar = true,
 }) {
-  const [isPasswordDialogOpen, setPasswordDialogOpen] = useState(false);
-
+  // Call all hooks unconditionally at the top level
+  // Hooks must be called in the same order on every render
   const userInfo = useMemo(() => {
     if (!user) return null;
     return {
@@ -160,12 +158,23 @@ export const UserMenu = React.memo<UserMenuProps>(function UserMenu({
     if (onSignOut) await onSignOut();
   }, [onSignOut]);
 
+  // Password change dialog state and handlers - must be called before any early returns
+  const [isPasswordDialogOpen, setPasswordDialogOpen] = useState(false);
+
+  const handlePasswordChange = useCallback(async (newPassword: string, confirmPassword: string) => {
+    if (!onChangePassword) {
+      return { error: { message: 'Password change not configured' } };
+    }
+    return await onChangePassword(newPassword, confirmPassword);
+  }, [onChangePassword]);
+
+  // Early return after all hooks have been called
   if (!user || !userInfo) {
     return null; // Or a loading/login button
   }
 
   return (
-    <Dialog open={isPasswordDialogOpen} onOpenChange={setPasswordDialogOpen}>
+    <>
       <Select className={className}>
         <SelectTrigger asChild>
           <Button variant="outline" className="flex items-center gap-2" aria-label={userInfo.displayName}>
@@ -185,42 +194,38 @@ export const UserMenu = React.memo<UserMenuProps>(function UserMenu({
           <SelectLabel className="font-normal">
             <li className="pt-2">
           {userInfo.displayName}<br/>
-              <span className="text-muted-foreground">{userInfo.email}</span>
+              <small>{userInfo.email}</small>
             </li>
           </SelectLabel>
           <SelectSeparator />
-          <DialogTrigger asChild>
-            <SelectItem value="change-password">
-              <KeyRound className="mr-2 size-4" />
-              <span>Change Password</span>
-            </SelectItem>
-          </DialogTrigger>
+          <SelectItem 
+            value="change-password"
+            onClick={() => setPasswordDialogOpen(true)}
+          >
+            <KeyRound className="inline-block mr-2 size-4" />
+            Change Password
+          </SelectItem>
           <SelectItem value="sign-out" onClick={handleSignOut}>
-            <LogOut className="mr-2 size-4" />
-            <span>Sign out</span>
+            <LogOut className="inline-block mr-2 size-4" />
+            Sign out
           </SelectItem>
         </SelectContent>
       </Select>
       
-      <DialogOverlay />
-      <DialogContent className={className}>
-        <DialogHeader>
-          <DialogTitle>Change Password</DialogTitle>
-        </DialogHeader>
-        <PasswordChangeForm
-          onSubmit={async ({ newPassword, confirmPassword }) => {
-            if (onChangePassword) {
-              const { error } = await onChangePassword(newPassword, confirmPassword);
-              if (!error) {
-                setPasswordDialogOpen(false);
-              }
-              return { error };
-            }
-            return {};
-          }}
-        />
-      </DialogContent>
-    </Dialog>
+      <Dialog open={isPasswordDialogOpen} onOpenChange={setPasswordDialogOpen}>
+        <DialogContent persistOpenState={false}>
+          <DialogHeader>
+            <DialogTitle>Change Password</DialogTitle>
+          </DialogHeader>
+          <PasswordChangeForm
+            onSubmit={async ({ newPassword, confirmPassword }) => {
+              return await handlePasswordChange(newPassword, confirmPassword);
+            }}
+            onSuccess={() => setPasswordDialogOpen(false)}
+          />
+        </DialogContent>
+      </Dialog>
+    </>
   );
 });
 

package/src/components/index.ts

@@ -84,7 +84,6 @@ export {
 export {
   Dialog,
   DialogPortal,
-  DialogOverlay,
   DialogTrigger,
   DialogClose,
   DialogContent,
@@ -98,11 +97,11 @@ export type {
   DialogProps,
   DialogTriggerProps,
   DialogContentProps,
-  DialogOverlayProps,
+  DialogPortalProps,
+  DialogCloseProps,
   DialogHeaderProps,
   DialogFooterProps,
-  DialogTitleProps,
-  DialogDescriptionProps,
+  DialogBodyProps,
   DialogSize
 } from './Dialog/Dialog';
 

package/src/eslint-rules/index.cjs

@@ -0,0 +1,22 @@
+/**
+ * Main entry point for pace-core ESLint rules
+ * @package @jmruthers/pace-core
+ * @module ESLintRules
+ * 
+ * This module exports all pace-core compliance ESLint rules organized by category.
+ */
+
+const complianceRules = require('./rules/compliance.cjs');
+const componentRules = require('./rules/components.cjs');
+const rbacRules = require('./rules/rbac.cjs');
+const importRules = require('./rules/imports.cjs');
+
+module.exports = {
+  rules: {
+    ...complianceRules.rules,
+    ...componentRules.rules,
+    ...rbacRules.rules,
+    ...importRules.rules,
+  }
+};
+