@jmruthers/pace-core 0.5.68 → 0.5.69

package/src/components/Select/Select.refactored.tsx

@@ -0,0 +1,497 @@
+/**
+ * @file Select Component - Refactored SOLID Implementation
+ * @package @jmruthers/pace-core
+ * @module Components/Select
+ * @since 0.4.0
+ *
+ * Refactored Select component following SOLID principles:
+ * - Single Responsibility: Each component has one clear purpose
+ * - Open/Closed: Easy to extend without modification
+ * - Liskov Substitution: Components can be substituted
+ * - Interface Segregation: Small, focused interfaces
+ * - Dependency Inversion: Depends on abstractions, not concretions
+ */
+
+import * as React from "react";
+import { Search, X, ChevronDown, Check } from "lucide-react";
+import { Button, type ButtonProps } from "../Button/Button";
+import { cn } from "../../utils/cn";
+import { 
+  useSelectState, 
+  useSelectEvents, 
+  useSelectSearch,
+  type SelectState,
+  type SelectActions,
+  type UseSelectStateProps
+} from "./hooks";
+
+// ============================================================================
+// TYPES AND INTERFACES
+// ============================================================================
+
+export interface SelectContextValue extends SelectState {
+  actions: SelectActions;
+}
+
+export interface SelectProps extends Omit<React.HTMLAttributes<HTMLFormElement>, 'onChange' | 'onKeyDown' | 'onFocus' | 'onBlur'> {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export interface SelectTriggerProps extends Omit<ButtonProps, 'onClick' | 'onKeyDown'> {
+  children: React.ReactNode;
+  asChild?: boolean;
+}
+
+export interface SelectValueProps {
+  placeholder?: string;
+  children?: React.ReactNode;
+}
+
+export interface SelectContentProps {
+  children: React.ReactNode;
+  className?: string;
+  searchable?: boolean;
+  searchPlaceholder?: string;
+  maxHeight?: string;
+  style?: React.CSSProperties;
+}
+
+export interface SelectItemProps {
+  value: string;
+  children: React.ReactNode;
+  disabled?: boolean;
+  className?: string;
+  onClick?: (e: React.MouseEvent) => void;
+}
+
+// ============================================================================
+// CONTEXT
+// ============================================================================
+
+const SelectContext = React.createContext<SelectContextValue | null>(null);
+
+const useSelectContext = () => {
+  const context = React.useContext(SelectContext);
+  if (!context) {
+    throw new Error('Select components must be used within a Select');
+  }
+  return context;
+};
+
+// ============================================================================
+// ROOT COMPONENT
+// ============================================================================
+
+export const Select = React.forwardRef<HTMLFormElement, SelectProps & UseSelectStateProps>(
+  ({ 
+    children,
+    className,
+    ...selectProps
+  }, ref) => {
+    const internalRef = React.useRef<HTMLFormElement>(null);
+    const selectRef = React.useMemo(() => {
+      if (ref && typeof ref === 'object' && 'current' in ref) {
+        return ref as React.RefObject<HTMLFormElement>;
+      }
+      return internalRef;
+    }, [ref]);
+
+    // Use custom hooks for state management
+    const { state, actions } = useSelectState(selectProps);
+    const { isSelecting } = useSelectEvents({ state, actions, selectRef });
+
+    // Find selected text when value changes
+    React.useEffect(() => {
+      if (state.value && !state.selectedText) {
+        // Find the SelectItem with the matching value and extract its text
+        const selectElement = selectRef.current;
+        if (selectElement) {
+          const selectItem = selectElement.querySelector(`[data-value="${state.value}"]`);
+          if (selectItem) {
+            const textContent = selectItem.textContent?.trim() || '';
+            if (textContent) {
+              actions.setSelectedText(textContent);
+            }
+          }
+        }
+      }
+    }, [state.value, state.selectedText, actions, selectRef]);
+
+    const contextValue = React.useMemo<SelectContextValue>(() => ({
+      ...state,
+      actions,
+    }), [state, actions]);
+
+    return (
+      <form
+        ref={selectRef}
+        className={cn("relative", className)}
+        data-value={state.value}
+        data-testid="select-root"
+      >
+        <SelectContext.Provider value={contextValue}>
+          {children}
+        </SelectContext.Provider>
+      </form>
+    );
+  }
+);
+Select.displayName = "Select";
+
+// ============================================================================
+// TRIGGER COMPONENT
+// ============================================================================
+
+export const SelectTrigger = React.forwardRef<HTMLButtonElement, SelectTriggerProps>(
+  ({ children, className, variant = "outline", size = "default", asChild = false, ...props }, ref) => {
+    const { open, disabled, value, actions } = useSelectContext();
+
+    const handleClick = () => {
+      actions.setOpen(!open);
+    };
+
+    const handleKeyDown = (e: React.KeyboardEvent) => {
+      if (disabled) return;
+
+      switch (e.key) {
+        case 'Enter':
+        case ' ':
+        case 'ArrowDown':
+        case 'ArrowUp':
+          e.preventDefault();
+          actions.setOpen(true);
+          break;
+        case 'Escape':
+          if (open) {
+            e.preventDefault();
+            actions.setOpen(false);
+          }
+          break;
+      }
+    };
+
+    const triggerProps = {
+      ref,
+      type: "button" as const,
+      role: "combobox",
+      "aria-expanded": open,
+      "aria-haspopup": "listbox",
+      disabled,
+      className: cn(
+        "!justify-between relative w-full",
+        "[&_svg]:pointer-events-none",
+        open && "!rounded-b-none !border-b-0",
+        className
+      ),
+      style: {
+        ...props.style,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap'
+      },
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      "data-testid": "select-trigger",
+      "data-value": value,
+      ...props
+    };
+
+    if (asChild) {
+      const childChildren = React.Children.toArray((children as React.ReactElement).props.children);
+      const hasChevron = childChildren.some(child => 
+        React.isValidElement(child) && 
+        (child.type === ChevronDown || 
+         (child.type === 'svg' && child.props['data-testid'] === 'chevron-down') ||
+         (typeof child === 'object' && 'type' in child && typeof child.type === 'function' && child.type.name === 'ChevronDown'))
+      );
+
+      return React.cloneElement(children as React.ReactElement, {
+        ...triggerProps,
+        children: hasChevron ? childChildren : [
+          ...childChildren,
+          <ChevronDown 
+            key="chevron-down"
+            className={cn(
+              "h-4 w-4 opacity-50 transition-transform pointer-events-none float-right",
+              open && "rotate-180"
+            )} 
+          />
+        ]
+      });
+    }
+
+    return (
+      <Button
+        ref={ref}
+        type="button"
+        role="combobox"
+        aria-expanded={open}
+        aria-haspopup="listbox"
+        disabled={disabled}
+        variant={variant}
+        size={size}
+        className={cn(
+          "!justify-between relative w-full",
+          "[&_svg]:pointer-events-none",
+          open && "!rounded-b-none !border-b-0",
+          className
+        )}
+        style={{
+          ...props.style,
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap'
+        }}
+        onClick={handleClick}
+        onKeyDown={handleKeyDown}
+        data-testid="select-trigger"
+        data-value={value}
+        {...props}
+      >
+        {children}
+        <ChevronDown 
+          className={cn(
+            "h-4 w-4 opacity-50 transition-transform pointer-events-none float-right",
+            open && "rotate-180"
+          )} 
+        />
+      </Button>
+    );
+  }
+);
+SelectTrigger.displayName = "SelectTrigger";
+
+// ============================================================================
+// VALUE COMPONENT
+// ============================================================================
+
+export const SelectValue = React.forwardRef<HTMLSpanElement, SelectValueProps>(
+  ({ placeholder = "Select an option...", children }, ref) => {
+    const { selectedText } = useSelectContext();
+
+    return (
+      <span ref={ref} data-testid="select-value">
+        {children || (selectedText ? selectedText : placeholder)}
+      </span>
+    );
+  }
+);
+SelectValue.displayName = "SelectValue";
+
+// ============================================================================
+// CONTENT COMPONENT
+// ============================================================================
+
+export const SelectContent = React.forwardRef<HTMLUListElement, SelectContentProps>(
+  ({ 
+    children, 
+    className, 
+    searchable = false,
+    searchPlaceholder = "Search...",
+    maxHeight = "20rem",
+    style
+  }, ref) => {
+    const { open, actions } = useSelectContext();
+    const { searchTerm, setSearchTerm, filteredChildren, searchInputRef } = useSelectSearch({
+      children,
+      searchable,
+    });
+
+    // Focus search input when dropdown opens
+    React.useEffect(() => {
+      if (open && searchable && searchInputRef.current) {
+        searchInputRef.current.focus();
+      }
+    }, [open, searchable]);
+
+    if (!open) {
+      return null;
+    }
+
+    return (
+      <ul
+        ref={ref}
+        className={cn(
+          "absolute z-[99999] w-full overflow-y-auto rounded-b-md border border-t-0 border-main-300 bg-main-50 shadow-lg",
+          "list-none p-0 m-0",
+          className
+        )}
+        style={{ 
+          top: '100%',
+          left: 0,
+          right: 0,
+          maxHeight,
+          position: 'absolute',
+          zIndex: 99999,
+          ...style
+        }}
+        data-testid="select-content"
+        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 h-4 w-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="h-4 w-4" />
+                </button>
+              )}
+            </div>
+          </div>
+        )}
+        {filteredChildren}
+      </ul>
+    );
+  }
+);
+SelectContent.displayName = "SelectContent";
+
+// ============================================================================
+// ITEM COMPONENT
+// ============================================================================
+
+export const SelectItem = React.forwardRef<HTMLLIElement, SelectItemProps>(
+  ({ value, children, disabled = false, className, onClick }, ref) => {
+    const { value: selectedValue, actions } = useSelectContext();
+    const isSelected = selectedValue === value;
+    
+    // Extract text content from children for display
+    const getTextContent = (children: React.ReactNode): string => {
+      if (typeof children === 'string') return children;
+      if (typeof children === 'number') return children.toString();
+      if (React.isValidElement(children) && children.props.children) {
+        return getTextContent(children.props.children);
+      }
+      if (Array.isArray(children)) {
+        return children.map(getTextContent).join('');
+      }
+      return '';
+    };
+    
+    const itemText = getTextContent(children);
+    
+    const handleMouseDown = (e: React.MouseEvent) => {
+      if (!disabled) {
+        const event = new CustomEvent('selectItemMouseDown', { detail: { value } });
+        document.dispatchEvent(event);
+      }
+    };
+
+    const handleClick = (e: React.MouseEvent) => {
+      if (!disabled) {
+        if (onClick) {
+          onClick(e);
+        }
+        actions.setValue(value, itemText);
+        actions.setOpen(false);
+      }
+    };
+
+    const handleKeyDown = (e: React.KeyboardEvent) => {
+      if (disabled) return;
+
+      switch (e.key) {
+        case 'Enter':
+        case ' ':
+          e.preventDefault();
+          if (onClick) {
+            onClick(e as any);
+          }
+          actions.setValue(value, itemText);
+          actions.setOpen(false);
+          break;
+      }
+    };
+
+    return (
+      <li
+        ref={ref}
+        data-value={value}
+        className={cn(
+          "relative flex cursor-pointer select-none items-start rounded-sm px-2 py-1.5 text-sm outline-none",
+          "hover:bg-main-100 focus:bg-main-100",
+          "break-words min-w-0",
+          isSelected && "bg-main-100 text-main-900",
+          disabled && "pointer-events-none opacity-50",
+          className
+        )}
+        onMouseDown={handleMouseDown}
+        onClick={handleClick}
+        onKeyDown={handleKeyDown}
+        data-testid="select-item"
+        data-disabled={disabled ? "true" : undefined}
+        role="option"
+        aria-selected={isSelected}
+      >
+        {children}
+        {isSelected && (
+          <Check className="absolute right-2 h-4 w-4 flex-shrink-0 mt-0.5" />
+        )}
+      </li>
+    );
+  }
+);
+SelectItem.displayName = "SelectItem";
+
+// ============================================================================
+// ADDITIONAL COMPONENTS (for backward compatibility)
+// ============================================================================
+
+export const SelectGroup = React.forwardRef<HTMLDivElement, { children: React.ReactNode; className?: string }>(
+  ({ children, className }, ref) => {
+    return (
+      <div ref={ref} className={cn("p-1", className)} data-testid="select-group">
+        {children}
+      </div>
+    );
+  }
+);
+SelectGroup.displayName = "SelectGroup";
+
+export const SelectLabel = React.forwardRef<HTMLDivElement, { 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">
+        {children}
+      </div>
+    );
+  }
+);
+SelectLabel.displayName = "SelectLabel";
+
+export const SelectSeparator = React.forwardRef<HTMLDivElement, { className?: string }>(
+  ({ className }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn("my-1 h-px bg-sec-200", className)}
+        data-testid="select-separator"
+      />
+    );
+  }
+);
+SelectSeparator.displayName = "SelectSeparator";

