@xsolla/xui-multi-select 0.176.0 → 0.177.0

package/web/index.mjs

@@ -1,5 +1,5 @@
 // src/MultiSelect.tsx
-import { forwardRef as forwardRef4, useRef as useRef4, useEffect as useEffect3 } from "react";
+import { forwardRef as forwardRef4, useRef as useRef4, useEffect as useEffect4, useState as useState4, useCallback as useCallback2 } from "react";
 
 // ../../foundation/primitives-web/src/Box.tsx
 import React2 from "react";
@@ -317,8 +317,11 @@ var Icon = ({
   return /* @__PURE__ */ jsx3(StyledIcon, { "data-testid": dataTestId || testID, ...props, children });
 };
 
+// ../../foundation/primitives-web/src/index.tsx
+var isWeb = true;
+
 // src/MultiSelect.tsx
-import { useResolvedTheme as useResolvedTheme4 } from "@xsolla/xui-core";
+import { useModalId, useResolvedTheme as useResolvedTheme4 } from "@xsolla/xui-core";
 
 // src/MultiSelectControl.tsx
 import { forwardRef as forwardRef3, useRef as useRef2 } from "react";
@@ -2174,6 +2177,16 @@ var useMultiSelect = ({
   };
 };
 
+// src/Portal.web.tsx
+import { useEffect as useEffect3, useState as useState3 } from "react";
+import { createPortal } from "react-dom";
+var Portal = ({ children }) => {
+  const [mountNode, setMountNode] = useState3(null);
+  useEffect3(() => setMountNode(document.body), []);
+  if (!mountNode) return null;
+  return createPortal(children, mountNode);
+};
+
 // src/MultiSelect.tsx
 import { Fragment, jsx as jsx726, jsxs as jsxs4 } from "react/jsx-runtime";
 var EXTERNAL_MENU_MIN_WIDTH_DEFAULT = 540;
@@ -2204,8 +2217,10 @@ var MultiSelect = forwardRef4(
     themeProductContext
   }, ref) => {
     const { theme } = useResolvedTheme4({ themeMode, themeProductContext });
+    const modalId = useModalId();
     const controlRef = useRef4(null);
     const menuRef = useRef4(null);
+    const [menuPosition, setMenuPosition] = useState4(null);
     const sizeStyles = theme.sizing.input(size);
     const state = externalState || (disabled ? "disable" : "default");
     const isDisable = state === "disable" || disabled;
@@ -2226,7 +2241,7 @@ var MultiSelect = forwardRef4(
       value,
       onChange
     });
