@jmruthers/pace-core 0.5.68 → 0.5.69

package/src/components/Select/Select.tsx

@@ -437,7 +437,10 @@ export const SelectContent = React.forwardRef<HTMLUListElement, SelectContentPro
         return React.Children.map(nodes, (child) => {
           if (!React.isValidElement(child)) return child;
 
-          if (child.type === SelectItem) {
+          // Check if child is a SelectItem by looking for the value prop
+          const isSelectItem = child.props && 'value' in child.props;
+          
+          if (isSelectItem) {
             const childText = React.Children.toArray(child.props.children).join(' ').toLowerCase();
             const searchLower = searchTerm.toLowerCase();
             
@@ -447,7 +450,7 @@ export const SelectContent = React.forwardRef<HTMLUListElement, SelectContentPro
             return null;
           }
 
-          if (child.props.children) {
+          if (child.props && child.props.children) {
             const filteredChildChildren = filterChildren(child.props.children);
             if (React.Children.count(filteredChildChildren) > 0) {
               return React.cloneElement(child, {}, filteredChildChildren);

package/src/components/Select/hooks.ts

@@ -0,0 +1,254 @@
+/**
+ * @file Select Hooks - Custom hooks for Select component state management
+ * @package @jmruthers/pace-core
+ * @module Components/Select/Hooks
+ * @since 0.4.0
+ *
+ * Custom hooks for Select component following SOLID principles:
+ * - Single Responsibility: Each hook handles one concern
+ * - Open/Closed: Easy to extend without modification
+ * - Dependency Inversion: Abstractions over concrete implementations
+ */
+
+import * as React from "react";
+
+// ============================================================================
+// TYPES AND INTERFACES
+// ============================================================================
+
+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;
+}
+
+export interface UseSelectStateProps {
+  value?: string;
+  defaultValue?: string;
+  selectedText?: string;
+  open?: boolean;
+  defaultOpen?: boolean;
+  disabled?: boolean;
+  onValueChange?: (value: string) => void;
+  onOpenChange?: (open: boolean) => void;
+}
+
+// ============================================================================
+// STATE MANAGEMENT HOOK
+// ============================================================================
+
+export const useSelectState = ({
+  value: controlledValue,
+  defaultValue = '',
+  selectedText: controlledSelectedText,
+  open: controlledOpen,
+  defaultOpen = false,
+  disabled = false,
+  onValueChange,
+  onOpenChange,
+}: UseSelectStateProps) => {
+  // Internal state for uncontrolled mode
+  const [internalValue, setInternalValue] = React.useState(defaultValue);
+  const [internalSelectedText, setInternalSelectedText] = React.useState('');
+  const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
+
+  // Computed values (controlled vs uncontrolled)
+  const value = controlledValue !== undefined ? controlledValue : internalValue;
+  const selectedText = controlledSelectedText !== undefined ? controlledSelectedText : internalSelectedText;
+  const open = controlledOpen !== undefined ? controlledOpen : internalOpen;
+
+  // Actions
+  const setValue = React.useCallback((newValue: string, newText: string) => {
+    if (controlledValue === undefined) {
+      setInternalValue(newValue);
+      setInternalSelectedText(newText);
+    }
+    onValueChange?.(newValue);
+  }, [controlledValue, onValueChange]);
+
+  const setOpen = React.useCallback((newOpen: boolean) => {
+    if (disabled) return;
+    
+    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 };
+};
+
+// ============================================================================
+// EVENT HANDLING HOOK
+// ============================================================================
+
+export interface UseSelectEventsProps {
+  state: SelectState;
+  actions: SelectActions;
+  selectRef: React.RefObject<HTMLElement>;
+}
+
+export const useSelectEvents = ({ state, actions, selectRef }: UseSelectEventsProps) => {
+  const [isSelecting, setIsSelecting] = React.useState(false);
+
+  // Handle click outside to close dropdown
+  React.useEffect(() => {
+    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 (state.open && selectElement && !selectElement.contains(event.target as Node) && !isSelectItem && !isSearchInput && !isSelectContent && !isSelecting) {
+        actions.setOpen(false);
+      }
+    };
+
+    if (state.open) {
+      document.addEventListener('mousedown', handleClickOutside);
+      return () => {
+        document.removeEventListener('mousedown', handleClickOutside);
+      };
+    }
+  }, [state.open, actions, selectRef, isSelecting]);
+
+  // Handle SelectItem mousedown events
+  React.useEffect(() => {
+    let timeoutId: NodeJS.Timeout | null = null;
+    let isMounted = true;
+    
+    const handleSelectItemMouseDown = () => {
+      if (!isMounted) return;
+      
+      setIsSelecting(true);
+      timeoutId = setTimeout(() => {
+        if (isMounted) {
+          setIsSelecting(false);
+        }
+      }, 150);
+    };
+
+    document.addEventListener('selectItemMouseDown', handleSelectItemMouseDown as EventListener);
+    return () => {
+      isMounted = false;
+      document.removeEventListener('selectItemMouseDown', handleSelectItemMouseDown as EventListener);
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+    };
+  }, []);
+
+  return { isSelecting };
+};
+
+// ============================================================================
+// SEARCH FUNCTIONALITY HOOK
+// ============================================================================
+
+export interface UseSelectSearchProps {
+  children: React.ReactNode;
+  searchable?: boolean;
+  searchTerm?: string;
+  onSearchChange?: (term: string) => void;
+}
+
+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]);
+
+  // Filter children based on search term
+  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;
+
+        // Check if this is a SelectItem by looking for the data-testid or value prop
+        const isSelectItem = child.props && 
+          (child.props['data-testid'] === 'select-item' || 
+           child.props.value !== undefined);
+
+        if (isSelectItem) {
+          const childText = React.Children.toArray(child.props.children).join(' ').toLowerCase();
+          const searchLower = searchTerm.toLowerCase();
+          
+          if (childText.includes(searchLower)) {
+            return child;
+          }
+          return null;
+        }
+
+        if (child.props.children) {
+          const filteredChildChildren = filterChildren(child.props.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/Switch/Switch.test.tsx

@@ -12,11 +12,7 @@ import { Switch } from './Switch';
 import { renderWithProviders } from '../../__tests__/helpers/test-utils';
 
 describe('Switch Component', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  describe('Rendering', () => {
+    describe('Rendering', () => {
     it('renders with default props', () => {
       renderWithProviders(<Switch />);
       const switchElement = screen.getByRole('switch');