@papernote/ui 1.3.1 → 1.6.0

package/src/components/Select.tsx

@@ -1,5 +1,7 @@
 import React, { useState, useRef, useEffect, forwardRef, useImperativeHandle, useId } from 'react';
 import { Check, ChevronDown, Search, Loader2, X } from 'lucide-react';
+import { createPortal } from 'react-dom';
+import { useIsMobile } from '../hooks/useResponsive';
 
 /**
  * Single option in a select dropdown
@@ -77,13 +79,31 @@ export interface SelectProps {
   virtualHeight?: string;
   /** Height of each option row in pixels (default: 42) */
   virtualItemHeight?: number;
+  /** Size of the select trigger - 'lg' provides 44px touch-friendly target */
+  size?: 'sm' | 'md' | 'lg';
+  /** Mobile display mode - 'auto' uses BottomSheet on mobile, 'dropdown' always uses dropdown, 'native' uses native select on mobile */
+  mobileMode?: 'auto' | 'dropdown' | 'native';
 }
 
+// Size classes for trigger button
+const sizeClasses = {
+  sm: 'h-8 text-sm py-1',
+  md: 'h-10 text-base py-2',
+  lg: 'h-12 text-base py-3 min-h-touch', // 44px touch target
+};
+
+// Size classes for options
+const optionSizeClasses = {
+  sm: 'py-2 text-sm',
+  md: 'py-2.5 text-sm',
+  lg: 'py-3.5 text-base min-h-touch', // 44px touch target for mobile
+};
+
 /**
- * Select - Dropdown select component with search, groups, and virtual scrolling
+ * Select - Dropdown select component with search, groups, virtual scrolling, and mobile support
  *
  * A feature-rich select component supporting flat or grouped options, search/filter,
- * option creation, virtual scrolling for large lists, and clear functionality.
+ * option creation, virtual scrolling for large lists, and mobile-optimized BottomSheet display.
  *
  * @example Basic select
  * ```tsx
@@ -101,6 +121,16 @@ export interface SelectProps {
  * />
  * ```
  *
+ * @example Mobile-optimized with large touch targets
+ * ```tsx
+ * <Select
+ *   options={options}
+ *   size="lg"
+ *   mobileMode="auto"
+ *   placeholder="Select..."
+ * />
+ * ```
+ *
  * @example Searchable with groups
  * ```tsx
  * const groups = [
@@ -159,6 +189,8 @@ const Select = forwardRef<SelectHandle, SelectProps>(
     virtualized = false,
     virtualHeight = '300px',
     virtualItemHeight = 42,
+    size = 'md',
+    mobileMode = 'auto',
   } = props;
   const [isOpen, setIsOpen] = useState(false);
   const [searchQuery, setSearchQuery] = useState('');
@@ -167,7 +199,17 @@ const Select = forwardRef<SelectHandle, SelectProps>(
   const selectRef = useRef<HTMLDivElement>(null);
   const buttonRef = useRef<HTMLButtonElement>(null);
   const searchInputRef = useRef<HTMLInputElement>(null);
+  const mobileSearchInputRef = useRef<HTMLInputElement>(null);
   const listRef = useRef<HTMLDivElement>(null);
+  const nativeSelectRef = useRef<HTMLSelectElement>(null);
+
+  // Detect mobile viewport
+  const isMobile = useIsMobile();
+  const useMobileSheet = mobileMode === 'auto' && isMobile;
+  const useNativeSelect = mobileMode === 'native' && isMobile;
+  
+  // Auto-size for mobile
+  const effectiveSize = isMobile && size === 'md' ? 'lg' : size;
   
   // Generate unique IDs for ARIA
   const labelId = useId();
@@ -268,8 +310,10 @@ const Select = forwardRef<SelectHandle, SelectProps>(
     setIsOpen(false);
   };
 
-  // Handle click outside
+  // Handle click outside (desktop dropdown only)
   useEffect(() => {
+    if (useMobileSheet) return; // Mobile sheet handles its own closing
+    
     const handleClickOutside = (event: MouseEvent) => {
       if (selectRef.current && !selectRef.current.contains(event.target as Node)) {
         setIsOpen(false);
@@ -284,14 +328,46 @@ const Select = forwardRef<SelectHandle, SelectProps>(
     return () => {
       document.removeEventListener('mousedown', handleClickOutside);
     };
-  }, [isOpen]);
+  }, [isOpen, useMobileSheet]);
 
   // Focus search input when opened
   useEffect(() => {
-    if (isOpen && searchable && searchInputRef.current) {
-      searchInputRef.current.focus();
+    if (isOpen && searchable) {
+      if (useMobileSheet && mobileSearchInputRef.current) {
+        // Slight delay for mobile sheet animation
+        setTimeout(() => mobileSearchInputRef.current?.focus(), 100);
+      } else if (searchInputRef.current) {
+        searchInputRef.current.focus();
+      }
     }
-  }, [isOpen, searchable]);
+  }, [isOpen, searchable, useMobileSheet]);
+
+  // Lock body scroll when mobile sheet is open
+  useEffect(() => {
+    if (useMobileSheet && isOpen) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = '';
+    }
+    return () => {
+      document.body.style.overflow = '';
+    };
+  }, [isOpen, useMobileSheet]);
+
+  // Handle escape key for mobile sheet
+  useEffect(() => {
+    if (!useMobileSheet || !isOpen) return;
+
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        setIsOpen(false);
+        setSearchQuery('');
+      }
+    };
+
+    document.addEventListener('keydown', handleEscape);
+    return () => document.removeEventListener('keydown', handleEscape);
+  }, [isOpen, useMobileSheet]);
 
   const handleSelect = (optionValue: string) => {
     onChange?.(optionValue);
@@ -299,6 +375,190 @@ const Select = forwardRef<SelectHandle, SelectProps>(
     setSearchQuery('');
   };
 
+  const handleClose = () => {
+    setIsOpen(false);
+    setSearchQuery('');
+  };
+
+  // Render option button (shared between desktop and mobile)
+  const renderOption = (option: SelectOption, isSelected: boolean, mobile = false) => (
+    <button
+      key={option.value}
+      type="button"
+      onClick={() => !option.disabled && handleSelect(option.value)}
+      disabled={option.disabled}
+      className={`
+        w-full flex items-center justify-between px-4 transition-colors
+        ${mobile ? optionSizeClasses.lg : optionSizeClasses[effectiveSize]}
+        ${isSelected ? 'bg-accent-50 text-accent-900' : 'text-ink-700'}
+        ${option.disabled ? 'opacity-40 cursor-not-allowed' : 'hover:bg-paper-50 active:bg-paper-100 cursor-pointer'}
+      `}
+      role="option"
+      aria-selected={isSelected}
+    >
+      <span className="flex items-center gap-2">
+        {option.icon && <span>{option.icon}</span>}
+        {option.label}
+      </span>
+      {isSelected && <Check className={`${mobile ? 'h-5 w-5' : 'h-4 w-4'} text-accent-600`} />}
+    </button>
+  );
+
+  // Render options list content (shared between desktop and mobile)
+  const renderOptionsContent = (mobile = false) => {
+    if (loading) {
+      return (
+        <div className="px-4 py-8 flex items-center justify-center" role="status" aria-live="polite">
+          <Loader2 className="h-5 w-5 animate-spin text-ink-500" />
+          <span className="ml-2 text-sm text-ink-500">Loading...</span>
+        </div>
+      );
+    }
+    
+    if (filteredOptions.length === 0 && filteredGroups.length === 0 && !showCreateOption) {
+      return (
+        <div className="px-4 py-3 text-sm text-ink-500 text-center" role="status" aria-live="polite">
+          No options found
+        </div>
+      );
+    }
+
+    return (
+      <>
+        {/* Create new option */}
+        {showCreateOption && (
+          <button
+            type="button"
+            onClick={handleCreateOption}
+            className={`
+              w-full flex items-center px-4 text-accent-700 hover:bg-accent-50 transition-colors border-b border-paper-200
+              ${mobile ? 'py-3.5 text-base' : 'py-2.5 text-sm'}
+            `}
+          >
+            <span className="font-medium">Create "{searchQuery}"</span>
+          </button>
+        )}
+
+        {/* Virtual scrolling container */}
+        {useVirtualScrolling ? (
+          <div style={{ height: totalHeight, position: 'relative' }}>
+            <div style={{ transform: `translateY(${offsetY}px)` }}>
+              {visibleItems.map((item) => {
+                const option = item.option;
+                const isSelected = option.value === value;
+                const key = `${item.type}-${item.groupIndex}-${item.optionIndex}-${option.value}`;
+
+                return (
+                  <button
+                    key={key}
+                    type="button"
+                    onClick={() => !option.disabled && handleSelect(option.value)}
+                    disabled={option.disabled}
+                    style={{ height: mobile ? '56px' : `${virtualItemHeight}px` }}
+                    className={`
+                      w-full flex items-center justify-between px-4 transition-colors
+                      ${mobile ? 'text-base' : 'text-sm'}
+                      ${isSelected ? 'bg-accent-50 text-accent-900' : 'text-ink-700'}
+                      ${option.disabled ? 'opacity-40 cursor-not-allowed' : 'hover:bg-paper-50 cursor-pointer'}
+                    `}
+                    role="option"
+                    aria-selected={isSelected}
+                  >
+                    <span className="flex items-center gap-2">
+                      {option.icon && <span>{option.icon}</span>}
+                      {option.label}
+                    </span>
+                    {isSelected && <Check className={`${mobile ? 'h-5 w-5' : 'h-4 w-4'} text-accent-600`} />}
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+        ) : (
+          <>
+            {/* Render flat options */}
+            {filteredOptions.map((option) => renderOption(option, option.value === value, mobile))}
+
+            {/* Render grouped options */}
+            {filteredGroups.map((group) => (
+              <div key={group.label}>
+                {/* Group Header */}
+                <div className={`
+                  px-4 font-semibold text-ink-500 uppercase tracking-wider bg-paper-50 border-t border-b border-paper-200
+                  ${mobile ? 'py-2.5 text-xs' : 'py-2 text-xs'}
+                `}>
+                  {group.label}
+                </div>
+
+                {/* Group Options */}
+                {group.options.map((option) => renderOption(option, option.value === value, mobile))}
+              </div>
+            ))}
+          </>
+        )}
+      </>
+    );
+  };
+
+  // Native select for mobile (optional)
+  if (useNativeSelect) {
+    return (
+      <div className="w-full">
+        {label && (
+          <label id={labelId} className="label">
+            {label}
+          </label>
+        )}
+
+        <div className="relative">
+          <select
+            ref={nativeSelectRef}
+            value={value || ''}
+            onChange={(e) => onChange?.(e.target.value)}
+            disabled={disabled}
+            className={`
+              input w-full appearance-none pr-10
+              ${sizeClasses[effectiveSize]}
+              ${error ? 'border-error-400 focus:border-error-400 focus:ring-error-400' : ''}
+              ${disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'}
+            `}
+            aria-labelledby={label ? labelId : undefined}
+            aria-invalid={error ? 'true' : undefined}
+            aria-describedby={error ? errorId : (helperText ? helperTextId : undefined)}
+          >
+            <option value="" disabled>{placeholder}</option>
+            {options.map((opt) => (
+              <option key={opt.value} value={opt.value} disabled={opt.disabled}>
+                {opt.label}
+              </option>
+            ))}
+            {groups.map((group) => (
+              <optgroup key={group.label} label={group.label}>
+                {group.options.map((opt) => (
+                  <option key={opt.value} value={opt.value} disabled={opt.disabled}>
+                    {opt.label}
+                  </option>
+                ))}
+              </optgroup>
+            ))}
+          </select>
+          <ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 h-5 w-5 text-ink-500 pointer-events-none" />
+        </div>
+
+        {error && (
+          <p id={errorId} className="mt-2 text-xs text-error-600" role="alert" aria-live="assertive">
+            {error}
+          </p>
+        )}
+        {helperText && !error && (
+          <p id={helperTextId} className="mt-2 text-xs text-ink-600">
+            {helperText}
+          </p>
+        )}
+      </div>
+    );
+  }
+
   return (
     <div className="w-full">
       {/* Label */}
@@ -317,7 +577,8 @@ const Select = forwardRef<SelectHandle, SelectProps>(
           onClick={() => !disabled && setIsOpen(!isOpen)}
           disabled={disabled}
           className={`
-            input w-full flex items-center justify-between
+            input w-full flex items-center justify-between px-3
+            ${sizeClasses[effectiveSize]}
             ${error ? 'border-error-400 focus:border-error-400 focus:ring-error-400' : ''}
             ${disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'}
           `}
@@ -349,15 +610,15 @@ const Select = forwardRef<SelectHandle, SelectProps>(
                 className="text-ink-400 hover:text-ink-600 transition-colors p-0.5"
                 aria-label="Clear selection"
               >
-                <X className="h-4 w-4" />
+                <X className={`${effectiveSize === 'lg' ? 'h-5 w-5' : 'h-4 w-4'}`} />
               </button>
             )}
-            <ChevronDown className={`h-4 w-4 text-ink-500 transition-transform ${isOpen ? 'rotate-180' : ''}`} />
+            <ChevronDown className={`${effectiveSize === 'lg' ? 'h-5 w-5' : 'h-4 w-4'} text-ink-500 transition-transform ${isOpen ? 'rotate-180' : ''}`} />
           </div>
         </button>
 
-        {/* Dropdown */}
-        {isOpen && (
+        {/* Desktop Dropdown */}
+        {isOpen && !useMobileSheet && (
           <div className="absolute z-50 w-full mt-2 bg-white bg-subtle-grain rounded-lg shadow-lg border border-paper-200 max-h-60 overflow-hidden animate-fade-in">
             {/* Search Input */}
             {searchable && (
@@ -391,136 +652,91 @@ const Select = forwardRef<SelectHandle, SelectProps>(
               aria-label="Available options"
               aria-multiselectable="false"
             >
-              {loading ? (
-                <div className="px-4 py-8 flex items-center justify-center" role="status" aria-live="polite">
-                  <Loader2 className="h-5 w-5 animate-spin text-ink-500" />
-                  <span className="ml-2 text-sm text-ink-500">Loading...</span>
-                </div>
-              ) : filteredOptions.length === 0 && filteredGroups.length === 0 && !showCreateOption ? (
-                <div className="px-4 py-3 text-sm text-ink-500 text-center" role="status" aria-live="polite">
-                  No options found
-                </div>
-              ) : (
-                <>
-                  {/* Create new option */}
-                  {showCreateOption && (
-                    <button
-                      type="button"
-                      onClick={handleCreateOption}
-                      className="w-full flex items-center px-4 py-2.5 text-sm text-accent-700 hover:bg-accent-50 transition-colors border-b border-paper-200"
-                    >
-                      <span className="font-medium">Create "{searchQuery}"</span>
-                    </button>
-                  )}
-
-                  {/* Virtual scrolling container */}
-                  {useVirtualScrolling ? (
-                    <div style={{ height: totalHeight, position: 'relative' }}>
-                      <div style={{ transform: `translateY(${offsetY}px)` }}>
-                        {visibleItems.map((item) => {
-                          const option = item.option;
-                          const isSelected = option.value === value;
-                          const key = `${item.type}-${item.groupIndex}-${item.optionIndex}-${option.value}`;
-
-                          return (
-                            <button
-                              key={key}
-                              type="button"
-                              onClick={() => !option.disabled && handleSelect(option.value)}
-                              disabled={option.disabled}
-                              style={{ height: `${virtualItemHeight}px` }}
-                              className={`
-                                w-full flex items-center justify-between px-4 text-sm transition-colors
-                                ${isSelected ? 'bg-accent-50 text-accent-900' : 'text-ink-700'}
-                                ${option.disabled ? 'opacity-40 cursor-not-allowed' : 'hover:bg-paper-50 cursor-pointer'}
-                              `}
-                              role="option"
-                              aria-selected={isSelected}
-                            >
-                              <span className="flex items-center gap-2">
-                                {option.icon && <span>{option.icon}</span>}
-                                {option.label}
-                              </span>
-                              {isSelected && <Check className="h-4 w-4 text-accent-600" />}
-                            </button>
-                          );
-                        })}
-                      </div>
-                    </div>
-                  ) : (
-                    <>
-                      {/* Render flat options */}
-                      {filteredOptions.map((option) => {
-                        const isSelected = option.value === value;
-
-                        return (
-                          <button
-                            key={option.value}
-                            type="button"
-                            onClick={() => !option.disabled && handleSelect(option.value)}
-                            disabled={option.disabled}
-                            className={`
-                              w-full flex items-center justify-between px-4 py-2.5 text-sm transition-colors
-                              ${isSelected ? 'bg-accent-50 text-accent-900' : 'text-ink-700'}
-                              ${option.disabled ? 'opacity-40 cursor-not-allowed' : 'hover:bg-paper-50 cursor-pointer'}
-                            `}
-                            role="option"
-                            aria-selected={isSelected}
-                          >
-                            <span className="flex items-center gap-2">
-                              {option.icon && <span>{option.icon}</span>}
-                              {option.label}
-                            </span>
-                            {isSelected && <Check className="h-4 w-4 text-accent-600" />}
-                          </button>
-                        );
-                      })}
-
-                      {/* Render grouped options */}
-                      {filteredGroups.map((group) => (
-                        <div key={group.label}>
-                          {/* Group Header */}
-                          <div className="px-4 py-2 text-xs font-semibold text-ink-500 uppercase tracking-wider bg-paper-50 border-t border-b border-paper-200">
-                            {group.label}
-                          </div>
-
-                          {/* Group Options */}
-                          {group.options.map((option) => {
-                            const isSelected = option.value === value;
-
-                            return (
-                              <button
-                                key={option.value}
-                                type="button"
-                                onClick={() => !option.disabled && handleSelect(option.value)}
-                                disabled={option.disabled}
-                                className={`
-                                  w-full flex items-center justify-between px-4 py-2.5 text-sm transition-colors
-                                  ${isSelected ? 'bg-accent-50 text-accent-900' : 'text-ink-700'}
-                                  ${option.disabled ? 'opacity-40 cursor-not-allowed' : 'hover:bg-paper-50 cursor-pointer'}
-                                `}
-                                role="option"
-                                aria-selected={isSelected}
-                              >
-                                <span className="flex items-center gap-2">
-                                  {option.icon && <span>{option.icon}</span>}
-                                  {option.label}
-                                </span>
-                                {isSelected && <Check className="h-4 w-4 text-accent-600" />}
-                              </button>
-                            );
-                          })}
-                        </div>
-                      ))}
-                    </>
-                  )}
-                </>
-              )}
+              {renderOptionsContent(false)}
             </div>
           </div>
         )}
       </div>
 
+      {/* Mobile Bottom Sheet */}
+      {isOpen && useMobileSheet && createPortal(
+        <div
+          className="fixed inset-0 z-50 flex items-end"
+          onClick={(e) => e.target === e.currentTarget && handleClose()}
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby={label ? `mobile-${labelId}` : undefined}
+        >
+          {/* Backdrop */}
+          <div className="absolute inset-0 bg-black/50 animate-fade-in" />
+
+          {/* Sheet */}
+          <div
+            className="relative w-full bg-white rounded-t-2xl shadow-2xl animate-slide-up max-h-[85vh] flex flex-col"
+            style={{ paddingBottom: 'env(safe-area-inset-bottom)' }}
+          >
+            {/* Handle */}
+            <div className="py-3 cursor-grab">
+              <div className="w-12 h-1.5 bg-ink-300 rounded-full mx-auto" />
+            </div>
+
+            {/* Header */}
+            <div className="px-4 pb-3 border-b border-paper-200 flex items-center justify-between">
+              {label && (
+                <h2 id={`mobile-${labelId}`} className="text-lg font-semibold text-ink-900">
+                  {label}
+                </h2>
+              )}
+              {!label && (
+                <h2 className="text-lg font-semibold text-ink-900">
+                  {placeholder}
+                </h2>
+              )}
+              <button
+                onClick={handleClose}
+                className="text-ink-400 hover:text-ink-600 transition-colors p-2 -mr-2"
+                aria-label="Close"
+              >
+                <X className="h-5 w-5" />
+              </button>
+            </div>
+
+            {/* Search Input (Mobile) */}
+            {searchable && (
+              <div className="p-3 border-b border-paper-200">
+                <div className="relative">
+                  <Search className="absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-ink-400" />
+                  <input
+                    ref={mobileSearchInputRef}
+                    type="text"
+                    value={searchQuery}
+                    onChange={(e) => setSearchQuery(e.target.value)}
+                    placeholder="Search..."
+                    inputMode="search"
+                    enterKeyHint="search"
+                    className="w-full pl-12 pr-4 py-3 text-base border border-paper-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-accent-400 focus:border-accent-400"
+                    role="searchbox"
+                    aria-label="Search options"
+                  />
+                </div>
+              </div>
+            )}
+
+            {/* Options List (Mobile) */}
+            <div
+              id={listboxId}
+              className="overflow-y-auto flex-1"
+              role="listbox"
+              aria-label="Available options"
+              aria-multiselectable="false"
+            >
+              {renderOptionsContent(true)}
+            </div>
+          </div>
+        </div>,
+        document.body
+      )}
+
       {/* Helper Text or Error */}
       {error && (
         <p id={errorId} className="mt-2 text-xs text-error-600" role="alert" aria-live="assertive">