@xsolla/xui-select 0.176.0 → 0.177.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsolla/xui-select",
-  "version": "0.176.0",
+  "version": "0.177.0",
   "main": "./web/index.js",
   "module": "./web/index.mjs",
   "types": "./web/index.d.ts",
@@ -13,13 +13,14 @@
     "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
-    "@xsolla/xui-core": "0.176.0",
-    "@xsolla/xui-hooks": "0.176.0",
-    "@xsolla/xui-icons-base": "0.176.0",
-    "@xsolla/xui-primitives-core": "0.176.0"
+    "@xsolla/xui-core": "0.177.0",
+    "@xsolla/xui-hooks": "0.177.0",
+    "@xsolla/xui-icons-base": "0.177.0",
+    "@xsolla/xui-primitives-core": "0.177.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
+    "react-dom": ">=16.8.0",
     "styled-components": ">=4"
   },
   "devDependencies": {

package/web/index.js

@@ -35,7 +35,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/Select.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 
 // ../../foundation/primitives-web/src/Box.tsx
 var import_react2 = __toESM(require("react"));
@@ -361,6 +361,18 @@ var isNative = false;
 var import_xui_core = require("@xsolla/xui-core");
 var import_xui_hooks = require("@xsolla/xui-hooks");
 var import_xui_icons_base = require("@xsolla/xui-icons-base");
+
+// src/Portal.web.tsx
+var import_react3 = require("react");
+var import_react_dom = require("react-dom");
+var Portal = ({ children }) => {
+  const [mountNode, setMountNode] = (0, import_react3.useState)(null);
+  (0, import_react3.useEffect)(() => setMountNode(document.body), []);
+  if (!mountNode) return null;
+  return (0, import_react_dom.createPortal)(children, mountNode);
+};
+
+// src/Select.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var Select = ({
   value,
@@ -400,20 +412,35 @@ var Select = ({
     themeProductContext: overlayThemeProductContext ?? themeProductContext
   });
   const overlayTheme = rawOverlayTheme;
-  const [isOpen, setIsOpen] = (0, import_react3.useState)(false);
-  const [selectedValue, setSelectedValue] = (0, import_react3.useState)(value);
-  const [searchValue, setSearchValue] = (0, import_react3.useState)("");
-  const containerRef = (0, import_react3.useRef)(null);
-  const dropdownRef = (0, import_react3.useRef)(null);
-  const selectedItemRef = (0, import_react3.useRef)(null);
-  const searchInputRef = (0, import_react3.useRef)(null);
+  const modalId = (0, import_xui_core.useModalId)();
+  const [isOpen, setIsOpen] = (0, import_react4.useState)(false);
+  const [selectedValue, setSelectedValue] = (0, import_react4.useState)(value);
+  const [searchValue, setSearchValue] = (0, import_react4.useState)("");
+  const [dropdownPosition, setDropdownPosition] = (0, import_react4.useState)(null);
+  const containerRef = (0, import_react4.useRef)(null);
+  const triggerRef = (0, import_react4.useRef)(null);
+  const dropdownRef = (0, import_react4.useRef)(null);
+  const selectedItemRef = (0, import_react4.useRef)(null);
+  const searchInputRef = (0, import_react4.useRef)(null);
   const isDisable = externalState === "disable" || disabled;
   const isError = externalState === "error" || !!errorMessage;
   const isFocus = externalState === "focus" || isOpen;
-  (0, import_react3.useEffect)(() => {
+  const sizeStyles = theme.sizing.input(size);
+  const inputColors = theme.colors.control.input;
+  const overlayInputColors = overlayTheme.colors.control.input;
+  const updateDropdownPosition = (0, import_react4.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]);
+  (0, import_react4.useEffect)(() => {
     if (value !== void 0) setSelectedValue(value);
   }, [value]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (isFocus && selectedItemRef.current && dropdownRef.current) {
       const timeoutId = setTimeout(() => {
         const selectedItem = selectedItemRef.current;
@@ -423,15 +450,33 @@ var Select = ({
       return () => clearTimeout(timeoutId);
     }
   }, [isFocus]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
+    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]);
+  (0, import_react4.useEffect)(() => {
     if (isFocus && searchable) searchInputRef.current?.focus();
   }, [isFocus, searchable]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     if (!isFocus) setSearchValue("");
   }, [isFocus]);
   (0, import_xui_hooks.useClickOutside)(
     containerRef,
-    (0, import_react3.useCallback)(() => setIsOpen(false), [setIsOpen]),
+    (0, import_react4.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;
@@ -440,9 +485,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();
@@ -486,6 +528,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__ */ (0, import_jsx_runtime4.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__ */ (0, import_jsx_runtime4.jsx)(
+          Box,
+          {
+            paddingHorizontal: sizeStyles.paddingHorizontal,
+            paddingVertical: sizeStyles.paddingVertical,
+            borderBottomWidth: 1,
+            borderColor: overlayTheme.colors.border.secondary,
+            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+              Box,
+              {
+                flexDirection: "row",
+                alignItems: "center",
+                gap: sizeStyles.paddingHorizontal / 2,
+                paddingHorizontal: 4,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                    Icon,
+                    {
+                      size: sizeStyles.iconSize - 2,
+                      color: overlayInputColors.placeholder,
+                      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_xui_icons_base.Search, {})
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                    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__ */ (0, import_jsx_runtime4.jsx)(
+          Box,
+          {
+            paddingVertical: 4,
+            overflow: "scroll",
+            style: {
+              maxHeight: searchable ? maxHeight - 60 : maxHeight,
+              ...isWeb ? { overflowY: "auto" } : {}
+            },
+            children: filteredOptions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              Box,
+              {
+                paddingVertical: sizeStyles.paddingVertical * 2,
+                paddingHorizontal: sizeStyles.paddingHorizontal,
+                alignItems: "center",
+                children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  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__ */ (0, import_jsx_runtime4.jsx)(
+                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__ */ (0, import_jsx_runtime4.jsx)(
+                    Text,
+                    {
+                      color: isSelected ? contentColors.on.brand : overlayTheme.colors.content.secondary,
+                      fontSize: sizeStyles.fontSize,
+                      fontWeight: "400",
+                      children: optionLabel
+                    }
+                  )
+                },
+                index2
+              );
+            })
+          }
+        )
+      ]
+    }
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
     Box,
     {
@@ -508,6 +686,7 @@ var Select = ({
         /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
           Box,
           {
+            ref: triggerRef,
             onPress: handlePress,
             backgroundColor,
             borderColor,
@@ -592,139 +771,7 @@ var Select = ({
             ]
           }
         ),
-        isFocus && options.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.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__ */ (0, import_jsx_runtime4.jsx)(
-                Box,
-                {
-                  paddingHorizontal: sizeStyles.paddingHorizontal,
-                  paddingVertical: sizeStyles.paddingVertical,
-                  borderBottomWidth: 1,
-                  borderColor: overlayTheme.colors.border.secondary,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-                    Box,
-                    {
-                      flexDirection: "row",
-                      alignItems: "center",
-                      gap: sizeStyles.paddingHorizontal / 2,
-                      paddingHorizontal: 4,
-                      children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                          Icon,
-                          {
-                            size: sizeStyles.iconSize - 2,
-                            color: overlayInputColors.placeholder,
-                            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_xui_icons_base.Search, {})
-                          }
-                        ),
-                        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                          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__ */ (0, import_jsx_runtime4.jsx)(
-                Box,
-                {
-                  paddingVertical: 4,
-                  overflow: "scroll",
-                  style: {
-                    maxHeight: searchable ? maxHeight - 60 : maxHeight,
-                    ...isWeb ? { overflowY: "auto" } : {}
-                  },
-                  children: filteredOptions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                    Box,
-                    {
-                      paddingVertical: sizeStyles.paddingVertical * 2,
-                      paddingHorizontal: sizeStyles.paddingHorizontal,
-                      alignItems: "center",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                        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__ */ (0, import_jsx_runtime4.jsx)(
-                      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__ */ (0, import_jsx_runtime4.jsx)(
-                          Text,
-                          {
-                            color: isSelected ? contentColors.on.brand : overlayTheme.colors.content.secondary,
-                            fontSize: sizeStyles.fontSize,
-                            fontWeight: "400",
-                            children: optionLabel
-                          }
-                        )
-                      },
-                      index2
-                    );
-                  })
-                }
-              )
-            ]
-          }
-        ),
+        isNative ? dropdown : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Portal, { children: dropdown }),
         isError && errorMessage && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           Text,
           {