@jmruthers/pace-core 0.6.5 → 0.6.7

package/src/components/Select/Select.tsx

@@ -40,20 +40,21 @@ 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',
+    showCheckmark = true,
     ...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]);
@@ -108,7 +109,7 @@ export const Select = React.forwardRef<HTMLFormElement, SelectProps & UseSelectS
       // Query the DOM for the SelectItem (li element) with matching value
       // Must be a select-item, not the trigger which also has data-value
       let selectItem = selectElement.querySelector(`[data-testid="select-item"][data-value="${state.value}"]`) as HTMLElement;
-      
+
       // If not found, try querying within content containers
       if (!selectItem) {
         const hiddenContent = selectElement.querySelector('[data-testid="select-content-hidden"]');
@@ -116,7 +117,7 @@ export const Select = React.forwardRef<HTMLFormElement, SelectProps & UseSelectS
           selectItem = hiddenContent.querySelector(`[data-testid="select-item"][data-value="${state.value}"]`) as HTMLElement;
         }
       }
-      
+
       // Try visible content as fallback
       if (!selectItem) {
         const visibleContent = selectElement.querySelector('[data-testid="select-content"]');
@@ -130,7 +131,7 @@ export const Select = React.forwardRef<HTMLFormElement, SelectProps & UseSelectS
         let textContent = selectItem.textContent?.trim() || '';
         // Remove any check mark icons or other decorators (basic cleanup)
         textContent = textContent.split('\n').map(line => line.trim()).filter(line => line).join(' ');
-        
+
         if (textContent) {
           actions.setSelectedText(textContent);
           // Also register it for future use
@@ -138,11 +139,11 @@ export const Select = React.forwardRef<HTMLFormElement, SelectProps & UseSelectS
           return;
         }
       }
-      
+
       // If not found and we have a content container, items might still be rendering
       // Don't clear selectedText in this case - let the MutationObserver or retry effect handle it
-      const hasContentContainer = selectElement.querySelector('[data-testid="select-content-hidden"]') || 
-                                   selectElement.querySelector('[data-testid="select-content"]');
+      const hasContentContainer = selectElement.querySelector('[data-testid="select-content-hidden"]') ||
+        selectElement.querySelector('[data-testid="select-content"]');
       if (!hasContentContainer) {
         // No content container means no items exist - clear selectedText
         actions.setSelectedText('');
@@ -198,23 +199,20 @@ export const Select = React.forwardRef<HTMLFormElement, SelectProps & UseSelectS
       registerItem,
       unregisterItem,
       direction,
-    }), [state, actions, registerItem, unregisterItem, direction]);
+      showCheckmark,
+    }), [state, actions, registerItem, unregisterItem, direction, showCheckmark]);
 
     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>
     );
   }
 );
@@ -239,14 +237,14 @@ export const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerPr
 
     // Use ref to store the latest handleClick to avoid re-creating the effect
     const handleClickRef = React.useRef<(e: React.MouseEvent) => void>(undefined);
-    
+
     const handleClick = React.useCallback((e: React.MouseEvent) => {
       if (disabled) {
         e.preventDefault();
         e.stopPropagation();
         return;
       }
-      
+
       e.preventDefault();
       e.stopPropagation();
       actions.setOpen(!open);
@@ -304,15 +302,27 @@ 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 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');
+          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;
       });
@@ -329,27 +339,17 @@ export const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerPr
         className: mergedClassName,
         children: hasChevron ? childChildren : [
           ...childChildren,
-          <ChevronDown 
+          <ChevronDown
             key="chevron-down"
             className={cn(
               "size-4 opacity-50 transition-transform pointer-events-none float-right",
               open && "rotate-180"
-            )} 
+            )}
           />
         ]
       });
     }
 
-
-    // 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}
@@ -382,11 +382,11 @@ export const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerPr
         {...props}
       >
         {children}
