@ecohouse/ui 0.1.53 → 0.1.54

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecohouse/ui",
-  "version": "0.1.53",
+  "version": "0.1.54",
   "type": "module",
   "private": false,
   "description": "Cross-platform presentation-only UI components for EcoHouse (React Native + React Native Web)",

package/src/components/Select/Select.tsx

@@ -7,7 +7,9 @@ import {
   useRef,
   useState,
   type ComponentRef,
+  type ReactNode,
 } from "react";
+import { createPortal } from "react-dom";
 import {
   Platform,
   Pressable,
@@ -95,6 +97,17 @@ const ITEM_RADIUS = 12;
 const ICON_SIZE = 20;
 const CHIP_GAP = 6;
 const FALLBACK_ELLIPSIS_WIDTH = 20;
+/** Above Modal (500) so portaled menus stay clickable inside dialogs. */
+const WEB_MENU_Z_INDEX = 600;
+const WEB_VIEWPORT_PADDING = 8;
+const WEB_MENU_GAP = 8;
+
+type WebMenuPosition = {
+  top: number;
+  left: number;
+  width: number;
+  maxHeight: number;
+};
 
 type ItemVisualState = "default" | "hover" | "selected";
 
@@ -287,6 +300,7 @@ export const Select = forwardRef<ComponentRef<typeof View>, SelectProps>(
     const valueProp = props.value;
     const rootRef = useRef<ComponentRef<typeof View>>(null);
     const triggerRef = useRef<ComponentRef<typeof Pressable>>(null);
+    const menuRef = useRef<ComponentRef<typeof View>>(null);
     const searchInputRef = useRef<ComponentRef<typeof TextInput>>(null);
     const setRootRef = useMemo(() => mergeRefs(rootRef, forwardedRef), [forwardedRef]);
     const isOpenControlled = typeof openProp === "boolean";
@@ -303,8 +317,10 @@ export const Select = forwardRef<ComponentRef<typeof View>, SelectProps>(
     const [hoveredValue, setHoveredValue] = useState<string | null>(null);
     /** Web: flip menu to the trigger's right edge when it would overflow the viewport. */
     const [menuAlignEnd, setMenuAlignEnd] = useState(false);
-    /** Web: open above the trigger when there isn't enough space below. */
+    /** Native: open above the trigger when there isn't enough space below. */
     const [menuPlaceAbove, setMenuPlaceAbove] = useState(false);
+    /** Web: fixed coords for the portaled menu (avoids expanding overflow parents). */
+    const [webMenuPosition, setWebMenuPosition] = useState<WebMenuPosition | null>(null);
 
     const selectedValues = useMemo(() => {
       const current = isValueControlled
@@ -379,6 +395,7 @@ export const Select = forwardRef<ComponentRef<typeof View>, SelectProps>(
           setHoveredValue(null);
           setMenuAlignEnd(false);
           setMenuPlaceAbove(false);
+          setWebMenuPosition(null);
           // Let the parent reset its externally fetched options.
           onSearchChange?.("");
         }
@@ -387,6 +404,7 @@ export const Select = forwardRef<ComponentRef<typeof View>, SelectProps>(
     );
 
     // Prefer start (left) / below; flip when the menu would overflow the viewport (web).
+    // On web the menu is portaled with position:fixed so overflow parents don't grow/clip it.
     useLayoutEffect(() => {
       if (Platform.OS !== "web" || !isOpen) return;
 
@@ -397,16 +415,26 @@ export const Select = forwardRef<ComponentRef<typeof View>, SelectProps>(
         const rect = trigger?.getBoundingClientRect?.();
         if (!rect) return;
 
-        const viewportPadding = 8;
-        const gap = 8;
         const menuWidth = Math.max(rect.width, resolvedMenuWidth ?? 0);
-        const overflowsRight = rect.left + menuWidth > window.innerWidth - viewportPadding;
+        const overflowsRight = rect.left + menuWidth > window.innerWidth - WEB_VIEWPORT_PADDING;
         setMenuAlignEnd(overflowsRight);
 
-        const spaceBelow = window.innerHeight - viewportPadding - rect.bottom;
-        const spaceAbove = rect.top - viewportPadding;
-        const needsAbove = estimatedMenuHeight + gap > spaceBelow && spaceAbove > spaceBelow;
+        const spaceBelow = window.innerHeight - WEB_VIEWPORT_PADDING - rect.bottom;
+        const spaceAbove = rect.top - WEB_VIEWPORT_PADDING;
+        const needsAbove =
+          estimatedMenuHeight + WEB_MENU_GAP > spaceBelow && spaceAbove > spaceBelow;
         setMenuPlaceAbove(needsAbove);
+
+        const available = Math.max(0, (needsAbove ? spaceAbove : spaceBelow) - WEB_MENU_GAP);
+        const maxHeight = Math.min(estimatedMenuHeight, Math.max(available, TRIGGER_HEIGHT));
+        const left = overflowsRight
+          ? Math.max(WEB_VIEWPORT_PADDING, rect.right - menuWidth)
+          : Math.min(rect.left, window.innerWidth - WEB_VIEWPORT_PADDING - menuWidth);
+        const top = needsAbove
+          ? Math.max(WEB_VIEWPORT_PADDING, rect.top - WEB_MENU_GAP - maxHeight)
+          : rect.bottom + WEB_MENU_GAP;
+
+        setWebMenuPosition({ top, left, width: menuWidth, maxHeight });
       };
 
       updateMenuPlacement();
@@ -428,11 +456,12 @@ export const Select = forwardRef<ComponentRef<typeof View>, SelectProps>(
       if (Platform.OS !== "web" || !isOpen) return;
 
       const handlePointerDown = (event: MouseEvent | TouchEvent) => {
-        const root = rootRef.current as unknown as { contains?: (node: Node) => boolean } | null;
         const target = event.target;
-        if (root?.contains && target instanceof Node && !root.contains(target)) {
-          setOpen(false);
-        }
+        if (!(target instanceof Node)) return;
+        const root = rootRef.current as unknown as { contains?: (node: Node) => boolean } | null;
+        const menu = menuRef.current as unknown as { contains?: (node: Node) => boolean } | null;
+        if (root?.contains?.(target) || menu?.contains?.(target)) return;
+        setOpen(false);
       };
 
       document.addEventListener("mousedown", handlePointerDown);
@@ -581,7 +610,7 @@ export const Select = forwardRef<ComponentRef<typeof View>, SelectProps>(
 
     const leftIconNode = renderStatefulIcon(leftIcon, UserIcon, {
       size: ICON_SIZE,
-      color: error ? colors.red : colors.primary,
+      color: error ? colors.red : isOpen ? colors.primary : colors.grey100,
     });
     const hasLeftIcon = showLeftIcon || leftIcon != null;
 
@@ -604,6 +633,127 @@ export const Select = forwardRef<ComponentRef<typeof View>, SelectProps>(
     const resolvedAccessibilityLabel =
       accessibilityLabel ?? (typeof label === "string" ? label : undefined);
 
+    const optionListMaxHeight =
+      Platform.OS === "web" && webMenuPosition != null
+        ? Math.max(43, webMenuPosition.maxHeight - (24 + (showSearch ? 48 : 0)))
+        : resolvedOptionListMaxHeight;
+
+    const menuNode: ReactNode = isOpen ? (
+      <View
+        ref={menuRef}
+        style={[
+          styles.menu,
+          Platform.OS === "web" && webMenuPosition != null
+            ? ({
+                position: "fixed",
+                top: webMenuPosition.top,
+                left: webMenuPosition.left,
+                width: webMenuPosition.width,
+                minWidth: webMenuPosition.width,
+                maxHeight: webMenuPosition.maxHeight,
+                zIndex: WEB_MENU_Z_INDEX,
+                marginTop: 0,
+                marginBottom: 0,
+              } as unknown as ViewStyle)
+            : Platform.OS === "web"
+              ? ({ position: "fixed", opacity: 0, pointerEvents: "none" } as unknown as ViewStyle)
+              : [
+                  menuAlignEnd ? styles.menuAlignEnd : styles.menuAlignStart,
+                  menuPlaceAbove ? styles.menuAbove : styles.menuBelow,
+                ],
+          menuStyle,
+        ]}
+      >
+        {showSearch ? (
+          <View style={styles.searchField}>
+            <View style={styles.iconSlot}>
+              <SearchIcon size={ICON_SIZE} color={colors.grey100} />
+            </View>
+            <TextInput
+              ref={searchInputRef}
+              value={searchQuery}
+              onChangeText={handleSearchChange}
+              editable={!disabled}
+              placeholder={searchPlaceholder}
+              placeholderTextColor={colors.grey100}
+              style={[
+                styles.searchInput,
+                Platform.OS === "web" ? styles.searchInputWeb : null,
+                Platform.OS === "android" ? styles.searchInputAndroid : null,
+              ]}
+              accessibilityLabel={searchPlaceholder}
+            />
+          </View>
+        ) : null}
+
+        <ScrollView
+          style={[styles.optionList, { maxHeight: optionListMaxHeight }]}
+          contentContainerStyle={styles.optionListContent}
+          keyboardShouldPersistTaps="handled"
+          showsVerticalScrollIndicator={false}
+        >
+          {loading ? (
+            <View style={styles.statusRow}>
+              <Text style={styles.statusText}>Loading...</Text>
+            </View>
+          ) : filteredOptions.length === 0 ? (
+            <View style={styles.statusRow}>
+              <Text style={styles.statusText}>{emptyText}</Text>
+            </View>
+          ) : null}
+
+          {!loading &&
+            filteredOptions.map((option) => {
+              const isSelected = selectedValues.includes(option.value);
+              const isHovered = hoveredValue === option.value;
+              const visualState: ItemVisualState = isSelected
+                ? "selected"
+                : isHovered
+                  ? "hover"
+                  : "default";
+
+              return (
+                <Pressable
+                  key={option.value}
+                  onPress={() => handleSelect(option.value)}
+                  disabled={disabled}
+                  onHoverIn={() => setHoveredValue(option.value)}
+                  onHoverOut={() =>
+                    setHoveredValue((current) => (current === option.value ? null : current))
+                  }
+                  onPressIn={() => setHoveredValue(option.value)}
+                  onPressOut={() =>
+                    setHoveredValue((current) => (current === option.value ? null : current))
+                  }
+                  accessibilityRole={multiple ? "checkbox" : "button"}
+                  accessibilityState={{ selected: isSelected, checked: isSelected, disabled }}
+                  style={[
+                    styles.item,
+                    {
+                      backgroundColor: itemBackground(visualState),
+                    },
+                  ]}
+                >
+                  {multiple ? (
+                    <View style={[styles.itemCheckbox, { pointerEvents: "none" }]}>
+                      <Checkbox value={isSelected} variant="light" />
+                    </View>
+                  ) : null}
+                  <Text style={styles.itemLabel} numberOfLines={1}>
+                    {option.label}
+                  </Text>
+                </Pressable>
+              );
+            })}
+        </ScrollView>
+      </View>
+    ) : null;
+
+    const webMenuPortal =
+      Platform.OS === "web" && isOpen && typeof document !== "undefined"
+        ? createPortal(menuNode, document.body)
+        : null;
+
     return (
       <View
         {...rest}
@@ -652,99 +802,7 @@ export const Select = forwardRef<ComponentRef<typeof View>, SelectProps>(
             </View>
           </Pressable>
 
-          {isOpen ? (
-            <View
-              style={[
-                styles.menu,
-                menuAlignEnd ? styles.menuAlignEnd : styles.menuAlignStart,
-                menuPlaceAbove ? styles.menuAbove : styles.menuBelow,
-                menuStyle,
-              ]}
-            >
-              {showSearch ? (
-                <View style={styles.searchField}>
-                  <View style={styles.iconSlot}>
-                    <SearchIcon size={ICON_SIZE} color={colors.grey100} />
-                  </View>
-                  <TextInput
-                    ref={searchInputRef}
-                    value={searchQuery}
-                    onChangeText={handleSearchChange}
-                    editable={!disabled}
-                    placeholder={searchPlaceholder}
-                    placeholderTextColor={colors.grey100}
-                    style={[
-                      styles.searchInput,
-                      Platform.OS === "web" ? styles.searchInputWeb : null,
-                      Platform.OS === "android" ? styles.searchInputAndroid : null,
-                    ]}
-                    accessibilityLabel={searchPlaceholder}
-                  />
-                </View>
-              ) : null}
-
-              <ScrollView
-                style={[styles.optionList, { maxHeight: resolvedOptionListMaxHeight }]}
-                contentContainerStyle={styles.optionListContent}
-                keyboardShouldPersistTaps="handled"
-                showsVerticalScrollIndicator={false}
-              >
-                {loading ? (
-                  <View style={styles.statusRow}>
-                    <Text style={styles.statusText}>Loading...</Text>
-                  </View>
-                ) : filteredOptions.length === 0 ? (
-                  <View style={styles.statusRow}>
-                    <Text style={styles.statusText}>{emptyText}</Text>
-                  </View>
-                ) : null}
-
-                {!loading &&
-                  filteredOptions.map((option) => {
-                    const isSelected = selectedValues.includes(option.value);
-                    const isHovered = hoveredValue === option.value;
-                    const visualState: ItemVisualState = isSelected
-                      ? "selected"
-                      : isHovered
-                        ? "hover"
-                        : "default";
-
-                    return (
-                      <Pressable
-                        key={option.value}
-                        onPress={() => handleSelect(option.value)}
-                        disabled={disabled}
-                        onHoverIn={() => setHoveredValue(option.value)}
-                        onHoverOut={() =>
-                          setHoveredValue((current) => (current === option.value ? null : current))
-                        }
-                        onPressIn={() => setHoveredValue(option.value)}
-                        onPressOut={() =>
-                          setHoveredValue((current) => (current === option.value ? null : current))
-                        }
-                        accessibilityRole={multiple ? "checkbox" : "button"}
-                        accessibilityState={{ selected: isSelected, checked: isSelected, disabled }}
-                        style={[
-                          styles.item,
-                          {
-                            backgroundColor: itemBackground(visualState),
-                          },
-                        ]}
-                      >
-                        {multiple ? (
-                          <View style={[styles.itemCheckbox, { pointerEvents: "none" }]}>
-                            <Checkbox value={isSelected} variant="light" />
-                          </View>
-                        ) : null}
-                        <Text style={styles.itemLabel} numberOfLines={1}>
-                          {option.label}
-                        </Text>
-                      </Pressable>
-                    );
-                  })}
-              </ScrollView>
-            </View>
-          ) : null}
+          {Platform.OS === "web" ? webMenuPortal : menuNode}
         </View>
 
         {showHint && hint ? <Text style={[styles.hint, { color: hintColor }]}>{hint}</Text> : null}