@xsolla/xui-multi-select 0.176.0 → 0.177.0

package/native/index.js

@@ -306,6 +306,9 @@ var Icon = ({
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_native3.View, { style, testID: dataTestId || testID, children: childrenWithProps });
 };
 
+// ../../foundation/primitives-native/src/index.tsx
+var isWeb = false;
+
 // src/MultiSelect.tsx
 var import_xui_core4 = require("@xsolla/xui-core");
 
@@ -2158,8 +2161,12 @@ var useMultiSelect = ({
   };
 };
 
-// src/MultiSelect.tsx
+// src/Portal.native.tsx
 var import_jsx_runtime733 = require("react/jsx-runtime");
+var Portal = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime733.jsx)(import_jsx_runtime733.Fragment, { children });
+
+// src/MultiSelect.tsx
+var import_jsx_runtime734 = require("react/jsx-runtime");
 var EXTERNAL_MENU_MIN_WIDTH_DEFAULT = 540;
 var MultiSelect = (0, import_react10.forwardRef)(
   ({
@@ -2188,8 +2195,10 @@ var MultiSelect = (0, import_react10.forwardRef)(
     themeProductContext
   }, ref) => {
     const { theme } = (0, import_xui_core4.useResolvedTheme)({ themeMode, themeProductContext });
+    const modalId = (0, import_xui_core4.useModalId)();
     const controlRef = (0, import_react10.useRef)(null);
     const menuRef = (0, import_react10.useRef)(null);
+    const [menuPosition, setMenuPosition] = (0, import_react10.useState)(null);
     const sizeStyles = theme.sizing.input(size);
     const state = externalState || (disabled ? "disable" : "default");
     const isDisable = state === "disable" || disabled;
@@ -2233,12 +2242,112 @@ var MultiSelect = (0, import_react10.forwardRef)(
     };
     const controlMenuOpen = dropdownMenu ? isOpen : Boolean(menuOpen);
     const controlOnClick = dropdownMenu ? onSelectClick : onTriggerPress;
+    const updateMenuPosition = (0, import_react10.useCallback)(() => {
+      if (!isWeb || !controlRef.current) return;
+      const rect = controlRef.current.getBoundingClientRect();
+      setMenuPosition({
+        left: rect.left,
+        top: rect.bottom + 4,
+        width: rect.width
+      });
+    }, []);
+    (0, import_react10.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;
-    return /* @__PURE__ */ (0, import_jsx_runtime733.jsxs)(
+    const dropdown = dropdownMenu && isOpen && !isDisable && (!isWeb || menuPosition) && /* @__PURE__ */ (0, import_jsx_runtime734.jsxs)(import_jsx_runtime734.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime734.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_runtime734.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_runtime734.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_runtime734.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_runtime734.jsxs)(
       Box,
       {
         testID,
@@ -2246,7 +2355,7 @@ var MultiSelect = (0, import_react10.forwardRef)(
         gap: sizeStyles.fieldGap,
         style: externalFieldLayout,
         children: [
-          label && /* @__PURE__ */ (0, import_jsx_runtime733.jsx)(
+          label && /* @__PURE__ */ (0, import_jsx_runtime734.jsx)(
             Text,
             {
               color: theme.colors.content.secondary,
@@ -2255,7 +2364,7 @@ var MultiSelect = (0, import_react10.forwardRef)(
               children: label
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime733.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime734.jsxs)(
             Box,
             {
               ref,
@@ -2264,7 +2373,7 @@ var MultiSelect = (0, import_react10.forwardRef)(
                 ...externalFieldLayout ? { width: "100%" } : {}
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime733.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime734.jsx)(
                   MultiSelectControl,
                   {
                     ref: controlRef,
@@ -2289,88 +2398,11 @@ var MultiSelect = (0, import_react10.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_runtime734.jsx)(Portal, { children: dropdown }) : dropdown
               ]
             }
           ),
-          errorMessage && /* @__PURE__ */ (0, import_jsx_runtime733.jsx)(
+          errorMessage && /* @__PURE__ */ (0, import_jsx_runtime734.jsx)(
             Text,
             {
               color: theme.colors.content.alert.primary,