@rufous/ui 0.2.77 → 0.2.78

package/dist/main.cjs

@@ -1528,6 +1528,7 @@ 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 DialogDepthContext = React65.createContext(0);
 var BaseDialog = ({
   open = false,
   onConfirm,
@@ -1561,6 +1562,21 @@ var BaseDialog = ({
   const { themeConfig } = useRufousTheme();
   const [isSubmitting, setIsSubmitting] = (0, import_react14.useState)(false);
   const sxClass = useSx(sx);
+  const depth = (0, import_react14.useContext)(DialogDepthContext);
+  const overlayZ = 2e3 + depth * 200;
+  const portalZ = overlayZ + 100;
+  (0, import_react14.useEffect)(() => {
+    if (!open) return;
+    const el = document.documentElement;
+    const prev = el.style.getPropertyValue("--rf-dialog-portal-z");
+    const prevVal = parseInt(prev || "0");
+    if (portalZ > prevVal) {
+      el.style.setProperty("--rf-dialog-portal-z", String(portalZ));
+    }
+    return () => {
+      el.style.setProperty("--rf-dialog-portal-z", prev || "");
+    };
+  }, [open, portalZ]);
   if (!open && !TransitionComponent) return null;
   const isButtonLoading = isSubmitting || loading;
   const renderButtons = () => /* @__PURE__ */ React65.createElement(React65.Fragment, null, showCancelButton && /* @__PURE__ */ React65.createElement(
@@ -1629,6 +1645,14 @@ var BaseDialog = ({
     },
     dialogInner
   ) : /* @__PURE__ */ React65.createElement("div", { className: containerClass, style: containerStyle }, dialogInner);
+  const overlayNode = (content) => /* @__PURE__ */ React65.createElement(
+    "div",
+    {
+      className: `dialog-overlay ${size === "fullScreen" ? "overlay-fullscreen" : ""}`,
+      style: { zIndex: overlayZ }
+    },
+    /* @__PURE__ */ React65.createElement(DialogDepthContext.Provider, { value: depth + 1 }, content)
+  );
   if (TransitionComponent) {
     return import_react_dom.default.createPortal(
       /* @__PURE__ */ React65.createElement(
@@ -1641,13 +1665,13 @@ var BaseDialog = ({
             TransitionProps?.onExited?.();
           }
         },
-        /* @__PURE__ */ React65.createElement("div", { className: `dialog-overlay ${size === "fullScreen" ? "overlay-fullscreen" : ""}` }, dialogContent)
+        overlayNode(dialogContent)
       ),
       document.body
     );
   }
   return import_react_dom.default.createPortal(
-    /* @__PURE__ */ React65.createElement("div", { className: `dialog-overlay ${size === "fullScreen" ? "overlay-fullscreen" : ""}` }, dialogContent),
+    overlayNode(dialogContent),
     document.body
   );
 };

package/dist/main.css

@@ -83,7 +83,7 @@
 .p-treeselect-panel,
 .MuiModal-root:not(.dialog-overlay),
 .rf-table-toolbar {
-  z-index: 2100 !important;
+  z-index: var(--rf-dialog-portal-z, 2100) !important;
 }
 .dialog-container {
   background: var(--surface-color);

package/dist/main.js

@@ -1353,9 +1353,10 @@ IconButton.displayName = "IconButton";
 
 // lib/Dialogs/BaseDialog.tsx
 import * as React65 from "react";
-import { useState as useState2 } from "react";
+import { useState as useState2, useContext, useEffect as useEffect2 } from "react";
 import ReactDOM from "react-dom";
 import { X } from "lucide-react";
+var DialogDepthContext = React65.createContext(0);
 var BaseDialog = ({
   open = false,
   onConfirm,
@@ -1389,6 +1390,21 @@ var BaseDialog = ({
   const { themeConfig } = useRufousTheme();
   const [isSubmitting, setIsSubmitting] = useState2(false);
   const sxClass = useSx(sx);
+  const depth = useContext(DialogDepthContext);
+  const overlayZ = 2e3 + depth * 200;
+  const portalZ = overlayZ + 100;
+  useEffect2(() => {
+    if (!open) return;
+    const el = document.documentElement;
+    const prev = el.style.getPropertyValue("--rf-dialog-portal-z");
+    const prevVal = parseInt(prev || "0");
+    if (portalZ > prevVal) {
+      el.style.setProperty("--rf-dialog-portal-z", String(portalZ));
+    }
+    return () => {
+      el.style.setProperty("--rf-dialog-portal-z", prev || "");
+    };
+  }, [open, portalZ]);
   if (!open && !TransitionComponent) return null;
   const isButtonLoading = isSubmitting || loading;
   const renderButtons = () => /* @__PURE__ */ React65.createElement(React65.Fragment, null, showCancelButton && /* @__PURE__ */ React65.createElement(
@@ -1457,6 +1473,14 @@ var BaseDialog = ({
     },
     dialogInner
   ) : /* @__PURE__ */ React65.createElement("div", { className: containerClass, style: containerStyle }, dialogInner);
+  const overlayNode = (content) => /* @__PURE__ */ React65.createElement(
+    "div",
+    {
+      className: `dialog-overlay ${size === "fullScreen" ? "overlay-fullscreen" : ""}`,
+      style: { zIndex: overlayZ }
+    },
+    /* @__PURE__ */ React65.createElement(DialogDepthContext.Provider, { value: depth + 1 }, content)
+  );
   if (TransitionComponent) {
     return ReactDOM.createPortal(
       /* @__PURE__ */ React65.createElement(
@@ -1469,13 +1493,13 @@ var BaseDialog = ({
             TransitionProps?.onExited?.();
           }
         },
-        /* @__PURE__ */ React65.createElement("div", { className: `dialog-overlay ${size === "fullScreen" ? "overlay-fullscreen" : ""}` }, dialogContent)
+        overlayNode(dialogContent)
       ),
       document.body
     );
   }
   return ReactDOM.createPortal(
-    /* @__PURE__ */ React65.createElement("div", { className: `dialog-overlay ${size === "fullScreen" ? "overlay-fullscreen" : ""}` }, dialogContent),
+    overlayNode(dialogContent),
     document.body
   );
 };
@@ -1483,13 +1507,13 @@ var BaseDialog_default = BaseDialog;
 
 // lib/Contexts/rufousThemeProvider.tsx
 import React66, {
-  createContext,
-  useContext,
-  useEffect as useEffect2,
+  createContext as createContext2,
+  useContext as useContext2,
+  useEffect as useEffect3,
   useMemo,
   useState as useState3
 } from "react";
-var RufousThemeContext = createContext(null);
+var RufousThemeContext = createContext2(null);
 var RufousThemeProvider = ({ children }) => {
   const [committedThemeKey, setCommittedThemeKey] = useState3("default");
   const [previewThemeKey, setPreviewThemeKey] = useState3("default");
@@ -1503,7 +1527,7 @@ var RufousThemeProvider = ({ children }) => {
       console.error("Error fetching general settings:", err);
     }
   };
-  useEffect2(() => {
+  useEffect3(() => {
     getGeneralSettings();
   }, []);
   const fullTheme = useMemo(() => {
@@ -1542,7 +1566,7 @@ var RufousThemeProvider = ({ children }) => {
     )
   );
 };
-var useRufousTheme = () => useContext(RufousThemeContext);
+var useRufousTheme = () => useContext2(RufousThemeContext);
 
 // lib/CheckBoxes/CheckBox.jsx
 import React67 from "react";
@@ -1718,7 +1742,7 @@ var TextField = forwardRef3(({
 TextField.displayName = "TextField";
 
 // lib/TextFields/AddressLookup.tsx
-import React69, { useState as useState4, useRef as useRef3, useEffect as useEffect3 } from "react";
+import React69, { useState as useState4, useRef as useRef3, useEffect as useEffect4 } from "react";
 import Axios from "axios";
 import { Country, State, City } from "country-state-city";
 var AddressLookup = ({
@@ -1749,7 +1773,7 @@ var AddressLookup = ({
   const countries = Country.getAllCountries();
   const [states, setStates] = useState4([]);
   const [cities, setCities] = useState4([]);
-  useEffect3(() => {
+  useEffect4(() => {
     const handleClickOutside = (event) => {
       if (containerRef.current && !containerRef.current.contains(event.target)) {
         setShowSuggestions(false);
@@ -1758,7 +1782,7 @@ var AddressLookup = ({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
-  useEffect3(() => {
+  useEffect4(() => {
     if (value.country || value.state || value.city || value.pincode) {
       setGoogleFields({
         country: !!value.country,
@@ -1768,7 +1792,7 @@ var AddressLookup = ({
       });
     }
   }, []);
-  useEffect3(() => {
+  useEffect4(() => {
     if (value.country) {
       const country = countries.find((c) => c.name === value.country);
       if (country) {
@@ -1781,7 +1805,7 @@ var AddressLookup = ({
       setStates([]);
     }
   }, [value.country]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (value.state && value.country) {
       const country = countries.find((c) => c.name === value.country);
       if (country) {
@@ -2018,7 +2042,7 @@ var AddressLookup_default = AddressLookup;
 import React70, {
   useState as useState5,
   useRef as useRef4,
-  useEffect as useEffect4,
+  useEffect as useEffect5,
   useCallback
 } from "react";
 import { createPortal } from "react-dom";
@@ -2179,13 +2203,13 @@ var ScrollColumn = ({ items, selected, onSelect, infinite = true }) => {
   const virtualItems = infinite ? Array(MULTIPLIER).fill(items).flat() : items;
   const centerOffset = infinite ? Math.floor(MULTIPLIER / 2) * items.length : 0;
   const VISUAL_OFFSET = 54;
-  useEffect4(() => {
+  useEffect5(() => {
     if (listRef.current) {
       const targetIndex = centerOffset + selected;
       listRef.current.scrollTop = targetIndex * ITEM_H - (infinite ? VISUAL_OFFSET : 0);
     }
   }, [centerOffset, infinite, selected]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (listRef.current && !isInternalScroll.current) {
       const targetIndex = centerOffset + selected;
       listRef.current.scrollTo({
@@ -2437,7 +2461,7 @@ var DateField = ({
   const pickerRef = useRef4(null);
   const [dropUp, setDropUp] = useState5(false);
   const inputId = useRef4(`rf-df-${Math.random().toString(36).substring(2, 11)}`).current;
-  useEffect4(() => {
+  useEffect5(() => {
     if (value === void 0) return;
     if (!value) {
       setSelectedDate(null);
@@ -2460,7 +2484,7 @@ var DateField = ({
       setInputStr(str);
     }
   }, [value, type]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!open) return;
     const handler = (e) => {
       const target = e.target;
@@ -2471,7 +2495,7 @@ var DateField = ({
     document.addEventListener("mousedown", handler);
     return () => document.removeEventListener("mousedown", handler);
   }, [open]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!open || !containerRef.current) return;
     const rect = containerRef.current.getBoundingClientRect();
     const spaceBelow = window.innerHeight - rect.bottom;
@@ -2766,7 +2790,7 @@ DateField.displayName = "DateField";
 import React71, {
   useState as useState6,
   useRef as useRef5,
-  useEffect as useEffect5
+  useEffect as useEffect6
 } from "react";
 var WEEKDAYS2 = ["SU", "MO", "TU", "WE", "TH", "FR", "SA"];
 var MONTHS2 = [
@@ -3062,7 +3086,7 @@ var DateRangeField = ({
   const [leftViewMonth, setLeftViewMonth] = useState6(() => today2.getMonth());
   const containerRef = useRef5(null);
   const inputId = useRef5(`rf-dr-${Math.random().toString(36).substr(2, 9)}`).current;
-  useEffect5(() => {
+  useEffect6(() => {
     const s2 = value?.start ? isoToDate2(value.start) : null;
     const e = value?.end ? isoToDate2(value.end) : null;
     setDraftStart(s2);
@@ -3071,10 +3095,10 @@ var DateRangeField = ({
     setEndInputStr(e ? formatShort(e) : "");
     setActivePreset(detectPreset(s2, e));
   }, [value?.start, value?.end]);
-  useEffect5(() => {
+  useEffect6(() => {
     setActivePreset(detectPreset(draftStart, draftEnd));
   }, [draftStart?.getTime(), draftEnd?.getTime()]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!open) return;
     const handler = (e) => {
       if (containerRef.current && !containerRef.current.contains(e.target)) {
@@ -3419,7 +3443,7 @@ DateRangeField.displayName = "DateRangeField";
 import React72, {
   useState as useState7,
   useRef as useRef6,
-  useEffect as useEffect6,
+  useEffect as useEffect7,
   useCallback as useCallback2
 } from "react";
 import ReactDOM2 from "react-dom";
@@ -3540,7 +3564,7 @@ function AutocompleteInner(props, _ref) {
       onInputChange?.("");
     }
   }, [freeSolo, multiple, value, onInputChange, onClose]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (!open) return;
     const handleOutside = (e) => {
       if (containerRef.current && !containerRef.current.contains(e.target)) {
@@ -3556,7 +3580,7 @@ function AutocompleteInner(props, _ref) {
       window.removeEventListener("resize", calcPopupStyle);
     };
   }, [open, closePopup, calcPopupStyle]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (controlledInput !== void 0) return;
     if (!multiple) {
       const v = value;
@@ -3831,7 +3855,7 @@ var RufousLogoLoader = ({ size = 80, sx, className }) => {
 };
 
 // lib/DataGrid/DataGrid.tsx
-import React74, { useState as useState8, useMemo as useMemo2, useRef as useRef8, useEffect as useEffect7 } from "react";
+import React74, { useState as useState8, useMemo as useMemo2, useRef as useRef8, useEffect as useEffect8 } from "react";
 import {
   ChevronUp,
   ChevronDown,
@@ -3947,7 +3971,7 @@ function DataGrid({
     { column: initialFilterCol, operator: getDefaultOperator(initialColumnsProp[0]?.type), value: "", logic: "AND" }
   ]);
   const [colSearch, setColSearch] = useState8("");
-  useEffect7(() => {
+  useEffect8(() => {
     const handleMouseMove = (e) => {
       if (!resizingColumn) return;
       const col = resolvedColumns.find((c) => String(c.field) === resizingColumn);
@@ -3967,7 +3991,7 @@ function DataGrid({
       document.removeEventListener("mouseup", handleMouseUp);
     };
   }, [resizingColumn, startX, startWidth, resolvedColumns]);
-  useEffect7(() => {
+  useEffect8(() => {
     const handleClickOutside = (e) => {
       if (menuRef.current && !menuRef.current.contains(e.target)) {
         setActiveMenu(null);
@@ -3976,7 +4000,7 @@ function DataGrid({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
-  useEffect7(() => {
+  useEffect8(() => {
     setColumnWidths((prev) => {
       const next = { ...prev };
       initialColumnsProp.forEach((col) => {
@@ -4490,7 +4514,7 @@ function DataGrid({
 import React75, {
   useState as useState9,
   useRef as useRef9,
-  useEffect as useEffect8,
+  useEffect as useEffect9,
   useCallback as useCallback3
 } from "react";
 import ReactDOM3 from "react-dom";
@@ -4557,7 +4581,7 @@ var Select = React75.forwardRef(function Select2(props, ref) {
     if (open) closePopup();
     else openPopup();
   }, [open, openPopup, closePopup]);
-  useEffect8(() => {
+  useEffect9(() => {
     if (!open) return;
     const handleOutside = (e) => {
       if (containerRef.current && !containerRef.current.contains(e.target)) {
@@ -4728,7 +4752,7 @@ Select.displayName = "Select";
 import React76, {
   useState as useState10,
   useRef as useRef10,
-  useEffect as useEffect9,
+  useEffect as useEffect10,
   useCallback as useCallback4
 } from "react";
 function clamp(val, min, max) {
@@ -4787,7 +4811,7 @@ var Slider = React76.forwardRef(function Slider2(props, ref) {
     const raw = min + ratio * (max - min);
     return clamp(snapToStep(raw, min, step), min, max);
   }, [min, max, step, orientation]);
-  useEffect9(() => {
+  useEffect10(() => {
     if (dragging === null) return;
     const onMove = (e) => {
       const newVal = getValueFromPointer(e);
@@ -4997,10 +5021,10 @@ var Switch = React77.forwardRef(function Switch2(props, ref) {
 Switch.displayName = "Switch";
 
 // lib/RadioGroup/RadioGroup.tsx
-import React78, { useRef as useRef12, createContext as createContext2, useContext as useContext2 } from "react";
-var RadioGroupContext = createContext2({});
+import React78, { useRef as useRef12, createContext as createContext3, useContext as useContext3 } from "react";
+var RadioGroupContext = createContext3({});
 var Radio = React78.forwardRef(function Radio2(props, ref) {
-  const ctx = useContext2(RadioGroupContext);
+  const ctx = useContext3(RadioGroupContext);
   const {
     value,
     label,
@@ -5257,13 +5281,13 @@ Rating.displayName = "Rating";
 
 // lib/ToggleButton/ToggleButton.tsx
 import React80, {
-  createContext as createContext3,
-  useContext as useContext3
+  createContext as createContext4,
+  useContext as useContext4
 } from "react";
-var ToggleGroupContext = createContext3({});
+var ToggleGroupContext = createContext4({});
 var ToggleButton = React80.forwardRef(
   function ToggleButton2(props, ref) {
-    const ctx = useContext3(ToggleGroupContext);
+    const ctx = useContext4(ToggleGroupContext);
     const { value, children, disabled: disabledProp, selected: selectedProp, sx } = props;
     const sxClass = useSx(sx);
     let isSelected = false;
@@ -5889,7 +5913,7 @@ Skeleton.displayName = "Skeleton";
 // lib/Tooltip/Tooltip.tsx
 import React87, {
   useCallback as useCallback5,
-  useEffect as useEffect10,
+  useEffect as useEffect11,
   useRef as useRef14,
   useState as useState13
 } from "react";
@@ -6022,7 +6046,7 @@ var Tooltip = ({
       setPosition(computePosition(anchorRect, tooltipRect, placement));
     }
   }, [placement, followCursor]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (isOpen) {
       requestAnimationFrame(() => {
         updatePosition();
@@ -6058,7 +6082,7 @@ var Tooltip = ({
     },
     [isOpen, followCursor, updatePosition]
   );
-  useEffect10(() => {
+  useEffect11(() => {
     return () => clearTimers();
   }, [clearTimers]);
   const childProps = {};
@@ -6448,8 +6472,8 @@ CardActions.displayName = "CardActions";
 
 // lib/Accordion/Accordion.tsx
 import * as React93 from "react";
-import { useState as useState14, useContext as useContext4, createContext as createContext4 } from "react";
-var AccordionContext = createContext4({
+import { useState as useState14, useContext as useContext5, createContext as createContext5 } from "react";
+var AccordionContext = createContext5({
   expanded: false,
   disabled: false,
   toggle: () => {
@@ -6513,7 +6537,7 @@ var ChevronIcon = () => /* @__PURE__ */ React93.createElement(
 var AccordionSummary = React93.forwardRef(
   ({ expandIcon, children, sx, className, style, ...rest }, ref) => {
     const sxClass = useSx(sx);
-    const { expanded, toggle, disabled } = useContext4(AccordionContext);
+    const { expanded, toggle, disabled } = useContext5(AccordionContext);
     const classes = [
       "rf-accordion-summary",
       expanded ? "rf-accordion-summary-expanded" : "",
@@ -6545,7 +6569,7 @@ AccordionSummary.displayName = "AccordionSummary";
 var AccordionDetails = React93.forwardRef(
   ({ children, sx, className, style, ...rest }, ref) => {
     const sxClass = useSx(sx);
-    const { expanded } = useContext4(AccordionContext);
+    const { expanded } = useContext5(AccordionContext);
     const wrapperClasses = [
       "rf-accordion-details-wrapper",
       expanded ? "rf-accordion-details-wrapper-open" : ""
@@ -6562,7 +6586,7 @@ AccordionDetails.displayName = "AccordionDetails";
 
 // lib/Tabs/Tabs.tsx
 import React94, {
-  useEffect as useEffect11,
+  useEffect as useEffect12,
   useLayoutEffect,
   useRef as useRef15,
   useState as useState15,
@@ -6655,7 +6679,7 @@ var Tabs = ({
   useLayoutEffect(() => {
     updateIndicator();
   }, [value, orientation]);
-  useEffect11(() => {
+  useEffect12(() => {
     const observer = new ResizeObserver(() => {
       updateIndicator();
     });
@@ -7014,7 +7038,7 @@ Stepper.displayName = "Stepper";
 
 // lib/Menu/Menu.tsx
 import React97, {
-  useEffect as useEffect12,
+  useEffect as useEffect13,
   useRef as useRef16,
   useState as useState17
 } from "react";
@@ -7111,12 +7135,12 @@ var Menu = ({
   const paperRef = useRef16(null);
   const [menuStyle, setMenuStyle] = useState17({});
   const [mounted, setMounted] = useState17(false);
-  useEffect12(() => {
+  useEffect13(() => {
     if (open) {
       setMounted(true);
     }
   }, [open]);
-  useEffect12(() => {
+  useEffect13(() => {
     if (!open || !anchorEl || !paperRef.current) return;
     const computePosition3 = () => {
       if (!anchorEl || !paperRef.current) return;
@@ -7142,7 +7166,7 @@ var Menu = ({
     };
     requestAnimationFrame(computePosition3);
   }, [open, mounted, anchorEl, anchorOrigin, transformOrigin]);
-  useEffect12(() => {
+  useEffect13(() => {
     if (!open) return;
     const handleKeyDown = (e) => {
       if (e.key === "Escape") {
@@ -7177,7 +7201,7 @@ Menu.displayName = "Menu";
 
 // lib/Drawer/Drawer.tsx
 import React98, {
-  useEffect as useEffect13,
+  useEffect as useEffect14,
   useState as useState18
 } from "react";
 import ReactDOM6 from "react-dom";
@@ -7197,7 +7221,7 @@ var Drawer = ({
   const sxClass = useSx(sx);
   const paperSxClass = useSx(PaperProps?.sx);
   const [mounted, setMounted] = useState18(open || variant === "permanent" || keepMounted);
-  useEffect13(() => {
+  useEffect14(() => {
     if (open || variant === "permanent") {
       setMounted(true);
     } else if (!keepMounted) {
@@ -7205,7 +7229,7 @@ var Drawer = ({
       return () => clearTimeout(t);
     }
   }, [open, variant, keepMounted]);
-  useEffect13(() => {
+  useEffect14(() => {
     if (!open || variant === "permanent") return;
     const handleKeyDown = (e) => {
       if (e.key === "Escape") onClose?.();
@@ -7213,7 +7237,7 @@ var Drawer = ({
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [open, variant, onClose]);
-  useEffect13(() => {
+  useEffect14(() => {
     if (variant !== "temporary") return;
     if (open) {
       const prev = document.body.style.overflow;
@@ -7290,7 +7314,7 @@ Drawer.displayName = "Drawer";
 // lib/Snackbar/Snackbar.tsx
 import React99, {
   useCallback as useCallback6,
-  useEffect as useEffect14,
+  useEffect as useEffect15,
   useRef as useRef17,
   useState as useState19
 } from "react";
@@ -7331,7 +7355,7 @@ var Snackbar = ({
       onClose("timeout");
     }, autoHideDuration);
   }, [autoHideDuration, onClose, clearTimers]);
-  useEffect14(() => {
+  useEffect15(() => {
     if (open) {
       setMounted(true);
       setTransitionState("entering");
@@ -7347,7 +7371,7 @@ var Snackbar = ({
     }
     return clearTimers;
   }, [open, startHideTimer, clearTimers]);
-  useEffect14(() => {
+  useEffect15(() => {
     if (!open) return;
     const handleKeyDown = (e) => {
       if (e.key === "Escape") onClose?.("escapeKeyDown");
@@ -7453,7 +7477,7 @@ Link.displayName = "Link";
 
 // lib/Popper/Popper.tsx
 import React101, {
-  useEffect as useEffect15,
+  useEffect as useEffect16,
   useLayoutEffect as useLayoutEffect2,
   useRef as useRef18,
   useState as useState20
@@ -7542,7 +7566,7 @@ var Popper = ({
   const [fadeState, setFadeState] = useState20(
     open ? "entered" : "exited"
   );
-  useEffect15(() => {
+  useEffect16(() => {
     if (open) {
       setMounted(true);
       setFadeState("entering");
@@ -7607,7 +7631,7 @@ Popper.displayName = "Popper";
 
 // lib/Popover/Popover.tsx
 import React102, {
-  useEffect as useEffect16,
+  useEffect as useEffect17,
   useLayoutEffect as useLayoutEffect3,
   useRef as useRef19,
   useState as useState21
@@ -7642,7 +7666,7 @@ var Popover = ({
   const paperRef = useRef19(null);
   const [posStyle, setPosStyle] = useState21({});
   const [mounted, setMounted] = useState21(open || keepMounted);
-  useEffect16(() => {
+  useEffect17(() => {
     if (open) {
       setMounted(true);
     } else if (!keepMounted) {
@@ -7674,7 +7698,7 @@ var Popover = ({
       window.removeEventListener("resize", compute);
     };
   }, [open, anchorEl, anchorOrigin, transformOrigin, mounted]);
-  useEffect16(() => {
+  useEffect17(() => {
     if (!open) return;
     const handleKeyDown = (e) => {
       if (e.key === "Escape") onClose?.();
@@ -7725,7 +7749,7 @@ Popover.displayName = "Popover";
 // lib/Transitions/Transitions.tsx
 import React103, {
   cloneElement as cloneElement3,
-  useEffect as useEffect17,
+  useEffect as useEffect18,
   useRef as useRef20,
   useState as useState22
 } from "react";
@@ -7739,7 +7763,7 @@ function useTransitionState(inProp, timeout, onEnter, onExited) {
   const [mounted, setMounted] = useState22(false);
   const timerRef = useRef20(null);
   const isFirstRender = useRef20(true);
-  useEffect17(() => {
+  useEffect18(() => {
     if (timerRef.current) clearTimeout(timerRef.current);
     if (inProp) {
       setMounted(true);
@@ -7886,7 +7910,7 @@ var Collapse = ({
   const [size, setSize] = useState22(
     inProp ? "auto" : collapsedSize
   );
-  useEffect17(() => {
+  useEffect18(() => {
     if (!innerRef.current) return;
     const natural = orientation === "vertical" ? innerRef.current.scrollHeight : innerRef.current.scrollWidth;
     if (inProp) {
@@ -8072,7 +8096,7 @@ ImageField.displayName = "ImageField";
 import React105, {
   useState as useState24,
   useRef as useRef22,
-  useEffect as useEffect18,
+  useEffect as useEffect19,
   useCallback as useCallback8,
   forwardRef as forwardRef10
 } from "react";
@@ -8148,7 +8172,7 @@ var PhoneField = forwardRef10(function PhoneField2(props, ref) {
   const [focusedIdx, setFocusedIdx] = useState24(-1);
   const [search, setSearch] = useState24("");
   const prevValueRef = useRef22(value);
-  useEffect18(() => {
+  useEffect19(() => {
     if (value === prevValueRef.current) return;
     prevValueRef.current = value;
     const digits2 = sanitizeValue(value);
@@ -8172,7 +8196,7 @@ var PhoneField = forwardRef10(function PhoneField2(props, ref) {
     setFocusedIdx(-1);
     setSearch("");
   }, []);
-  useEffect18(() => {
+  useEffect19(() => {
     if (!open) return;
     const handler = (e) => {
       if (containerRef.current && !containerRef.current.contains(e.target)) {
@@ -8182,7 +8206,7 @@ var PhoneField = forwardRef10(function PhoneField2(props, ref) {
     document.addEventListener("mousedown", handler);
     return () => document.removeEventListener("mousedown", handler);
   }, [open, closeDropdown]);
-  useEffect18(() => {
+  useEffect19(() => {
     if (!open || !containerRef.current || !popupRef.current) return;
     const reference = containerRef.current;
     const floating = popupRef.current;
@@ -8376,7 +8400,7 @@ var PhoneField = forwardRef10(function PhoneField2(props, ref) {
 PhoneField.displayName = "PhoneField";
 
 // lib/RufousTextEditor/RufousTextEditor.tsx
-import React116, { useMemo as useMemo4, useCallback as useCallback13, useState as useState34, useRef as useRef30, useEffect as useEffect27 } from "react";
+import React116, { useMemo as useMemo4, useCallback as useCallback13, useState as useState34, useRef as useRef30, useEffect as useEffect28 } from "react";
 import { createPortal as createPortal8 } from "react-dom";
 import { useEditor, EditorContent, EditorContext, FloatingMenu, BubbleMenu } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
@@ -8402,7 +8426,7 @@ import { ReactRenderer } from "@tiptap/react";
 import tippy from "tippy.js";
 
 // lib/RufousTextEditor/MentionList.tsx
-import React106, { forwardRef as forwardRef11, useEffect as useEffect19, useImperativeHandle, useState as useState25 } from "react";
+import React106, { forwardRef as forwardRef11, useEffect as useEffect20, useImperativeHandle, useState as useState25 } from "react";
 var MentionList = forwardRef11((props, ref) => {
   const [selectedIndex, setSelectedIndex] = useState25(0);
   const selectItem = (index) => {
@@ -8411,7 +8435,7 @@ var MentionList = forwardRef11((props, ref) => {
       props.command({ id: item.id, label: item.shortName || item.name });
     }
   };
-  useEffect19(() => setSelectedIndex(0), [props.items]);
+  useEffect20(() => setSelectedIndex(0), [props.items]);
   useImperativeHandle(ref, () => ({
     onKeyDown: ({ event }) => {
       if (event.key === "ArrowUp") {
@@ -8498,11 +8522,11 @@ function createMentionSuggestion(users) {
 }
 
 // lib/RufousTextEditor/Toolbar.tsx
-import React112, { useState as useState30, useRef as useRef26, useEffect as useEffect23, useCallback as useCallback12 } from "react";
+import React112, { useState as useState30, useRef as useRef26, useEffect as useEffect24, useCallback as useCallback12 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
 
 // lib/RufousTextEditor/TextToSpeech.tsx
-import React107, { useState as useState26, useEffect as useEffect20, useRef as useRef23, useCallback as useCallback9, forwardRef as forwardRef12, useImperativeHandle as useImperativeHandle2 } from "react";
+import React107, { useState as useState26, useEffect as useEffect21, useRef as useRef23, useCallback as useCallback9, forwardRef as forwardRef12, useImperativeHandle as useImperativeHandle2 } from "react";
 var TextToSpeech = forwardRef12(({ editor, onTextToSpeech }, ref) => {
   const [speaking, setSpeaking] = useState26(false);
   const [paused, setPaused] = useState26(false);
@@ -8512,7 +8536,7 @@ var TextToSpeech = forwardRef12(({ editor, onTextToSpeech }, ref) => {
   const [showPanel, setShowPanel] = useState26(false);
   const utteranceRef = useRef23(null);
   const panelRef = useRef23(null);
-  useEffect20(() => {
+  useEffect21(() => {
     const synth = window.speechSynthesis;
     const loadVoices = () => {
       const available = synth.getVoices();
@@ -8530,7 +8554,7 @@ var TextToSpeech = forwardRef12(({ editor, onTextToSpeech }, ref) => {
       synth.removeEventListener("voiceschanged", loadVoices);
     };
   }, [selectedVoice]);
-  useEffect20(() => {
+  useEffect21(() => {
     const handleClick = (e) => {
       if (panelRef.current && !panelRef.current.contains(e.target)) {
         setShowPanel(false);
@@ -8648,7 +8672,7 @@ var TextToSpeech = forwardRef12(({ editor, onTextToSpeech }, ref) => {
 var TextToSpeech_default = TextToSpeech;
 
 // lib/RufousTextEditor/SpeechToText.tsx
-import React108, { useState as useState27, useRef as useRef24, useCallback as useCallback10, useEffect as useEffect21, forwardRef as forwardRef13, useImperativeHandle as useImperativeHandle3 } from "react";
+import React108, { useState as useState27, useRef as useRef24, useCallback as useCallback10, useEffect as useEffect22, forwardRef as forwardRef13, useImperativeHandle as useImperativeHandle3 } from "react";
 var SpeechToText = forwardRef13(({ editor, onSpeechToText }, ref) => {
   const [listening, setListening] = useState27(false);
   const [showPanel, setShowPanel] = useState27(false);
@@ -8659,7 +8683,7 @@ var SpeechToText = forwardRef13(({ editor, onSpeechToText }, ref) => {
   const isListeningRef = useRef24(false);
   const SpeechRecognitionAPI = typeof window !== "undefined" ? window.SpeechRecognition || window.webkitSpeechRecognition : null;
   const supported = !!SpeechRecognitionAPI;
-  useEffect21(() => {
+  useEffect22(() => {
     const handleClick = (e) => {
       if (panelRef.current && !panelRef.current.contains(e.target)) {
         setShowPanel(false);
@@ -8811,7 +8835,7 @@ var SpeechToText = forwardRef13(({ editor, onSpeechToText }, ref) => {
 var SpeechToText_default = SpeechToText;
 
 // lib/RufousTextEditor/AICommands.tsx
-import React109, { useState as useState28, useRef as useRef25, useEffect as useEffect22, useCallback as useCallback11 } from "react";
+import React109, { useState as useState28, useRef as useRef25, useEffect as useEffect23, useCallback as useCallback11 } from "react";
 import { createPortal as createPortal2 } from "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." },
@@ -8868,7 +8892,7 @@ var AICommands = ({ editor, onAICommand }) => {
   const [selectionRange, setSelectionRange] = useState28(null);
   const [previousResults, setPreviousResults] = useState28([]);
   const panelRef = useRef25(null);
-  useEffect22(() => {
+  useEffect23(() => {
     const handleClick = (e) => {
       if (panelRef.current && !panelRef.current.contains(e.target)) {
         setOpen(false);
@@ -10071,7 +10095,7 @@ var Dropdown = ({ trigger, children, className = "", keepOpen = false }) => {
   const [open, setOpen] = useState30(false);
   const ref = useRef26(null);
   const menuRef = useRef26(null);
-  useEffect23(() => {
+  useEffect24(() => {
     const handleClick = (e) => {
       const target = e.target;
       const inTrigger = ref.current?.contains(target);
@@ -10083,7 +10107,7 @@ var Dropdown = ({ trigger, children, className = "", keepOpen = false }) => {
     document.addEventListener("mousedown", handleClick);
     return () => document.removeEventListener("mousedown", handleClick);
   }, []);
-  useEffect23(() => {
+  useEffect24(() => {
     if (!open || !menuRef.current || !ref.current) return;
     const menu = menuRef.current;
     const trigger2 = ref.current;
@@ -10384,7 +10408,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
   const ttsRef = useRef26(null);
   const sttRef = useRef26(null);
   const show = (id) => !visibleButtons || visibleButtons.has(id);
-  useEffect23(() => {
+  useEffect24(() => {
     if (!editor) return;
     const onTransaction = () => setEditorState((n) => n + 1);
     editor.on("transaction", onTransaction);
@@ -11023,7 +11047,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
 var Toolbar_default = Toolbar;
 
 // lib/RufousTextEditor/ImageToolbar.tsx
-import React113, { useState as useState31, useEffect as useEffect24, useRef as useRef27 } from "react";
+import React113, { useState as useState31, useEffect as useEffect25, useRef as useRef27 } from "react";
 import { createPortal as createPortal5 } from "react-dom";
 var ALIGNMENTS = [
   { value: "left", label: "Left", icon: "\u2630" },
@@ -11042,7 +11066,7 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
   const [lockRatio, setLockRatio] = useState31(true);
   const [naturalWidth, setNaturalWidth] = useState31(0);
   const [naturalHeight, setNaturalHeight] = useState31(0);
-  useEffect24(() => {
+  useEffect25(() => {
     if (src) {
       const img = new window.Image();
       img.onload = () => {
@@ -11167,7 +11191,7 @@ var ImageToolbar = ({ editor }) => {
   const [copyStatus, setCopyStatus] = useState31("");
   const [pos, setPos] = useState31(null);
   const toolbarRef = useRef27(null);
-  useEffect24(() => {
+  useEffect25(() => {
     if (!editor) return;
     const update = () => {
       const { selection } = editor.state;
@@ -11303,7 +11327,7 @@ var ImageToolbar = ({ editor }) => {
 var ImageToolbar_default = ImageToolbar;
 
 // lib/RufousTextEditor/VideoToolbar.tsx
-import React114, { useState as useState32, useEffect as useEffect25, useRef as useRef28 } from "react";
+import React114, { useState as useState32, useEffect as useEffect26, useRef as useRef28 } from "react";
 import { createPortal as createPortal6 } from "react-dom";
 var ALIGNMENTS2 = [
   { value: "left", label: "Left", icon: "\u2630" },
@@ -11420,7 +11444,7 @@ var VideoToolbar = ({ editor }) => {
   const [copyStatus, setCopyStatus] = useState32("");
   const [pos, setPos] = useState32(null);
   const toolbarRef = useRef28(null);
-  useEffect25(() => {
+  useEffect26(() => {
     if (!editor) return;
     const update = () => {
       const { selection } = editor.state;
@@ -11544,7 +11568,7 @@ var VideoToolbar = ({ editor }) => {
 var VideoToolbar_default = VideoToolbar;
 
 // lib/RufousTextEditor/TableToolbar.tsx
-import React115, { useState as useState33, useEffect as useEffect26, useRef as useRef29 } from "react";
+import React115, { useState as useState33, useEffect as useEffect27, useRef as useRef29 } from "react";
 import { createPortal as createPortal7 } from "react-dom";
 var IconAddRowBefore = () => /* @__PURE__ */ React115.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React115.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__ */ React115.createElement("path", { d: "M9 6h2v1.5h1.5v2H11V11H9V9.5H7.5v-2H9z" }));
 var IconAddRowAfter = () => /* @__PURE__ */ React115.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React115.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__ */ React115.createElement("path", { d: "M9 14h2v1.5h1.5v2H11V19H9v-1.5H7.5v-2H9z" }));
@@ -11559,7 +11583,7 @@ var IconToggleHeader = () => /* @__PURE__ */ React115.createElement("svg", { wid
 var TableToolbar = ({ editor }) => {
   const [pos, setPos] = useState33(null);
   const toolbarRef = useRef29(null);
-  useEffect26(() => {
+  useEffect27(() => {
     if (!editor) return;
     const update = () => {
       if (!editor.isActive("table")) {
@@ -11882,10 +11906,10 @@ var RufousTextEditor = ({
   const mentionSuggestion = useMemo4(() => createMentionSuggestion(mentions), [mentions]);
   const onChangeRef = useRef30(onChange);
   const onBlurRef = useRef30(onBlur);
-  useEffect27(() => {
+  useEffect28(() => {
     onChangeRef.current = onChange;
   }, [onChange]);
-  useEffect27(() => {
+  useEffect28(() => {
     onBlurRef.current = onBlur;
   }, [onBlur]);
   const isEditable = editable && !disabled;
@@ -11987,7 +12011,7 @@ var RufousTextEditor = ({
     }
   });
   const wrapperRef = useRef30(null);
-  useEffect27(() => {
+  useEffect28(() => {
     if (!editor) return;
     let blurTimer = null;
     const handler = ({ event }) => {
@@ -12050,10 +12074,10 @@ var RufousTextEditor = ({
     setLinkSelection({ from, to });
     setLinkModalOpen(true);
   }, [editor]);
-  useEffect27(() => {
+  useEffect28(() => {
     setLinkRef.current = setLink;
   }, [setLink]);
-  useEffect27(() => {
+  useEffect28(() => {
     if (!editor?.view) return;
     const handleKeyDown = (event) => {
       if ((event.ctrlKey || event.metaKey) && event.key === "k") {

package/package.json

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