react-open-source-grid 1.7.23 → 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
@@ -6735,7 +6739,7 @@ var useTooltip = ({ config = {} } = {}) => {
     const target = event.currentTarget;
     const rect = target.getBoundingClientRect();
     const tooltipContent = typeof content === "string" ? { content } : content;
-    showTimeoutRef.current = setTimeout(() => {
+    showTimeoutRef.current = window.setTimeout(() => {
       if (isHoveringRef.current) {
         setTooltipState({
           isVisible: true,
@@ -6752,7 +6756,7 @@ var useTooltip = ({ config = {} } = {}) => {
     clearTimeouts();
     isHoveringRef.current = false;
     if (hideDelay > 0) {
-      hideTimeoutRef.current = setTimeout(() => {
+      hideTimeoutRef.current = window.setTimeout(() => {
         setTooltipState((prev) => ({
           ...prev,
           isVisible: false
@@ -7790,7 +7794,7 @@ var useScreenReaderAnnouncements = () => {
       clearTimeout(timeoutRef.current);
     }
     if (delay > 0) {
-      timeoutRef.current = setTimeout(() => {
+      timeoutRef.current = window.setTimeout(() => {
         announcementRef.current = message;
       }, delay);
     } else {
@@ -10000,60 +10004,6 @@ var FacetedSearch = ({
 
 // src/components/DataGrid/FilteredSearchBar.tsx
 var import_react27 = __toESM(require("react"), 1);
-
-// node_modules/uuid/dist/esm-node/rng.js
-var import_crypto = __toESM(require("crypto"));
-var rnds8Pool = new Uint8Array(256);
-var poolPtr = rnds8Pool.length;
-function rng() {
-  if (poolPtr > rnds8Pool.length - 16) {
-    import_crypto.default.randomFillSync(rnds8Pool);
-    poolPtr = 0;
-  }
-  return rnds8Pool.slice(poolPtr, poolPtr += 16);
-}
-
-// node_modules/uuid/dist/esm-node/regex.js
-var regex_default = /^(?:[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}|00000000-0000-0000-0000-000000000000)$/i;
-
-// node_modules/uuid/dist/esm-node/validate.js
-function validate(uuid) {
-  return typeof uuid === "string" && regex_default.test(uuid);
-}
-var validate_default = validate;
-
-// node_modules/uuid/dist/esm-node/stringify.js
-var byteToHex = [];
-for (let i = 0; i < 256; ++i) {
-  byteToHex.push((i + 256).toString(16).substr(1));
-}
-function stringify(arr, offset = 0) {
-  const uuid = (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + "-" + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + "-" + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + "-" + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + "-" + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase();
-  if (!validate_default(uuid)) {
-    throw TypeError("Stringified UUID is invalid");
-  }
-  return uuid;
-}
-var stringify_default = stringify;
-
-// node_modules/uuid/dist/esm-node/v4.js
-function v4(options, buf, offset) {
-  options = options || {};
-  const rnds = options.random || (options.rng || rng)();
-  rnds[6] = rnds[6] & 15 | 64;
-  rnds[8] = rnds[8] & 63 | 128;
-  if (buf) {
-    offset = offset || 0;
-    for (let i = 0; i < 16; ++i) {
-      buf[offset + i] = rnds[i];
-    }
-    return buf;
-  }
-  return stringify_default(rnds);
-}
-var v4_default = v4;
-
-// src/components/DataGrid/FilteredSearchBar.tsx
 var FilteredSearchBar = ({
   filters,
   onSearch,
@@ -10089,7 +10039,7 @@ var FilteredSearchBar = ({
     const filter = filters.find((f) => f.field === field);
     if (!filter || tokens.length >= maxTokens) return;
     const newToken = {
-      id: `${field}-${v4_default()}`,
+      id: `${field}-${crypto.randomUUID()}`,
       field,
       label: filter.label,
       value,
@@ -12303,7 +12253,7 @@ function useMarketData(options) {
           );
           console.log(`Reconnecting in ${delay}ms... (attempt ${reconnectCountRef.current + 1})`);
           setConnectionState("reconnecting");
-          reconnectTimeoutRef.current = setTimeout(() => {
+          reconnectTimeoutRef.current = window.setTimeout(() => {
             reconnectCountRef.current++;
             reconnectDelayRef.current *= 2;
             setConnectionState("reconnecting");
@@ -12594,7 +12544,7 @@ var WebSocketMockFeed = class {
     console.log(`Mock feed started with ${this.config.symbols.length} symbols`);
     this.config.symbols.forEach((symbol) => {
       const interval = 1e3 / this.config.updateFrequency;
-      const intervalId = setInterval(() => {
+      const intervalId = window.setInterval(() => {
         this.updateSymbol(symbol);
       }, interval);
       this.updateIntervals.set(symbol, intervalId);
@@ -13095,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;
@@ -13118,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`;
@@ -13139,7 +13089,7 @@ function debounce2(func, wait) {
     if (timeout) {
       clearTimeout(timeout);
     }
-    timeout = setTimeout(later, wait);
+    timeout = window.setTimeout(later, wait);
   };
 }
 function formatNumber(value, decimals = 0, thousandsSeparator = ",", decimalSeparator = ".") {
@@ -13167,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,
@@ -13323,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
     )
   );
 }
@@ -13355,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,
@@ -13474,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";
@@ -13777,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 = [],
@@ -13944,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
     )
   );
 }