@jmruthers/pace-core 0.2.4

package/src/components/Select/Select.tsx

@@ -0,0 +1,654 @@
+/**
+ * @file Select Component - Simple HTML Structure
+ * @package @jmruthers/pace-core
+ * @module Components/Select
+ * @since 0.3.0
+ *
+ * A simple select component using semantic HTML structure
+ * with proper DOM nesting and accessibility.
+ *
+ * Features:
+ * - Semantic HTML with <form> + <button> + <ul> + <li>
+ * - Proper DOM nesting (no button inside select)
+ * - Built on pace-core Button component for consistency
+ * - Simple positioning and styling
+ * - Better accessibility and SEO
+ * - Backward compatible API
+ */
+
+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";
+
+// ============================================================================
+// TYPES AND INTERFACES
+// ============================================================================
+
+export interface SelectContextValue {
+  value: string;
+  selectedText: string;
+  onValueChange: (value: string, text: string) => void;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  placeholder?: string;
+  disabled?: boolean;
+}
+
+export interface SelectProps extends Omit<React.HTMLAttributes<HTMLFormElement>, 'onChange' | 'onKeyDown' | 'onFocus' | 'onBlur'> {
+  value?: string;
+  defaultValue?: string;
+  selectedText?: string;
+  onValueChange?: (value: string) => void;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  disabled?: boolean;
+  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>(
+  ({ 
+    value: controlledValue, 
+    defaultValue, 
+    selectedText: controlledSelectedText,
+    onValueChange, 
+    open: controlledOpen, 
+    defaultOpen = false, 
+    onOpenChange,
+    disabled = false,
+    children,
+    className,
+    ...restProps
+  }, ref) => {
+    const [internalValue, setInternalValue] = React.useState(defaultValue || '');
+    const [internalSelectedText, setInternalSelectedText] = React.useState('');
+    const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
+    const [isSelecting, setIsSelecting] = React.useState(false);
+    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]);
+
+    const value = controlledValue !== undefined ? controlledValue : internalValue;
+    const open = controlledOpen !== undefined ? controlledOpen : internalOpen;
+
+    const handleValueChange = React.useCallback((newValue: string, newText: string) => {
+      if (controlledValue === undefined) {
+        setInternalValue(newValue);
+        setInternalSelectedText(newText);
+      }
+      onValueChange?.(newValue);
+      // Close dropdown after selection
+      if (controlledOpen === undefined) {
+        setInternalOpen(false);
+      }
+      onOpenChange?.(false);
+    }, [controlledValue, onValueChange, controlledOpen, onOpenChange]);
+
+    const handleOpenChange = React.useCallback((newOpen: boolean) => {
+      if (disabled) return;
+      
+      // Close all other select dropdowns when opening this one
+      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 && selectRoot !== selectRef.current) {
+              const closeEvent = new CustomEvent('closeSelect');
+              selectRoot.dispatchEvent(closeEvent);
+            }
+          }
+        });
+      }
+      
+      if (controlledOpen === undefined) {
+        setInternalOpen(newOpen);
+      }
+      onOpenChange?.(newOpen);
+    }, [controlledOpen, onOpenChange, disabled, selectRef]);
+
+    // Listen for close events from other selects
+    React.useEffect(() => {
+      const handleCloseSelect = () => {
+        if (controlledOpen === undefined) {
+          setInternalOpen(false);
+        }
+        onOpenChange?.(false);
+      };
+
+      const selectElement = selectRef.current;
+      if (selectElement) {
+        selectElement.addEventListener('closeSelect', handleCloseSelect);
+        return () => {
+          selectElement.removeEventListener('closeSelect', handleCloseSelect);
+        };
+      }
+    }, [controlledOpen, onOpenChange, selectRef]);
+
+    // Listen for SelectItem mousedown events to set selecting flag
+    React.useEffect(() => {
+      let timeoutId: NodeJS.Timeout | null = null;
+      
+      const handleSelectItemMouseDown = () => {
+        setIsSelecting(true);
+        timeoutId = setTimeout(() => {
+          setIsSelecting(false);
+        }, 150);
+      };
+
+      document.addEventListener('selectItemMouseDown', handleSelectItemMouseDown as EventListener);
+      return () => {
+        document.removeEventListener('selectItemMouseDown', handleSelectItemMouseDown as EventListener);
+        if (timeoutId) {
+          clearTimeout(timeoutId);
+        }
+      };
+    }, []);
+
+    // Global click handler to close dropdown when clicking outside
+    React.useEffect(() => {
+      const handleClickOutside = (event: MouseEvent) => {
+        const selectElement = selectRef.current;
+        const clickedElement = event.target as Element;
+        const isSelectItem = clickedElement?.closest('[data-testid="select-item"]');
+        
+        if (open && selectElement && !selectElement.contains(event.target as Node) && !isSelectItem && !isSelecting) {
+          if (controlledOpen === undefined) {
+            setInternalOpen(false);
+          }
+          onOpenChange?.(false);
+        }
+      };
+
+      if (open) {
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+          document.removeEventListener('mousedown', handleClickOutside);
+        };
+      }
+    }, [open, controlledOpen, onOpenChange, selectRef, isSelecting]);
+
+    // Find selected text when value changes
+    React.useEffect(() => {
+      if (value && !internalSelectedText) {
+        // Find the SelectItem with the matching value and extract its text
+        const selectElement = selectRef.current;
+        if (selectElement) {
+          const selectItem = selectElement.querySelector(`[data-value="${value}"]`);
+          if (selectItem) {
+            const textContent = selectItem.textContent?.trim() || '';
+            if (textContent) {
+              setInternalSelectedText(textContent);
+            }
+          }
+        }
+      }
+    }, [value, internalSelectedText, selectRef]);
+
+    const contextValue = React.useMemo<SelectContextValue>(() => ({
+      value,
+      selectedText: controlledSelectedText || internalSelectedText,
+      onValueChange: handleValueChange,
+      open,
+      onOpenChange: handleOpenChange,
+      disabled,
+    }), [value, controlledSelectedText, internalSelectedText, handleValueChange, open, handleOpenChange, disabled]);
+
+    return (
+      <form
+        ref={selectRef}
+        className={cn("relative", className)}
+        data-value={value}
+        data-testid="select-root"
+        {...restProps}
+      >
+        <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, onOpenChange, disabled, value } = useSelectContext();
+
+    const handleClick = () => {
+      onOpenChange(!open);
+    };
+
+    const handleKeyDown = (e: React.KeyboardEvent) => {
+      if (disabled) return;
+
+      switch (e.key) {
+        case 'Enter':
+        case ' ':
+        case 'ArrowDown':
+        case 'ArrowUp':
+          e.preventDefault();
+          onOpenChange(true);
+          break;
+        case 'Escape':
+          if (open) {
+            e.preventDefault();
+            onOpenChange(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, onOpenChange, onValueChange } = useSelectContext();
+    const [searchTerm, setSearchTerm] = React.useState('');
+    const [filteredChildren, setFilteredChildren] = React.useState<React.ReactNode>(children);
+    const searchInputRef = React.useRef<HTMLInputElement>(null);
+
+    // 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;
+
+          if (child.type === SelectItem) {
+            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]);
+
+    // 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, onValueChange } = 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);
+        }
+        onValueChange(value, itemText);
+      }
+    };
+
+    const handleKeyDown = (e: React.KeyboardEvent) => {
+      if (disabled) return;
+
+      switch (e.key) {
+        case 'Enter':
+        case ' ':
+          e.preventDefault();
+          if (onClick) {
+            onClick(e as any);
+          }
+          onValueChange(value, itemText);
+          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";