-    useEffect3(() => {
+    useEffect4(() => {
       if (isDisable || !dropdownMenu) {
         onClose();
       }
@@ -2249,11 +2264,111 @@ var MultiSelect = forwardRef4(
     };
     const controlMenuOpen = dropdownMenu ? isOpen : Boolean(menuOpen);
     const controlOnClick = dropdownMenu ? onSelectClick : onTriggerPress;
+    const updateMenuPosition = useCallback2(() => {
+      if (!isWeb || !controlRef.current) return;
+      const rect = controlRef.current.getBoundingClientRect();
+      setMenuPosition({
+        left: rect.left,
+        top: rect.bottom + 4,
+        width: rect.width
+      });
+    }, []);
+    useEffect4(() => {
+      if (!isWeb || !controlMenuOpen || isDisable || !dropdownMenu) return;
+      updateMenuPosition();
+      window.addEventListener("resize", updateMenuPosition);
+      window.addEventListener("scroll", updateMenuPosition, true);
+      return () => {
+        window.removeEventListener("resize", updateMenuPosition);
+        window.removeEventListener("scroll", updateMenuPosition, true);
+      };
+    }, [controlMenuOpen, dropdownMenu, isDisable, updateMenuPosition]);
     const externalFieldLayout = !dropdownMenu ? {
       width: "100%",
       minWidth: menuMinWidth ?? EXTERNAL_MENU_MIN_WIDTH_DEFAULT,
       boxSizing: "border-box"
     } : void 0;
+    const dropdown = dropdownMenu && isOpen && !isDisable && (!isWeb || menuPosition) && /* @__PURE__ */ jsxs4(Fragment, { children: [
+      /* @__PURE__ */ jsx726(
+        Box,
+        {
+          "data-modal-id": modalId,
+          style: {
+            position: "fixed",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            zIndex: 999,
+            cursor: "default"
+          },
+          onPress: onClose
+        }
+      ),
+      /* @__PURE__ */ jsx726(
+        Box,
+        {
+          ref: menuRef,
+          "data-modal-id": modalId,
+          backgroundColor: theme.colors.background.secondary,
+          borderColor: theme.colors.border.secondary,
+          borderWidth: 1,
+          borderRadius: sizeStyles.radius,
+          paddingVertical: 4,
+          style: {
+            position: isWeb ? "fixed" : "absolute",
+            top: isWeb ? menuPosition?.top : "100%",
+            left: isWeb ? menuPosition?.left : 0,
+            right: isWeb ? void 0 : 0,
+            width: isWeb ? menuPosition?.width : void 0,
+            marginTop: isWeb ? void 0 : 4,
+            zIndex: 1001,
+            // Above control (1000) and backdrop (999)
+            boxShadow: theme.shadow.popover,
+            maxHeight,
+            overflowY: "auto"
+          },
+          children: menuItems.map((item, _index) => {
+            const brandColors = theme.colors.control.brand.primary;
+            const contentColors = theme.colors.content;
+            return /* @__PURE__ */ jsx726(
+              Box,
+              {
+                testID,
+                paddingHorizontal: sizeStyles.paddingHorizontal,
+                paddingVertical: 8,
+                onPress: () => {
+                  if (!item.disabled) {
+                    handleItemToggle(item.id, !item.checked);
+                  }
+                },
+                flexDirection: "row",
+                alignItems: "center",
+                justifyContent: "space-between",
+                backgroundColor: item.checked ? brandColors.bg : "transparent",
+                hoverStyle: !item.disabled && !item.checked ? {
+                  backgroundColor: theme.colors.control.input.bgHover
+                } : void 0,
+                style: {
+                  cursor: item.disabled ? "not-allowed" : "pointer",
+                  opacity: item.disabled ? 0.5 : 1
+                },
+                children: /* @__PURE__ */ jsx726(
+                  Text,
+                  {
+                    color: item.checked ? contentColors.on.brand : theme.colors.content.secondary,
+                    fontSize: sizeStyles.fontSize,
+                    fontWeight: "400",
+                    children: item.children
+                  }
+                )
+              },
+              item.id
+            );
+          })
+        }
+      )
+    ] });
     return /* @__PURE__ */ jsxs4(
       Box,
       {
@@ -2305,84 +2420,7 @@ var MultiSelect = forwardRef4(
                     extraClear
                   }
                 ),
-                dropdownMenu && isOpen && !isDisable && /* @__PURE__ */ jsxs4(Fragment, { children: [
-                  /* @__PURE__ */ jsx726(
-                    Box,
-                    {
-                      style: {
-                        position: "fixed",
-                        top: 0,
-                        left: 0,
-                        right: 0,
-                        bottom: 0,
-                        zIndex: 999,
-                        cursor: "default"
-                      },
-                      onPress: onClose
-                    }
-                  ),
-                  /* @__PURE__ */ jsx726(
-                    Box,
-                    {
-                      ref: menuRef,
-                      backgroundColor: theme.colors.background.secondary,
-                      borderColor: theme.colors.border.secondary,
-                      borderWidth: 1,
-                      borderRadius: theme.shape.input[size].borderRadius,
-                      paddingVertical: 4,
-                      style: {
-                        position: "absolute",
-                        top: "100%",
-                        left: 0,
-                        right: 0,
-                        marginTop: 4,
-                        zIndex: 1001,
-                        // Above control (1000) and backdrop (999)
-                        boxShadow: theme.shadow.popover,
-                        maxHeight,
-                        overflowY: "auto"
-                      },
-                      children: menuItems.map((item, _index) => {
-                        const brandColors = theme.colors.control.brand.primary;
-                        const contentColors = theme.colors.content;
-                        return /* @__PURE__ */ jsx726(
-                          Box,
-                          {
-                            testID,
-                            paddingHorizontal: sizeStyles.paddingHorizontal,
-                            paddingVertical: 8,
-                            onPress: () => {
-                              if (!item.disabled) {
-                                handleItemToggle(item.id, !item.checked);
-                              }
-                            },
-                            flexDirection: "row",
-                            alignItems: "center",
-                            justifyContent: "space-between",
-                            backgroundColor: item.checked ? brandColors.bg : "transparent",
-                            hoverStyle: !item.disabled && !item.checked ? {
-                              backgroundColor: theme.colors.control.input.bgHover
-                            } : void 0,
-                            style: {
-                              cursor: item.disabled ? "not-allowed" : "pointer",
-                              opacity: item.disabled ? 0.5 : 1
-                            },
-                            children: /* @__PURE__ */ jsx726(
-                              Text,
-                              {
-                                color: item.checked ? contentColors.on.brand : theme.colors.content.secondary,
-                                fontSize: sizeStyles.fontSize,
-                                fontWeight: "400",
-                                children: item.children
-                              }
-                            )
-                          },
-                          item.id
-                        );
-                      })
-                    }
-                  )
-                ] })
+                isWeb ? /* @__PURE__ */ jsx726(Portal, { children: dropdown }) : dropdown
               ]
             }
           ),