package/src/components/Select/Select.test.tsx

@@ -5,7 +5,7 @@
  */
 
 import React from 'react';
-import { screen, waitFor } from '@testing-library/react';
+import { screen, waitFor, act } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { 
@@ -66,11 +66,7 @@ describe('Select Component', () => {
     );
   };
 
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  describe('Basic Rendering', () => {
+    describe('Basic Rendering', () => {
     it('renders with default props', () => {
       renderSelect();
       
@@ -366,7 +362,7 @@ describe('Select Component', () => {
       
       await waitFor(() => {
         expect(screen.queryByTestId('select-content')).not.toBeInTheDocument();
-      });
+      }, { interval: 10 });
     });
 
     it('updates value on item selection', async () => {
@@ -397,7 +393,7 @@ describe('Select Component', () => {
       
       await waitFor(() => {
         expect(screen.queryByTestId('select-content')).not.toBeInTheDocument();
-      });
+      }, { interval: 10 });
     });
   });
 
@@ -459,7 +455,7 @@ describe('Select Component', () => {
       
       await waitFor(() => {
         expect(screen.queryByTestId('select-content')).not.toBeInTheDocument();
-      });
+      }, { interval: 10 });
     });
 
     it('selects item on click', async () => {
@@ -513,29 +509,40 @@ describe('Select Component', () => {
       expect(screen.getByPlaceholderText('Search...')).toBeInTheDocument();
     });
 
-    it.skip('filters options based on search term', async () => {
+    it('filters options based on search term', async () => {
       const user = userEvent.setup();
+      const options = [
+        { value: 'apple', label: 'Apple' },
+        { value: 'banana', label: 'Banana' },
+        { value: 'cherry', label: 'Cherry' },
+      ];
+      
       renderWithProviders(
-        <Select>
+        <Select defaultOpen>
           <SelectTrigger>
-            <SelectValue />
+            <SelectValue placeholder="Select an option..." />
           </SelectTrigger>
           <SelectContent searchable>
-            <SelectItem value="apple">Apple</SelectItem>
-            <SelectItem value="banana">Banana</SelectItem>
-            <SelectItem value="cherry">Cherry</SelectItem>
+            {options.map(option => (
+              <SelectItem key={option.value} value={option.value}>
+                {option.label}
+              </SelectItem>
+            ))}
           </SelectContent>
         </Select>
       );
       
       const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
       
-      // Wait for dropdown to open and search input to be available
-      await waitFor(() => {
-        expect(screen.getByTestId('select-content')).toBeInTheDocument();
-      });
+      // Get search input - should be visible once dropdown opens
+      expect(screen.getByTestId('select-search-input')).toBeInTheDocument();
+      
+      // Verify options are visible
+      expect(screen.getByText('Apple')).toBeInTheDocument();
+      expect(screen.getByText('Banana')).toBeInTheDocument();
+      expect(screen.getByText('Cherry')).toBeInTheDocument();
       
+      // Type in search input to filter
       const searchInput = screen.getByTestId('select-search-input');
       await user.type(searchInput, 'app');
       
@@ -547,10 +554,10 @@ describe('Select Component', () => {
       });
     });
 
-    it.skip('shows clear search button when search term exists', async () => {
+    it('shows clear search button when search term exists', async () => {
       const user = userEvent.setup();
       renderWithProviders(
-        <Select>
+        <Select defaultOpen>
           <SelectTrigger>
             <SelectValue />
           </SelectTrigger>
@@ -560,14 +567,6 @@ describe('Select Component', () => {
         </Select>
       );
       
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-      
-      // Wait for dropdown to open and search input to be available
-      await waitFor(() => {
-        expect(screen.getByTestId('select-content')).toBeInTheDocument();
-      });
-      
       const searchInput = screen.getByTestId('select-search-input');
       await user.type(searchInput, 'test');
       
@@ -577,10 +576,10 @@ describe('Select Component', () => {
       });
     });
 
-    it.skip('clears search when clear button is clicked', async () => {
+    it('clears search when clear button is clicked', async () => {
       const user = userEvent.setup();
       renderWithProviders(
-        <Select>
+        <Select defaultOpen>
           <SelectTrigger>
             <SelectValue />
           </SelectTrigger>
@@ -591,14 +590,6 @@ describe('Select Component', () => {
         </Select>
       );
       
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-      
-      // Wait for dropdown to open and search input to be available
-      await waitFor(() => {
-        expect(screen.getByTestId('select-content')).toBeInTheDocument();
-      });
-      
       const searchInput = screen.getByTestId('select-search-input');
       await user.type(searchInput, 'app');
       
@@ -607,7 +598,11 @@ describe('Select Component', () => {
         expect(screen.queryByText('Banana')).not.toBeInTheDocument();
       });
       
-      const clearButton = screen.getByTestId('select-clear-search');
+      // Wait for clear button to appear
+      const clearButton = await waitFor(() => {
+        return screen.getByTestId('select-clear-search');
+      });
+      
       await user.click(clearButton);
       
       // Wait for search to be cleared and all options to be visible again
@@ -617,10 +612,10 @@ describe('Select Component', () => {
       });
     });
 
-    it.skip('clears search on Escape key', async () => {
+    it('clears search on Escape key', async () => {
       const user = userEvent.setup();
       renderWithProviders(
-        <Select>
+        <Select defaultOpen>
           <SelectTrigger>
             <SelectValue />
           </SelectTrigger>
@@ -631,16 +626,14 @@ describe('Select Component', () => {
         </Select>
       );
       
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
+      const searchInput = screen.getByTestId('select-search-input');
+      await user.type(searchInput, 'app');
       
-      // Wait for dropdown to open and search input to be available
+      // Wait for filtering to complete
       await waitFor(() => {
-        expect(screen.getByTestId('select-content')).toBeInTheDocument();
+        expect(screen.queryByText('Banana')).not.toBeInTheDocument();
       });
       
-      const searchInput = screen.getByTestId('select-search-input');
-      await user.type(searchInput, 'app');
       await user.keyboard('{Escape}');
       
       // Wait for search to be cleared and all options to be visible again