@rufous/ui 0.2.67 → 0.2.69

package/dist/main.cjs

@@ -1526,6 +1526,7 @@ IconButton.displayName = "IconButton";
 // lib/Dialogs/BaseDialog.tsx
 var React65 = __toESM(require("react"), 1);
 var import_react14 = require("react");
+var import_react_dom = __toESM(require("react-dom"), 1);
 var import_lucide_react = require("lucide-react");
 var BaseDialog = ({
   open = false,
@@ -1629,20 +1630,26 @@ var BaseDialog = ({
     dialogInner
   ) : /* @__PURE__ */ React65.createElement("div", { className: containerClass, style: containerStyle }, dialogInner);
   if (TransitionComponent) {
-    return /* @__PURE__ */ React65.createElement(
-      TransitionComponent,
-      {
-        in: open,
-        unmountOnExit: true,
-        ...TransitionProps,
-        onExited: () => {
-          TransitionProps?.onExited?.();
-        }
-      },
-      /* @__PURE__ */ React65.createElement("div", { className: `dialog-overlay ${size === "fullScreen" ? "overlay-fullscreen" : ""}` }, dialogContent)
+    return import_react_dom.default.createPortal(
+      /* @__PURE__ */ React65.createElement(
+        TransitionComponent,
+        {
+          in: open,
+          unmountOnExit: true,
+          ...TransitionProps,
+          onExited: () => {
+            TransitionProps?.onExited?.();
+          }
+        },
+        /* @__PURE__ */ React65.createElement("div", { className: `dialog-overlay ${size === "fullScreen" ? "overlay-fullscreen" : ""}` }, dialogContent)
+      ),
+      document.body
     );
   }
-  return /* @__PURE__ */ React65.createElement("div", { className: `dialog-overlay ${size === "fullScreen" ? "overlay-fullscreen" : ""}` }, dialogContent);
+  return import_react_dom.default.createPortal(
+    /* @__PURE__ */ React65.createElement("div", { className: `dialog-overlay ${size === "fullScreen" ? "overlay-fullscreen" : ""}` }, dialogContent),
+    document.body
+  );
 };
 var BaseDialog_default = BaseDialog;
 
@@ -2148,7 +2155,7 @@ var AddressLookup_default = AddressLookup;
 
 // lib/TextFields/DateField.tsx
 var import_react19 = __toESM(require("react"), 1);
-var import_react_dom = require("react-dom");
+var import_react_dom2 = require("react-dom");
 var WEEKDAYS = ["SU", "MO", "TU", "WE", "TH", "FR", "SA"];
 var MONTHS = [
   "January",
@@ -2794,7 +2801,7 @@ var DateField = ({
     )),
     label && /* @__PURE__ */ import_react19.default.createElement("label", { htmlFor: inputId, className: "rf-text-field__label" }, label, " ", required && /* @__PURE__ */ import_react19.default.createElement("span", { className: "rf-text-field__asterisk" }, "*")),
     variant === "outlined" && /* @__PURE__ */ import_react19.default.createElement("fieldset", { className: "rf-text-field__notch" }, label && /* @__PURE__ */ import_react19.default.createElement("legend", { className: "rf-text-field__legend" }, /* @__PURE__ */ import_react19.default.createElement("span", null, label, required ? " *" : "")))
-  ), open && !disabled && (0, import_react_dom.createPortal)(
+  ), open && !disabled && (0, import_react_dom2.createPortal)(
     /* @__PURE__ */ import_react19.default.createElement(
       "div",
       {
@@ -3540,6 +3547,7 @@ DateRangeField.displayName = "DateRangeField";
 
 // lib/TextFields/Autocomplete.tsx
 var import_react21 = __toESM(require("react"), 1);
+var import_react_dom3 = __toESM(require("react-dom"), 1);
 var ChevronDownIcon = () => /* @__PURE__ */ import_react21.default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react21.default.createElement("polyline", { points: "6 9 12 15 18 9" }));
 var CloseSmIcon = ({ size = 16 }) => /* @__PURE__ */ import_react21.default.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" }, /* @__PURE__ */ import_react21.default.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), /* @__PURE__ */ import_react21.default.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" }));
 var CheckIcon = () => /* @__PURE__ */ import_react21.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react21.default.createElement("polyline", { points: "20 6 9 17 4 12" }));
@@ -3593,11 +3601,21 @@ function AutocompleteInner(props, _ref) {
   const [open, setOpen] = (0, import_react21.useState)(false);
   const [inputStr, setInputStr] = (0, import_react21.useState)("");
   const [focusedIdx, setFocusedIdx] = (0, import_react21.useState)(-1);
+  const [popupStyle, setPopupStyle] = (0, import_react21.useState)({});
   const containerRef = (0, import_react21.useRef)(null);
   const inputRef = (0, import_react21.useRef)(null);
   const listRef = (0, import_react21.useRef)(null);
   const inputId = (0, import_react21.useRef)(`rf-ac-${Math.random().toString(36).slice(2, 9)}`).current;
   const sxClass = useSx(sx);
+  const calcPopupStyle = (0, import_react21.useCallback)(() => {
+    if (!containerRef.current) return;
+    const rect = containerRef.current.getBoundingClientRect();
+    setPopupStyle({
+      top: rect.bottom + 4,
+      left: rect.left,
+      width: rect.width
+    });
+  }, []);
   const activeInput = controlledInput !== void 0 ? controlledInput : inputStr;
   const selectedValues = multiple ? Array.isArray(value) ? value : [] : value != null ? [value] : [];
   const isEqual = (0, import_react21.useCallback)(
@@ -3631,12 +3649,13 @@ function AutocompleteInner(props, _ref) {
     filtered.forEach((opt, i) => flatEntries.push({ kind: "option", option: opt, flatIdx: i }));
   }
   const selectableOptions = flatEntries.filter((e) => e.kind === "option");
-  const openPopup = () => {
+  const openPopup = (0, import_react21.useCallback)(() => {
     if (disabled) return;
+    calcPopupStyle();
     setOpen(true);
     setFocusedIdx(-1);
     onOpen?.();
-  };
+  }, [disabled, calcPopupStyle, onOpen]);
   const closePopup = (0, import_react21.useCallback)(() => {
     setOpen(false);
     setFocusedIdx(-1);
@@ -3648,14 +3667,20 @@ function AutocompleteInner(props, _ref) {
   }, [freeSolo, multiple, value, onInputChange, onClose]);
   (0, import_react21.useEffect)(() => {
     if (!open) return;
-    const handler = (e) => {
+    const handleOutside = (e) => {
       if (containerRef.current && !containerRef.current.contains(e.target)) {
         closePopup();
       }
     };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, [open, closePopup]);
+    document.addEventListener("mousedown", handleOutside);
+    window.addEventListener("scroll", calcPopupStyle, true);
+    window.addEventListener("resize", calcPopupStyle);
+    return () => {
+      document.removeEventListener("mousedown", handleOutside);
+      window.removeEventListener("scroll", calcPopupStyle, true);
+      window.removeEventListener("resize", calcPopupStyle);
+    };
+  }, [open, closePopup, calcPopupStyle]);
   (0, import_react21.useEffect)(() => {
     if (controlledInput !== void 0) return;
     if (!multiple) {
@@ -3840,34 +3865,37 @@ function AutocompleteInner(props, _ref) {
       },
       /* @__PURE__ */ import_react21.default.createElement(ChevronDownIcon, null)
     ))
-  ), helperText && /* @__PURE__ */ import_react21.default.createElement("div", { className: `rf-text-field__helper-text${error ? " rf-text-field__helper-text--error" : ""}` }, helperText), open && !disabled && /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-autocomplete__popup", role: "presentation" }, loading ? /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-autocomplete__loading" }, /* @__PURE__ */ import_react21.default.createElement("span", { className: "rf-ac-spinner" }), loadingText) : flatEntries.length === 0 ? /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-autocomplete__no-options" }, noOptionsText) : /* @__PURE__ */ import_react21.default.createElement("ul", { ref: listRef, className: "rf-autocomplete__listbox", role: "listbox" }, groupBy ? (
-    // Grouped render
-    (() => {
-      const rendered = [];
-      let groupItems = [];
-      let currentGroup = "";
-      flatEntries.forEach((entry, ei) => {
-        if (entry.kind === "group") {
-          if (groupItems.length > 0) {
+  ), helperText && /* @__PURE__ */ import_react21.default.createElement("div", { className: `rf-text-field__helper-text${error ? " rf-text-field__helper-text--error" : ""}` }, helperText), open && !disabled && import_react_dom3.default.createPortal(
+    /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-autocomplete__popup", role: "presentation", style: popupStyle }, loading ? /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-autocomplete__loading" }, /* @__PURE__ */ import_react21.default.createElement("span", { className: "rf-ac-spinner" }), loadingText) : flatEntries.length === 0 ? /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-autocomplete__no-options" }, noOptionsText) : /* @__PURE__ */ import_react21.default.createElement("ul", { ref: listRef, className: "rf-autocomplete__listbox", role: "listbox" }, groupBy ? (
+      // Grouped render
+      (() => {
+        const rendered = [];
+        let groupItems = [];
+        let currentGroup = "";
+        flatEntries.forEach((entry, ei) => {
+          if (entry.kind === "group") {
+            if (groupItems.length > 0) {
+              rendered.push(
+                /* @__PURE__ */ import_react21.default.createElement("li", { key: `g-${currentGroup}`, role: "presentation" }, /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-autocomplete__group-header" }, currentGroup), /* @__PURE__ */ import_react21.default.createElement("ul", { className: "rf-autocomplete__group-items", role: "group" }, groupItems))
+              );
+              groupItems = [];
+            }
+            currentGroup = entry.label;
+          } else {
+            const { option, flatIdx } = entry;
+            groupItems.push(renderOptionItem(option, flatIdx));
+          }
+          if (ei === flatEntries.length - 1 && groupItems.length > 0) {
             rendered.push(
               /* @__PURE__ */ import_react21.default.createElement("li", { key: `g-${currentGroup}`, role: "presentation" }, /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-autocomplete__group-header" }, currentGroup), /* @__PURE__ */ import_react21.default.createElement("ul", { className: "rf-autocomplete__group-items", role: "group" }, groupItems))
             );
-            groupItems = [];
           }
-          currentGroup = entry.label;
-        } else {
-          const { option, flatIdx } = entry;
-          groupItems.push(renderOptionItem(option, flatIdx));
-        }
-        if (ei === flatEntries.length - 1 && groupItems.length > 0) {
-          rendered.push(
-            /* @__PURE__ */ import_react21.default.createElement("li", { key: `g-${currentGroup}`, role: "presentation" }, /* @__PURE__ */ import_react21.default.createElement("div", { className: "rf-autocomplete__group-header" }, currentGroup), /* @__PURE__ */ import_react21.default.createElement("ul", { className: "rf-autocomplete__group-items", role: "group" }, groupItems))
-          );
-        }
-      });
-      return rendered;
-    })()
-  ) : selectableOptions.map(({ option, flatIdx }) => renderOptionItem(option, flatIdx)))));
+        });
+        return rendered;
+      })()
+    ) : selectableOptions.map(({ option, flatIdx }) => renderOptionItem(option, flatIdx)))),
+    document.body
+  ));
   function renderOptionItem(option, flatIdx) {
     const selected = isSelected(option);
     const focused = focusedIdx === flatIdx;
@@ -4558,6 +4586,7 @@ function DataGrid({
 
 // lib/Select/Select.tsx
 var import_react23 = __toESM(require("react"), 1);
+var import_react_dom4 = __toESM(require("react-dom"), 1);
 var ChevronDownIcon2 = () => /* @__PURE__ */ import_react23.default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react23.default.createElement("polyline", { points: "6 9 12 15 18 9" }));
 var CheckIcon2 = () => /* @__PURE__ */ import_react23.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react23.default.createElement("polyline", { points: "20 6 9 17 4 12" }));
 function normaliseOptions(options) {
@@ -4584,10 +4613,20 @@ var Select = import_react23.default.forwardRef(function Select2(props, ref) {
   } = props;
   const [open, setOpen] = (0, import_react23.useState)(false);
   const [focusedIdx, setFocusedIdx] = (0, import_react23.useState)(-1);
+  const [popupStyle, setPopupStyle] = (0, import_react23.useState)({});
   const containerRef = (0, import_react23.useRef)(null);
   const listRef = (0, import_react23.useRef)(null);
   const inputId = (0, import_react23.useRef)(`rf-sel-${Math.random().toString(36).slice(2, 9)}`).current;
   const sxClass = useSx(sx);
+  const calcPopupStyle = (0, import_react23.useCallback)(() => {
+    if (!containerRef.current) return;
+    const rect = containerRef.current.getBoundingClientRect();
+    setPopupStyle({
+      top: rect.bottom + 4,
+      left: rect.left,
+      width: rect.width
+    });
+  }, []);
   const options = normaliseOptions(rawOptions);
   const selectedValues = multiple ? Array.isArray(value) ? value : value != null ? [value] : [] : value != null ? [value] : [];
   const isSelected = (0, import_react23.useCallback)(
@@ -4599,9 +4638,10 @@ var Select = import_react23.default.forwardRef(function Select2(props, ref) {
   const isFloating = Boolean(open || hasValue);
   const openPopup = (0, import_react23.useCallback)(() => {
     if (disabled) return;
+    calcPopupStyle();
     setOpen(true);
     setFocusedIdx(-1);
-  }, [disabled]);
+  }, [disabled, calcPopupStyle]);
   const closePopup = (0, import_react23.useCallback)(() => {
     setOpen(false);
     setFocusedIdx(-1);
@@ -4612,14 +4652,20 @@ var Select = import_react23.default.forwardRef(function Select2(props, ref) {
   }, [open, openPopup, closePopup]);
   (0, import_react23.useEffect)(() => {
     if (!open) return;
-    const handler = (e) => {
+    const handleOutside = (e) => {
       if (containerRef.current && !containerRef.current.contains(e.target)) {
         closePopup();
       }
     };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, [open, closePopup]);
+    document.addEventListener("mousedown", handleOutside);
+    window.addEventListener("scroll", calcPopupStyle, true);
+    window.addEventListener("resize", calcPopupStyle);
+    return () => {
+      document.removeEventListener("mousedown", handleOutside);
+      window.removeEventListener("scroll", calcPopupStyle, true);
+      window.removeEventListener("resize", calcPopupStyle);
+    };
+  }, [open, closePopup, calcPopupStyle]);
   const selectOption = (0, import_react23.useCallback)((opt) => {
     if (opt.disabled) return;
     if (multiple) {
@@ -4738,32 +4784,35 @@ var Select = import_react23.default.forwardRef(function Select2(props, ref) {
       /* @__PURE__ */ import_react23.default.createElement("div", { className: "rf-select__arrow", "aria-hidden": "true" }, /* @__PURE__ */ import_react23.default.createElement(ChevronDownIcon2, null))
     ),
     helperText && /* @__PURE__ */ import_react23.default.createElement("div", { className: `rf-text-field__helper-text${error ? " rf-text-field__helper-text--error" : ""}` }, helperText),
-    open && !disabled && /* @__PURE__ */ import_react23.default.createElement("div", { className: "rf-select__popup", role: "presentation" }, /* @__PURE__ */ import_react23.default.createElement("ul", { ref: listRef, className: "rf-select__listbox", role: "listbox", "aria-multiselectable": multiple }, options.map((opt, idx) => {
-      const selected = isSelected(opt.value);
-      const focused = focusedIdx === idx;
-      return /* @__PURE__ */ import_react23.default.createElement(
-        "li",
-        {
-          key: opt.value,
-          "data-idx": idx,
-          role: "option",
-          "aria-selected": selected,
-          "aria-disabled": opt.disabled,
-          className: [
-            "rf-select__option",
-            selected ? "rf-select__option--selected" : "",
-            focused ? "rf-select__option--focused" : "",
-            opt.disabled ? "rf-select__option--disabled" : ""
-          ].filter(Boolean).join(" "),
-          onMouseEnter: () => setFocusedIdx(idx),
-          onMouseLeave: () => setFocusedIdx(-1),
-          onMouseDown: (e) => e.preventDefault(),
-          onClick: () => selectOption(opt)
-        },
-        /* @__PURE__ */ import_react23.default.createElement("span", { className: "rf-select__option-label" }, opt.label),
-        /* @__PURE__ */ import_react23.default.createElement("span", { className: "rf-select__option-check", "aria-hidden": "true" }, /* @__PURE__ */ import_react23.default.createElement(CheckIcon2, null))
-      );
-    })))
+    open && !disabled && import_react_dom4.default.createPortal(
+      /* @__PURE__ */ import_react23.default.createElement("div", { className: "rf-select__popup", role: "presentation", style: popupStyle }, /* @__PURE__ */ import_react23.default.createElement("ul", { ref: listRef, className: "rf-select__listbox", role: "listbox", "aria-multiselectable": multiple }, options.map((opt, idx) => {
+        const selected = isSelected(opt.value);
+        const focused = focusedIdx === idx;
+        return /* @__PURE__ */ import_react23.default.createElement(
+          "li",
+          {
+            key: opt.value,
+            "data-idx": idx,
+            role: "option",
+            "aria-selected": selected,
+            "aria-disabled": opt.disabled,
+            className: [
+              "rf-select__option",
+              selected ? "rf-select__option--selected" : "",
+              focused ? "rf-select__option--focused" : "",
+              opt.disabled ? "rf-select__option--disabled" : ""
+            ].filter(Boolean).join(" "),
+            onMouseEnter: () => setFocusedIdx(idx),
+            onMouseLeave: () => setFocusedIdx(-1),
+            onMouseDown: (e) => e.preventDefault(),
+            onClick: () => selectOption(opt)
+          },
+          /* @__PURE__ */ import_react23.default.createElement("span", { className: "rf-select__option-label" }, opt.label),
+          /* @__PURE__ */ import_react23.default.createElement("span", { className: "rf-select__option-check", "aria-hidden": "true" }, /* @__PURE__ */ import_react23.default.createElement(CheckIcon2, null))
+        );
+      }))),
+      document.body
+    )
   );
 });
 Select.displayName = "Select";
@@ -5921,7 +5970,7 @@ Skeleton.displayName = "Skeleton";
 
 // lib/Tooltip/Tooltip.tsx
 var import_react35 = __toESM(require("react"), 1);
-var import_react_dom2 = __toESM(require("react-dom"), 1);
+var import_react_dom5 = __toESM(require("react-dom"), 1);
 var GAP = 8;
 function computePosition(anchor, tooltip, placement) {
   const { top: aTop, left: aLeft, width: aW, height: aH } = anchor;
@@ -6140,7 +6189,7 @@ var Tooltip = ({
       ...childProps
     },
     import_react35.default.cloneElement(children)
-  ), import_react_dom2.default.createPortal(tooltipElement, document.body));
+  ), import_react_dom5.default.createPortal(tooltipElement, document.body));
 };
 Tooltip.displayName = "Tooltip";
 
@@ -7027,7 +7076,7 @@ Stepper.displayName = "Stepper";
 
 // lib/Menu/Menu.tsx
 var import_react40 = __toESM(require("react"), 1);
-var import_react_dom3 = __toESM(require("react-dom"), 1);
+var import_react_dom6 = __toESM(require("react-dom"), 1);
 var MenuDivider = () => /* @__PURE__ */ import_react40.default.createElement("hr", { className: "rf-menu-divider", "aria-hidden": "true" });
 MenuDivider.displayName = "MenuDivider";
 var MenuItem = ({
@@ -7180,13 +7229,13 @@ var Menu = ({
     },
     children
   ));
-  return import_react_dom3.default.createPortal(portal, document.body);
+  return import_react_dom6.default.createPortal(portal, document.body);
 };
 Menu.displayName = "Menu";
 
 // lib/Drawer/Drawer.tsx
 var import_react41 = __toESM(require("react"), 1);
-var import_react_dom4 = __toESM(require("react-dom"), 1);
+var import_react_dom7 = __toESM(require("react-dom"), 1);
 var Drawer = ({
   open,
   onClose,
@@ -7286,7 +7335,7 @@ var Drawer = ({
     },
     children
   ));
-  return import_react_dom4.default.createPortal(
+  return import_react_dom7.default.createPortal(
     /* @__PURE__ */ import_react41.default.createElement("div", { className: rootClasses, style }, drawerContent),
     document.body
   );
@@ -7295,7 +7344,7 @@ Drawer.displayName = "Drawer";
 
 // lib/Snackbar/Snackbar.tsx
 var import_react42 = __toESM(require("react"), 1);
-var import_react_dom5 = __toESM(require("react-dom"), 1);
+var import_react_dom8 = __toESM(require("react-dom"), 1);
 var SEVERITY_ICONS = {
   success: "\u2713",
   error: "\u2715",
@@ -7400,7 +7449,7 @@ var Snackbar = ({
       "\u2715"
     )
   ));
-  return import_react_dom5.default.createPortal(snackbarEl, document.body);
+  return import_react_dom8.default.createPortal(snackbarEl, document.body);
 };
 Snackbar.displayName = "Snackbar";
 
@@ -7454,7 +7503,7 @@ Link.displayName = "Link";
 
 // lib/Popper/Popper.tsx
 var import_react44 = __toESM(require("react"), 1);
-var import_react_dom6 = __toESM(require("react-dom"), 1);
+var import_react_dom9 = __toESM(require("react-dom"), 1);
 function computePopperPosition(anchorRect, popperRect, placement, offset2 = [0, 8]) {
   const [skid, dist] = offset2;
   let top = 0;
@@ -7597,13 +7646,13 @@ var Popper = ({
   if (disablePortal) {
     return /* @__PURE__ */ import_react44.default.createElement(import_react44.default.Fragment, null, popper);
   }
-  return import_react_dom6.default.createPortal(popper, document.body);
+  return import_react_dom9.default.createPortal(popper, document.body);
 };
 Popper.displayName = "Popper";
 
 // lib/Popover/Popover.tsx
 var import_react45 = __toESM(require("react"), 1);
-var import_react_dom7 = __toESM(require("react-dom"), 1);
+var import_react_dom10 = __toESM(require("react-dom"), 1);
 function getPoint(rect, v, h) {
   const x = h === "left" ? rect.left : h === "center" ? rect.left + rect.width / 2 : rect.right;
   const y = v === "top" ? rect.top : v === "center" ? rect.top + rect.height / 2 : rect.bottom;
@@ -7706,7 +7755,7 @@ var Popover = ({
   if (disablePortal) {
     return /* @__PURE__ */ import_react45.default.createElement("div", { className: `${rootClasses} rf-popover-inline`, style }, content);
   }
-  return import_react_dom7.default.createPortal(
+  return import_react_dom10.default.createPortal(
     /* @__PURE__ */ import_react45.default.createElement("div", { className: rootClasses, style }, content),
     document.body
   );
@@ -8357,7 +8406,7 @@ PhoneField.displayName = "PhoneField";
 
 // lib/RufousTextEditor/RufousTextEditor.tsx
 var import_react59 = __toESM(require("react"), 1);
-var import_react_dom14 = require("react-dom");
+var import_react_dom17 = require("react-dom");
 var import_react60 = require("@tiptap/react");
 var import_starter_kit = __toESM(require("@tiptap/starter-kit"), 1);
 var import_extension_placeholder = __toESM(require("@tiptap/extension-placeholder"), 1);
@@ -8479,7 +8528,7 @@ function createMentionSuggestion(users) {
 
 // lib/RufousTextEditor/Toolbar.tsx
 var import_react55 = __toESM(require("react"), 1);
-var import_react_dom10 = require("react-dom");
+var import_react_dom13 = require("react-dom");
 
 // lib/RufousTextEditor/TextToSpeech.tsx
 var import_react51 = __toESM(require("react"), 1);
@@ -8792,7 +8841,7 @@ var SpeechToText_default = SpeechToText;
 
 // lib/RufousTextEditor/AICommands.tsx
 var import_react53 = __toESM(require("react"), 1);
-var import_react_dom8 = require("react-dom");
+var import_react_dom11 = require("react-dom");
 var AI_COMMANDS = [
   { id: "improve", label: "Improve writing", prompt: "Improve the following text to make it clearer, more engaging, and well-structured. Return only the improved text, no explanations." },
   { id: "shorter", label: "Make shorter", prompt: "Make the following text shorter and more concise while keeping the key points. Return only the shortened text, no explanations." },
@@ -8949,7 +8998,7 @@ var AICommands = ({ editor, onAICommand }) => {
       onClick: () => handleCommandSelect(cmd)
     },
     cmd.label
-  ))), /* @__PURE__ */ import_react53.default.createElement("div", { className: "ai-commands-hint" }, editor.state.selection.empty ? "Will apply to all text" : "Will apply to selected text"))), showModal && (0, import_react_dom8.createPortal)(
+  ))), /* @__PURE__ */ import_react53.default.createElement("div", { className: "ai-commands-hint" }, editor.state.selection.empty ? "Will apply to all text" : "Will apply to selected text"))), showModal && (0, import_react_dom11.createPortal)(
     /* @__PURE__ */ import_react53.default.createElement("div", { className: "ai-modal-overlay", onMouseDown: handleCancel }, /* @__PURE__ */ import_react53.default.createElement("div", { className: "ai-modal", onMouseDown: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react53.default.createElement("div", { className: "ai-modal-header" }, /* @__PURE__ */ import_react53.default.createElement("span", { className: "ai-modal-title" }, "AI Assistant"), /* @__PURE__ */ import_react53.default.createElement("button", { className: "ai-modal-close", onClick: handleCancel }, "\xD7")), /* @__PURE__ */ import_react53.default.createElement("div", { className: "ai-modal-prompt-section" }, /* @__PURE__ */ import_react53.default.createElement("label", { className: "ai-modal-label" }, "Prompt"), /* @__PURE__ */ import_react53.default.createElement("div", { className: "ai-modal-prompt-row" }, /* @__PURE__ */ import_react53.default.createElement(
       "textarea",
       {
@@ -9000,7 +9049,7 @@ var AICommands_default = AICommands;
 
 // lib/RufousTextEditor/TranslateModal.tsx
 var import_react54 = __toESM(require("react"), 1);
-var import_react_dom9 = require("react-dom");
+var import_react_dom12 = require("react-dom");
 var LANGUAGES = [
   { code: "af", name: "Afrikaans" },
   { code: "sq", name: "Albanian" },
@@ -9191,7 +9240,7 @@ var TranslateModal = ({ editor, onClose, onTranslate, initialSource, initialTarg
       setTranslating(false);
     }
   };
-  return (0, import_react_dom9.createPortal)(
+  return (0, import_react_dom12.createPortal)(
     /* @__PURE__ */ import_react54.default.createElement("div", { className: "modal-overlay", onClick: onClose }, /* @__PURE__ */ import_react54.default.createElement("div", { className: "modal-content translate-modal", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react54.default.createElement("div", { className: "modal-header" }, /* @__PURE__ */ import_react54.default.createElement("h3", null, "Translate options"), /* @__PURE__ */ import_react54.default.createElement("button", { className: "modal-close", onClick: onClose }, "\xD7")), /* @__PURE__ */ import_react54.default.createElement("div", { className: "modal-body" }, /* @__PURE__ */ import_react54.default.createElement("div", { className: "translate-columns" }, /* @__PURE__ */ import_react54.default.createElement("div", { className: "translate-col" }, /* @__PURE__ */ import_react54.default.createElement("div", { className: "translate-filter" }, /* @__PURE__ */ import_react54.default.createElement(
       "input",
       {
@@ -10101,7 +10150,7 @@ var Dropdown = ({ trigger, children, className = "", keepOpen = false }) => {
     },
     trigger.label,
     /* @__PURE__ */ import_react55.default.createElement("span", { className: "dropdown-arrow" }, "\u25BE")
-  ), open && (0, import_react_dom10.createPortal)(
+  ), open && (0, import_react_dom13.createPortal)(
     /* @__PURE__ */ import_react55.default.createElement("div", { className: "rf-rte-wrapper rf-rte-dropdown-portal" }, /* @__PURE__ */ import_react55.default.createElement("div", { ref: menuRef, className: "dropdown-menu dropdown-menu-fixed", onClick: keepOpen ? void 0 : () => setOpen(false) }, typeof children === "function" ? children(() => setOpen(false)) : children)),
     document.body
   ));
@@ -11004,7 +11053,7 @@ var Toolbar_default = Toolbar;
 
 // lib/RufousTextEditor/ImageToolbar.tsx
 var import_react56 = __toESM(require("react"), 1);
-var import_react_dom11 = require("react-dom");
+var import_react_dom14 = require("react-dom");
 var ALIGNMENTS = [
   { value: "left", label: "Left", icon: "\u2630" },
   { value: "center", label: "Center", icon: "\u2261" },
@@ -11176,7 +11225,7 @@ var ImageToolbar = ({ editor }) => {
   }, [editor]);
   const node = editor?.state.selection.node;
   const isImage = node && node.type.name === "image";
-  if (!editor || !isImage || !pos) return showModal ? (0, import_react_dom11.createPortal)(
+  if (!editor || !isImage || !pos) return showModal ? (0, import_react_dom14.createPortal)(
     /* @__PURE__ */ import_react56.default.createElement(ImagePropertiesModal, { editor, node, onClose: () => setShowModal(false) }),
     document.body
   ) : null;
@@ -11253,7 +11302,7 @@ var ImageToolbar = ({ editor }) => {
     );
     setShowVAlign(false);
   };
-  return (0, import_react_dom11.createPortal)(
+  return (0, import_react_dom14.createPortal)(
     /* @__PURE__ */ import_react56.default.createElement(import_react56.default.Fragment, null, /* @__PURE__ */ import_react56.default.createElement(
       "div",
       {
@@ -11284,7 +11333,7 @@ var ImageToolbar_default = ImageToolbar;
 
 // lib/RufousTextEditor/VideoToolbar.tsx
 var import_react57 = __toESM(require("react"), 1);
-var import_react_dom12 = require("react-dom");
+var import_react_dom15 = require("react-dom");
 var ALIGNMENTS2 = [
   { value: "left", label: "Left", icon: "\u2630" },
   { value: "center", label: "Center", icon: "\u2261" },
@@ -11430,7 +11479,7 @@ var VideoToolbar = ({ editor }) => {
   const node = editor?.state.selection.node;
   const isVideo = node && VIDEO_TYPES.includes(node.type.name);
   const nodeType = node?.type.name;
-  if (!editor || !isVideo || !pos) return showModal ? (0, import_react_dom12.createPortal)(
+  if (!editor || !isVideo || !pos) return showModal ? (0, import_react_dom15.createPortal)(
     /* @__PURE__ */ import_react57.default.createElement(VideoPropertiesModal, { editor, node, nodeType, onClose: () => setShowModal(false) }),
     document.body
   ) : null;
@@ -11477,7 +11526,7 @@ var VideoToolbar = ({ editor }) => {
       })
     );
   };
-  return (0, import_react_dom12.createPortal)(
+  return (0, import_react_dom15.createPortal)(
     /* @__PURE__ */ import_react57.default.createElement(import_react57.default.Fragment, null, /* @__PURE__ */ import_react57.default.createElement(
       "div",
       {
@@ -11525,7 +11574,7 @@ var VideoToolbar_default = VideoToolbar;
 
 // lib/RufousTextEditor/TableToolbar.tsx
 var import_react58 = __toESM(require("react"), 1);
-var import_react_dom13 = require("react-dom");
+var import_react_dom16 = require("react-dom");
 var IconAddRowBefore = () => /* @__PURE__ */ import_react58.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react58.default.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-1 8H5V5h14v6zm0 8H5v-6h14v6z" }), /* @__PURE__ */ import_react58.default.createElement("path", { d: "M9 6h2v1.5h1.5v2H11V11H9V9.5H7.5v-2H9z" }));
 var IconAddRowAfter = () => /* @__PURE__ */ import_react58.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react58.default.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-1 8H5V5h14v6zm0 8H5v-6h14v6z" }), /* @__PURE__ */ import_react58.default.createElement("path", { d: "M9 14h2v1.5h1.5v2H11V19H9v-1.5H7.5v-2H9z" }));
 var IconAddColBefore = () => /* @__PURE__ */ import_react58.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ import_react58.default.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-9 16H5V5h6v14zm8 0h-6V5h6v14z" }), /* @__PURE__ */ import_react58.default.createElement("path", { d: "M6 10h1.5v2H6v1.5H4v-2h1.5V10H4V8h2z", transform: "translate(2,1)" }));
@@ -11582,7 +11631,7 @@ var TableToolbar = ({ editor }) => {
   const canMerge = editor.can().mergeCells();
   const canSplit = editor.can().splitCell();
   const prevent = (e) => e.preventDefault();
-  return (0, import_react_dom13.createPortal)(
+  return (0, import_react_dom16.createPortal)(
     /* @__PURE__ */ import_react58.default.createElement(
       "div",
       {
@@ -12271,7 +12320,7 @@ var RufousTextEditor = ({
         },
         "\u201C Quote"
       )
-    ), /* @__PURE__ */ import_react59.default.createElement("div", { className: "status-bar" }, /* @__PURE__ */ import_react59.default.createElement("div", { className: "status-bar-left" }, onSaveProp && /* @__PURE__ */ import_react59.default.createElement("button", { onClick: handleSave, className: "status-btn save-btn" }, "Save"), onExportProp && /* @__PURE__ */ import_react59.default.createElement("button", { onClick: handleExport, className: "status-btn export-btn" }, "Export")), /* @__PURE__ */ import_react59.default.createElement("div", { className: "status-bar-right" }, saveStatus && /* @__PURE__ */ import_react59.default.createElement("span", { className: "save-status" }, saveStatus), editor && /* @__PURE__ */ import_react59.default.createElement(import_react59.default.Fragment, null, /* @__PURE__ */ import_react59.default.createElement("span", { className: "word-count" }, "CHARS: ", editor.storage.characterCount?.characters?.() ?? editor.getText().length), /* @__PURE__ */ import_react59.default.createElement("span", { className: "word-count" }, "WORDS: ", editor.storage.characterCount?.words?.() ?? editor.getText().split(/\s+/).filter(Boolean).length)))), linkModalOpen && (0, import_react_dom14.createPortal)(
+    ), /* @__PURE__ */ import_react59.default.createElement("div", { className: "status-bar" }, /* @__PURE__ */ import_react59.default.createElement("div", { className: "status-bar-left" }, onSaveProp && /* @__PURE__ */ import_react59.default.createElement("button", { onClick: handleSave, className: "status-btn save-btn" }, "Save"), onExportProp && /* @__PURE__ */ import_react59.default.createElement("button", { onClick: handleExport, className: "status-btn export-btn" }, "Export")), /* @__PURE__ */ import_react59.default.createElement("div", { className: "status-bar-right" }, saveStatus && /* @__PURE__ */ import_react59.default.createElement("span", { className: "save-status" }, saveStatus), editor && /* @__PURE__ */ import_react59.default.createElement(import_react59.default.Fragment, null, /* @__PURE__ */ import_react59.default.createElement("span", { className: "word-count" }, "CHARS: ", editor.storage.characterCount?.characters?.() ?? editor.getText().length), /* @__PURE__ */ import_react59.default.createElement("span", { className: "word-count" }, "WORDS: ", editor.storage.characterCount?.words?.() ?? editor.getText().split(/\s+/).filter(Boolean).length)))), linkModalOpen && (0, import_react_dom17.createPortal)(
       /* @__PURE__ */ import_react59.default.createElement("div", { className: "link-modal-overlay", onClick: handleLinkCancel }, /* @__PURE__ */ import_react59.default.createElement("div", { className: "link-modal", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react59.default.createElement("div", { className: "link-modal-body" }, /* @__PURE__ */ import_react59.default.createElement("div", { className: "link-modal-field" }, /* @__PURE__ */ import_react59.default.createElement("label", { className: "link-modal-label" }, "URL"), /* @__PURE__ */ import_react59.default.createElement(
         "input",
         {
@@ -12316,7 +12365,7 @@ var RufousTextEditor = ({
     )),
     helperText && /* @__PURE__ */ import_react59.default.createElement("div", { className: `rf-rte-helper-text ${error ? "rf-rte-helper-error" : ""}` }, helperText)
   );
-  return isFullscreen ? (0, import_react_dom14.createPortal)(wrapperJsx, document.body) : wrapperJsx;
+  return isFullscreen ? (0, import_react_dom17.createPortal)(wrapperJsx, document.body) : wrapperJsx;
 };
 var RufousTextContent = ({ content, className, style, sx }) => {
   const sxClass = useSx(sx);

package/dist/main.css

@@ -75,6 +75,13 @@
   z-index: 2000;
   backdrop-filter: blur(2px);
 }
+.MuiPopover-root,
+.MuiMenu-root,
+.MuiAutocomplete-popper,
+.MuiTooltip-popper,
+.MuiModal-root:not(.dialog-overlay) {
+  z-index: 2100 !important;
+}
 .dialog-container {
   background: var(--surface-color);
   color: var(--text-color);
@@ -2235,12 +2242,9 @@ pre {
   flex-shrink: 0;
 }
 .rf-autocomplete__popup {
-  position: absolute;
-  top: calc(100% + 4px);
-  left: 0;
-  right: 0;
-  z-index: 1400;
-  background: #ffffff;
+  position: fixed;
+  z-index: 2100;
+  background: var(--surface-color, #ffffff);
   border-radius: 8px;
   box-shadow:
     0 4px 6px rgba(0, 0, 0, 0.06),
@@ -2489,11 +2493,8 @@ pre {
   margin-top: 17px;
 }
 .rf-select__popup {
-  position: absolute;
-  top: calc(100% + 4px);
-  left: 0;
-  right: 0;
-  z-index: 1400;
+  position: fixed;
+  z-index: 2100;
   background: var(--surface-color, #ffffff);
   border-radius: 8px;
   box-shadow:

package/dist/main.js

@@ -1354,6 +1354,7 @@ IconButton.displayName = "IconButton";
 // lib/Dialogs/BaseDialog.tsx
 import * as React65 from "react";
 import { useState as useState2 } from "react";
+import ReactDOM from "react-dom";
 import { X } from "lucide-react";
 var BaseDialog = ({
   open = false,
@@ -1457,20 +1458,26 @@ var BaseDialog = ({
     dialogInner
   ) : /* @__PURE__ */ React65.createElement("div", { className: containerClass, style: containerStyle }, dialogInner);
   if (TransitionComponent) {
-    return /* @__PURE__ */ React65.createElement(
-      TransitionComponent,
-      {
-        in: open,
-        unmountOnExit: true,
-        ...TransitionProps,
-        onExited: () => {
-          TransitionProps?.onExited?.();
-        }
-      },
-      /* @__PURE__ */ React65.createElement("div", { className: `dialog-overlay ${size === "fullScreen" ? "overlay-fullscreen" : ""}` }, dialogContent)
+    return ReactDOM.createPortal(
+      /* @__PURE__ */ React65.createElement(
+        TransitionComponent,
+        {
+          in: open,
+          unmountOnExit: true,
+          ...TransitionProps,
+          onExited: () => {
+            TransitionProps?.onExited?.();
+          }
+        },
+        /* @__PURE__ */ React65.createElement("div", { className: `dialog-overlay ${size === "fullScreen" ? "overlay-fullscreen" : ""}` }, dialogContent)
+      ),
+      document.body
     );
   }
-  return /* @__PURE__ */ React65.createElement("div", { className: `dialog-overlay ${size === "fullScreen" ? "overlay-fullscreen" : ""}` }, dialogContent);
+  return ReactDOM.createPortal(
+    /* @__PURE__ */ React65.createElement("div", { className: `dialog-overlay ${size === "fullScreen" ? "overlay-fullscreen" : ""}` }, dialogContent),
+    document.body
+  );
 };
 var BaseDialog_default = BaseDialog;
 
@@ -3388,6 +3395,7 @@ import React72, {
   useEffect as useEffect6,
   useCallback as useCallback2
 } from "react";
+import ReactDOM2 from "react-dom";
 var ChevronDownIcon = () => /* @__PURE__ */ React72.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React72.createElement("polyline", { points: "6 9 12 15 18 9" }));
 var CloseSmIcon = ({ size = 16 }) => /* @__PURE__ */ React72.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" }, /* @__PURE__ */ React72.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), /* @__PURE__ */ React72.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" }));
 var CheckIcon = () => /* @__PURE__ */ React72.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React72.createElement("polyline", { points: "20 6 9 17 4 12" }));
@@ -3441,11 +3449,21 @@ function AutocompleteInner(props, _ref) {
   const [open, setOpen] = useState7(false);
   const [inputStr, setInputStr] = useState7("");
   const [focusedIdx, setFocusedIdx] = useState7(-1);
+  const [popupStyle, setPopupStyle] = useState7({});
   const containerRef = useRef6(null);
   const inputRef = useRef6(null);
   const listRef = useRef6(null);
   const inputId = useRef6(`rf-ac-${Math.random().toString(36).slice(2, 9)}`).current;
   const sxClass = useSx(sx);
+  const calcPopupStyle = useCallback2(() => {
+    if (!containerRef.current) return;
+    const rect = containerRef.current.getBoundingClientRect();
+    setPopupStyle({
+      top: rect.bottom + 4,
+      left: rect.left,
+      width: rect.width
+    });
+  }, []);
   const activeInput = controlledInput !== void 0 ? controlledInput : inputStr;
   const selectedValues = multiple ? Array.isArray(value) ? value : [] : value != null ? [value] : [];
   const isEqual = useCallback2(
@@ -3479,12 +3497,13 @@ function AutocompleteInner(props, _ref) {
     filtered.forEach((opt, i) => flatEntries.push({ kind: "option", option: opt, flatIdx: i }));
   }
   const selectableOptions = flatEntries.filter((e) => e.kind === "option");
-  const openPopup = () => {
+  const openPopup = useCallback2(() => {
     if (disabled) return;
+    calcPopupStyle();
     setOpen(true);
     setFocusedIdx(-1);
     onOpen?.();
-  };
+  }, [disabled, calcPopupStyle, onOpen]);
   const closePopup = useCallback2(() => {
     setOpen(false);
     setFocusedIdx(-1);
@@ -3496,14 +3515,20 @@ function AutocompleteInner(props, _ref) {
   }, [freeSolo, multiple, value, onInputChange, onClose]);
   useEffect6(() => {
     if (!open) return;
-    const handler = (e) => {
+    const handleOutside = (e) => {
       if (containerRef.current && !containerRef.current.contains(e.target)) {
         closePopup();
       }
     };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, [open, closePopup]);
+    document.addEventListener("mousedown", handleOutside);
+    window.addEventListener("scroll", calcPopupStyle, true);
+    window.addEventListener("resize", calcPopupStyle);
+    return () => {
+      document.removeEventListener("mousedown", handleOutside);
+      window.removeEventListener("scroll", calcPopupStyle, true);
+      window.removeEventListener("resize", calcPopupStyle);
+    };
+  }, [open, closePopup, calcPopupStyle]);
   useEffect6(() => {
     if (controlledInput !== void 0) return;
     if (!multiple) {
@@ -3688,34 +3713,37 @@ function AutocompleteInner(props, _ref) {
       },
       /* @__PURE__ */ React72.createElement(ChevronDownIcon, null)
     ))
-  ), helperText && /* @__PURE__ */ React72.createElement("div", { className: `rf-text-field__helper-text${error ? " rf-text-field__helper-text--error" : ""}` }, helperText), open && !disabled && /* @__PURE__ */ React72.createElement("div", { className: "rf-autocomplete__popup", role: "presentation" }, loading ? /* @__PURE__ */ React72.createElement("div", { className: "rf-autocomplete__loading" }, /* @__PURE__ */ React72.createElement("span", { className: "rf-ac-spinner" }), loadingText) : flatEntries.length === 0 ? /* @__PURE__ */ React72.createElement("div", { className: "rf-autocomplete__no-options" }, noOptionsText) : /* @__PURE__ */ React72.createElement("ul", { ref: listRef, className: "rf-autocomplete__listbox", role: "listbox" }, groupBy ? (
-    // Grouped render
-    (() => {
-      const rendered = [];
-      let groupItems = [];
-      let currentGroup = "";
-      flatEntries.forEach((entry, ei) => {
-        if (entry.kind === "group") {
-          if (groupItems.length > 0) {
+  ), helperText && /* @__PURE__ */ React72.createElement("div", { className: `rf-text-field__helper-text${error ? " rf-text-field__helper-text--error" : ""}` }, helperText), open && !disabled && ReactDOM2.createPortal(
+    /* @__PURE__ */ React72.createElement("div", { className: "rf-autocomplete__popup", role: "presentation", style: popupStyle }, loading ? /* @__PURE__ */ React72.createElement("div", { className: "rf-autocomplete__loading" }, /* @__PURE__ */ React72.createElement("span", { className: "rf-ac-spinner" }), loadingText) : flatEntries.length === 0 ? /* @__PURE__ */ React72.createElement("div", { className: "rf-autocomplete__no-options" }, noOptionsText) : /* @__PURE__ */ React72.createElement("ul", { ref: listRef, className: "rf-autocomplete__listbox", role: "listbox" }, groupBy ? (
+      // Grouped render
+      (() => {
+        const rendered = [];
+        let groupItems = [];
+        let currentGroup = "";
+        flatEntries.forEach((entry, ei) => {
+          if (entry.kind === "group") {
+            if (groupItems.length > 0) {
+              rendered.push(
+                /* @__PURE__ */ React72.createElement("li", { key: `g-${currentGroup}`, role: "presentation" }, /* @__PURE__ */ React72.createElement("div", { className: "rf-autocomplete__group-header" }, currentGroup), /* @__PURE__ */ React72.createElement("ul", { className: "rf-autocomplete__group-items", role: "group" }, groupItems))
+              );
+              groupItems = [];
+            }
+            currentGroup = entry.label;
+          } else {
+            const { option, flatIdx } = entry;
+            groupItems.push(renderOptionItem(option, flatIdx));
+          }
+          if (ei === flatEntries.length - 1 && groupItems.length > 0) {
             rendered.push(
               /* @__PURE__ */ React72.createElement("li", { key: `g-${currentGroup}`, role: "presentation" }, /* @__PURE__ */ React72.createElement("div", { className: "rf-autocomplete__group-header" }, currentGroup), /* @__PURE__ */ React72.createElement("ul", { className: "rf-autocomplete__group-items", role: "group" }, groupItems))
             );
-            groupItems = [];
           }
-          currentGroup = entry.label;
-        } else {
-          const { option, flatIdx } = entry;
-          groupItems.push(renderOptionItem(option, flatIdx));
-        }
-        if (ei === flatEntries.length - 1 && groupItems.length > 0) {
-          rendered.push(
-            /* @__PURE__ */ React72.createElement("li", { key: `g-${currentGroup}`, role: "presentation" }, /* @__PURE__ */ React72.createElement("div", { className: "rf-autocomplete__group-header" }, currentGroup), /* @__PURE__ */ React72.createElement("ul", { className: "rf-autocomplete__group-items", role: "group" }, groupItems))
-          );
-        }
-      });
-      return rendered;
-    })()
-  ) : selectableOptions.map(({ option, flatIdx }) => renderOptionItem(option, flatIdx)))));
+        });
+        return rendered;
+      })()
+    ) : selectableOptions.map(({ option, flatIdx }) => renderOptionItem(option, flatIdx)))),
+    document.body
+  ));
   function renderOptionItem(option, flatIdx) {
     const selected = isSelected(option);
     const focused = focusedIdx === flatIdx;
@@ -4428,6 +4456,7 @@ import React75, {
   useEffect as useEffect8,
   useCallback as useCallback3
 } from "react";
+import ReactDOM3 from "react-dom";
 var ChevronDownIcon2 = () => /* @__PURE__ */ React75.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React75.createElement("polyline", { points: "6 9 12 15 18 9" }));
 var CheckIcon2 = () => /* @__PURE__ */ React75.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React75.createElement("polyline", { points: "20 6 9 17 4 12" }));
 function normaliseOptions(options) {
@@ -4454,10 +4483,20 @@ var Select = React75.forwardRef(function Select2(props, ref) {
   } = props;
   const [open, setOpen] = useState9(false);
   const [focusedIdx, setFocusedIdx] = useState9(-1);
+  const [popupStyle, setPopupStyle] = useState9({});
   const containerRef = useRef9(null);
   const listRef = useRef9(null);
   const inputId = useRef9(`rf-sel-${Math.random().toString(36).slice(2, 9)}`).current;
   const sxClass = useSx(sx);
+  const calcPopupStyle = useCallback3(() => {
+    if (!containerRef.current) return;
+    const rect = containerRef.current.getBoundingClientRect();
+    setPopupStyle({
+      top: rect.bottom + 4,
+      left: rect.left,
+      width: rect.width
+    });
+  }, []);
   const options = normaliseOptions(rawOptions);
   const selectedValues = multiple ? Array.isArray(value) ? value : value != null ? [value] : [] : value != null ? [value] : [];
   const isSelected = useCallback3(
@@ -4469,9 +4508,10 @@ var Select = React75.forwardRef(function Select2(props, ref) {
   const isFloating = Boolean(open || hasValue);
   const openPopup = useCallback3(() => {
     if (disabled) return;
+    calcPopupStyle();
     setOpen(true);
     setFocusedIdx(-1);
-  }, [disabled]);
+  }, [disabled, calcPopupStyle]);
   const closePopup = useCallback3(() => {
     setOpen(false);
     setFocusedIdx(-1);
@@ -4482,14 +4522,20 @@ var Select = React75.forwardRef(function Select2(props, ref) {
   }, [open, openPopup, closePopup]);
   useEffect8(() => {
     if (!open) return;
-    const handler = (e) => {
+    const handleOutside = (e) => {
       if (containerRef.current && !containerRef.current.contains(e.target)) {
         closePopup();
       }
     };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, [open, closePopup]);
+    document.addEventListener("mousedown", handleOutside);
+    window.addEventListener("scroll", calcPopupStyle, true);
+    window.addEventListener("resize", calcPopupStyle);
+    return () => {
+      document.removeEventListener("mousedown", handleOutside);
+      window.removeEventListener("scroll", calcPopupStyle, true);
+      window.removeEventListener("resize", calcPopupStyle);
+    };
+  }, [open, closePopup, calcPopupStyle]);
   const selectOption = useCallback3((opt) => {
     if (opt.disabled) return;
     if (multiple) {
@@ -4608,32 +4654,35 @@ var Select = React75.forwardRef(function Select2(props, ref) {
       /* @__PURE__ */ React75.createElement("div", { className: "rf-select__arrow", "aria-hidden": "true" }, /* @__PURE__ */ React75.createElement(ChevronDownIcon2, null))
     ),
     helperText && /* @__PURE__ */ React75.createElement("div", { className: `rf-text-field__helper-text${error ? " rf-text-field__helper-text--error" : ""}` }, helperText),
-    open && !disabled && /* @__PURE__ */ React75.createElement("div", { className: "rf-select__popup", role: "presentation" }, /* @__PURE__ */ React75.createElement("ul", { ref: listRef, className: "rf-select__listbox", role: "listbox", "aria-multiselectable": multiple }, options.map((opt, idx) => {
-      const selected = isSelected(opt.value);
-      const focused = focusedIdx === idx;
-      return /* @__PURE__ */ React75.createElement(
-        "li",
-        {
-          key: opt.value,
-          "data-idx": idx,
-          role: "option",
-          "aria-selected": selected,
-          "aria-disabled": opt.disabled,
-          className: [
-            "rf-select__option",
-            selected ? "rf-select__option--selected" : "",
-            focused ? "rf-select__option--focused" : "",
-            opt.disabled ? "rf-select__option--disabled" : ""
-          ].filter(Boolean).join(" "),
-          onMouseEnter: () => setFocusedIdx(idx),
-          onMouseLeave: () => setFocusedIdx(-1),
-          onMouseDown: (e) => e.preventDefault(),
-          onClick: () => selectOption(opt)
-        },
-        /* @__PURE__ */ React75.createElement("span", { className: "rf-select__option-label" }, opt.label),
-        /* @__PURE__ */ React75.createElement("span", { className: "rf-select__option-check", "aria-hidden": "true" }, /* @__PURE__ */ React75.createElement(CheckIcon2, null))
-      );
-    })))
+    open && !disabled && ReactDOM3.createPortal(
+      /* @__PURE__ */ React75.createElement("div", { className: "rf-select__popup", role: "presentation", style: popupStyle }, /* @__PURE__ */ React75.createElement("ul", { ref: listRef, className: "rf-select__listbox", role: "listbox", "aria-multiselectable": multiple }, options.map((opt, idx) => {
+        const selected = isSelected(opt.value);
+        const focused = focusedIdx === idx;
+        return /* @__PURE__ */ React75.createElement(
+          "li",
+          {
+            key: opt.value,
+            "data-idx": idx,
+            role: "option",
+            "aria-selected": selected,
+            "aria-disabled": opt.disabled,
+            className: [
+              "rf-select__option",
+              selected ? "rf-select__option--selected" : "",
+              focused ? "rf-select__option--focused" : "",
+              opt.disabled ? "rf-select__option--disabled" : ""
+            ].filter(Boolean).join(" "),
+            onMouseEnter: () => setFocusedIdx(idx),
+            onMouseLeave: () => setFocusedIdx(-1),
+            onMouseDown: (e) => e.preventDefault(),
+            onClick: () => selectOption(opt)
+          },
+          /* @__PURE__ */ React75.createElement("span", { className: "rf-select__option-label" }, opt.label),
+          /* @__PURE__ */ React75.createElement("span", { className: "rf-select__option-check", "aria-hidden": "true" }, /* @__PURE__ */ React75.createElement(CheckIcon2, null))
+        );
+      }))),
+      document.body
+    )
   );
 });
 Select.displayName = "Select";
@@ -5807,7 +5856,7 @@ import React87, {
   useRef as useRef14,
   useState as useState13
 } from "react";
-import ReactDOM from "react-dom";
+import ReactDOM4 from "react-dom";
 var GAP = 8;
 function computePosition(anchor, tooltip, placement) {
   const { top: aTop, left: aLeft, width: aW, height: aH } = anchor;
@@ -6026,7 +6075,7 @@ var Tooltip = ({
       ...childProps
     },
     React87.cloneElement(children)
-  ), ReactDOM.createPortal(tooltipElement, document.body));
+  ), ReactDOM4.createPortal(tooltipElement, document.body));
 };
 Tooltip.displayName = "Tooltip";
 
@@ -6932,7 +6981,7 @@ import React97, {
   useRef as useRef16,
   useState as useState17
 } from "react";
-import ReactDOM2 from "react-dom";
+import ReactDOM5 from "react-dom";
 var MenuDivider = () => /* @__PURE__ */ React97.createElement("hr", { className: "rf-menu-divider", "aria-hidden": "true" });
 MenuDivider.displayName = "MenuDivider";
 var MenuItem = ({
@@ -7085,7 +7134,7 @@ var Menu = ({
     },
     children
   ));
-  return ReactDOM2.createPortal(portal, document.body);
+  return ReactDOM5.createPortal(portal, document.body);
 };
 Menu.displayName = "Menu";
 
@@ -7094,7 +7143,7 @@ import React98, {
   useEffect as useEffect13,
   useState as useState18
 } from "react";
-import ReactDOM3 from "react-dom";
+import ReactDOM6 from "react-dom";
 var Drawer = ({
   open,
   onClose,
@@ -7194,7 +7243,7 @@ var Drawer = ({
     },
     children
   ));
-  return ReactDOM3.createPortal(
+  return ReactDOM6.createPortal(
     /* @__PURE__ */ React98.createElement("div", { className: rootClasses, style }, drawerContent),
     document.body
   );
@@ -7208,7 +7257,7 @@ import React99, {
   useRef as useRef17,
   useState as useState19
 } from "react";
-import ReactDOM4 from "react-dom";
+import ReactDOM7 from "react-dom";
 var SEVERITY_ICONS = {
   success: "\u2713",
   error: "\u2715",
@@ -7313,7 +7362,7 @@ var Snackbar = ({
       "\u2715"
     )
   ));
-  return ReactDOM4.createPortal(snackbarEl, document.body);
+  return ReactDOM7.createPortal(snackbarEl, document.body);
 };
 Snackbar.displayName = "Snackbar";
 
@@ -7372,7 +7421,7 @@ import React101, {
   useRef as useRef18,
   useState as useState20
 } from "react";
-import ReactDOM5 from "react-dom";
+import ReactDOM8 from "react-dom";
 function computePopperPosition(anchorRect, popperRect, placement, offset2 = [0, 8]) {
   const [skid, dist] = offset2;
   let top = 0;
@@ -7515,7 +7564,7 @@ var Popper = ({
   if (disablePortal) {
     return /* @__PURE__ */ React101.createElement(React101.Fragment, null, popper);
   }
-  return ReactDOM5.createPortal(popper, document.body);
+  return ReactDOM8.createPortal(popper, document.body);
 };
 Popper.displayName = "Popper";
 
@@ -7526,7 +7575,7 @@ import React102, {
   useRef as useRef19,
   useState as useState21
 } from "react";
-import ReactDOM6 from "react-dom";
+import ReactDOM9 from "react-dom";
 function getPoint(rect, v, h) {
   const x = h === "left" ? rect.left : h === "center" ? rect.left + rect.width / 2 : rect.right;
   const y = v === "top" ? rect.top : v === "center" ? rect.top + rect.height / 2 : rect.bottom;
@@ -7629,7 +7678,7 @@ var Popover = ({
   if (disablePortal) {
     return /* @__PURE__ */ React102.createElement("div", { className: `${rootClasses} rf-popover-inline`, style }, content);
   }
-  return ReactDOM6.createPortal(
+  return ReactDOM9.createPortal(
     /* @__PURE__ */ React102.createElement("div", { className: rootClasses, style }, content),
     document.body
   );

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rufous/ui",
   "private": false,
-  "version": "0.2.67",
+  "version": "0.2.69",
   "type": "module",
   "description": "Experimental: A lightweight React UI component library (Beta)",
   "style": "./dist/main.css",