@rufous/ui 0.2.68 → 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,7 +3547,7 @@ DateRangeField.displayName = "DateRangeField";
 
 // lib/TextFields/Autocomplete.tsx
 var import_react21 = __toESM(require("react"), 1);
-var import_react_dom2 = __toESM(require("react-dom"), 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" }));
@@ -3858,7 +3865,7 @@ 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 && import_react_dom2.default.createPortal(
+  ), 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
       (() => {
@@ -4579,7 +4586,7 @@ function DataGrid({
 
 // lib/Select/Select.tsx
 var import_react23 = __toESM(require("react"), 1);
-var import_react_dom3 = __toESM(require("react-dom"), 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) {
@@ -4777,7 +4784,7 @@ 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 && import_react_dom3.default.createPortal(
+    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;
@@ -5963,7 +5970,7 @@ Skeleton.displayName = "Skeleton";
 
 // lib/Tooltip/Tooltip.tsx
 var import_react35 = __toESM(require("react"), 1);
-var import_react_dom4 = __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;
@@ -6182,7 +6189,7 @@ var Tooltip = ({
       ...childProps
     },
     import_react35.default.cloneElement(children)
-  ), import_react_dom4.default.createPortal(tooltipElement, document.body));
+  ), import_react_dom5.default.createPortal(tooltipElement, document.body));
 };
 Tooltip.displayName = "Tooltip";
 
@@ -7069,7 +7076,7 @@ Stepper.displayName = "Stepper";
 
 // lib/Menu/Menu.tsx
 var import_react40 = __toESM(require("react"), 1);
-var import_react_dom5 = __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 = ({
@@ -7222,13 +7229,13 @@ var Menu = ({
     },
     children
   ));
-  return import_react_dom5.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_dom6 = __toESM(require("react-dom"), 1);
+var import_react_dom7 = __toESM(require("react-dom"), 1);
 var Drawer = ({
   open,
   onClose,
@@ -7328,7 +7335,7 @@ var Drawer = ({
     },
     children
   ));
-  return import_react_dom6.default.createPortal(
+  return import_react_dom7.default.createPortal(
     /* @__PURE__ */ import_react41.default.createElement("div", { className: rootClasses, style }, drawerContent),
     document.body
   );
@@ -7337,7 +7344,7 @@ Drawer.displayName = "Drawer";
 
 // lib/Snackbar/Snackbar.tsx
 var import_react42 = __toESM(require("react"), 1);
-var import_react_dom7 = __toESM(require("react-dom"), 1);
+var import_react_dom8 = __toESM(require("react-dom"), 1);
 var SEVERITY_ICONS = {
   success: "\u2713",
   error: "\u2715",
@@ -7442,7 +7449,7 @@ var Snackbar = ({
       "\u2715"
     )
   ));
-  return import_react_dom7.default.createPortal(snackbarEl, document.body);
+  return import_react_dom8.default.createPortal(snackbarEl, document.body);
 };
 Snackbar.displayName = "Snackbar";
 
@@ -7496,7 +7503,7 @@ Link.displayName = "Link";
 
 // lib/Popper/Popper.tsx
 var import_react44 = __toESM(require("react"), 1);
-var import_react_dom8 = __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;
@@ -7639,13 +7646,13 @@ var Popper = ({
   if (disablePortal) {
     return /* @__PURE__ */ import_react44.default.createElement(import_react44.default.Fragment, null, popper);
   }
-  return import_react_dom8.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_dom9 = __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;
@@ -7748,7 +7755,7 @@ var Popover = ({
   if (disablePortal) {
     return /* @__PURE__ */ import_react45.default.createElement("div", { className: `${rootClasses} rf-popover-inline`, style }, content);
   }
-  return import_react_dom9.default.createPortal(
+  return import_react_dom10.default.createPortal(
     /* @__PURE__ */ import_react45.default.createElement("div", { className: rootClasses, style }, content),
     document.body
   );
@@ -8399,7 +8406,7 @@ PhoneField.displayName = "PhoneField";
 
 // lib/RufousTextEditor/RufousTextEditor.tsx
 var import_react59 = __toESM(require("react"), 1);
-var import_react_dom16 = 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);
@@ -8521,7 +8528,7 @@ function createMentionSuggestion(users) {
 
 // lib/RufousTextEditor/Toolbar.tsx
 var import_react55 = __toESM(require("react"), 1);
-var import_react_dom12 = require("react-dom");
+var import_react_dom13 = require("react-dom");
 
 // lib/RufousTextEditor/TextToSpeech.tsx
 var import_react51 = __toESM(require("react"), 1);
@@ -8834,7 +8841,7 @@ var SpeechToText_default = SpeechToText;
 
 // lib/RufousTextEditor/AICommands.tsx
 var import_react53 = __toESM(require("react"), 1);
-var import_react_dom10 = 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." },
@@ -8991,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_dom10.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",
       {
@@ -9042,7 +9049,7 @@ var AICommands_default = AICommands;
 
 // lib/RufousTextEditor/TranslateModal.tsx
 var import_react54 = __toESM(require("react"), 1);
-var import_react_dom11 = require("react-dom");
+var import_react_dom12 = require("react-dom");
 var LANGUAGES = [
   { code: "af", name: "Afrikaans" },
   { code: "sq", name: "Albanian" },
@@ -9233,7 +9240,7 @@ var TranslateModal = ({ editor, onClose, onTranslate, initialSource, initialTarg
       setTranslating(false);
     }
   };
-  return (0, import_react_dom11.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",
       {
@@ -10143,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_dom12.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
   ));
@@ -11046,7 +11053,7 @@ var Toolbar_default = Toolbar;
 
 // lib/RufousTextEditor/ImageToolbar.tsx
 var import_react56 = __toESM(require("react"), 1);
-var import_react_dom13 = require("react-dom");
+var import_react_dom14 = require("react-dom");
 var ALIGNMENTS = [
   { value: "left", label: "Left", icon: "\u2630" },
   { value: "center", label: "Center", icon: "\u2261" },
@@ -11218,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_dom13.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;
@@ -11295,7 +11302,7 @@ var ImageToolbar = ({ editor }) => {
     );
     setShowVAlign(false);
   };
-  return (0, import_react_dom13.createPortal)(
+  return (0, import_react_dom14.createPortal)(
     /* @__PURE__ */ import_react56.default.createElement(import_react56.default.Fragment, null, /* @__PURE__ */ import_react56.default.createElement(
       "div",
       {
@@ -11326,7 +11333,7 @@ var ImageToolbar_default = ImageToolbar;
 
 // lib/RufousTextEditor/VideoToolbar.tsx
 var import_react57 = __toESM(require("react"), 1);
-var import_react_dom14 = require("react-dom");
+var import_react_dom15 = require("react-dom");
 var ALIGNMENTS2 = [
   { value: "left", label: "Left", icon: "\u2630" },
   { value: "center", label: "Center", icon: "\u2261" },
@@ -11472,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_dom14.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;
@@ -11519,7 +11526,7 @@ var VideoToolbar = ({ editor }) => {
       })
     );
   };
-  return (0, import_react_dom14.createPortal)(
+  return (0, import_react_dom15.createPortal)(
     /* @__PURE__ */ import_react57.default.createElement(import_react57.default.Fragment, null, /* @__PURE__ */ import_react57.default.createElement(
       "div",
       {
@@ -11567,7 +11574,7 @@ var VideoToolbar_default = VideoToolbar;
 
 // lib/RufousTextEditor/TableToolbar.tsx
 var import_react58 = __toESM(require("react"), 1);
-var import_react_dom15 = 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)" }));
@@ -11624,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_dom15.createPortal)(
+  return (0, import_react_dom16.createPortal)(
     /* @__PURE__ */ import_react58.default.createElement(
       "div",
       {
@@ -12313,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_dom16.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",
         {
@@ -12358,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_dom16.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.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,7 +3395,7 @@ import React72, {
   useEffect as useEffect6,
   useCallback as useCallback2
 } from "react";
-import ReactDOM from "react-dom";
+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" }));
@@ -3706,7 +3713,7 @@ 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 && ReactDOM.createPortal(
+  ), 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
       (() => {
@@ -4449,7 +4456,7 @@ import React75, {
   useEffect as useEffect8,
   useCallback as useCallback3
 } from "react";
-import ReactDOM2 from "react-dom";
+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) {
@@ -4647,7 +4654,7 @@ 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 && ReactDOM2.createPortal(
+    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;
@@ -5849,7 +5856,7 @@ import React87, {
   useRef as useRef14,
   useState as useState13
 } from "react";
-import ReactDOM3 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;
@@ -6068,7 +6075,7 @@ var Tooltip = ({
       ...childProps
     },
     React87.cloneElement(children)
-  ), ReactDOM3.createPortal(tooltipElement, document.body));
+  ), ReactDOM4.createPortal(tooltipElement, document.body));
 };
 Tooltip.displayName = "Tooltip";
 
@@ -6974,7 +6981,7 @@ import React97, {
   useRef as useRef16,
   useState as useState17
 } from "react";
-import ReactDOM4 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 = ({
@@ -7127,7 +7134,7 @@ var Menu = ({
     },
     children
   ));
-  return ReactDOM4.createPortal(portal, document.body);
+  return ReactDOM5.createPortal(portal, document.body);
 };
 Menu.displayName = "Menu";
 
@@ -7136,7 +7143,7 @@ import React98, {
   useEffect as useEffect13,
   useState as useState18
 } from "react";
-import ReactDOM5 from "react-dom";
+import ReactDOM6 from "react-dom";
 var Drawer = ({
   open,
   onClose,
@@ -7236,7 +7243,7 @@ var Drawer = ({
     },
     children
   ));
-  return ReactDOM5.createPortal(
+  return ReactDOM6.createPortal(
     /* @__PURE__ */ React98.createElement("div", { className: rootClasses, style }, drawerContent),
     document.body
   );
@@ -7250,7 +7257,7 @@ import React99, {
   useRef as useRef17,
   useState as useState19
 } from "react";
-import ReactDOM6 from "react-dom";
+import ReactDOM7 from "react-dom";
 var SEVERITY_ICONS = {
   success: "\u2713",
   error: "\u2715",
@@ -7355,7 +7362,7 @@ var Snackbar = ({
       "\u2715"
     )
   ));
-  return ReactDOM6.createPortal(snackbarEl, document.body);
+  return ReactDOM7.createPortal(snackbarEl, document.body);
 };
 Snackbar.displayName = "Snackbar";
 
@@ -7414,7 +7421,7 @@ import React101, {
   useRef as useRef18,
   useState as useState20
 } from "react";
-import ReactDOM7 from "react-dom";
+import ReactDOM8 from "react-dom";
 function computePopperPosition(anchorRect, popperRect, placement, offset2 = [0, 8]) {
   const [skid, dist] = offset2;
   let top = 0;
@@ -7557,7 +7564,7 @@ var Popper = ({
   if (disablePortal) {
     return /* @__PURE__ */ React101.createElement(React101.Fragment, null, popper);
   }
-  return ReactDOM7.createPortal(popper, document.body);
+  return ReactDOM8.createPortal(popper, document.body);
 };
 Popper.displayName = "Popper";
 
@@ -7568,7 +7575,7 @@ import React102, {
   useRef as useRef19,
   useState as useState21
 } from "react";
-import ReactDOM8 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;
@@ -7671,7 +7678,7 @@ var Popover = ({
   if (disablePortal) {
     return /* @__PURE__ */ React102.createElement("div", { className: `${rootClasses} rf-popover-inline`, style }, content);
   }
-  return ReactDOM8.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.68",
+  "version": "0.2.69",
   "type": "module",
   "description": "Experimental: A lightweight React UI component library (Beta)",
   "style": "./dist/main.css",