@xsolla/xui-multi-select 0.175.0 → 0.176.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsolla/xui-multi-select",
-  "version": "0.175.0",
+  "version": "0.176.1",
   "main": "./web/index.js",
   "module": "./web/index.mjs",
   "types": "./web/index.d.ts",
@@ -10,13 +10,14 @@
     "build:native": "PLATFORM=native tsup"
   },
   "dependencies": {
-    "@xsolla/xui-checkbox": "0.175.0",
-    "@xsolla/xui-core": "0.175.0",
-    "@xsolla/xui-dropdown": "0.175.0",
-    "@xsolla/xui-primitives-core": "0.175.0"
+    "@xsolla/xui-checkbox": "0.176.1",
+    "@xsolla/xui-core": "0.176.1",
+    "@xsolla/xui-dropdown": "0.176.1",
+    "@xsolla/xui-primitives-core": "0.176.1"
   },
   "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/MultiSelect.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 
 // ../../foundation/primitives-web/src/Box.tsx
 var import_react2 = __toESM(require("react"));
@@ -353,6 +353,9 @@ var Icon = ({
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(StyledIcon, { "data-testid": dataTestId || testID, ...props, children });
 };
 
+// ../../foundation/primitives-web/src/index.tsx
+var isWeb = true;
+
 // src/MultiSelect.tsx
 var import_xui_core4 = require("@xsolla/xui-core");
 
@@ -2205,10 +2208,20 @@ var useMultiSelect = ({
   };
 };
 
+// src/Portal.web.tsx
+var import_react11 = require("react");
+var import_react_dom = require("react-dom");
+var Portal = ({ children }) => {
+  const [mountNode, setMountNode] = (0, import_react11.useState)(null);
+  (0, import_react11.useEffect)(() => setMountNode(document.body), []);
+  if (!mountNode) return null;
+  return (0, import_react_dom.createPortal)(children, mountNode);
+};
+
 // src/MultiSelect.tsx
 var import_jsx_runtime733 = require("react/jsx-runtime");
 var EXTERNAL_MENU_MIN_WIDTH_DEFAULT = 540;
-var MultiSelect = (0, import_react11.forwardRef)(
+var MultiSelect = (0, import_react12.forwardRef)(
   ({
     options,
     errorMessage,
@@ -2235,8 +2248,10 @@ var MultiSelect = (0, import_react11.forwardRef)(
     themeProductContext
   }, ref) => {
     const { theme } = (0, import_xui_core4.useResolvedTheme)({ themeMode, themeProductContext });
-    const controlRef = (0, import_react11.useRef)(null);
-    const menuRef = (0, import_react11.useRef)(null);
+    const modalId = (0, import_xui_core4.useModalId)();
+    const controlRef = (0, import_react12.useRef)(null);
+    const menuRef = (0, import_react12.useRef)(null);
+    const [menuPosition, setMenuPosition] = (0, import_react12.useState)(null);
     const sizeStyles = theme.sizing.input(size);
     const state = externalState || (disabled ? "disable" : "default");
     const isDisable = state === "disable" || disabled;
@@ -2257,7 +2272,7 @@ var MultiSelect = (0, import_react11.forwardRef)(
       value,
       onChange
     });
-    (0, import_react11.useEffect)(() => {
+    (0, import_react12.useEffect)(() => {
       if (isDisable || !dropdownMenu) {
         onClose();
       }
@@ -2280,11 +2295,111 @@ var MultiSelect = (0, import_react11.forwardRef)(
     };
     const controlMenuOpen = dropdownMenu ? isOpen : Boolean(menuOpen);
     const controlOnClick = dropdownMenu ? onSelectClick : onTriggerPress;
+    const updateMenuPosition = (0, import_react12.useCallback)(() => {
+      if (!isWeb || !controlRef.current) return;
+      const rect = controlRef.current.getBoundingClientRect();
+      setMenuPosition({
+        left: rect.left,
+        top: rect.bottom + 4,
+        width: rect.width
+      });
+    }, []);
+    (0, import_react12.useEffect)(() => {
+      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__ */ (0, import_jsx_runtime733.jsxs)(import_jsx_runtime733.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime733.jsx)(
+        Box,
+        {
+          "data-modal-id": modalId,
+          style: {
+            position: "fixed",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            zIndex: 999,
+            cursor: "default"
+          },
+          onPress: onClose
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime733.jsx)(
+        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__ */ (0, import_jsx_runtime733.jsx)(
+              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__ */ (0, import_jsx_runtime733.jsx)(
+                  Text,
+                  {
+                    color: item.checked ? contentColors.on.brand : theme.colors.content.secondary,
+                    fontSize: sizeStyles.fontSize,
+                    fontWeight: "400",
+                    children: item.children
+                  }
+                )
+              },
+              item.id
+            );
+          })
+        }
+      )
+    ] });
     return /* @__PURE__ */ (0, import_jsx_runtime733.jsxs)(
       Box,
       {
@@ -2336,84 +2451,7 @@ var MultiSelect = (0, import_react11.forwardRef)(
                     extraClear
                   }
                 ),
-                dropdownMenu && isOpen && !isDisable && /* @__PURE__ */ (0, import_jsx_runtime733.jsxs)(import_jsx_runtime733.Fragment, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime733.jsx)(
-                    Box,
-                    {
-                      style: {
-                        position: "fixed",
-                        top: 0,
-                        left: 0,
-                        right: 0,
-                        bottom: 0,
-                        zIndex: 999,
-                        cursor: "default"
-                      },
-                      onPress: onClose
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime733.jsx)(
-                    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__ */ (0, import_jsx_runtime733.jsx)(
-                          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__ */ (0, import_jsx_runtime733.jsx)(
-                              Text,
-                              {
-                                color: item.checked ? contentColors.on.brand : theme.colors.content.secondary,
-                                fontSize: sizeStyles.fontSize,
-                                fontWeight: "400",
-                                children: item.children
-                              }
-                            )
-                          },
-                          item.id
-                        );
-                      })
-                    }
-                  )
-                ] })
+                isWeb ? /* @__PURE__ */ (0, import_jsx_runtime733.jsx)(Portal, { children: dropdown }) : dropdown
               ]
             }
           ),