@xsolla/xui-multi-select 0.170.0-pr330.1780970046 → 0.170.1

package/native/index.js

@@ -306,9 +306,6 @@ 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");
 
@@ -2177,12 +2174,8 @@ var useMultiSelect = ({
   };
 };
 
-// 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 import_jsx_runtime733 = require("react/jsx-runtime");
 var EXTERNAL_MENU_MIN_WIDTH_DEFAULT = 540;
 var MultiSelect = (0, import_react10.forwardRef)(
   ({
@@ -2211,10 +2204,8 @@ 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;
@@ -2258,112 +2249,12 @@ 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;
-    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)(
+    return /* @__PURE__ */ (0, import_jsx_runtime733.jsxs)(
       Box,
       {
         testID,
@@ -2371,7 +2262,7 @@ var MultiSelect = (0, import_react10.forwardRef)(
         gap: sizeStyles.fieldGap,
         style: externalFieldLayout,
         children: [
-          label && /* @__PURE__ */ (0, import_jsx_runtime734.jsx)(
+          label && /* @__PURE__ */ (0, import_jsx_runtime733.jsx)(
             Text,
             {
               color: theme.colors.content.secondary,
@@ -2380,7 +2271,7 @@ var MultiSelect = (0, import_react10.forwardRef)(
               children: label
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime734.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime733.jsxs)(
             Box,
             {
               ref,
@@ -2389,7 +2280,7 @@ var MultiSelect = (0, import_react10.forwardRef)(
                 ...externalFieldLayout ? { width: "100%" } : {}
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime734.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime733.jsx)(
                   MultiSelectControl,
                   {
                     ref: controlRef,
@@ -2414,11 +2305,88 @@ var MultiSelect = (0, import_react10.forwardRef)(
                     extraClear
                   }
                 ),
-                isWeb ? /* @__PURE__ */ (0, import_jsx_runtime734.jsx)(Portal, { children: dropdown }) : dropdown
+                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
+                        );
+                      })
+                    }
+                  )
+                ] })
               ]
             }
           ),
-          errorMessage && /* @__PURE__ */ (0, import_jsx_runtime734.jsx)(
+          errorMessage && /* @__PURE__ */ (0, import_jsx_runtime733.jsx)(
             Text,
             {
               color: theme.colors.content.alert.primary,