@xsolla/xui-select 0.176.0 → 0.177.0

package/web/index.mjs

@@ -1,5 +1,5 @@
 // src/Select.tsx
-import { useState, useRef, useEffect, useCallback } from "react";
+import { useState as useState2, useRef, useEffect as useEffect2, useCallback } from "react";
 
 // ../../foundation/primitives-web/src/Box.tsx
 import React2 from "react";
@@ -323,6 +323,7 @@ var isNative = false;
 
 // src/Select.tsx
 import {
+  useModalId,
   useResolvedTheme
 } from "@xsolla/xui-core";
 import { useClickOutside } from "@xsolla/xui-hooks";
@@ -333,6 +334,18 @@ import {
   Remove,
   Search as SearchIcon
 } from "@xsolla/xui-icons-base";
+
+// src/Portal.web.tsx
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+var Portal = ({ children }) => {
+  const [mountNode, setMountNode] = useState(null);
+  useEffect(() => setMountNode(document.body), []);
+  if (!mountNode) return null;
+  return createPortal(children, mountNode);
+};
+
+// src/Select.tsx
 import { jsx as jsx4, jsxs } from "react/jsx-runtime";
 var Select = ({
   value,
@@ -372,20 +385,35 @@ var Select = ({
     themeProductContext: overlayThemeProductContext ?? themeProductContext
   });
   const overlayTheme = rawOverlayTheme;
-  const [isOpen, setIsOpen] = useState(false);
-  const [selectedValue, setSelectedValue] = useState(value);
-  const [searchValue, setSearchValue] = useState("");
+  const modalId = useModalId();
+  const [isOpen, setIsOpen] = useState2(false);
+  const [selectedValue, setSelectedValue] = useState2(value);
+  const [searchValue, setSearchValue] = useState2("");
+  const [dropdownPosition, setDropdownPosition] = useState2(null);
   const containerRef = useRef(null);
+  const triggerRef = useRef(null);
   const dropdownRef = useRef(null);
   const selectedItemRef = useRef(null);
   const searchInputRef = useRef(null);
   const isDisable = externalState === "disable" || disabled;
   const isError = externalState === "error" || !!errorMessage;
   const isFocus = externalState === "focus" || isOpen;
-  useEffect(() => {
+  const sizeStyles = theme.sizing.input(size);
+  const inputColors = theme.colors.control.input;
+  const overlayInputColors = overlayTheme.colors.control.input;
+  const updateDropdownPosition = useCallback(() => {
+    if (!isWeb || !triggerRef.current) return;
+    const rect = triggerRef.current.getBoundingClientRect();
+    setDropdownPosition({
+      left: rect.left,
+      top: rect.bottom + sizeStyles.fieldGap,
+      width: rect.width
+    });
+  }, [sizeStyles.fieldGap]);
+  useEffect2(() => {
     if (value !== void 0) setSelectedValue(value);
   }, [value]);
-  useEffect(() => {
+  useEffect2(() => {
     if (isFocus && selectedItemRef.current && dropdownRef.current) {
       const timeoutId = setTimeout(() => {
         const selectedItem = selectedItemRef.current;
@@ -395,15 +423,33 @@ var Select = ({
       return () => clearTimeout(timeoutId);
     }
   }, [isFocus]);
-  useEffect(() => {
+  useEffect2(() => {
+    if (!isWeb || !isFocus) return;
+    updateDropdownPosition();
+    window.addEventListener("resize", updateDropdownPosition);
+    window.addEventListener("scroll", updateDropdownPosition, true);
+    return () => {
+      window.removeEventListener("resize", updateDropdownPosition);
+      window.removeEventListener("scroll", updateDropdownPosition, true);
+    };
+  }, [isFocus, updateDropdownPosition]);
+  useEffect2(() => {
     if (isFocus && searchable) searchInputRef.current?.focus();
   }, [isFocus, searchable]);
-  useEffect(() => {
+  useEffect2(() => {
     if (!isFocus) setSearchValue("");
   }, [isFocus]);
   useClickOutside(
     containerRef,
-    useCallback(() => setIsOpen(false), [setIsOpen]),
+    useCallback((event) => {
+      const dropdownEl = dropdownRef.current;
+      if (dropdownEl) {
+        const path = typeof event.composedPath === "function" ? event.composedPath() : [];
+        const insideDropdown = path.length ? path.includes(dropdownEl) : dropdownEl.contains(event.target);
+        if (insideDropdown) return;
+      }
+      setIsOpen(false);
+    }, []),
     isWeb && isOpen
   );
   const getOptionLabel = (option) => typeof option === "string" ? option : option.label;
@@ -412,9 +458,6 @@ var Select = ({
   const filteredOptions = searchable && searchValue ? options.filter(
     (option) => getOptionLabel(option).toLowerCase().includes(searchValue.toLowerCase())
   ) : options;
-  const sizeStyles = theme.sizing.input(size);
-  const inputColors = theme.colors.control.input;
-  const overlayInputColors = overlayTheme.colors.control.input;
   const handlePress = () => {
     if (!isDisable) {
       if (onPress) onPress();
@@ -458,6 +501,142 @@ var Select = ({
   ) : placeholder;
   const textColor = isDisable ? inputColors.textDisable : selectedValue ? inputColors.text : inputColors.placeholder;
   const iconColor = isDisable ? inputColors.textDisable : inputColors.text;
+  const dropdownTop = sizeStyles.height + (label ? sizeStyles.fontSize + sizeStyles.fieldGap : 0) + sizeStyles.fieldGap;
+  const dropdown = isFocus && options.length > 0 && (isNative || dropdownPosition) && /* @__PURE__ */ jsxs(
+    Box,
+    {
+      ref: dropdownRef,
+      "data-modal-id": modalId,
+      position: isNative ? "absolute" : "fixed",
+      top: isNative ? dropdownTop : dropdownPosition?.top,
+      left: isNative ? void 0 : dropdownPosition?.left,
+      width: isNative ? "100%" : dropdownPosition?.width,
+      backgroundColor: overlayTheme.colors.background.secondary,
+      borderColor: overlayTheme.colors.border.secondary,
+      borderWidth: 1,
+      borderRadius: overlayTheme.shape.contextMenu[size].borderRadius,
+      style: {
+        zIndex: 2e3,
+        ...isNative ? { elevation: 4 } : { boxShadow: "0 4px 12px rgba(0,0,0,0.1)" },
+        minWidth: iconOnly ? sizeStyles.height * 3 : void 0
+      },
+      children: [
+        searchable && !isNative && /* @__PURE__ */ jsx4(
+          Box,
+          {
+            paddingHorizontal: sizeStyles.paddingHorizontal,
+            paddingVertical: sizeStyles.paddingVertical,
+            borderBottomWidth: 1,
+            borderColor: overlayTheme.colors.border.secondary,
+            children: /* @__PURE__ */ jsxs(
+              Box,
+              {
+                flexDirection: "row",
+                alignItems: "center",
+                gap: sizeStyles.paddingHorizontal / 2,
+                paddingHorizontal: 4,
+                children: [
+                  /* @__PURE__ */ jsx4(
+                    Icon,
+                    {
+                      size: sizeStyles.iconSize - 2,
+                      color: overlayInputColors.placeholder,
+                      children: /* @__PURE__ */ jsx4(SearchIcon, {})
+                    }
+                  ),
+                  /* @__PURE__ */ jsx4(
+                    Box,
+                    {
+                      as: "input",
+                      ref: searchInputRef,
+                      flex: 1,
+                      type: "text",
+                      value: searchValue,
+                      onChange: (e) => setSearchValue(e.target.value),
+                      placeholder: searchPlaceholder,
+                      style: {
+                        border: "none",
+                        outline: "none",
+                        background: "transparent",
+                        color: overlayInputColors.text,
+                        fontSize: sizeStyles.fontSize,
+                        width: "100%"
+                      }
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx4(
+          Box,
+          {
+            paddingVertical: 4,
+            overflow: "scroll",
+            style: {
+              maxHeight: searchable ? maxHeight - 60 : maxHeight,
+              ...isWeb ? { overflowY: "auto" } : {}
+            },
+            children: filteredOptions.length === 0 ? /* @__PURE__ */ jsx4(
+              Box,
+              {
+                paddingVertical: sizeStyles.paddingVertical * 2,
+                paddingHorizontal: sizeStyles.paddingHorizontal,
+                alignItems: "center",
+                children: /* @__PURE__ */ jsx4(
+                  Text,
+                  {
+                    color: overlayTheme.colors.content.tertiary,
+                    fontSize: sizeStyles.fontSize,
+                    children: noOptionsMessage
+                  }
+                )
+              }
+            ) : filteredOptions.map((option, index2) => {
+              const optionValue = getOptionValue(option);
+              const optionLabel = getOptionLabel(option);
+              const isOptionDisabled = getOptionDisabled(option);
+              const isSelected = optionValue === selectedValue;
+              const brandColors = overlayTheme.colors.control.brand.primary;
+              const contentColors = overlayTheme.colors.content;
+              return /* @__PURE__ */ jsx4(
+                Box,
+                {
+                  testID,
+                  ref: isSelected ? selectedItemRef : void 0,
+                  paddingVertical: sizeStyles.paddingVertical,
+                  paddingHorizontal: sizeStyles.paddingHorizontal,
+                  onPress: isOptionDisabled ? void 0 : () => handleSelect(option),
+                  flexDirection: "row",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  backgroundColor: isSelected ? brandColors.bg : "transparent",
+                  style: {
+                    ...isWeb ? {
+                      cursor: isOptionDisabled ? "not-allowed" : "pointer"
+                    } : {},
+                    opacity: isOptionDisabled ? 0.5 : 1
+                  },
+                  hoverStyle: !isSelected && !isOptionDisabled ? { backgroundColor: overlayInputColors.bgHover } : void 0,
+                  children: /* @__PURE__ */ jsx4(
+                    Text,
+                    {
+                      color: isSelected ? contentColors.on.brand : overlayTheme.colors.content.secondary,
+                      fontSize: sizeStyles.fontSize,
+                      fontWeight: "400",
+                      children: optionLabel
+                    }
+                  )
+                },
+                index2
+              );
+            })
+          }
+        )
+      ]
+    }
+  );
   return /* @__PURE__ */ jsxs(
     Box,
     {
@@ -480,6 +659,7 @@ var Select = ({
         /* @__PURE__ */ jsxs(
           Box,
           {
+            ref: triggerRef,
             onPress: handlePress,
             backgroundColor,
             borderColor,
@@ -564,139 +744,7 @@ var Select = ({
             ]
           }
         ),
-        isFocus && options.length > 0 && /* @__PURE__ */ jsxs(
-          Box,
-          {
-            ref: dropdownRef,
-            position: "absolute",
-            top: sizeStyles.height + (label ? sizeStyles.fontSize + sizeStyles.fieldGap : 0) + sizeStyles.fieldGap,
-            width: "100%",
-            backgroundColor: overlayTheme.colors.background.secondary,
-            borderColor: overlayTheme.colors.border.secondary,
-            borderWidth: 1,
-            borderRadius: overlayTheme.shape.contextMenu[size].borderRadius,
-            style: {
-              zIndex: 1e3,
-              ...isNative ? { elevation: 4 } : { boxShadow: "0 4px 12px rgba(0,0,0,0.1)" },
-              minWidth: iconOnly ? sizeStyles.height * 3 : void 0
-            },
-            children: [
-              searchable && !isNative && /* @__PURE__ */ jsx4(
-                Box,
-                {
-                  paddingHorizontal: sizeStyles.paddingHorizontal,
-                  paddingVertical: sizeStyles.paddingVertical,
-                  borderBottomWidth: 1,
-                  borderColor: overlayTheme.colors.border.secondary,
-                  children: /* @__PURE__ */ jsxs(
-                    Box,
-                    {
-                      flexDirection: "row",
-                      alignItems: "center",
-                      gap: sizeStyles.paddingHorizontal / 2,
-                      paddingHorizontal: 4,
-                      children: [
-                        /* @__PURE__ */ jsx4(
-                          Icon,
-                          {
-                            size: sizeStyles.iconSize - 2,
-                            color: overlayInputColors.placeholder,
-                            children: /* @__PURE__ */ jsx4(SearchIcon, {})
-                          }
-                        ),
-                        /* @__PURE__ */ jsx4(
-                          Box,
-                          {
-                            as: "input",
-                            ref: searchInputRef,
-                            flex: 1,
-                            type: "text",
-                            value: searchValue,
-                            onChange: (e) => setSearchValue(e.target.value),
-                            placeholder: searchPlaceholder,
-                            style: {
-                              border: "none",
-                              outline: "none",
-                              background: "transparent",
-                              color: overlayInputColors.text,
-                              fontSize: sizeStyles.fontSize,
-                              width: "100%"
-                            }
-                          }
-                        )
-                      ]
-                    }
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsx4(
-                Box,
-                {
-                  paddingVertical: 4,
-                  overflow: "scroll",
-                  style: {
-                    maxHeight: searchable ? maxHeight - 60 : maxHeight,
-                    ...isWeb ? { overflowY: "auto" } : {}
-                  },
-                  children: filteredOptions.length === 0 ? /* @__PURE__ */ jsx4(
-                    Box,
-                    {
-                      paddingVertical: sizeStyles.paddingVertical * 2,
-                      paddingHorizontal: sizeStyles.paddingHorizontal,
-                      alignItems: "center",
-                      children: /* @__PURE__ */ jsx4(
-                        Text,
-                        {
-                          color: overlayTheme.colors.content.tertiary,
-                          fontSize: sizeStyles.fontSize,
-                          children: noOptionsMessage
-                        }
-                      )
-                    }
-                  ) : filteredOptions.map((option, index2) => {
-                    const optionValue = getOptionValue(option);
-                    const optionLabel = getOptionLabel(option);
-                    const isOptionDisabled = getOptionDisabled(option);
-                    const isSelected = optionValue === selectedValue;
-                    const brandColors = overlayTheme.colors.control.brand.primary;
-                    const contentColors = overlayTheme.colors.content;
-                    return /* @__PURE__ */ jsx4(
-                      Box,
-                      {
-                        testID,
-                        ref: isSelected ? selectedItemRef : void 0,
-                        paddingVertical: sizeStyles.paddingVertical,
-                        paddingHorizontal: sizeStyles.paddingHorizontal,
-                        onPress: isOptionDisabled ? void 0 : () => handleSelect(option),
-                        flexDirection: "row",
-                        alignItems: "center",
-                        justifyContent: "space-between",
-                        backgroundColor: isSelected ? brandColors.bg : "transparent",
-                        style: {
-                          ...isWeb ? {
-                            cursor: isOptionDisabled ? "not-allowed" : "pointer"
-                          } : {},
-                          opacity: isOptionDisabled ? 0.5 : 1
-                        },
-                        hoverStyle: !isSelected && !isOptionDisabled ? { backgroundColor: overlayInputColors.bgHover } : void 0,
-                        children: /* @__PURE__ */ jsx4(
-                          Text,
-                          {
-                            color: isSelected ? contentColors.on.brand : overlayTheme.colors.content.secondary,
-                            fontSize: sizeStyles.fontSize,
-                            fontWeight: "400",
-                            children: optionLabel
-                          }
-                        )
-                      },
-                      index2
-                    );
-                  })
-                }
-              )
-            ]
-          }
-        ),
+        isNative ? dropdown : /* @__PURE__ */ jsx4(Portal, { children: dropdown }),
         isError && errorMessage && /* @__PURE__ */ jsx4(
           Text,
           {