react-open-source-grid 1.7.24 → 1.7.25

package/dist/lib/index.cjs

@@ -2832,6 +2832,7 @@ var GridBody = ({
     }
     const isSelected = selectedRows.has(row.id);
     const isFocused = (focusState == null ? void 0 : focusState.rowIndex) === rowIndex;
+    const isRowEditing = editState.rowId === row.id;
     const isLoadingRow = row._loading === true;
     const isDragEnabled = (dragRowConfig == null ? void 0 : dragRowConfig.enabled) && !isLoadingRow;
     const showDragHandle = isDragEnabled && dragRowConfig.showDragHandle !== false;
@@ -2851,7 +2852,8 @@ var GridBody = ({
           borderBottom: "var(--grid-border-width, 1px) solid var(--grid-border)",
           backgroundColor: isLoadingRow ? "var(--grid-bg-alt)" : isSelected ? "var(--grid-selected)" : isFocused ? "var(--grid-active)" : "var(--grid-bg)",
           cursor: isLoadingRow ? "wait" : isDragEnabled ? "grab" : "pointer",
-          transition: "background-color 0.15s ease"
+          transition: "background-color 0.15s ease",
+          ...isRowEditing ? { position: "relative", zIndex: 100 } : {}
         },
         onMouseEnter: (e) => !isSelected && !isLoadingRow && (e.currentTarget.style.backgroundColor = "var(--grid-hover)"),
         onMouseLeave: (e) => !isSelected && !isLoadingRow && (e.currentTarget.style.backgroundColor = "var(--grid-bg)"),
@@ -2937,7 +2939,8 @@ var GridBody = ({
               flexShrink: 0,
               outline: isCellFocused ? "2px solid var(--grid-primary)" : "none",
               outlineOffset: "-2px",
-              color: "var(--grid-text)"
+              color: "var(--grid-text)",
+              ...isEditing ? { position: "relative", zIndex: 1e3 } : {}
             },
             onDoubleClick: () => handleCellDoubleClick(row, field, cellValue),
             onContextMenu: (e) => onContextMenu == null ? void 0 : onContextMenu(e, row, column, rowIndex, columnIndex),
@@ -4276,6 +4279,7 @@ var ExportMenu = ({
 
 // src/components/DataGrid/ColumnFilters.tsx
 var import_react15 = __toESM(require("react"), 1);
+var import_react_dom2 = __toESM(require("react-dom"), 1);
 
 // src/components/DataGrid/AdvancedFilterBuilder.tsx
 var import_react14 = __toESM(require("react"), 1);
@@ -4594,7 +4598,7 @@ var AdvancedFilterBuilder = ({
         borderRadius: "var(--grid-border-radius, 8px)",
         border: "1px solid var(--grid-border)",
         padding: "16px",
-        zIndex: 1001,
+        zIndex: 10001,
         display: "flex",
         flexDirection: "column",
         overflowY: "auto"
@@ -4850,7 +4854,7 @@ var TextFilterMenu = ({ filterValue, onApplyFilter, onClose, anchorEl, showAdvan
         borderRadius: "var(--grid-border-radius, 8px)",
         border: "var(--grid-border-width, 1px) solid var(--grid-border)",
         padding: "16px",
-        zIndex: 1e3
+        zIndex: 1e4
       },
       onClick: (e) => e.stopPropagation()
     },
@@ -4972,7 +4976,7 @@ var NumberFilterMenu = ({ filterValue, onApplyFilter, onClose, anchorEl, showAdv
         borderRadius: "var(--grid-border-radius, 8px)",
         border: "1px solid var(--grid-border)",
         padding: "16px",
-        zIndex: 1e3
+        zIndex: 1e4
       },
       onClick: (e) => e.stopPropagation()
     },
@@ -5088,7 +5092,7 @@ var DateFilterMenu = ({ filterValue, onApplyFilter, onClose, anchorEl, showAdvan
         borderRadius: "var(--grid-border-radius, 8px)",
         border: "1px solid var(--grid-border)",
         padding: "16px",
-        zIndex: 1e3
+        zIndex: 1e4
       },
       onClick: (e) => e.stopPropagation()
     },
@@ -5213,7 +5217,7 @@ var SetFilterMenu = ({ column, filterValue, onApplyFilter, onClose, rows, anchor
         borderRadius: "var(--grid-border-radius, 8px)",
         border: "1px solid var(--grid-border)",
         padding: "16px",
-        zIndex: 1e3,
+        zIndex: 1e4,
         display: "flex",
         flexDirection: "column"
       },
@@ -5569,8 +5573,8 @@ var ColumnFilters = ({
           )
         )
       ),
-      openFilterMenu === field && renderFilterMenu(column),
-      advancedFilterField === field && renderAdvancedFilterMenu(column)
+      openFilterMenu === field && import_react_dom2.default.createPortal(renderFilterMenu(column), document.body),
+      advancedFilterField === field && import_react_dom2.default.createPortal(renderAdvancedFilterMenu(column), document.body)
     );
   })));
 };
@@ -6518,7 +6522,7 @@ var useContextMenu = ({
 
 // src/components/DataGrid/Tooltip.tsx
 var import_react19 = __toESM(require("react"), 1);
-var import_react_dom2 = require("react-dom");
+var import_react_dom3 = require("react-dom");
 var Tooltip = ({
   state,
   maxWidth = 300,
@@ -6689,7 +6693,7 @@ var Tooltip = ({
       }
     )
   );
-  return (0, import_react_dom2.createPortal)(tooltipElement, document.body);
+  return (0, import_react_dom3.createPortal)(tooltipElement, document.body);
 };
 
 // src/components/DataGrid/useTooltip.tsx
@@ -13041,20 +13045,20 @@ function usePopupPosition(anchorRef, popupRef, isOpen, placement = "auto") {
     }
     switch (actualPlacement) {
       case "bottom":
-        top = anchorRect.bottom + window.scrollY;
-        left = anchorRect.left + window.scrollX;
+        top = anchorRect.bottom;
+        left = anchorRect.left;
         break;
       case "top":
-        top = anchorRect.top + window.scrollY - popupRect.height;
-        left = anchorRect.left + window.scrollX;
+        top = anchorRect.top - popupRect.height;
+        left = anchorRect.left;
         break;
       case "right":
-        top = anchorRect.top + window.scrollY;
-        left = anchorRect.right + window.scrollX;
+        top = anchorRect.top;
+        left = anchorRect.right;
         break;
       case "left":
-        top = anchorRect.top + window.scrollY;
-        left = anchorRect.left + window.scrollX - popupRect.width;
+        top = anchorRect.top;
+        left = anchorRect.left - popupRect.width;
         break;
     }
     const margin = 8;
@@ -13064,11 +13068,11 @@ function usePopupPosition(anchorRef, popupRef, isOpen, placement = "auto") {
     if (left < margin) {
       left = margin;
     }
-    if (top + popupRect.height > viewportHeight + window.scrollY) {
-      top = viewportHeight + window.scrollY - popupRect.height - margin;
+    if (top + popupRect.height > viewportHeight) {
+      top = viewportHeight - popupRect.height - margin;
     }
-    if (top < window.scrollY + margin) {
-      top = window.scrollY + margin;
+    if (top < margin) {
+      top = margin;
     }
     popup.style.top = `${top}px`;
     popup.style.left = `${left}px`;
@@ -13113,6 +13117,7 @@ function filterOptions(options, searchQuery) {
 
 // src/editors/RichSelectEditor.tsx
 var import_react37 = __toESM(require("react"), 1);
+var import_react_dom4 = __toESM(require("react-dom"), 1);
 function RichSelectEditor(props) {
   const {
     value,
@@ -13269,31 +13274,34 @@ function RichSelectEditor(props) {
       },
       "\xD7"
     ), /* @__PURE__ */ import_react37.default.createElement("span", { className: "editor-dropdown-icon", "aria-hidden": "true" }, "\u25BC"))),
-    isOpen && /* @__PURE__ */ import_react37.default.createElement(
-      "div",
-      {
-        ref: dropdownRef,
-        id: "richselect-dropdown",
-        className: "editor-dropdown",
-        role: "listbox",
-        style: { maxHeight: maxDropdownHeight }
-      },
-      filteredOptions.length === 0 ? /* @__PURE__ */ import_react37.default.createElement("div", { className: "editor-dropdown-empty" }, "No options found") : filteredOptions.map((option, index) => /* @__PURE__ */ import_react37.default.createElement(
+    isOpen && import_react_dom4.default.createPortal(
+      /* @__PURE__ */ import_react37.default.createElement(
         "div",
         {
-          key: option.value,
-          ref: (el) => {
-            optionRefs.current[index] = el;
-          },
-          className: `editor-dropdown-option ${option.value === value ? "selected" : ""} ${option.disabled ? "disabled" : ""} ${index === focusedIndex ? "focused" : ""}`,
-          role: "option",
-          "aria-selected": option.value === value,
-          "aria-disabled": option.disabled,
-          onClick: () => handleSelectOption(option),
-          onMouseEnter: () => !option.disabled && setFocusedIndex(index)
+          ref: dropdownRef,
+          id: "richselect-dropdown",
+          className: "editor-dropdown",
+          role: "listbox",
+          style: { maxHeight: maxDropdownHeight }
         },
-        renderLabel(option)
-      ))
+        filteredOptions.length === 0 ? /* @__PURE__ */ import_react37.default.createElement("div", { className: "editor-dropdown-empty" }, "No options found") : filteredOptions.map((option, index) => /* @__PURE__ */ import_react37.default.createElement(
+          "div",
+          {
+            key: option.value,
+            ref: (el) => {
+              optionRefs.current[index] = el;
+            },
+            className: `editor-dropdown-option ${option.value === value ? "selected" : ""} ${option.disabled ? "disabled" : ""} ${index === focusedIndex ? "focused" : ""}`,
+            role: "option",
+            "aria-selected": option.value === value,
+            "aria-disabled": option.disabled,
+            onClick: () => handleSelectOption(option),
+            onMouseEnter: () => !option.disabled && setFocusedIndex(index)
+          },
+          renderLabel(option)
+        ))
+      ),
+      document.body
     )
   );
 }
@@ -13301,6 +13309,7 @@ RichSelectEditor.displayName = "RichSelectEditor";
 
 // src/editors/DateEditor.tsx
 var import_react38 = __toESM(require("react"), 1);
+var import_react_dom5 = __toESM(require("react-dom"), 1);
 function DateEditor(props) {
   const {
     value,
@@ -13420,53 +13429,56 @@ function DateEditor(props) {
         autoComplete: "off"
       }
     ), /* @__PURE__ */ import_react38.default.createElement("span", { className: "editor-calendar-icon", "aria-hidden": "true" }, "\u{1F4C5}")),
-    isOpen && /* @__PURE__ */ import_react38.default.createElement("div", { ref: calendarRef, className: "editor-dropdown editor-calendar" }, /* @__PURE__ */ import_react38.default.createElement("div", { className: "editor-calendar-header" }, /* @__PURE__ */ import_react38.default.createElement(
-      "button",
-      {
-        type: "button",
-        className: "editor-calendar-nav",
-        onClick: handlePrevMonth,
-        "aria-label": "Previous month"
-      },
-      "\u2039"
-    ), /* @__PURE__ */ import_react38.default.createElement("div", { className: "editor-calendar-title" }, viewDate.toLocaleDateString("en-US", {
-      month: "long",
-      year: "numeric"
-    })), /* @__PURE__ */ import_react38.default.createElement(
-      "button",
-      {
-        type: "button",
-        className: "editor-calendar-nav",
-        onClick: handleNextMonth,
-        "aria-label": "Next month"
-      },
-      "\u203A"
-    )), /* @__PURE__ */ import_react38.default.createElement("div", { className: "editor-calendar-weekdays" }, ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => /* @__PURE__ */ import_react38.default.createElement("div", { key: day, className: "editor-calendar-weekday" }, day))), /* @__PURE__ */ import_react38.default.createElement("div", { className: "editor-calendar-days" }, calendarDays.map((day, index) => /* @__PURE__ */ import_react38.default.createElement(
-      "button",
-      {
-        key: index,
-        type: "button",
-        className: `editor-calendar-day ${day.className}`,
-        onClick: () => day.date && handleSelectDate(day.date),
-        disabled: day.disabled,
-        "aria-label": day.date ? day.date.toDateString() : ""
-      },
-      day.label
-    ))), showTime && /* @__PURE__ */ import_react38.default.createElement("div", { className: "editor-calendar-time" }, /* @__PURE__ */ import_react38.default.createElement(
-      "input",
-      {
-        type: "time",
-        className: "editor-time-input",
-        value: parsedValue ? `${String(parsedValue.getHours()).padStart(2, "0")}:${String(
-          parsedValue.getMinutes()
-        ).padStart(2, "0")}` : "00:00",
-        onChange: (e) => {
-          const [hours, minutes] = e.target.value.split(":").map(Number);
-          handleTimeChange(hours, minutes);
+    isOpen && import_react_dom5.default.createPortal(
+      /* @__PURE__ */ import_react38.default.createElement("div", { ref: calendarRef, className: "editor-dropdown editor-calendar" }, /* @__PURE__ */ import_react38.default.createElement("div", { className: "editor-calendar-header" }, /* @__PURE__ */ import_react38.default.createElement(
+        "button",
+        {
+          type: "button",
+          className: "editor-calendar-nav",
+          onClick: handlePrevMonth,
+          "aria-label": "Previous month"
         },
-        "aria-label": "Time input"
-      }
-    )))
+        "\u2039"
+      ), /* @__PURE__ */ import_react38.default.createElement("div", { className: "editor-calendar-title" }, viewDate.toLocaleDateString("en-US", {
+        month: "long",
+        year: "numeric"
+      })), /* @__PURE__ */ import_react38.default.createElement(
+        "button",
+        {
+          type: "button",
+          className: "editor-calendar-nav",
+          onClick: handleNextMonth,
+          "aria-label": "Next month"
+        },
+        "\u203A"
+      )), /* @__PURE__ */ import_react38.default.createElement("div", { className: "editor-calendar-weekdays" }, ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => /* @__PURE__ */ import_react38.default.createElement("div", { key: day, className: "editor-calendar-weekday" }, day))), /* @__PURE__ */ import_react38.default.createElement("div", { className: "editor-calendar-days" }, calendarDays.map((day, index) => /* @__PURE__ */ import_react38.default.createElement(
+        "button",
+        {
+          key: index,
+          type: "button",
+          className: `editor-calendar-day ${day.className}`,
+          onClick: () => day.date && handleSelectDate(day.date),
+          disabled: day.disabled,
+          "aria-label": day.date ? day.date.toDateString() : ""
+        },
+        day.label
+      ))), showTime && /* @__PURE__ */ import_react38.default.createElement("div", { className: "editor-calendar-time" }, /* @__PURE__ */ import_react38.default.createElement(
+        "input",
+        {
+          type: "time",
+          className: "editor-time-input",
+          value: parsedValue ? `${String(parsedValue.getHours()).padStart(2, "0")}:${String(
+            parsedValue.getMinutes()
+          ).padStart(2, "0")}` : "00:00",
+          onChange: (e) => {
+            const [hours, minutes] = e.target.value.split(":").map(Number);
+            handleTimeChange(hours, minutes);
+          },
+          "aria-label": "Time input"
+        }
+      ))),
+      document.body
+    )
   );
 }
 DateEditor.displayName = "DateEditor";
@@ -13723,6 +13735,7 @@ NumericEditor.displayName = "NumericEditor";
 
 // src/editors/MultiSelectEditor.tsx
 var import_react40 = __toESM(require("react"), 1);
+var import_react_dom6 = __toESM(require("react-dom"), 1);
 function MultiSelectEditor(props) {
   const {
     value = [],
@@ -13890,45 +13903,48 @@ function MultiSelectEditor(props) {
       ),
       /* @__PURE__ */ import_react40.default.createElement("span", { className: "editor-dropdown-icon", "aria-hidden": "true" }, "\u25BC")
     ),
-    isOpen && /* @__PURE__ */ import_react40.default.createElement(
-      "div",
-      {
-        ref: dropdownRef,
-        id: "multiselect-dropdown",
-        className: "editor-dropdown",
-        role: "listbox",
-        "aria-multiselectable": "true",
-        style: { maxHeight: maxDropdownHeight }
-      },
-      filteredOptions.length === 0 ? /* @__PURE__ */ import_react40.default.createElement("div", { className: "editor-dropdown-empty" }, "No options found") : filteredOptions.map((option, index) => {
-        const isSelected = selectedValues.includes(option.value);
-        return /* @__PURE__ */ import_react40.default.createElement(
-          "div",
-          {
-            key: option.value,
-            className: `editor-dropdown-option editor-multiselect-option ${isSelected ? "selected" : ""} ${option.disabled ? "disabled" : ""} ${index === focusedIndex ? "focused" : ""}`,
-            role: "option",
-            "aria-selected": isSelected,
-            "aria-disabled": option.disabled,
-            onClick: () => handleToggleOption(option),
-            onMouseEnter: () => !option.disabled && setFocusedIndex(index)
-          },
-          /* @__PURE__ */ import_react40.default.createElement(
-            "input",
+    isOpen && import_react_dom6.default.createPortal(
+      /* @__PURE__ */ import_react40.default.createElement(
+        "div",
+        {
+          ref: dropdownRef,
+          id: "multiselect-dropdown",
+          className: "editor-dropdown",
+          role: "listbox",
+          "aria-multiselectable": "true",
+          style: { maxHeight: maxDropdownHeight }
+        },
+        filteredOptions.length === 0 ? /* @__PURE__ */ import_react40.default.createElement("div", { className: "editor-dropdown-empty" }, "No options found") : filteredOptions.map((option, index) => {
+          const isSelected = selectedValues.includes(option.value);
+          return /* @__PURE__ */ import_react40.default.createElement(
+            "div",
             {
-              type: "checkbox",
-              className: "editor-multiselect-checkbox",
-              checked: isSelected,
-              onChange: () => {
-              },
-              disabled: option.disabled,
-              tabIndex: -1,
-              "aria-hidden": "true"
-            }
-          ),
-          /* @__PURE__ */ import_react40.default.createElement("div", { className: "editor-option-content" }, option.icon && /* @__PURE__ */ import_react40.default.createElement("span", { className: "editor-option-icon" }, option.icon), /* @__PURE__ */ import_react40.default.createElement("span", { className: "editor-option-label" }, option.label))
-        );
-      })
+              key: option.value,
+              className: `editor-dropdown-option editor-multiselect-option ${isSelected ? "selected" : ""} ${option.disabled ? "disabled" : ""} ${index === focusedIndex ? "focused" : ""}`,
+              role: "option",
+              "aria-selected": isSelected,
+              "aria-disabled": option.disabled,
+              onClick: () => handleToggleOption(option),
+              onMouseEnter: () => !option.disabled && setFocusedIndex(index)
+            },
+            /* @__PURE__ */ import_react40.default.createElement(
+              "input",
+              {
+                type: "checkbox",
+                className: "editor-multiselect-checkbox",
+                checked: isSelected,
+                onChange: () => {
+                },
+                disabled: option.disabled,
+                tabIndex: -1,
+                "aria-hidden": "true"
+              }
+            ),
+            /* @__PURE__ */ import_react40.default.createElement("div", { className: "editor-option-content" }, option.icon && /* @__PURE__ */ import_react40.default.createElement("span", { className: "editor-option-icon" }, option.icon), /* @__PURE__ */ import_react40.default.createElement("span", { className: "editor-option-label" }, option.label))
+          );
+        })
+      ),
+      document.body
     )
   );
 }

package/dist/lib/index.js

@@ -2410,6 +2410,7 @@ var GridBody = ({
     }
     const isSelected = selectedRows.has(row.id);
     const isFocused = (focusState == null ? void 0 : focusState.rowIndex) === rowIndex;
+    const isRowEditing = editState.rowId === row.id;
     const isLoadingRow = row._loading === true;
     const isDragEnabled = (dragRowConfig == null ? void 0 : dragRowConfig.enabled) && !isLoadingRow;
     const showDragHandle = isDragEnabled && dragRowConfig.showDragHandle !== false;
@@ -2429,7 +2430,8 @@ var GridBody = ({
           borderBottom: "var(--grid-border-width, 1px) solid var(--grid-border)",
           backgroundColor: isLoadingRow ? "var(--grid-bg-alt)" : isSelected ? "var(--grid-selected)" : isFocused ? "var(--grid-active)" : "var(--grid-bg)",
           cursor: isLoadingRow ? "wait" : isDragEnabled ? "grab" : "pointer",
-          transition: "background-color 0.15s ease"
+          transition: "background-color 0.15s ease",
+          ...isRowEditing ? { position: "relative", zIndex: 100 } : {}
         },
         onMouseEnter: (e) => !isSelected && !isLoadingRow && (e.currentTarget.style.backgroundColor = "var(--grid-hover)"),
         onMouseLeave: (e) => !isSelected && !isLoadingRow && (e.currentTarget.style.backgroundColor = "var(--grid-bg)"),
@@ -2515,7 +2517,8 @@ var GridBody = ({
               flexShrink: 0,
               outline: isCellFocused ? "2px solid var(--grid-primary)" : "none",
               outlineOffset: "-2px",
-              color: "var(--grid-text)"
+              color: "var(--grid-text)",
+              ...isEditing ? { position: "relative", zIndex: 1e3 } : {}
             },
             onDoubleClick: () => handleCellDoubleClick(row, field, cellValue),
             onContextMenu: (e) => onContextMenu == null ? void 0 : onContextMenu(e, row, column, rowIndex, columnIndex),
@@ -3854,6 +3857,7 @@ var ExportMenu = ({
 
 // src/components/DataGrid/ColumnFilters.tsx
 import React15, { useState as useState8, useEffect as useEffect4 } from "react";
+import ReactDOM from "react-dom";
 
 // src/components/DataGrid/AdvancedFilterBuilder.tsx
 import React14, { useState as useState7 } from "react";
@@ -4172,7 +4176,7 @@ var AdvancedFilterBuilder = ({
         borderRadius: "var(--grid-border-radius, 8px)",
         border: "1px solid var(--grid-border)",
         padding: "16px",
-        zIndex: 1001,
+        zIndex: 10001,
         display: "flex",
         flexDirection: "column",
         overflowY: "auto"
@@ -4428,7 +4432,7 @@ var TextFilterMenu = ({ filterValue, onApplyFilter, onClose, anchorEl, showAdvan
         borderRadius: "var(--grid-border-radius, 8px)",
         border: "var(--grid-border-width, 1px) solid var(--grid-border)",
         padding: "16px",
-        zIndex: 1e3
+        zIndex: 1e4
       },
       onClick: (e) => e.stopPropagation()
     },
@@ -4550,7 +4554,7 @@ var NumberFilterMenu = ({ filterValue, onApplyFilter, onClose, anchorEl, showAdv
         borderRadius: "var(--grid-border-radius, 8px)",
         border: "1px solid var(--grid-border)",
         padding: "16px",
-        zIndex: 1e3
+        zIndex: 1e4
       },
       onClick: (e) => e.stopPropagation()
     },
@@ -4666,7 +4670,7 @@ var DateFilterMenu = ({ filterValue, onApplyFilter, onClose, anchorEl, showAdvan
         borderRadius: "var(--grid-border-radius, 8px)",
         border: "1px solid var(--grid-border)",
         padding: "16px",
-        zIndex: 1e3
+        zIndex: 1e4
       },
       onClick: (e) => e.stopPropagation()
     },
@@ -4791,7 +4795,7 @@ var SetFilterMenu = ({ column, filterValue, onApplyFilter, onClose, rows, anchor
         borderRadius: "var(--grid-border-radius, 8px)",
         border: "1px solid var(--grid-border)",
         padding: "16px",
-        zIndex: 1e3,
+        zIndex: 1e4,
         display: "flex",
         flexDirection: "column"
       },
@@ -5147,8 +5151,8 @@ var ColumnFilters = ({
           )
         )
       ),
-      openFilterMenu === field && renderFilterMenu(column),
-      advancedFilterField === field && renderAdvancedFilterMenu(column)
+      openFilterMenu === field && ReactDOM.createPortal(renderFilterMenu(column), document.body),
+      advancedFilterField === field && ReactDOM.createPortal(renderAdvancedFilterMenu(column), document.body)
     );
   })));
 };
@@ -12613,20 +12617,20 @@ function usePopupPosition(anchorRef, popupRef, isOpen, placement = "auto") {
     }
     switch (actualPlacement) {
       case "bottom":
-        top = anchorRect.bottom + window.scrollY;
-        left = anchorRect.left + window.scrollX;
+        top = anchorRect.bottom;
+        left = anchorRect.left;
         break;
       case "top":
-        top = anchorRect.top + window.scrollY - popupRect.height;
-        left = anchorRect.left + window.scrollX;
+        top = anchorRect.top - popupRect.height;
+        left = anchorRect.left;
         break;
       case "right":
-        top = anchorRect.top + window.scrollY;
-        left = anchorRect.right + window.scrollX;
+        top = anchorRect.top;
+        left = anchorRect.right;
         break;
       case "left":
-        top = anchorRect.top + window.scrollY;
-        left = anchorRect.left + window.scrollX - popupRect.width;
+        top = anchorRect.top;
+        left = anchorRect.left - popupRect.width;
         break;
     }
     const margin = 8;
@@ -12636,11 +12640,11 @@ function usePopupPosition(anchorRef, popupRef, isOpen, placement = "auto") {
     if (left < margin) {
       left = margin;
     }
-    if (top + popupRect.height > viewportHeight + window.scrollY) {
-      top = viewportHeight + window.scrollY - popupRect.height - margin;
+    if (top + popupRect.height > viewportHeight) {
+      top = viewportHeight - popupRect.height - margin;
     }
-    if (top < window.scrollY + margin) {
-      top = window.scrollY + margin;
+    if (top < margin) {
+      top = margin;
     }
     popup.style.top = `${top}px`;
     popup.style.left = `${left}px`;
@@ -12685,6 +12689,7 @@ function filterOptions(options, searchQuery) {
 
 // src/editors/RichSelectEditor.tsx
 import React32, { useState as useState21, useRef as useRef16, useEffect as useEffect15, useMemo as useMemo9 } from "react";
+import ReactDOM2 from "react-dom";
 function RichSelectEditor(props) {
   const {
     value,
@@ -12841,31 +12846,34 @@ function RichSelectEditor(props) {
       },
       "\xD7"
     ), /* @__PURE__ */ React32.createElement("span", { className: "editor-dropdown-icon", "aria-hidden": "true" }, "\u25BC"))),
-    isOpen && /* @__PURE__ */ React32.createElement(
-      "div",
-      {
-        ref: dropdownRef,
-        id: "richselect-dropdown",
-        className: "editor-dropdown",
-        role: "listbox",
-        style: { maxHeight: maxDropdownHeight }
-      },
-      filteredOptions.length === 0 ? /* @__PURE__ */ React32.createElement("div", { className: "editor-dropdown-empty" }, "No options found") : filteredOptions.map((option, index) => /* @__PURE__ */ React32.createElement(
+    isOpen && ReactDOM2.createPortal(
+      /* @__PURE__ */ React32.createElement(
         "div",
         {
-          key: option.value,
-          ref: (el) => {
-            optionRefs.current[index] = el;
-          },
-          className: `editor-dropdown-option ${option.value === value ? "selected" : ""} ${option.disabled ? "disabled" : ""} ${index === focusedIndex ? "focused" : ""}`,
-          role: "option",
-          "aria-selected": option.value === value,
-          "aria-disabled": option.disabled,
-          onClick: () => handleSelectOption(option),
-          onMouseEnter: () => !option.disabled && setFocusedIndex(index)
+          ref: dropdownRef,
+          id: "richselect-dropdown",
+          className: "editor-dropdown",
+          role: "listbox",
+          style: { maxHeight: maxDropdownHeight }
         },
-        renderLabel(option)
-      ))
+        filteredOptions.length === 0 ? /* @__PURE__ */ React32.createElement("div", { className: "editor-dropdown-empty" }, "No options found") : filteredOptions.map((option, index) => /* @__PURE__ */ React32.createElement(
+          "div",
+          {
+            key: option.value,
+            ref: (el) => {
+              optionRefs.current[index] = el;
+            },
+            className: `editor-dropdown-option ${option.value === value ? "selected" : ""} ${option.disabled ? "disabled" : ""} ${index === focusedIndex ? "focused" : ""}`,
+            role: "option",
+            "aria-selected": option.value === value,
+            "aria-disabled": option.disabled,
+            onClick: () => handleSelectOption(option),
+            onMouseEnter: () => !option.disabled && setFocusedIndex(index)
+          },
+          renderLabel(option)
+        ))
+      ),
+      document.body
     )
   );
 }
@@ -12873,6 +12881,7 @@ RichSelectEditor.displayName = "RichSelectEditor";
 
 // src/editors/DateEditor.tsx
 import React33, { useState as useState22, useRef as useRef17, useMemo as useMemo10 } from "react";
+import ReactDOM3 from "react-dom";
 function DateEditor(props) {
   const {
     value,
@@ -12992,53 +13001,56 @@ function DateEditor(props) {
         autoComplete: "off"
       }
     ), /* @__PURE__ */ React33.createElement("span", { className: "editor-calendar-icon", "aria-hidden": "true" }, "\u{1F4C5}")),
-    isOpen && /* @__PURE__ */ React33.createElement("div", { ref: calendarRef, className: "editor-dropdown editor-calendar" }, /* @__PURE__ */ React33.createElement("div", { className: "editor-calendar-header" }, /* @__PURE__ */ React33.createElement(
-      "button",
-      {
-        type: "button",
-        className: "editor-calendar-nav",
-        onClick: handlePrevMonth,
-        "aria-label": "Previous month"
-      },
-      "\u2039"
-    ), /* @__PURE__ */ React33.createElement("div", { className: "editor-calendar-title" }, viewDate.toLocaleDateString("en-US", {
-      month: "long",
-      year: "numeric"
-    })), /* @__PURE__ */ React33.createElement(
-      "button",
-      {
-        type: "button",
-        className: "editor-calendar-nav",
-        onClick: handleNextMonth,
-        "aria-label": "Next month"
-      },
-      "\u203A"
-    )), /* @__PURE__ */ React33.createElement("div", { className: "editor-calendar-weekdays" }, ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => /* @__PURE__ */ React33.createElement("div", { key: day, className: "editor-calendar-weekday" }, day))), /* @__PURE__ */ React33.createElement("div", { className: "editor-calendar-days" }, calendarDays.map((day, index) => /* @__PURE__ */ React33.createElement(
-      "button",
-      {
-        key: index,
-        type: "button",
-        className: `editor-calendar-day ${day.className}`,
-        onClick: () => day.date && handleSelectDate(day.date),
-        disabled: day.disabled,
-        "aria-label": day.date ? day.date.toDateString() : ""
-      },
-      day.label
-    ))), showTime && /* @__PURE__ */ React33.createElement("div", { className: "editor-calendar-time" }, /* @__PURE__ */ React33.createElement(
-      "input",
-      {
-        type: "time",
-        className: "editor-time-input",
-        value: parsedValue ? `${String(parsedValue.getHours()).padStart(2, "0")}:${String(
-          parsedValue.getMinutes()
-        ).padStart(2, "0")}` : "00:00",
-        onChange: (e) => {
-          const [hours, minutes] = e.target.value.split(":").map(Number);
-          handleTimeChange(hours, minutes);
+    isOpen && ReactDOM3.createPortal(
+      /* @__PURE__ */ React33.createElement("div", { ref: calendarRef, className: "editor-dropdown editor-calendar" }, /* @__PURE__ */ React33.createElement("div", { className: "editor-calendar-header" }, /* @__PURE__ */ React33.createElement(
+        "button",
+        {
+          type: "button",
+          className: "editor-calendar-nav",
+          onClick: handlePrevMonth,
+          "aria-label": "Previous month"
         },
-        "aria-label": "Time input"
-      }
-    )))
+        "\u2039"
+      ), /* @__PURE__ */ React33.createElement("div", { className: "editor-calendar-title" }, viewDate.toLocaleDateString("en-US", {
+        month: "long",
+        year: "numeric"
+      })), /* @__PURE__ */ React33.createElement(
+        "button",
+        {
+          type: "button",
+          className: "editor-calendar-nav",
+          onClick: handleNextMonth,
+          "aria-label": "Next month"
+        },
+        "\u203A"
+      )), /* @__PURE__ */ React33.createElement("div", { className: "editor-calendar-weekdays" }, ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => /* @__PURE__ */ React33.createElement("div", { key: day, className: "editor-calendar-weekday" }, day))), /* @__PURE__ */ React33.createElement("div", { className: "editor-calendar-days" }, calendarDays.map((day, index) => /* @__PURE__ */ React33.createElement(
+        "button",
+        {
+          key: index,
+          type: "button",
+          className: `editor-calendar-day ${day.className}`,
+          onClick: () => day.date && handleSelectDate(day.date),
+          disabled: day.disabled,
+          "aria-label": day.date ? day.date.toDateString() : ""
+        },
+        day.label
+      ))), showTime && /* @__PURE__ */ React33.createElement("div", { className: "editor-calendar-time" }, /* @__PURE__ */ React33.createElement(
+        "input",
+        {
+          type: "time",
+          className: "editor-time-input",
+          value: parsedValue ? `${String(parsedValue.getHours()).padStart(2, "0")}:${String(
+            parsedValue.getMinutes()
+          ).padStart(2, "0")}` : "00:00",
+          onChange: (e) => {
+            const [hours, minutes] = e.target.value.split(":").map(Number);
+            handleTimeChange(hours, minutes);
+          },
+          "aria-label": "Time input"
+        }
+      ))),
+      document.body
+    )
   );
 }
 DateEditor.displayName = "DateEditor";
@@ -13295,6 +13307,7 @@ NumericEditor.displayName = "NumericEditor";
 
 // src/editors/MultiSelectEditor.tsx
 import React35, { useState as useState24, useRef as useRef18, useMemo as useMemo11 } from "react";
+import ReactDOM4 from "react-dom";
 function MultiSelectEditor(props) {
   const {
     value = [],
@@ -13462,45 +13475,48 @@ function MultiSelectEditor(props) {
       ),
       /* @__PURE__ */ React35.createElement("span", { className: "editor-dropdown-icon", "aria-hidden": "true" }, "\u25BC")
     ),
-    isOpen && /* @__PURE__ */ React35.createElement(
-      "div",
-      {
-        ref: dropdownRef,
-        id: "multiselect-dropdown",
-        className: "editor-dropdown",
-        role: "listbox",
-        "aria-multiselectable": "true",
-        style: { maxHeight: maxDropdownHeight }
-      },
-      filteredOptions.length === 0 ? /* @__PURE__ */ React35.createElement("div", { className: "editor-dropdown-empty" }, "No options found") : filteredOptions.map((option, index) => {
-        const isSelected = selectedValues.includes(option.value);
-        return /* @__PURE__ */ React35.createElement(
-          "div",
-          {
-            key: option.value,
-            className: `editor-dropdown-option editor-multiselect-option ${isSelected ? "selected" : ""} ${option.disabled ? "disabled" : ""} ${index === focusedIndex ? "focused" : ""}`,
-            role: "option",
-            "aria-selected": isSelected,
-            "aria-disabled": option.disabled,
-            onClick: () => handleToggleOption(option),
-            onMouseEnter: () => !option.disabled && setFocusedIndex(index)
-          },
-          /* @__PURE__ */ React35.createElement(
-            "input",
+    isOpen && ReactDOM4.createPortal(
+      /* @__PURE__ */ React35.createElement(
+        "div",
+        {
+          ref: dropdownRef,
+          id: "multiselect-dropdown",
+          className: "editor-dropdown",
+          role: "listbox",
+          "aria-multiselectable": "true",
+          style: { maxHeight: maxDropdownHeight }
+        },
+        filteredOptions.length === 0 ? /* @__PURE__ */ React35.createElement("div", { className: "editor-dropdown-empty" }, "No options found") : filteredOptions.map((option, index) => {
+          const isSelected = selectedValues.includes(option.value);
+          return /* @__PURE__ */ React35.createElement(
+            "div",
             {
-              type: "checkbox",
-              className: "editor-multiselect-checkbox",
-              checked: isSelected,
-              onChange: () => {
-              },
-              disabled: option.disabled,
-              tabIndex: -1,
-              "aria-hidden": "true"
-            }
-          ),
-          /* @__PURE__ */ React35.createElement("div", { className: "editor-option-content" }, option.icon && /* @__PURE__ */ React35.createElement("span", { className: "editor-option-icon" }, option.icon), /* @__PURE__ */ React35.createElement("span", { className: "editor-option-label" }, option.label))
-        );
-      })
+              key: option.value,
+              className: `editor-dropdown-option editor-multiselect-option ${isSelected ? "selected" : ""} ${option.disabled ? "disabled" : ""} ${index === focusedIndex ? "focused" : ""}`,
+              role: "option",
+              "aria-selected": isSelected,
+              "aria-disabled": option.disabled,
+              onClick: () => handleToggleOption(option),
+              onMouseEnter: () => !option.disabled && setFocusedIndex(index)
+            },
+            /* @__PURE__ */ React35.createElement(
+              "input",
+              {
+                type: "checkbox",
+                className: "editor-multiselect-checkbox",
+                checked: isSelected,
+                onChange: () => {
+                },
+                disabled: option.disabled,
+                tabIndex: -1,
+                "aria-hidden": "true"
+              }
+            ),
+            /* @__PURE__ */ React35.createElement("div", { className: "editor-option-content" }, option.icon && /* @__PURE__ */ React35.createElement("span", { className: "editor-option-icon" }, option.icon), /* @__PURE__ */ React35.createElement("span", { className: "editor-option-label" }, option.label))
+          );
+        })
+      ),
+      document.body
     )
   );
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-open-source-grid",
   "private": false,
-  "version": "1.7.24",
+  "version": "1.7.25",
   "type": "module",
   "description": "A high-performance React DataGrid component with advanced features like virtual scrolling, infinite scrolling, tree data, market data mode, integrated charts with context menu, and more",
   "main": "./dist/lib/index.cjs",