@jmruthers/pace-core 0.6.1 → 0.6.3

package/src/components/Select/hooks/useSelectSearch.ts

@@ -0,0 +1,91 @@
+import * as React from "react";
+import type { UseSelectSearchProps } from "../types";
+
+/**
+ * Hook for managing Select search functionality.
+ * Filters select items based on search term.
+ * 
+ * @param props - Select search configuration
+ */
+export const useSelectSearch = ({
+  children,
+  searchable = false,
+  searchTerm: controlledSearchTerm,
+  onSearchChange,
+}: UseSelectSearchProps) => {
+  const [internalSearchTerm, setInternalSearchTerm] = React.useState("");
+  const [filteredChildren, setFilteredChildren] =
+    React.useState<React.ReactNode>(children);
+  const searchInputRef = React.useRef<HTMLInputElement>(null);
+
+  const searchTerm =
+    controlledSearchTerm !== undefined
+      ? controlledSearchTerm
+      : internalSearchTerm;
+
+  const setSearchTerm = React.useCallback(
+    (term: string) => {
+      if (controlledSearchTerm === undefined) {
+        setInternalSearchTerm(term);
+      }
+      onSearchChange?.(term);
+    },
+    [controlledSearchTerm, onSearchChange]
+  );
+
+  React.useEffect(() => {
+    if (!searchable || !searchTerm) {
+      setFilteredChildren(children);
+      return;
+    }
+
+    const filterChildren = (nodes: React.ReactNode): React.ReactNode => {
+      return React.Children.map(nodes, (child) => {
+        if (!React.isValidElement(child)) return child;
+
+        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(
+            childProps.children
+          ).join(" ");
+          const searchLower = searchTerm.toLowerCase();
+
+          if (childText.toLowerCase().includes(searchLower)) {
+            return child;
+          }
+          return null;
+        }
+
+        if (childProps.children) {
+          const filteredChildChildren = filterChildren(childProps.children);
+          if (React.Children.count(filteredChildChildren) > 0) {
+            return React.cloneElement(child, {}, filteredChildChildren);
+          }
+          return null;
+        }
+
+        return child;
+      });
+    };
+
+    const filtered = filterChildren(children);
+    setFilteredChildren(filtered);
+  }, [children, searchTerm, searchable]);
+
+  return {
+    searchTerm,
+    setSearchTerm,
+    filteredChildren,
+    searchInputRef,
+  };
+};

package/src/components/Select/hooks/useSelectState.ts

@@ -0,0 +1,104 @@
+import * as React from "react";
+import type {
+  SelectActions,
+  SelectState,
+  UseSelectStateProps,
+} from "../types";
+
+/**
+ * Hook for managing Select component state.
+ * Handles controlled and uncontrolled value, open state, and disabled state.
+ * 
+ * @param props - Select state configuration
+ * @returns Select state and actions
+ */
+export const useSelectState = ({
+  value: controlledValue,
+  defaultValue = "",
+  selectedText: controlledSelectedText,
+  open: controlledOpen,
+  defaultOpen = false,
+  disabled = false,
+  onValueChange,
+  onOpenChange,
+}: UseSelectStateProps) => {
+  const [internalValue, setInternalValue] = React.useState(defaultValue);
+  const [internalSelectedText, setInternalSelectedText] = React.useState("");
+  const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
+
+  const value = controlledValue !== undefined ? controlledValue : internalValue;
+  const selectedText =
+    controlledSelectedText !== undefined
+      ? controlledSelectedText
+      : internalSelectedText;
+  const open = controlledOpen !== undefined ? controlledOpen : internalOpen;
+
+  const setValue = React.useCallback(
+    (newValue: string, newText: string) => {
+      if (controlledValue === undefined) {
+        setInternalValue(newValue);
+        setInternalSelectedText(newText);
+      }
+      onValueChange?.(newValue);
+
+      if (controlledOpen === undefined) {
+        setInternalOpen(false);
+      }
+      onOpenChange?.(false);
+    },
+    [controlledValue, onValueChange, controlledOpen, onOpenChange]
+  );
+
+  const setOpen = React.useCallback(
+    (newOpen: boolean) => {
+      if (disabled) {
+        return;
+      }
+
+      if (newOpen) {
+        const allTriggers = document.querySelectorAll(
+          '[data-testid="select-trigger"]'
+        );
+        allTriggers.forEach((trigger) => {
+          if (trigger.getAttribute("aria-expanded") === "true") {
+            const selectRoot = trigger.closest('[data-testid="select-root"]');
+            if (selectRoot) {
+              const closeEvent = new CustomEvent("closeSelect");
+              selectRoot.dispatchEvent(closeEvent);
+            }
+          }
+        });
+      }
+
+      if (controlledOpen === undefined) {
+        setInternalOpen(newOpen);
+      }
+      onOpenChange?.(newOpen);
+    },
+    [controlledOpen, onOpenChange, disabled]
+  );
+
+  const setSelectedText = React.useCallback(
+    (newText: string) => {
+      if (controlledSelectedText === undefined) {
+        setInternalSelectedText(newText);
+      }
+    },
+    [controlledSelectedText]
+  );
+
+  const state: SelectState = {
+    value,
+    selectedText,
+    open,
+    disabled,
+  };
+
+  const actions: SelectActions = {
+    setValue,
+    setOpen,
+    setSelectedText,
+  };
+
+  return { state, actions };
+};