-        <ChevronDown 
+        <ChevronDown
           className={cn(
             "size-4 opacity-50 transition-transform pointer-events-none float-right",
             open && "rotate-180"
-          )} 
+          )}
         />
       </Button>
     );
@@ -411,8 +411,8 @@ export const SelectValue = React.forwardRef<HTMLSpanElement, SelectValueProps>(
     const { selectedText } = useSelectContext();
 
     return (
-      <span 
-        ref={ref} 
+      <span
+        ref={ref}
         data-testid="select-value"
         style={{ pointerEvents: 'none' }}
         className="pointer-events-none"
@@ -437,9 +437,9 @@ SelectValue.displayName = "SelectValue";
  * @returns The rendered select content
  */
 export const SelectContent = React.forwardRef<HTMLUListElement, SelectContentProps>(
-  ({ 
-    children, 
-    className, 
+  ({
+    children,
+    className,
     searchable = false,
     searchPlaceholder = "Search...",
     maxHeight = "max(20rem, 50vh)",
@@ -475,19 +475,19 @@ export const SelectContent = React.forwardRef<HTMLUListElement, SelectContentPro
     }
 
     const opensUpward = direction === 'up';
-    
+
     return (
       <ul
         ref={ref}
         className={cn(
           "absolute z-[99999] w-full overflow-y-auto border border-main-300 bg-main-50 shadow-lg",
           "list-none p-0 m-0",
-          opensUpward 
-            ? "rounded-t-md border-b-0" 
+          opensUpward
+            ? "rounded-t-md border-b-0"
             : "rounded-b-md border-t-0",
           className
         )}
-        style={{ 
+        style={{
           [opensUpward ? 'bottom' : 'top']: '100%',
           left: 0,
           right: 0,
@@ -500,38 +500,36 @@ export const SelectContent = React.forwardRef<HTMLUListElement, SelectContentPro
         role="listbox"
       >
         {searchable && (
-          <div className="p-2 border-b border-main-200">
-            <div className="relative">
-              <Search className="absolute left-2 top-1/2 transform -translate-y-1/2 size-4 text-main-400" />
-              <input
-                ref={searchInputRef}
-                type="text"
-                placeholder={searchPlaceholder}
-                value={searchTerm}
-                onChange={(e) => setSearchTerm(e.target.value)}
-                onKeyDown={(e) => {
-                  if (e.key === 'Escape') {
-                    e.preventDefault();
-                    setSearchTerm('');
-                  }
-                }}
-                className="w-full pl-8 pr-8 py-1 text-sm border border-main-200 rounded focus:outline-none focus:ring-2 focus:ring-main-500"
-                data-testid="select-search-input"
-                aria-label="Search options"
-              />
-              {searchTerm && (
-                <button
-                  type="button"
-                  onClick={() => setSearchTerm('')}
-                  className="absolute right-2 top-1/2 transform -translate-y-1/2 text-main-400 hover:text-main-600"
-                  data-testid="select-clear-search"
-                  aria-label="Clear search"
-                >
-                  <X className="size-4" />
-                </button>
-              )}
-            </div>
-          </div>
+          <li className="relative p-2 border-b border-main-200 sticky top-0 bg-main-50 z-10" data-testid="select-search-item">
+            <Search className="absolute left-2 top-1/2 transform -translate-y-1/2 size-4 text-main-400" />
+            <input
+              ref={searchInputRef}
+              type="text"
+              placeholder={searchPlaceholder}
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Escape') {
+                  e.preventDefault();
+                  setSearchTerm('');
+                }
+              }}
+              className="w-full pl-8 pr-8 py-1 text-sm border border-main-200 rounded focus:outline-none focus:ring-2 focus:ring-main-500"
+              data-testid="select-search-input"
+              aria-label="Search options"
+            />
+            {searchTerm && (
+              <button
+                type="button"
+                onClick={() => setSearchTerm('')}
+                className="absolute right-2 top-1/2 transform -translate-y-1/2 text-main-400 hover:text-main-600"
+                data-testid="select-clear-search"
+                aria-label="Clear search"
+              >
+                <X className="size-4" />
+              </button>
+            )}
+          </li>
         )}
         {filteredChildren}
       </ul>
@@ -553,9 +551,12 @@ SelectContent.displayName = "SelectContent";
  * @returns The rendered select item
  */
 export const SelectItem = React.forwardRef<HTMLLIElement, SelectItemProps>(
-  ({ value, children, disabled = false, className, onClick }, ref) => {
-    const { value: selectedValue, actions, registerItem, unregisterItem } = useSelectContext();
+  ({ value, children, disabled = false, className, onClick, showCheckmark: propShowCheckmark }, ref) => {
+    const { value: selectedValue, actions, registerItem, unregisterItem, showCheckmark: contextShowCheckmark = true } = useSelectContext();
     const isSelected = selectedValue === value;
+    
+    // Use prop if provided, otherwise use context value, default to true
+    const showCheckmark = propShowCheckmark ?? contextShowCheckmark;
 
     const itemText = getTextContent(children);
 
@@ -571,9 +572,11 @@ export const SelectItem = React.forwardRef<HTMLLIElement, SelectItemProps>(
         }
       };
     }, [value, itemText, registerItem, unregisterItem]);
-    
+
     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 +584,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);
         }
@@ -634,7 +639,7 @@ export const SelectItem = React.forwardRef<HTMLLIElement, SelectItemProps>(
         tabIndex={disabled ? -1 : 0}
       >
         {children}
-        {isSelected && (
+        {isSelected && showCheckmark && (
           <Check className="absolute right-2 size-4 flex-shrink-0 mt-0.5" />
         )}
       </li>
@@ -649,18 +654,24 @@ SelectItem.displayName = "SelectItem";
 
 /**
  * Select group component.
- * Groups related select items together.
+ * Groups related select items together using a nested list structure.
  * 
  * @param props - Select group configuration
- * @param ref - Forwarded ref to the div element
+ * @param ref - Forwarded ref to the ul element
  * @returns The rendered select group
  */
-export const SelectGroup = React.forwardRef<HTMLDivElement, { children: React.ReactNode; className?: string }>(
+export const SelectGroup = React.forwardRef<HTMLUListElement, { children: React.ReactNode; className?: string }>(
   ({ children, className }, ref) => {
     return (
-      <div ref={ref} className={cn("p-1", className)} data-testid="select-group">
-        {children}
-      </div>
+      <li className="list-none" data-testid="select-group-wrapper">
+        <ul
+          ref={ref}
+          className={cn("p-1 list-none m-0", className)}
+          data-testid="select-group"
+        >
+          {children}
+        </ul>
+      </li>
     );
   }
 );
@@ -671,15 +682,15 @@ SelectGroup.displayName = "SelectGroup";
  * Provides a label for a group of select items.
  * 
  * @param props - Select label configuration
- * @param ref - Forwarded ref to the div element
+ * @param ref - Forwarded ref to the li element
  * @returns The rendered select label
  */
-export const SelectLabel = React.forwardRef<HTMLDivElement, { children: React.ReactNode; className?: string }>(
+export const SelectLabel = React.forwardRef<HTMLLIElement, { children: React.ReactNode; className?: string }>(
   ({ children, className }, ref) => {
     return (
-      <div ref={ref} className={cn("px-2 py-1.5 text-sm font-semibold", className)} data-testid="select-label">
+      <li ref={ref} className={cn("px-2 py-1.5 text-sm font-semibold", className)} data-testid="select-label">
         {children}
-      </div>
+      </li>
     );
   }
 );
@@ -690,13 +701,13 @@ SelectLabel.displayName = "SelectLabel";
  * Provides visual separation between groups of select items.
  * 
  * @param props - Select separator configuration
- * @param ref - Forwarded ref to the div element
+ * @param ref - Forwarded ref to the hr element
  * @returns The rendered select separator
  */
-export const SelectSeparator = React.forwardRef<HTMLDivElement, { className?: string }>(
+export const SelectSeparator = React.forwardRef<HTMLHRElement, { className?: string }>(
   ({ className }, ref) => {
     return (
-      <div
+      <hr
         ref={ref}
         className={cn("my-1 h-px bg-sec-200", className)}
         data-testid="select-separator"

package/src/components/Select/types.ts

@@ -67,6 +67,7 @@ export interface SelectContextValue extends SelectState {
   registerItem?: (value: string, text: string) => void;
   unregisterItem?: (value: string) => void;
   direction?: SelectDirection;
+  showCheckmark?: boolean;
 }
 
 /**
@@ -74,12 +75,13 @@ export interface SelectContextValue extends SelectState {
  */
 export interface SelectProps
   extends Omit<
-    React.HTMLAttributes<HTMLFormElement>,
+    React.HTMLAttributes<HTMLFieldSetElement>,
     "onChange" | "onKeyDown" | "onFocus" | "onBlur"
   > {
   children: React.ReactNode;
   className?: string;
   direction?: SelectDirection;
+  showCheckmark?: boolean;
 }
 
 /**
@@ -120,4 +122,5 @@ export interface SelectItemProps {
   disabled?: boolean;
   className?: string;
   onClick?: (e: React.MouseEvent) => void;
+  showCheckmark?: boolean;
 }

package/src/components/UserMenu/UserMenu.tsx

@@ -142,6 +142,8 @@ export const UserMenu = React.memo<UserMenuProps>(function UserMenu({
   className,
   showAvatar = true,
 }) {
+  // 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 {
@@ -156,11 +158,7 @@ export const UserMenu = React.memo<UserMenuProps>(function UserMenu({
     if (onSignOut) await onSignOut();
   }, [onSignOut]);
 
-  if (!user || !userInfo) {
-    return null; // Or a loading/login button
-  }
-
-  // Password change dialog state and handlers (moved closer to Dialog usage)
+  // 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) => {
@@ -170,6 +168,11 @@ export const UserMenu = React.memo<UserMenuProps>(function UserMenu({
     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 (
     <>
       <Select className={className}>
@@ -210,7 +213,7 @@ export const UserMenu = React.memo<UserMenuProps>(function UserMenu({
       </Select>
       
       <Dialog open={isPasswordDialogOpen} onOpenChange={setPasswordDialogOpen}>
-        <DialogContent>
+        <DialogContent persistOpenState={false}>
           <DialogHeader>
             <DialogTitle>Change Password</DialogTitle>
           </DialogHeader>

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

@@ -137,7 +137,7 @@ describe('Service Hooks', () => {
     it('should return AuthService from context', () => {
       const mockService = createMockService('auth');
       const wrapper = ({ children }: { children: React.ReactNode }) => (
-        <div>{children}</div>
+        <section>{children}</section>
       );
 
       // Mock the context with proper structure
@@ -150,7 +150,7 @@ describe('Service Hooks', () => {
 
     it('should throw error when used outside provider', () => {
       const wrapper = ({ children }: { children: React.ReactNode }) => (
-        <div>{children}</div>
+        <section>{children}</section>
       );
 
       // Mock the context to return null
@@ -164,7 +164,7 @@ describe('Service Hooks', () => {
     it('should subscribe to service changes', () => {
       const mockService = createMockService('auth');
       const wrapper = ({ children }: { children: React.ReactNode }) => (
-        <div>{children}</div>
+        <section>{children}</section>
       );
 
       mockUseContext.mockReturnValue({ authService: mockService });
@@ -179,7 +179,7 @@ describe('Service Hooks', () => {
     it('should return OrganisationService from context', () => {
       const mockService = createMockService('organisation');
       const wrapper = ({ children }: { children: React.ReactNode }) => (
-        <div>{children}</div>
+        <section>{children}</section>
       );
 
       mockUseContext.mockReturnValue({ organisationService: mockService });
@@ -191,7 +191,7 @@ describe('Service Hooks', () => {
 
     it('should throw error when used outside provider', () => {
       const wrapper = ({ children }: { children: React.ReactNode }) => (
-        <div>{children}</div>
+        <section>{children}</section>
       );
 
       mockUseContext.mockReturnValue(null);
@@ -206,7 +206,7 @@ describe('Service Hooks', () => {
     it('should return EventService from context', () => {
       const mockService = createMockService('event');
       const wrapper = ({ children }: { children: React.ReactNode }) => (
-        <div>{children}</div>
+        <section>{children}</section>
       );
 
       mockUseContext.mockReturnValue({ eventService: mockService });
@@ -218,7 +218,7 @@ describe('Service Hooks', () => {
 
     it('should throw error when used outside provider', () => {
       const wrapper = ({ children }: { children: React.ReactNode }) => (
-        <div>{children}</div>
+        <section>{children}</section>
       );
 
       mockUseContext.mockReturnValue(null);
@@ -233,7 +233,7 @@ describe('Service Hooks', () => {
     it('should return InactivityService from context', () => {
       const mockService = createMockService('inactivity');
       const wrapper = ({ children }: { children: React.ReactNode }) => (
-        <div>{children}</div>
+        <section>{children}</section>
       );
 
       vi.spyOn(React, 'useContext').mockReturnValue({ inactivityService: mockService });
@@ -245,7 +245,7 @@ describe('Service Hooks', () => {
 
     it('should throw error when used outside provider', () => {
       const wrapper = ({ children }: { children: React.ReactNode }) => (
-        <div>{children}</div>
+        <section>{children}</section>
       );
 
       mockUseContext.mockReturnValue(null);
@@ -276,7 +276,7 @@ describe('Service Hooks', () => {
       };
 
       const wrapper = ({ children }: { children: React.ReactNode }) => (
-        <div>{children}</div>
+        <section>{children}</section>
       );
 
       mockUseContext.mockReturnValue({ authService: mockService });
@@ -327,7 +327,7 @@ describe('Service Hooks', () => {
       };
 
       const wrapper = ({ children }: { children: React.ReactNode }) => (
-        <div>{children}</div>
+        <section>{children}</section>
       );
 
       mockUseContext.mockReturnValue({ rbacService: mockService });
@@ -382,7 +382,7 @@ describe('Service Hooks', () => {
       };
 
       const wrapper = ({ children }: { children: React.ReactNode }) => (
-        <div>{children}</div>
+        <section>{children}</section>
       );
 
       mockUseContext.mockReturnValue({ organisationService: mockService });
@@ -434,7 +434,7 @@ describe('Service Hooks', () => {
       };
 
       const wrapper = ({ children }: { children: React.ReactNode }) => (
-        <div>{children}</div>
+        <section>{children}</section>
       );
 
       mockUseContext.mockReturnValue({ eventService: mockService });
@@ -527,7 +527,7 @@ describe('Service Hooks', () => {
       };
 
       const wrapper = ({ children }: { children: React.ReactNode }) => (
-        <div>{children}</div>
+        <section>{children}</section>
       );
 
       // Test individual hooks
@@ -570,7 +570,7 @@ describe('Service Hooks', () => {
       };
 
       const wrapper = ({ children }: { children: React.ReactNode }) => (
-        <div>{children}</div>
+        <section>{children}</section>
       );
 
       mockUseContext.mockReturnValue({ authService: mockService });
@@ -600,7 +600,7 @@ describe('Service Hooks', () => {
       };
 
       const wrapper = ({ children }: { children: React.ReactNode }) => (
-        <div>{children}</div>
+        <section>{children}</section>
       );
 
       mockUseContext.mockReturnValue({ authService: mockService });