@ecohouse/ui 0.1.53 → 0.1.54

package/dist/index.js

@@ -27555,7 +27555,7 @@ var require_react_dom_development = __commonJS({
           return root2;
         }
         var ReactVersion = "18.3.1";
-        function createPortal3(children, containerInfo, implementation) {
+        function createPortal4(children, containerInfo, implementation) {
           var key = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : null;
           {
             checkKeyStringCoercion(key);
@@ -28411,7 +28411,7 @@ var require_react_dom_development = __commonJS({
           if (!isValidContainer(container)) {
             throw new Error("Target container is not a DOM element.");
           }
-          return createPortal3(children, container, null, key);
+          return createPortal4(children, container, null, key);
         }
         function renderSubtreeIntoContainer(parentComponent, element, containerNode, callback) {
           return unstable_renderSubtreeIntoContainer(parentComponent, element, containerNode, callback);
@@ -36208,6 +36208,9 @@ var styles32 = StyleSheet.create({
     color: colors.red
   }
 });
+
+// src/components/Select/Select.tsx
+var import_react_dom3 = __toESM(require_react_dom());
 var DEFAULT_WIDTH4 = 308;
 var TRIGGER_HEIGHT2 = 44;
 var TRIGGER_RADIUS2 = 60;
@@ -36217,6 +36220,9 @@ var ITEM_RADIUS2 = 12;
 var ICON_SIZE13 = 20;
 var CHIP_GAP = 6;
 var FALLBACK_ELLIPSIS_WIDTH = 20;
+var WEB_MENU_Z_INDEX = 600;
+var WEB_VIEWPORT_PADDING = 8;
+var WEB_MENU_GAP = 8;
 function itemBackground(state) {
   switch (state) {
     case "hover":
@@ -36363,6 +36369,7 @@ var Select = forwardRef(
     const valueProp = props.value;
     const rootRef = useRef(null);
     const triggerRef = useRef(null);
+    const menuRef = useRef(null);
     const searchInputRef = useRef(null);
     const setRootRef = useMemo(() => mergeRefs(rootRef, forwardedRef), [forwardedRef]);
     const isOpenControlled = typeof openProp === "boolean";
@@ -36378,6 +36385,7 @@ var Select = forwardRef(
     const [hoveredValue, setHoveredValue] = useState(null);
     const [menuAlignEnd, setMenuAlignEnd] = useState(false);
     const [menuPlaceAbove, setMenuPlaceAbove] = useState(false);
+    const [webMenuPosition, setWebMenuPosition] = useState(null);
     const selectedValues = useMemo(() => {
       const current = isValueControlled ? valueProp : multiple ? uncontrolledMultiple : uncontrolledSingle;
       return toArray(current);
@@ -36431,6 +36439,7 @@ var Select = forwardRef(
           setHoveredValue(null);
           setMenuAlignEnd(false);
           setMenuPlaceAbove(false);
+          setWebMenuPosition(null);
           onSearchChange?.("");
         }
       },
@@ -36442,15 +36451,18 @@ var Select = forwardRef(
         const trigger = triggerRef.current;
         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_HEIGHT2));
+        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();
       window.addEventListener("resize", updateMenuPlacement);
@@ -36467,11 +36479,12 @@ var Select = forwardRef(
     useEffect(() => {
       if (Platform.OS !== "web" || !isOpen) return;
       const handlePointerDown = (event) => {
-        const root = rootRef.current;
         const target = event.target;
-        if (root?.contains && target instanceof Node && !root.contains(target)) {
-          setOpen(false);
-        }
+        if (!(target instanceof Node)) return;
+        const root = rootRef.current;
+        const menu = menuRef.current;
+        if (root?.contains?.(target) || menu?.contains?.(target)) return;
+        setOpen(false);
       };
       document.addEventListener("mousedown", handlePointerDown);
       document.addEventListener("touchstart", handlePointerDown);
@@ -36585,7 +36598,7 @@ var Select = forwardRef(
     ]);
     const leftIconNode = renderStatefulIcon(leftIcon, UserIcon, {
       size: ICON_SIZE13,
-      color: error ? colors.red : colors.primary
+      color: error ? colors.red : isOpen ? colors.primary : colors.grey100
     });
     const hasLeftIcon = showLeftIcon || leftIcon != null;
     const triggerBorderColor = error ? colors.redMuted : isOpen ? colors.primaryMuted : colors.grey700;
@@ -36594,6 +36607,95 @@ var Select = forwardRef(
     const hintColor = error ? colors.red : colors.grey100;
     const singleLabel = selectedOptions[0]?.label ?? placeholder;
     const resolvedAccessibilityLabel = accessibilityLabel ?? (typeof label === "string" ? label : void 0);
+    const optionListMaxHeight = Platform.OS === "web" && webMenuPosition != null ? Math.max(43, webMenuPosition.maxHeight - (24 + (showSearch ? 48 : 0))) : resolvedOptionListMaxHeight;
+    const menuNode = isOpen ? /* @__PURE__ */ jsxs(
+      View,
+      {
+        ref: menuRef,
+        style: [
+          styles33.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
+          } : Platform.OS === "web" ? { position: "fixed", opacity: 0, pointerEvents: "none" } : [
+            menuAlignEnd ? styles33.menuAlignEnd : styles33.menuAlignStart,
+            menuPlaceAbove ? styles33.menuAbove : styles33.menuBelow
+          ],
+          menuStyle
+        ],
+        children: [
+          showSearch ? /* @__PURE__ */ jsxs(View, { style: styles33.searchField, children: [
+            /* @__PURE__ */ jsx(View, { style: styles33.iconSlot, children: /* @__PURE__ */ jsx(SearchIcon, { size: ICON_SIZE13, color: colors.grey100 }) }),
+            /* @__PURE__ */ jsx(
+              TextInput,
+              {
+                ref: searchInputRef,
+                value: searchQuery,
+                onChangeText: handleSearchChange,
+                editable: !disabled,
+                placeholder: searchPlaceholder,
+                placeholderTextColor: colors.grey100,
+                style: [
+                  styles33.searchInput,
+                  Platform.OS === "web" ? styles33.searchInputWeb : null,
+                  Platform.OS === "android" ? styles33.searchInputAndroid : null
+                ],
+                accessibilityLabel: searchPlaceholder
+              }
+            )
+          ] }) : null,
+          /* @__PURE__ */ jsxs(
+            ScrollView,
+            {
+              style: [styles33.optionList, { maxHeight: optionListMaxHeight }],
+              contentContainerStyle: styles33.optionListContent,
+              keyboardShouldPersistTaps: "handled",
+              showsVerticalScrollIndicator: false,
+              children: [
+                loading ? /* @__PURE__ */ jsx(View, { style: styles33.statusRow, children: /* @__PURE__ */ jsx(Text, { style: styles33.statusText, children: "Loading..." }) }) : filteredOptions.length === 0 ? /* @__PURE__ */ jsx(View, { style: styles33.statusRow, children: /* @__PURE__ */ jsx(Text, { style: styles33.statusText, children: emptyText }) }) : null,
+                !loading && filteredOptions.map((option) => {
+                  const isSelected = selectedValues.includes(option.value);
+                  const isHovered = hoveredValue === option.value;
+                  const visualState = isSelected ? "selected" : isHovered ? "hover" : "default";
+                  return /* @__PURE__ */ jsxs(
+                    Pressable,
+                    {
+                      onPress: () => handleSelect(option.value),
+                      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: [
+                        styles33.item,
+                        {
+                          backgroundColor: itemBackground(visualState)
+                        }
+                      ],
+                      children: [
+                        multiple ? /* @__PURE__ */ jsx(View, { style: [styles33.itemCheckbox, { pointerEvents: "none" }], children: /* @__PURE__ */ jsx(Checkbox, { value: isSelected, variant: "light" }) }) : null,
+                        /* @__PURE__ */ jsx(Text, { style: styles33.itemLabel, numberOfLines: 1, children: option.label })
+                      ]
+                    },
+                    option.value
+                  );
+                })
+              ]
+            }
+          )
+        ]
+      }
+    ) : null;
+    const webMenuPortal = Platform.OS === "web" && isOpen && typeof document !== "undefined" ? (0, import_react_dom3.createPortal)(menuNode, document.body) : null;
     return /* @__PURE__ */ jsxs(
       View,
       {
@@ -36634,80 +36736,7 @@ var Select = forwardRef(
                 ]
               }
             ),
-            isOpen ? /* @__PURE__ */ jsxs(
-              View,
-              {
-                style: [
-                  styles33.menu,
-                  menuAlignEnd ? styles33.menuAlignEnd : styles33.menuAlignStart,
-                  menuPlaceAbove ? styles33.menuAbove : styles33.menuBelow,
-                  menuStyle
-                ],
-                children: [
-                  showSearch ? /* @__PURE__ */ jsxs(View, { style: styles33.searchField, children: [
-                    /* @__PURE__ */ jsx(View, { style: styles33.iconSlot, children: /* @__PURE__ */ jsx(SearchIcon, { size: ICON_SIZE13, color: colors.grey100 }) }),
-                    /* @__PURE__ */ jsx(
-                      TextInput,
-                      {
-                        ref: searchInputRef,
-                        value: searchQuery,
-                        onChangeText: handleSearchChange,
-                        editable: !disabled,
-                        placeholder: searchPlaceholder,
-                        placeholderTextColor: colors.grey100,
-                        style: [
-                          styles33.searchInput,
-                          Platform.OS === "web" ? styles33.searchInputWeb : null,
-                          Platform.OS === "android" ? styles33.searchInputAndroid : null
-                        ],
-                        accessibilityLabel: searchPlaceholder
-                      }
-                    )
-                  ] }) : null,
-                  /* @__PURE__ */ jsxs(
-                    ScrollView,
-                    {
-                      style: [styles33.optionList, { maxHeight: resolvedOptionListMaxHeight }],
-                      contentContainerStyle: styles33.optionListContent,
-                      keyboardShouldPersistTaps: "handled",
-                      showsVerticalScrollIndicator: false,
-                      children: [
-                        loading ? /* @__PURE__ */ jsx(View, { style: styles33.statusRow, children: /* @__PURE__ */ jsx(Text, { style: styles33.statusText, children: "Loading..." }) }) : filteredOptions.length === 0 ? /* @__PURE__ */ jsx(View, { style: styles33.statusRow, children: /* @__PURE__ */ jsx(Text, { style: styles33.statusText, children: emptyText }) }) : null,
-                        !loading && filteredOptions.map((option) => {
-                          const isSelected = selectedValues.includes(option.value);
-                          const isHovered = hoveredValue === option.value;
-                          const visualState = isSelected ? "selected" : isHovered ? "hover" : "default";
-                          return /* @__PURE__ */ jsxs(
-                            Pressable,
-                            {
-                              onPress: () => handleSelect(option.value),
-                              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: [
-                                styles33.item,
-                                {
-                                  backgroundColor: itemBackground(visualState)
-                                }
-                              ],
-                              children: [
-                                multiple ? /* @__PURE__ */ jsx(View, { style: [styles33.itemCheckbox, { pointerEvents: "none" }], children: /* @__PURE__ */ jsx(Checkbox, { value: isSelected, variant: "light" }) }) : null,
-                                /* @__PURE__ */ jsx(Text, { style: styles33.itemLabel, numberOfLines: 1, children: option.label })
-                              ]
-                            },
-                            option.value
-                          );
-                        })
-                      ]
-                    }
-                  )
-                ]
-              }
-            ) : null
+            Platform.OS === "web" ? webMenuPortal : menuNode
           ] }),
           showHint && hint ? /* @__PURE__ */ jsx(Text, { style: [styles33.hint, { color: hintColor }], children: hint }) : null
         ]