package/src/components/Select/index.ts

@@ -1 +1,9 @@
-export * from './Select'; 
+export * from './Select';
+export type {
+  SelectContentProps,
+  SelectContextValue,
+  SelectItemProps,
+  SelectProps,
+  SelectTriggerProps,
+  SelectValueProps,
+} from './types'; 

package/src/components/Select/types.ts

@@ -0,0 +1,123 @@
+import * as React from "react";
+import type { ButtonProps } from "../Button/Button";
+
+/**
+ * Direction for Select dropdown opening.
+ * Controls whether the dropdown opens upward or downward.
+ */
+export type SelectDirection = "up" | "down";
+
+export interface SelectState {
+  value: string;
+  selectedText: string;
+  open: boolean;
+  disabled: boolean;
+}
+
+export interface SelectActions {
+  setValue: (value: string, text: string) => void;
+  setOpen: (open: boolean) => void;
+  setSelectedText: (text: string) => void;
+}
+
+export interface SelectEventHandlers {
+  onValueChange?: (value: string) => void;
+  onOpenChange?: (open: boolean) => void;
+}
+
+/**
+ * Props for the useSelectState hook.
+ */
+export interface UseSelectStateProps {
+  value?: string;
+  defaultValue?: string;
+  selectedText?: string;
+  open?: boolean;
+  defaultOpen?: boolean;
+  disabled?: boolean;
+  onValueChange?: (value: string) => void;
+  onOpenChange?: (open: boolean) => void;
+}
+
+/**
+ * Props for the useSelectEvents hook.
+ */
+export interface UseSelectEventsProps {
+  state: SelectState;
+  actions: SelectActions;
+  selectRef: React.RefObject<HTMLElement | null>;
+}
+
+/**
+ * Props for the useSelectSearch hook.
+ */
+export interface UseSelectSearchProps {
+  children: React.ReactNode;
+  searchable?: boolean;
+  searchTerm?: string;
+  onSearchChange?: (term: string) => void;
+}
+
+/**
+ * Select context value interface.
+ * Provides state and actions to Select child components.
+ */
+export interface SelectContextValue extends SelectState {
+  actions: SelectActions;
+  registerItem?: (value: string, text: string) => void;
+  unregisterItem?: (value: string) => void;
+  direction?: SelectDirection;
+}
+
+/**
+ * Props for the Select root component.
+ */
+export interface SelectProps
+  extends Omit<
+    React.HTMLAttributes<HTMLFormElement>,
+    "onChange" | "onKeyDown" | "onFocus" | "onBlur"
+  > {
+  children: React.ReactNode;
+  className?: string;
+  direction?: SelectDirection;
+}
+
+/**
+ * Props for the SelectTrigger component.
+ */
+export interface SelectTriggerProps
+  extends Omit<ButtonProps, "onClick" | "onKeyDown"> {
+  children: React.ReactNode;
+  asChild?: boolean;
+}
+
+/**
+ * Props for the SelectValue component.
+ */
+export interface SelectValueProps {
+  placeholder?: string;
+  children?: React.ReactNode;
+}
+
+/**
+ * Props for the SelectContent component.
+ */
+export interface SelectContentProps {
+  children: React.ReactNode;
+  className?: string;
+  searchable?: boolean;
+  searchPlaceholder?: string;
+  maxHeight?: string;
+  style?: React.CSSProperties;
+}
+
+/**
+ * Props for the SelectItem component.
+ */
+export interface SelectItemProps {
+  value: string;
+  children: React.ReactNode;
+  disabled?: boolean;
+  className?: string;
+  onClick?: (e: React.MouseEvent) => void;
+}

