@papernote/ui 1.13.0 → 1.14.1

package/src/components/Select.tsx

@@ -1,7 +1,14 @@
-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';
+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
@@ -80,9 +87,9 @@ export interface SelectProps {
   /** 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';
+  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';
+  mobileMode?: "auto" | "dropdown" | "native";
   /** Render dropdown via portal (default: true). Set to false when overflow clipping is not an issue */
   usePortal?: boolean;
   /** Whether this field is required */
@@ -91,16 +98,16 @@ export interface SelectProps {
 
 // 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
+  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
+  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
 };
 
 /**
@@ -173,14 +180,13 @@ const optionSizeClasses = {
  * />
  * ```
  */
-const Select = forwardRef<SelectHandle, SelectProps>(
-  (props, ref) => {
+const Select = forwardRef<SelectHandle, SelectProps>((props, ref) => {
   const {
     options = [],
     groups = [],
     value,
     onChange,
-    placeholder = 'Select an option',
+    placeholder = "Select an option",
     searchable = false,
     disabled = false,
     label,
@@ -191,18 +197,23 @@ const Select = forwardRef<SelectHandle, SelectProps>(
     creatable = false,
     onCreateOption,
     virtualized = false,
-    virtualHeight = '300px',
+    virtualHeight = "300px",
     virtualItemHeight = 42,
-    size = 'md',
-    mobileMode = 'auto',
+    size = "md",
+    mobileMode = "auto",
     usePortal = true,
     required = false,
   } = props;
   const [isOpen, setIsOpen] = useState(false);
-  const [searchQuery, setSearchQuery] = useState('');
+  const [searchQuery, setSearchQuery] = useState("");
   const [scrollTop, setScrollTop] = useState(0);
   const [activeDescendant] = useState<string | undefined>(undefined);
-  const [dropdownPosition, setDropdownPosition] = useState<{ top: number; left: number; width: number; placement: 'bottom' | 'top' } | null>(null);
+  const [dropdownPosition, setDropdownPosition] = useState<{
+    top: number;
+    left: number;
+    width: number;
+    placement: "bottom" | "top";
+  } | null>(null);
   const selectRef = useRef<HTMLDivElement>(null);
   const buttonRef = useRef<HTMLButtonElement>(null);
   const dropdownRef = useRef<HTMLDivElement>(null);
@@ -213,12 +224,12 @@ const Select = forwardRef<SelectHandle, SelectProps>(
 
   // Detect mobile viewport
   const isMobile = useIsMobile();
-  const useMobileSheet = mobileMode === 'auto' && isMobile;
-  const useNativeSelect = mobileMode === 'native' && isMobile;
-  
+  const useMobileSheet = mobileMode === "auto" && isMobile;
+  const useNativeSelect = mobileMode === "native" && isMobile;
+
   // Auto-size for mobile
-  const effectiveSize = isMobile && size === 'md' ? 'lg' : size;
-  
+  const effectiveSize = isMobile && size === "md" ? "lg" : size;
+
   // Generate unique IDs for ARIA
   const labelId = useId();
   const listboxId = useId();
@@ -234,12 +245,9 @@ const Select = forwardRef<SelectHandle, SelectProps>(
   }));
 
   // Flatten all options (from both options and groups)
-  const allOptions = [
-    ...options,
-    ...groups.flatMap(group => group.options)
-  ];
+  const allOptions = [...options, ...groups.flatMap((group) => group.options)];
 
-  const selectedOption = allOptions.find(opt => opt.value === value);
+  const selectedOption = allOptions.find((opt) => opt.value === value);
 
   // Filter options/groups based on search
   const getFilteredData = () => {
@@ -250,27 +258,29 @@ const Select = forwardRef<SelectHandle, SelectProps>(
     const query = searchQuery.toLowerCase();
 
     // Filter flat options
-    const filteredOptions = options.filter(opt =>
-      opt.label.toLowerCase().includes(query)
+    const filteredOptions = options.filter((opt) =>
+      opt.label.toLowerCase().includes(query),
     );
 
     // Filter grouped options
     const filteredGroups = groups
-      .map(group => ({
+      .map((group) => ({
         ...group,
-        options: group.options.filter(opt =>
-          opt.label.toLowerCase().includes(query)
-        )
+        options: group.options.filter((opt) =>
+          opt.label.toLowerCase().includes(query),
+        ),
       }))
-      .filter(group => group.options.length > 0);
+      .filter((group) => group.options.length > 0);
 
     return { options: filteredOptions, groups: filteredGroups };
   };
 
-  const { options: filteredOptions, groups: filteredGroups } = getFilteredData();
+  const { options: filteredOptions, groups: filteredGroups } =
+    getFilteredData();
 
   // Virtual scrolling calculations
-  const totalItems = filteredOptions.length + filteredGroups.flatMap(g => g.options).length;
+  const totalItems =
+    filteredOptions.length + filteredGroups.flatMap((g) => g.options).length;
   const useVirtualScrolling = virtualized && totalItems > 50;
 
   const visibleRangeStart = useVirtualScrolling
@@ -278,32 +288,54 @@ const Select = forwardRef<SelectHandle, SelectProps>(
     : 0;
   const visibleRangeEnd = useVirtualScrolling
     ? Math.min(
-        visibleRangeStart + Math.ceil(parseInt(virtualHeight) / virtualItemHeight) + 5,
-        totalItems
+        visibleRangeStart +
+          Math.ceil(parseInt(virtualHeight) / virtualItemHeight) +
+          5,
+        totalItems,
       )
     : totalItems;
 
   // Flatten all filtered items for virtualization
   const allFilteredItems = [
-    ...filteredOptions.map((opt, idx) => ({ type: 'option' as const, option: opt, groupIndex: -1, optionIndex: idx })),
+    ...filteredOptions.map((opt, idx) => ({
+      type: "option" as const,
+      option: opt,
+      groupIndex: -1,
+      optionIndex: idx,
+    })),
     ...filteredGroups.flatMap((group, groupIdx) =>
-      group.options.map((opt, optIdx) => ({ type: 'grouped' as const, option: opt, groupIndex: groupIdx, optionIndex: optIdx, groupLabel: group.label }))
-    )
+      group.options.map((opt, optIdx) => ({
+        type: "grouped" as const,
+        option: opt,
+        groupIndex: groupIdx,
+        optionIndex: optIdx,
+        groupLabel: group.label,
+      })),
+    ),
   ];
 
   const visibleItems = useVirtualScrolling
     ? allFilteredItems.slice(visibleRangeStart, visibleRangeEnd)
     : allFilteredItems;
 
-  const offsetY = useVirtualScrolling ? visibleRangeStart * virtualItemHeight : 0;
-  const totalHeight = useVirtualScrolling ? totalItems * virtualItemHeight : 'auto';
+  const offsetY = useVirtualScrolling
+    ? visibleRangeStart * virtualItemHeight
+    : 0;
+  const totalHeight = useVirtualScrolling
+    ? totalItems * virtualItemHeight
+    : "auto";
 
   // Check if we should show "Create" option
-  const showCreateOption = creatable &&
-    searchQuery.trim() !== '' &&
-    !filteredOptions.some(opt => opt.label.toLowerCase() === searchQuery.toLowerCase()) &&
-    !filteredGroups.some(group =>
-      group.options.some(opt => opt.label.toLowerCase() === searchQuery.toLowerCase())
+  const showCreateOption =
+    creatable &&
+    searchQuery.trim() !== "" &&
+    !filteredOptions.some(
+      (opt) => opt.label.toLowerCase() === searchQuery.toLowerCase(),
+    ) &&
+    !filteredGroups.some((group) =>
+      group.options.some(
+        (opt) => opt.label.toLowerCase() === searchQuery.toLowerCase(),
+      ),
     );
 
   // Handle creating new option
@@ -314,7 +346,7 @@ const Select = forwardRef<SelectHandle, SelectProps>(
       // If no callback, just select the typed value
       onChange?.(searchQuery.trim());
     }
-    setSearchQuery('');
+    setSearchQuery("");
     setIsOpen(false);
   };
 
@@ -325,21 +357,23 @@ const Select = forwardRef<SelectHandle, SelectProps>(
     const handleClickOutside = (event: MouseEvent) => {
       const target = event.target as Node;
       // Check if click is outside both the select trigger and the dropdown portal
-      const isOutsideSelect = selectRef.current && !selectRef.current.contains(target);
-      const isOutsideDropdown = dropdownRef.current && !dropdownRef.current.contains(target);
+      const isOutsideSelect =
+        selectRef.current && !selectRef.current.contains(target);
+      const isOutsideDropdown =
+        dropdownRef.current && !dropdownRef.current.contains(target);
 
       if (isOutsideSelect && isOutsideDropdown) {
         setIsOpen(false);
-        setSearchQuery('');
+        setSearchQuery("");
       }
     };
 
     if (isOpen) {
-      document.addEventListener('mousedown', handleClickOutside);
+      document.addEventListener("mousedown", handleClickOutside);
     }
 
     return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener("mousedown", handleClickOutside);
     };
   }, [isOpen, useMobileSheet]);
 
@@ -377,11 +411,13 @@ const Select = forwardRef<SelectHandle, SelectProps>(
       const hasSpaceAbove = spaceAbove >= dropdownHeight + gap;
 
       // Prefer bottom placement, flip to top if not enough space below but enough above
-      const placement: 'bottom' | 'top' = hasSpaceBelow || !hasSpaceAbove ? 'bottom' : 'top';
+      const placement: "bottom" | "top" =
+        hasSpaceBelow || !hasSpaceAbove ? "bottom" : "top";
 
-      const top = placement === 'bottom'
-        ? rect.bottom + gap
-        : rect.top - dropdownHeight - gap;
+      const top =
+        placement === "bottom"
+          ? rect.bottom + gap
+          : rect.top - dropdownHeight - gap;
 
       setDropdownPosition({
         top,
@@ -395,24 +431,24 @@ const Select = forwardRef<SelectHandle, SelectProps>(
     updatePosition();
 
     // Listen for scroll events on all scrollable ancestors
-    window.addEventListener('scroll', updatePosition, true);
-    window.addEventListener('resize', updatePosition);
+    window.addEventListener("scroll", updatePosition, true);
+    window.addEventListener("resize", updatePosition);
 
     return () => {
-      window.removeEventListener('scroll', updatePosition, true);
-      window.removeEventListener('resize', updatePosition);
+      window.removeEventListener("scroll", updatePosition, true);
+      window.removeEventListener("resize", updatePosition);
     };
   }, [isOpen, useMobileSheet, usePortal]);
 
   // Lock body scroll when mobile sheet is open
   useEffect(() => {
     if (useMobileSheet && isOpen) {
-      document.body.style.overflow = 'hidden';
+      document.body.style.overflow = "hidden";
     } else {
-      document.body.style.overflow = '';
+      document.body.style.overflow = "";
     }
     return () => {
-      document.body.style.overflow = '';
+      document.body.style.overflow = "";
     };
   }, [isOpen, useMobileSheet]);
 
@@ -421,29 +457,33 @@ const Select = forwardRef<SelectHandle, SelectProps>(
     if (!useMobileSheet || !isOpen) return;
 
     const handleEscape = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
+      if (e.key === "Escape") {
         setIsOpen(false);
-        setSearchQuery('');
+        setSearchQuery("");
       }
     };
 
-    document.addEventListener('keydown', handleEscape);
-    return () => document.removeEventListener('keydown', handleEscape);
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
   }, [isOpen, useMobileSheet]);
 
   const handleSelect = (optionValue: string) => {
     onChange?.(optionValue);
     setIsOpen(false);
-    setSearchQuery('');
+    setSearchQuery("");
   };
 
   const handleClose = () => {
     setIsOpen(false);
-    setSearchQuery('');
+    setSearchQuery("");
   };
 
   // Render option button (shared between desktop and mobile)
-  const renderOption = (option: SelectOption, isSelected: boolean, mobile = false) => (
+  const renderOption = (
+    option: SelectOption,
+    isSelected: boolean,
+    mobile = false,
+  ) => (
     <button
       key={option.value}
       type="button"
@@ -452,8 +492,8 @@ const Select = forwardRef<SelectHandle, SelectProps>(
       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'}
+        ${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}
@@ -462,7 +502,11 @@ const Select = forwardRef<SelectHandle, SelectProps>(
         {option.icon && <span>{option.icon}</span>}
         {option.label}
       </span>
-      {isSelected && <Check className={`${mobile ? 'h-5 w-5' : 'h-4 w-4'} text-accent-600`} />}
+      {isSelected && (
+        <Check
+          className={`${mobile ? "h-5 w-5" : "h-4 w-4"} text-accent-600`}
+        />
+      )}
     </button>
   );
 
@@ -470,16 +514,28 @@ const Select = forwardRef<SelectHandle, SelectProps>(
   const renderOptionsContent = (mobile = false) => {
     if (loading) {
       return (
-        <div className="px-4 py-8 flex items-center justify-center" role="status" aria-live="polite">
+        <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) {
+
+    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">
+        <div
+          className="px-4 py-3 text-sm text-ink-500 text-center"
+          role="status"
+          aria-live="polite"
+        >
           No options found
         </div>
       );
@@ -494,7 +550,7 @@ const Select = forwardRef<SelectHandle, SelectProps>(
             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'}
+              ${mobile ? "py-3.5 text-base" : "py-2.5 text-sm"}
             `}
           >
             <span className="font-medium">Create "{searchQuery}"</span>
@@ -503,7 +559,7 @@ const Select = forwardRef<SelectHandle, SelectProps>(
 
         {/* Virtual scrolling container */}
         {useVirtualScrolling ? (
-          <div style={{ height: totalHeight, position: 'relative' }}>
+          <div style={{ height: totalHeight, position: "relative" }}>
             <div style={{ transform: `translateY(${offsetY}px)` }}>
               {visibleItems.map((item) => {
                 const option = item.option;
@@ -514,14 +570,18 @@ const Select = forwardRef<SelectHandle, SelectProps>(
                   <button
                     key={key}
                     type="button"
-                    onClick={() => !option.disabled && handleSelect(option.value)}
+                    onClick={() =>
+                      !option.disabled && handleSelect(option.value)
+                    }
                     disabled={option.disabled}
-                    style={{ height: mobile ? '56px' : `${virtualItemHeight}px` }}
+                    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'}
+                      ${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}
@@ -530,7 +590,11 @@ const Select = forwardRef<SelectHandle, SelectProps>(
                       {option.icon && <span>{option.icon}</span>}
                       {option.label}
                     </span>
-                    {isSelected && <Check className={`${mobile ? 'h-5 w-5' : 'h-4 w-4'} text-accent-600`} />}
+                    {isSelected && (
+                      <Check
+                        className={`${mobile ? "h-5 w-5" : "h-4 w-4"} text-accent-600`}
+                      />
+                    )}
                   </button>
                 );
               })}
@@ -539,21 +603,27 @@ const Select = forwardRef<SelectHandle, SelectProps>(
         ) : (
           <>
             {/* Render flat options */}
-            {filteredOptions.map((option) => renderOption(option, option.value === value, mobile))}
+            {filteredOptions.map((option) =>
+              renderOption(option, option.value === value, mobile),
+            )}
 
             {/* Render grouped options */}
             {filteredGroups.map((group) => (
               <div key={group.label}>
                 {/* Group Header */}
-                <div className={`
+                <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'}
-                `}>
+                  ${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))}
+                {group.options.map((option) =>
+                  renderOption(option, option.value === value, mobile),
+                )}
               </div>
             ))}
           </>
@@ -576,21 +646,25 @@ const Select = forwardRef<SelectHandle, SelectProps>(
         <div className="relative">
           <select
             ref={nativeSelectRef}
-            value={value || ''}
+            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'}
+              ${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)}
+            aria-invalid={error ? "true" : undefined}
+            aria-describedby={
+              error ? errorId : helperText ? helperTextId : undefined
+            }
             aria-required={required}
           >
-            <option value="" disabled>{placeholder}</option>
+            <option value="" disabled>
+              {placeholder}
+            </option>
             {options.map((opt) => (
               <option key={opt.value} value={opt.value} disabled={opt.disabled}>
                 {opt.label}
@@ -599,7 +673,11 @@ const Select = forwardRef<SelectHandle, SelectProps>(
             {groups.map((group) => (
               <optgroup key={group.label} label={group.label}>
                 {group.options.map((opt) => (
-                  <option key={opt.value} value={opt.value} disabled={opt.disabled}>
+                  <option
+                    key={opt.value}
+                    value={opt.value}
+                    disabled={opt.disabled}
+                  >
                     {opt.label}
                   </option>
                 ))}
@@ -610,7 +688,12 @@ const Select = forwardRef<SelectHandle, SelectProps>(
         </div>
 
         {error && (
-          <p id={errorId} className="mt-2 text-xs text-error-600" role="alert" aria-live="assertive">
+          <p
+            id={errorId}
+            className="mt-2 text-xs text-error-600"
+            role="alert"
+            aria-live="assertive"
+          >
             {error}
           </p>
         )}
@@ -644,8 +727,8 @@ const Select = forwardRef<SelectHandle, SelectProps>(
           className={`
             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'}
+            ${error ? "border-error-400 focus:border-error-400 focus:ring-error-400" : ""}
+            ${disabled ? "opacity-40 cursor-not-allowed" : "cursor-pointer"}
           `}
           role="combobox"
           aria-haspopup="listbox"
@@ -654,87 +737,117 @@ const Select = forwardRef<SelectHandle, SelectProps>(
           aria-labelledby={label ? labelId : undefined}
           aria-label={!label ? placeholder : undefined}
           aria-activedescendant={activeDescendant}
-          aria-invalid={error ? 'true' : undefined}
-          aria-describedby={error ? errorId : (helperText ? helperTextId : undefined)}
+          aria-invalid={error ? "true" : undefined}
+          aria-describedby={
+            error ? errorId : helperText ? helperTextId : undefined
+          }
           aria-disabled={disabled}
           aria-required={required}
         >
-          <span className={`flex items-center gap-2 ${selectedOption ? 'text-ink-800' : 'text-ink-400'}`}>
-            {loading && <Loader2 className="h-4 w-4 animate-spin text-ink-500" />}
-            {!loading && selectedOption?.icon && <span>{selectedOption.icon}</span>}
+          <span
+            className={`flex items-center gap-2 ${selectedOption ? "text-ink-800" : "text-ink-400"}`}
+          >
+            {loading && (
+              <Loader2 className="h-4 w-4 animate-spin text-ink-500" />
+            )}
+            {!loading && selectedOption?.icon && (
+              <span>{selectedOption.icon}</span>
+            )}
             {selectedOption ? selectedOption.label : placeholder}
           </span>
           <div className="flex items-center gap-1">
             {clearable && value && (
-              <button
-                type="button"
+              <span
+                role="button"
+                tabIndex={-1}
                 onClick={(e) => {
                   e.stopPropagation();
-                  onChange?.('');
+                  onChange?.("");
                   setIsOpen(false);
                 }}
-                className="text-ink-400 hover:text-ink-600 transition-colors p-0.5"
+                onKeyDown={(e) => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    onChange?.("");
+                    setIsOpen(false);
+                  }
+                }}
+                className="text-ink-400 hover:text-ink-600 transition-colors p-0.5 cursor-pointer inline-flex"
                 aria-label="Clear selection"
               >
-                <X className={`${effectiveSize === 'lg' ? 'h-5 w-5' : 'h-4 w-4'}`} />
-              </button>
+                <X
+                  className={`${effectiveSize === "lg" ? "h-5 w-5" : "h-4 w-4"}`}
+                />
+              </span>
             )}
-            <ChevronDown className={`${effectiveSize === 'lg' ? 'h-5 w-5' : '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>
-
       </div>
 
       {/* Desktop Dropdown - rendered via portal to avoid overflow clipping */}
-      {isOpen && !useMobileSheet && (usePortal ? dropdownPosition : true) && (
-        usePortal ? createPortal(
-          <div
-            ref={dropdownRef}
-            className={`fixed z-[9999] bg-white bg-subtle-grain rounded-lg shadow-lg border border-paper-200 max-h-60 overflow-hidden animate-fade-in ${
-              dropdownPosition?.placement === 'top' ? 'origin-bottom' : 'origin-top'
-            }`}
-            style={{
-              top: dropdownPosition!.top,
-              left: dropdownPosition!.left,
-              width: dropdownPosition!.width,
-            }}
-          >
-            {/* Search Input */}
-            {searchable && (
-              <div className="p-2 border-b border-paper-200">
-                <div className="relative">
-                  <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-ink-400" />
-                  <input
-                    ref={searchInputRef}
-                    type="text"
-                    value={searchQuery}
-                    onChange={(e) => setSearchQuery(e.target.value)}
-                    placeholder="Search..."
-                    className="w-full pl-9 pr-3 py-2 text-sm border border-paper-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-400 focus:border-accent-400"
-                    role="searchbox"
-                    aria-label="Search options"
-                    aria-autocomplete="list"
-                    aria-controls={listboxId}
-                  />
-                </div>
-              </div>
-            )}
-
-            {/* Options List */}
+      {isOpen &&
+        !useMobileSheet &&
+        (usePortal ? dropdownPosition : true) &&
+        (usePortal ? (
+          createPortal(
             <div
-              ref={listRef}
-              id={listboxId}
-              className="overflow-y-auto"
-              style={{ maxHeight: useVirtualScrolling ? virtualHeight : '12rem' }}
-              onScroll={(e) => useVirtualScrolling && setScrollTop(e.currentTarget.scrollTop)}
-              role="listbox"
-              aria-label="Available options"
-              aria-multiselectable="false"
+              ref={dropdownRef}
+              className={`fixed z-[9999] bg-white bg-subtle-grain rounded-lg shadow-lg border border-paper-200 max-h-60 overflow-hidden animate-fade-in ${
+                dropdownPosition?.placement === "top"
+                  ? "origin-bottom"
+                  : "origin-top"
+              }`}
+              style={{
+                top: dropdownPosition!.top,
+                left: dropdownPosition!.left,
+                width: dropdownPosition!.width,
+              }}
             >
-              {renderOptionsContent(false)}
-            </div>
-          </div>,
-          document.body
+              {/* Search Input */}
+              {searchable && (
+                <div className="p-2 border-b border-paper-200">
+                  <div className="relative">
+                    <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-ink-400" />
+                    <input
+                      ref={searchInputRef}
+                      type="text"
+                      value={searchQuery}
+                      onChange={(e) => setSearchQuery(e.target.value)}
+                      placeholder="Search..."
+                      className="w-full pl-9 pr-3 py-2 text-sm border border-paper-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-400 focus:border-accent-400"
+                      role="searchbox"
+                      aria-label="Search options"
+                      aria-autocomplete="list"
+                      aria-controls={listboxId}
+                    />
+                  </div>
+                </div>
+              )}
+
+              {/* Options List */}
+              <div
+                ref={listRef}
+                id={listboxId}
+                className="overflow-y-auto"
+                style={{
+                  maxHeight: useVirtualScrolling ? virtualHeight : "12rem",
+                }}
+                onScroll={(e) =>
+                  useVirtualScrolling && setScrollTop(e.currentTarget.scrollTop)
+                }
+                role="listbox"
+                aria-label="Available options"
+                aria-multiselectable="false"
+              >
+                {renderOptionsContent(false)}
+              </div>
+            </div>,
+            document.body,
+          )
         ) : (
           // Non-portal dropdown (inline, relative positioning)
           <div
@@ -767,8 +880,12 @@ const Select = forwardRef<SelectHandle, SelectProps>(
               ref={listRef}
               id={listboxId}
               className="overflow-y-auto"
-              style={{ maxHeight: useVirtualScrolling ? virtualHeight : '12rem' }}
-              onScroll={(e) => useVirtualScrolling && setScrollTop(e.currentTarget.scrollTop)}
+              style={{
+                maxHeight: useVirtualScrolling ? virtualHeight : "12rem",
+              }}
+              onScroll={(e) =>
+                useVirtualScrolling && setScrollTop(e.currentTarget.scrollTop)
+              }
               role="listbox"
               aria-label="Available options"
               aria-multiselectable="false"
@@ -776,91 +893,100 @@ const Select = forwardRef<SelectHandle, SelectProps>(
               {renderOptionsContent(false)}
             </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 */}
+      {isOpen &&
+        useMobileSheet &&
+        createPortal(
           <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)' }}
+            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}
           >
-            {/* Handle */}
-            <div className="py-3 cursor-grab">
-              <div className="w-12 h-1.5 bg-ink-300 rounded-full mx-auto" />
-            </div>
+            {/* Backdrop */}
+            <div className="absolute inset-0 bg-black/50 animate-fade-in" />
 
-            {/* 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>
+            {/* 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>
 
-            {/* 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>
+              {/* 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>
-            )}
 
-            {/* Options List (Mobile) */}
-            <div
-              id={listboxId}
-              className="overflow-y-auto flex-1"
-              role="listbox"
-              aria-label="Available options"
-              aria-multiselectable="false"
-            >
-              {renderOptionsContent(true)}
+              {/* 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>
-        </div>,
-        document.body
-      )}
+          </div>,
+          document.body,
+        )}
 
       {/* Helper Text or Error */}
       {error && (
-        <p id={errorId} className="mt-2 text-xs text-error-600" role="alert" aria-live="assertive">
+        <p
+          id={errorId}
+          className="mt-2 text-xs text-error-600"
+          role="alert"
+          aria-live="assertive"
+        >
           {error}
         </p>
       )}
@@ -873,5 +999,5 @@ const Select = forwardRef<SelectHandle, SelectProps>(
   );
 });
 
-Select.displayName = 'Select';
+Select.displayName = "Select";
 export default Select;