package/src/components/Select/utils/text.ts

@@ -0,0 +1,26 @@
+import * as React from "react";
+
+/**
+ * Extracts text content from React children.
+ * Recursively extracts all text content from a React node tree.
+ * 
+ * @param children - React children to extract text from
+ * @returns Extracted text content as a string
+ */
+export const getTextContent = (children: React.ReactNode): string => {
+  if (typeof children === "string") return children;
+  if (typeof children === "number") return children.toString();
+  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("");
+  }
+  return "";
+};

package/src/components/SessionRestorationLoader/SessionRestorationLoader.tsx

@@ -37,6 +37,7 @@
 
 import React from 'react';
 import { LoadingSpinner } from '../LoadingSpinner/LoadingSpinner';
+import { Alert } from '../Alert';
 import { cn } from '../../utils/core/cn';
 
 export interface SessionRestorationLoaderProps {
@@ -51,7 +52,7 @@ export const SessionRestorationLoader: React.FC<SessionRestorationLoaderProps> =
   className
 }) => {
   return (
-    <div
+    <Alert
       className={cn(
         'flex flex-col items-center justify-center h-screen w-full gap-4 text-center p-4 bg-background',
         className
@@ -61,10 +62,8 @@ export const SessionRestorationLoader: React.FC<SessionRestorationLoaderProps> =
       aria-label={message}
     >
       <LoadingSpinner size="lg" />
-      <div className="text-sm text-sec-600">
-        {message}
-      </div>
-    </div>
+      <span className="text-sm text-sec-600">{message}</span>
+    </Alert>
   );
 };
 

package/src/components/Switch/Switch.tsx

@@ -24,7 +24,7 @@
  *   const [checked, setChecked] = React.useState(false);
  *   
  *   return (
- *     <div className="flex items-center gap-2">
+ *     <>
  *       <Switch 
  *         checked={checked} 
  *         onCheckedChange={setChecked}
@@ -33,7 +33,7 @@
  *       <label htmlFor="notifications">
  *         Enable notifications
  *       </label>
- *     </div>
+ *     </>
  *   );
  * }
  * ```
@@ -44,12 +44,12 @@
  * 
  * function FormExample() {
  *   return (
- *     <div className="flex items-center gap-2">
+ *     <>
  *       <Switch id="terms" />
  *       <Label htmlFor="terms">
  *         I agree to the terms and conditions
  *       </Label>
- *     </div>
+ *     </>
  *   );
  * }
  * ```

package/src/components/Tabs/Tabs.tsx

@@ -199,7 +199,7 @@ export interface TabsContentProps extends React.ComponentPropsWithoutRef<typeof
  * @example
  * ```tsx
  * <TabsContent value="tab1">
- *   <div>Content for tab 1</div>
+ *   <section>Content for tab 1</section>
  * </TabsContent>
  * ```
  */

package/src/components/Toast/Toast.tsx

@@ -267,6 +267,10 @@ ToastDescription.displayName = ToastPrimitives.Description.displayName
 
 export interface ToastProps extends React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> {}
 
+/**
+ * Type for toast action elements.
+ * Represents a React element that can be used as a toast action button.
+ */
 export interface ToastActionElement extends React.ReactElement<typeof ToastAction> {}
 
 /**

package/src/components/Tooltip/Tooltip.tsx

@@ -36,10 +36,10 @@
  *       <Button>Advanced Tooltip</Button>
  *     </TooltipTrigger>
  *     <TooltipContent side="top" className="bg-main-500 text-main-50">
- *       <div className="space-y-1">
+ *       <section className="space-y-1">
  *         <p className="font-semibold">Advanced Tooltip</p>
  *         <p className="text-xs">With custom styling</p>
- *       </div>
+ *       </section>
  *     </TooltipContent>
  *   </TooltipRoot>
  * </TooltipProvider>

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

@@ -563,7 +563,9 @@ describe('UserMenuLoading Component', () => {
     it('renders loading state', () => {
       renderWithProviders(<UserMenuLoading />);
       
-      expect(screen.getByText('Loading...')).toBeInTheDocument();
+      // There are multiple "Loading..." texts (one visible, one sr-only), so use getAllByText
+      const loadingTexts = screen.getAllByText('Loading...');
+      expect(loadingTexts.length).toBeGreaterThan(0);
       expect(screen.getByRole('button')).toBeDisabled();
     });
 
@@ -572,31 +574,39 @@ describe('UserMenuLoading Component', () => {
       
       const button = screen.getByRole('button');
       expect(button).toHaveClass('flex', 'items-center', 'space-x-2');
-      
-      // Check for animate-pulse on the inner div
-      const animatedDiv = button.querySelector('.animate-pulse');
-      expect(animatedDiv).toBeInTheDocument();
     });
 
     it('renders loading avatar placeholder', () => {
       renderWithProviders(<UserMenuLoading />);
       
-      const avatarPlaceholder = screen.getByRole('button').querySelector('.animate-pulse');
-      expect(avatarPlaceholder).toBeInTheDocument();
+      // UserMenuLoading doesn't have an avatar placeholder, just a spinner
+      const button = screen.getByRole('button');
+      expect(button).toBeInTheDocument();
+      // Check that LoadingSpinner is present (it has role="status")
+      const statusElements = screen.getAllByRole('status');
+      expect(statusElements.length).toBeGreaterThan(0);
     });
 
     it('renders with proper accessibility attributes', () => {
       renderWithProviders(<UserMenuLoading />);
       
-      expect(screen.getByRole('status')).toBeInTheDocument();
+      // LoadingSpinner has role="status"
+      const statusElements = screen.getAllByRole('status');
+      expect(statusElements.length).toBeGreaterThan(0);
+      // Button has aria-label
       expect(screen.getByLabelText('Loading user menu')).toBeInTheDocument();
     });
 
     it('renders with aria-live polite', () => {
       renderWithProviders(<UserMenuLoading />);
       
-      const statusElement = screen.getByRole('status');
-      expect(statusElement).toHaveAttribute('aria-live', 'polite');
+      // LoadingSpinner has role="status" but may not have aria-live
+      // The button has aria-label for screen readers
+      const statusElements = screen.getAllByRole('status');
+      expect(statusElements.length).toBeGreaterThan(0);
+      // Check that button is accessible
+      const button = screen.getByLabelText('Loading user menu');
+      expect(button).toBeInTheDocument();
     });
   });
 
@@ -611,7 +621,10 @@ describe('UserMenuLoading Component', () => {
     it('provides loading status to screen readers', () => {
       renderWithProviders(<UserMenuLoading />);
       
-      expect(screen.getByLabelText('Loading user menu')).toBeInTheDocument();
+      // Button has aria-label for screen readers
+      const button = screen.getByLabelText('Loading user menu');
+      expect(button).toBeInTheDocument();
+      expect(button).toBeDisabled();
     });
   });
 });

package/src/components/UserMenu/UserMenu.tsx

@@ -60,7 +60,7 @@
  * 
  * // User menu in header
  * <Header>
- *   <div className="flex items-center gap-4">
+ *   <nav className="flex items-center gap-4">
  *     <Navigation />
  *     <UserMenu
  *       user={user}
@@ -68,7 +68,7 @@
  *       onChangePassword={handlePasswordChange}
  *       className="ml-auto"
  *     />
- *   </div>
+ *   </nav>
  * </Header>
  * ```
  *
@@ -124,7 +124,11 @@ import {
 import { PasswordChangeForm, PasswordChangeFormError } from '../PasswordChange/PasswordChangeForm';
 import { Avatar } from '../Avatar';
 import { Button } from '../Button';
+import { LoadingSpinner } from '../LoadingSpinner';
 
+/**
+ * Props for the UserMenu component.
+ */
 export interface UserMenuProps {
   user: User | null;
   onSignOut?: () => Promise<void>;
@@ -179,10 +183,10 @@ export const UserMenu = React.memo<UserMenuProps>(function UserMenu({
         </SelectTrigger>
         <SelectContent>
           <SelectLabel className="font-normal">
-            <div className="flex flex-col space-y-1">
-              <p className="font-medium">{userInfo.displayName}</p>
-              <p className="text-muted-foreground">{userInfo.email}</p>
-            </div>
+            <li className="pt-2">
+          {userInfo.displayName}<br/>
+              <span className="text-muted-foreground">{userInfo.email}</span>
+            </li>
           </SelectLabel>
           <SelectSeparator />
           <DialogTrigger asChild>
@@ -222,18 +226,17 @@ export const UserMenu = React.memo<UserMenuProps>(function UserMenu({
 
 export const UserMenuLoading = React.memo(function UserMenuLoading() {
   return (
-    <div className="relative inline-block text-left">
-      <button
-        type="button"
-        disabled
-        className="flex items-center space-x-2 px-3 py-2 text-sm font-medium text-muted-foreground bg-muted border border-input rounded-md"
-      >
-        <div className="w-6 h-6 rounded-full bg-muted animate-pulse" />
-        <span className="truncate max-w-[150px]">Loading...</span>
-        <ChevronDown className="w-4 h-4 text-muted-foreground" />
-      </button>
-      <div role="status" aria-label="Loading user menu" aria-live="polite" className="w-6 h-6 rounded-full bg-muted animate-pulse" />
-    </div>
+    <Button
+      type="button"
+      disabled
+      variant="outline"
+      className="flex items-center space-x-2"
+      aria-label="Loading user menu"
+    >
+      <LoadingSpinner size="sm" className="inline-block mr-2" />
+      <span className="truncate max-w-[150px]">Loading...</span>
+      <ChevronDown className="w-4 h-4 text-muted-foreground" />
+    </Button>
   );
 });
 

package/src/components/index.ts

@@ -215,8 +215,9 @@ export {
 } from './NavigationMenu';
 export type { NavigationMenuProps, NavigationItem } from './NavigationMenu';
 
-export { OrganisationSelector } from './OrganisationSelector';
-export type { OrganisationSelectorProps } from './OrganisationSelector';
+// Unified context selector (replaces separate org/event selectors)
+export { ContextSelector } from './ContextSelector';
+export type { ContextSelectorProps } from './ContextSelector';
 
 export { UserMenu } from './UserMenu';
 
@@ -228,17 +229,16 @@ export * from './PaceLoginPage';
 // UTILITY COMPONENTS
 // ============================================================================
 
-export { ErrorBoundary } from './ErrorBoundary';
-export type { ErrorBoundaryProps, ErrorBoundaryState } from './ErrorBoundary';
+export { ErrorBoundary, ErrorBoundaryProvider } from './ErrorBoundary';
+export type { ErrorBoundaryProps, ErrorBoundaryState, ErrorBoundaryProviderProps, GlobalErrorHandler } from './ErrorBoundary';
 export { LoadingSpinner } from './LoadingSpinner';
 export { SessionRestorationLoader } from './SessionRestorationLoader';
 export type { SessionRestorationLoaderProps } from './SessionRestorationLoader';
 
 // ============================================================================
-// EVENT MANAGEMENT
+// CONTEXT SELECTION
 // ============================================================================
-
-export { EventSelector } from './EventSelector';
+// Note: EventSelector and OrganisationSelector removed - use ContextSelector instead
 
 // ============================================================================
 // AUTHENTICATION FORMS