@deadragdoll/reactnu 0.1.10 → 0.1.14

package/dist/index.js

@@ -665,7 +665,7 @@ function toggleMenuCheckedInTree(items, id) {
 import { useMemo as useMemo4, useState as useState6 } from "react";
 
 // src/windowing/internals/MdiWindowPickerDialog.tsx
-import { useEffect as useEffect4, useMemo as useMemo3, useState as useState5 } from "react";
+import { useMemo as useMemo3, useState as useState5 } from "react";
 
 // src/components/Button/Button.tsx
 import {
@@ -1110,15 +1110,20 @@ function ListBoxInner({
     },
     [onItemSelect]
   );
-  function activateResolvedItem(itemId) {
-    if (!itemId) {
-      return;
-    }
-    const nextEntry = selectableItems.find((entry) => entry.itemId === itemId);
-    if (nextEntry) {
-      activateItem(nextEntry.item, nextEntry.group, nextEntry.itemId);
-    }
-  }
+  const activateResolvedItem = useCallback2(
+    (itemId) => {
+      if (!itemId) {
+        return;
+      }
+      const nextEntry = selectableItems.find(
+        (entry) => entry.itemId === itemId
+      );
+      if (nextEntry) {
+        activateItem(nextEntry.item, nextEntry.group, nextEntry.itemId);
+      }
+    },
+    [activateItem, selectableItems]
+  );
   function moveActive(direction) {
     if (selectableItems.length === 0) {
       return;
@@ -1184,7 +1189,7 @@ function ListBoxInner({
         toggleItemCheck(itemId);
       }
     }),
-    [resolvedActiveId, checkedIds, data]
+    [activateResolvedItem, resolvedActiveId, toggleItemCheck]
   );
   function handleKeyDown(event) {
     switch (event.key) {
@@ -1346,17 +1351,14 @@ function MdiWindowPickerDialog({
   const [selectedId, setSelectedId] = useState5(
     activeWindowId ?? resolvedWindows[0]?.id ?? ""
   );
-  useEffect4(() => {
-    if (selectedId && resolvedWindows.some((windowEntry) => windowEntry.id === selectedId)) {
-      return;
-    }
-    setSelectedId(activeWindowId ?? resolvedWindows[0]?.id ?? "");
-  }, [activeWindowId, resolvedWindows, selectedId]);
+  const resolvedSelectedId = resolvedWindows.some(
+    (windowEntry) => windowEntry.id === selectedId
+  ) ? selectedId : activeWindowId ?? resolvedWindows[0]?.id ?? "";
   function handleActivate() {
-    if (!selectedId) {
+    if (!resolvedSelectedId) {
       return;
     }
-    onActivateWindow(selectedId);
+    onActivateWindow(resolvedSelectedId);
     onClose();
   }
   return /* @__PURE__ */ jsxs8(Stack, { gap: "md", children: [
@@ -1387,7 +1389,7 @@ function MdiWindowPickerDialog({
           onActivateWindow(item.id);
           onClose();
         },
-        selectedId,
+        selectedId: resolvedSelectedId,
         style: {
           maxHeight: "14rem",
           minHeight: "12rem"
@@ -1590,7 +1592,7 @@ import {
   Fragment as Fragment3,
   useCallback as useCallback3,
   useContext as useContext6,
-  useEffect as useEffect6,
+  useEffect as useEffect5,
   useMemo as useMemo6,
   useRef as useRef6,
   useState as useState9
@@ -2218,6 +2220,12 @@ function AppBarItem(props) {
       interactive: _interactive2,
       ...buttonProps
     } = props;
+    void _active2;
+    void _alignment2;
+    void _children2;
+    void _className2;
+    void _grow2;
+    void _interactive2;
     return createElement(
       "button",
       {
@@ -2237,6 +2245,12 @@ function AppBarItem(props) {
     interactive: _interactive,
     ...staticProps
   } = props;
+  void _active;
+  void _alignment;
+  void _children;
+  void _className;
+  void _grow;
+  void _interactive;
   return createElement(
     "div",
     {
@@ -2339,7 +2353,7 @@ import { useState as useState8 } from "react";
 
 // src/components/TextField/TextField.tsx
 import {
-  useEffect as useEffect5,
+  useEffect as useEffect4,
   useId as useId2,
   useRef as useRef5,
   useState as useState7
@@ -2370,7 +2384,7 @@ function TextField({
     () => defaultValue == null ? "" : String(defaultValue)
   );
   const resolvedValue = isControlled ? value == null ? "" : String(value) : uncontrolledValue;
-  useEffect5(() => {
+  useEffect4(() => {
     if (!onDebouncedChange) {
       return;
     }
@@ -2823,31 +2837,6 @@ function findTopmostAppModalIndex(windows) {
   }
   return -1;
 }
-function getIdHandler(cache, id, fn) {
-  let handler = cache.get(id);
-  if (!handler) {
-    handler = (...args) => fn(id, ...args);
-    cache.set(id, handler);
-  }
-  return handler;
-}
-function getWindowControls(cache, id, bringToFront, close, toggleMaximized, toggleMinimized, update) {
-  let controls = cache.get(id);
-  if (!controls) {
-    controls = { bringToFront, close, id, toggleMaximized, toggleMinimized, update };
-    cache.set(id, controls);
-  }
-  return controls;
-}
-function getWindowContent(cache, id, source, controls) {
-  const cached = cache.get(id);
-  if (cached && cached.source === source) {
-    return cached.element;
-  }
-  const element = typeof source === "function" ? source(controls) : source;
-  cache.set(id, { source, element });
-  return element;
-}
 function getActivationChain(windows, id) {
   const targetWindow = windows.find((windowEntry) => windowEntry.id === id);
   if (!targetWindow) {
@@ -2873,28 +2862,6 @@ function NuWindowProvider({
   const creationOrderRef = useRef6(0);
   const idRef = useRef6(0);
   const windowBoundsByIdRef = useRef6({});
-  const boundsChangeHandlersRef = useRef6(
-    /* @__PURE__ */ new Map()
-  );
-  const windowStyleCacheRef = useRef6(
-    /* @__PURE__ */ new Map()
-  );
-  const closeHandlersRef = useRef6(/* @__PURE__ */ new Map());
-  const activateHandlersRef = useRef6(/* @__PURE__ */ new Map());
-  const bringToFrontHandlersRef = useRef6(/* @__PURE__ */ new Map());
-  const toggleMaximizedHandlersRef = useRef6(/* @__PURE__ */ new Map());
-  const toggleMinimizedHandlersRef = useRef6(/* @__PURE__ */ new Map());
-  const positionHandlersRef = useRef6(
-    /* @__PURE__ */ new Map()
-  );
-  const sizeHandlersRef = useRef6(/* @__PURE__ */ new Map());
-  const updateHandlersRef = useRef6(
-    /* @__PURE__ */ new Map()
-  );
-  const controlsCacheRef = useRef6(/* @__PURE__ */ new Map());
-  const contentCacheRef = useRef6(
-    /* @__PURE__ */ new Map()
-  );
   const [windows, setWindows] = useState9([]);
   const [windowBoundsById, setWindowBoundsById] = useState9({});
   const appHostMenuContext = useContext6(AppHostMenuContext);
@@ -2947,53 +2914,6 @@ function NuWindowProvider({
     },
     []
   );
-  const getBoundsChangeHandler = useCallback3(
-    (id) => {
-      let handler = boundsChangeHandlersRef.current.get(id);
-      if (!handler) {
-        handler = (bounds) => updateWindowBounds(id, bounds);
-        boundsChangeHandlersRef.current.set(id, handler);
-      }
-      return handler;
-    },
-    [updateWindowBounds]
-  );
-  const getWindowStyle = useCallback3(
-    (id, source, zIndex) => {
-      const cached = windowStyleCacheRef.current.get(id);
-      if (cached && cached.source === source && cached.zIndex === zIndex) {
-        return cached.merged;
-      }
-      const merged = { ...source, zIndex };
-      windowStyleCacheRef.current.set(id, { source, zIndex, merged });
-      return merged;
-    },
-    []
-  );
-  useEffect6(() => {
-    const liveIds = new Set(windows.map((windowEntry) => windowEntry.id));
-    const idKeyedCaches = [
-      boundsChangeHandlersRef.current,
-      windowStyleCacheRef.current,
-      closeHandlersRef.current,
-      activateHandlersRef.current,
-      bringToFrontHandlersRef.current,
-      toggleMaximizedHandlersRef.current,
-      toggleMinimizedHandlersRef.current,
-      positionHandlersRef.current,
-      sizeHandlersRef.current,
-      updateHandlersRef.current,
-      controlsCacheRef.current,
-      contentCacheRef.current
-    ];
-    for (const cache of idKeyedCaches) {
-      for (const id of cache.keys()) {
-        if (!liveIds.has(id)) {
-          cache.delete(id);
-        }
-      }
-    }
-  }, [windows]);
   const bringToFront = useCallback3((id) => {
     setWindows((currentWindows) => {
       const activationChain = getActivationChain(currentWindows, id);
@@ -3335,13 +3255,13 @@ function NuWindowProvider({
       windowsInfo
     ]
   );
-  useEffect6(() => {
+  useEffect5(() => {
     if (!appHostMenuContext) {
       return;
     }
     appHostMenuContext.setWindowBridge(mdiBridge);
   }, [appHostMenuContext, mdiBridge]);
-  useEffect6(() => {
+  useEffect5(() => {
     if (!appHostMenuContext) {
       return;
     }
@@ -3349,7 +3269,7 @@ function NuWindowProvider({
       appHostMenuContext.setWindowBridge(null);
     };
   }, [appHostMenuContext]);
-  useEffect6(() => {
+  useEffect5(() => {
     onAppModalChange?.(hasAppModal);
   }, [hasAppModal, onAppModalChange]);
   return /* @__PURE__ */ jsx26(NuWindowContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs15("div", { className: ["nu-window-host", className].filter(Boolean).join(" "), children: [
@@ -3366,61 +3286,23 @@ function NuWindowProvider({
         width: ownerBounds.width,
         zIndex: stackIndex + 1
       } : null;
-      const handleClose = getIdHandler(
-        closeHandlersRef.current,
-        windowEntry.id,
-        closeWindow
-      );
-      const handleActivate = getIdHandler(
-        activateHandlersRef.current,
-        windowEntry.id,
-        activateWindow
-      );
-      const handleBringToFront = getIdHandler(
-        bringToFrontHandlersRef.current,
-        windowEntry.id,
-        bringToFront
-      );
-      const handleToggleMaximized = getIdHandler(
-        toggleMaximizedHandlersRef.current,
-        windowEntry.id,
-        toggleWindowMaximized
-      );
-      const handleToggleMinimized = getIdHandler(
-        toggleMinimizedHandlersRef.current,
-        windowEntry.id,
-        toggleWindowMinimized
-      );
-      const handlePositionChange = getIdHandler(
-        positionHandlersRef.current,
-        windowEntry.id,
-        updateWindowPosition
-      );
-      const handleSizeChange = getIdHandler(
-        sizeHandlersRef.current,
-        windowEntry.id,
-        handleWindowSizeChange
-      );
-      const handleUpdate = getIdHandler(
-        updateHandlersRef.current,
-        windowEntry.id,
-        updateWindow
-      );
-      const controls = getWindowControls(
-        controlsCacheRef.current,
-        windowEntry.id,
-        handleBringToFront,
-        handleClose,
-        handleToggleMaximized,
-        handleToggleMinimized,
-        handleUpdate
-      );
-      const content = getWindowContent(
-        contentCacheRef.current,
-        windowEntry.id,
-        windowEntry.content,
-        controls
-      );
+      const handleClose = () => closeWindow(windowEntry.id);
+      const handleActivate = () => activateWindow(windowEntry.id);
+      const handleBringToFront = () => bringToFront(windowEntry.id);
+      const handleToggleMaximized = () => toggleWindowMaximized(windowEntry.id);
+      const handleToggleMinimized = () => toggleWindowMinimized(windowEntry.id);
+      const handlePositionChange = (position) => updateWindowPosition(windowEntry.id, position);
+      const handleSizeChange = (size) => handleWindowSizeChange(windowEntry.id, size);
+      const handleUpdate = (patch) => updateWindow(windowEntry.id, patch);
+      const controls = {
+        bringToFront: handleBringToFront,
+        close: handleClose,
+        id: windowEntry.id,
+        toggleMaximized: handleToggleMaximized,
+        toggleMinimized: handleToggleMinimized,
+        update: handleUpdate
+      };
+      const content = typeof windowEntry.content === "function" ? windowEntry.content(controls) : windowEntry.content;
       return /* @__PURE__ */ jsxs15(Fragment3, { children: [
         isTopmostAppModal ? /* @__PURE__ */ jsx26(
           "div",
@@ -3450,7 +3332,7 @@ function NuWindowProvider({
             minimized: windowEntry.minimized,
             mode: windowEntry.mode,
             onActivate: handleActivate,
-            onBoundsChange: getBoundsChangeHandler(windowEntry.id),
+            onBoundsChange: (bounds) => updateWindowBounds(windowEntry.id, bounds),
             onClose: handleClose,
             onPositionChange: handlePositionChange,
             onSizeChange: handleSizeChange,
@@ -3458,11 +3340,10 @@ function NuWindowProvider({
             onToggleMinimized: handleToggleMinimized,
             resizable: windowEntry.resizable,
             statusBar: windowEntry.statusBar,
-            style: getWindowStyle(
-              windowEntry.id,
-              windowEntry.style,
-              isTopmostAppModal && topmostAppModalIndex >= 0 ? visibleWindows.length + 2 : ownerBackdropStyle ? ownerBackdropStyle.zIndex + 1 : (stackIndex ?? 0) + 1
-            ),
+            style: {
+              ...windowEntry.style,
+              zIndex: isTopmostAppModal && topmostAppModalIndex >= 0 ? visibleWindows.length + 2 : ownerBackdropStyle ? ownerBackdropStyle.zIndex + 1 : (stackIndex ?? 0) + 1
+            },
             title: windowEntry.title,
             children: content
           }
@@ -3747,7 +3628,7 @@ function CheckBox({
 
 // src/components/Dropdown/Dropdown.tsx
 import {
-  useEffect as useEffect7,
+  useEffect as useEffect6,
   useId as useId4,
   useMemo as useMemo7,
   useRef as useRef7,
@@ -3761,6 +3642,7 @@ function ControlOpener(props) {
   const { children, className, glyphClassName, glyphStyle, style } = props;
   if (props.as === "button") {
     const { as: _as2, type = "button", ...buttonProps } = props;
+    void _as2;
     return /* @__PURE__ */ jsx30(
       "button",
       {
@@ -3780,6 +3662,7 @@ function ControlOpener(props) {
     );
   }
   const { ariaHidden = false, as: _as, ...spanProps } = props;
+  void _as;
   return /* @__PURE__ */ jsx30(
     "span",
     {
@@ -3975,7 +3858,7 @@ function Dropdown({
     [options]
   );
   const displayText = selectedOption?.item.name.text ?? placeholder;
-  useEffect7(() => {
+  useEffect6(() => {
     if (!open) {
       return;
     }
@@ -4003,7 +3886,7 @@ function Dropdown({
     open,
     popupRef
   });
-  useEffect7(() => {
+  useEffect6(() => {
     if (!open) {
       return;
     }
@@ -4388,7 +4271,7 @@ function InfoAccent({
 
 // src/components/ComboBox/ComboBox.tsx
 import {
-  useEffect as useEffect8,
+  useEffect as useEffect7,
   useId as useId5,
   useMemo as useMemo8,
   useRef as useRef8,
@@ -4440,7 +4323,7 @@ function findComboBoxOption(options, value) {
   }
   return options.find((option) => option.value === value) ?? null;
 }
-function resolveComboBoxPortalRoot(anchor) {
+function resolveComboBoxPortalRoot() {
   return document.body;
 }
 function ComboBox({
@@ -4502,8 +4385,9 @@ function ComboBox({
     ),
     [filteredData]
   );
-  const popupRoot = typeof document === "undefined" ? null : resolveComboBoxPortalRoot(rootRef.current);
-  useEffect8(() => {
+  const popupRoot = typeof document === "undefined" ? null : resolveComboBoxPortalRoot();
+  const [themePortalStyle, setThemePortalStyle] = useState13(() => void 0);
+  useEffect7(() => {
     if (!open) {
       return;
     }
@@ -4552,7 +4436,10 @@ function ComboBox({
     if (disabled) {
       return;
     }
-    setOpen((currentOpen) => !currentOpen);
+    if (!open) {
+      setThemePortalStyle(getThemePortalStyle(rootRef.current));
+    }
+    setOpen(!open);
     inputRef.current?.focus();
   }
   function handleInputKeyDown(event) {
@@ -4562,6 +4449,7 @@ function ComboBox({
     switch (event.key) {
       case "ArrowDown":
         event.preventDefault();
+        setThemePortalStyle(getThemePortalStyle(rootRef.current));
         setOpen(true);
         break;
       case "Enter":
@@ -4637,6 +4525,7 @@ function ComboBox({
                             id: fieldId,
                             onChange: (event) => {
                               setResolvedInputValue(event.target.value);
+                              setThemePortalStyle(getThemePortalStyle(rootRef.current));
                               setOpen(true);
                             },
                             onKeyDown: handleInputKeyDown,
@@ -4696,7 +4585,7 @@ function ComboBox({
               id: `${fieldId}-popup`,
               ref: popupRef,
               style: mergeSlotStyle(
-                getThemePortalStyle(rootRef.current),
+                themePortalStyle,
                 slotStyles?.popup
               ),
               children: /* @__PURE__ */ jsx34(
@@ -4741,7 +4630,7 @@ import {
 // src/components/PopupMenu/PopupMenu.tsx
 import {
   useCallback as useCallback4,
-  useEffect as useEffect9,
+  useEffect as useEffect8,
   useLayoutEffect as useLayoutEffect3,
   useRef as useRef9,
   useState as useState14
@@ -4770,7 +4659,7 @@ function resolveAnchorPosition(anchor) {
     top: rect.bottom - 1
   };
 }
-function resolvePortalRoot(anchor) {
+function resolvePortalRoot() {
   if (typeof document === "undefined") {
     return null;
   }
@@ -4793,7 +4682,7 @@ function PopupMenu({
   const [uncontrolledOpen, setUncontrolledOpen] = useState14(defaultOpen);
   const isControlled = open !== void 0;
   const resolvedOpen = isControlled ? open : uncontrolledOpen;
-  const portalRoot = resolvePortalRoot(anchor);
+  const portalRoot = resolvePortalRoot();
   const setResolvedOpen = useCallback4(
     (nextOpen) => {
       if (!nextOpen) {
@@ -4806,7 +4695,7 @@ function PopupMenu({
     },
     [isControlled, onOpenChange]
   );
-  useEffect9(() => {
+  useEffect8(() => {
     if (!resolvedOpen) {
       return;
     }
@@ -5078,7 +4967,7 @@ function CommandButton({
 }
 
 // src/components/CrtGlitch/CrtGlitch.tsx
-import { useEffect as useEffect10, useId as useId6, useRef as useRef10 } from "react";
+import { useEffect as useEffect9, useId as useId6, useRef as useRef10 } from "react";
 import { jsx as jsx37, jsxs as jsxs22 } from "react/jsx-runtime";
 var DEFAULT_INTERVAL_MS = 3e3;
 var DEFAULT_DURATION_MS = 2500;
@@ -5111,7 +5000,7 @@ function NuCrtGlitch({
   const bOffsetRef = useRef10(null);
   const rafRef = useRef10(null);
   const targetElRef = useRef10(null);
-  useEffect10(() => {
+  useEffect9(() => {
     if (!enabled) {
       return;
     }
@@ -5286,7 +5175,7 @@ function NuCrtGlitch({
 import {
   forwardRef as forwardRef2,
   useCallback as useCallback5,
-  useEffect as useEffect11,
+  useEffect as useEffect10,
   useImperativeHandle as useImperativeHandle2,
   useMemo as useMemo9,
   useRef as useRef11,
@@ -5486,7 +5375,7 @@ function ListViewInner({
     );
     return [checkboxColumn, ...dataColumns].filter(Boolean).join(" ");
   }, [columns, showCheckBox]);
-  useEffect11(() => {
+  useEffect10(() => {
     if (!resolvedActiveRowId) {
       return;
     }
@@ -5582,7 +5471,7 @@ function ListViewInner({
         toggleRowCheck(rowId);
       }
     }),
-    [resolvedActiveRowId, showCheckBox, checkedIds, data]
+    [activateRowId, resolvedActiveRowId, toggleRowCheck]
   );
   function handleKeyDown(event) {
     switch (event.key) {
@@ -5680,7 +5569,7 @@ var ListView = forwardRef2(ListViewInner);
 
 // src/components/MaskedField/MaskedField.tsx
 import {
-  useEffect as useEffect12,
+  useEffect as useEffect11,
   useId as useId7,
   useMemo as useMemo10,
   useRef as useRef12,
@@ -5886,7 +5775,7 @@ function MaskedField({
     () => props.inputMode === void 0 ? getTextMaskInputMode(mask) : void 0,
     [mask, props.inputMode]
   );
-  useEffect12(() => {
+  useEffect11(() => {
     if (!onDebouncedChange) {
       return;
     }
@@ -6276,7 +6165,6 @@ function Panel({
 
 // src/components/PropertyGrid/PropertyGrid.tsx
 import {
-  useEffect as useEffect13,
   useId as useId9,
   useMemo as useMemo12,
   useRef as useRef14,
@@ -6395,7 +6283,7 @@ function PropertyGrid({
   const isExpandedControlled = expandedIdsProp !== void 0;
   const isActiveControlled = activeIdProp !== void 0;
   const [uncontrolledExpandedIds, setUncontrolledExpandedIds] = useState20(() => getInitialExpandedIds(entries, defaultExpandedIds));
-  const resolvedExpandedIds = isExpandedControlled ? expandedIdsProp ?? [] : uncontrolledExpandedIds;
+  const resolvedExpandedIds = expandedIdsProp ?? uncontrolledExpandedIds;
   const expandedIdSet = useMemo12(
     () => new Set(
       resolvedExpandedIds.filter((expandedId) => groupIds.has(expandedId))
@@ -6408,24 +6296,8 @@ function PropertyGrid({
   );
   const interactiveRows = useMemo12(() => collectInteractiveRows(rows), [rows]);
   const [uncontrolledActiveId, setUncontrolledActiveId] = useState20(() => getInitialActiveId2(interactiveRows, defaultActiveId));
-  const resolvedActiveId = isActiveControlled ? activeIdProp : uncontrolledActiveId;
-  useEffect13(() => {
-    if (interactiveRows.length === 0) {
-      return;
-    }
-    const hasResolvedActiveId = resolvedActiveId && interactiveRows.some((row) => row.id === resolvedActiveId);
-    if (hasResolvedActiveId) {
-      return;
-    }
-    const fallbackActiveId = interactiveRows[0]?.id;
-    if (!fallbackActiveId) {
-      return;
-    }
-    if (!isActiveControlled) {
-      setUncontrolledActiveId(fallbackActiveId);
-    }
-    onActiveIdChange?.(fallbackActiveId);
-  }, [interactiveRows, isActiveControlled, onActiveIdChange, resolvedActiveId]);
+  const requestedActiveId = isActiveControlled ? activeIdProp : uncontrolledActiveId;
+  const resolvedActiveId = requestedActiveId && interactiveRows.some((row) => row.id === requestedActiveId) ? requestedActiveId : interactiveRows[0]?.id;
   function updateExpandedIds(nextExpandedIds) {
     if (!isExpandedControlled) {
       setUncontrolledExpandedIds(nextExpandedIds);
@@ -6497,7 +6369,7 @@ function PropertyGrid({
         event.preventDefault();
         focusBoundaryRow("last");
         return;
-      case "ArrowLeft":
+      case "ArrowLeft": {
         event.preventDefault();
         if (row.type === "group" && expandedIdSet.has(row.entry.id)) {
           toggleGroup(row.entry);
@@ -6508,7 +6380,8 @@ function PropertyGrid({
           focusRowButton(parentRowId);
         }
         return;
-      case "ArrowRight":
+      }
+      case "ArrowRight": {
         event.preventDefault();
         if (row.type === "group") {
           if (!expandedIdSet.has(row.entry.id)) {
@@ -6520,6 +6393,7 @@ function PropertyGrid({
         }
         activateItemEditor(`${editorIdPrefix}-editor-${row.entry.id}`);
         return;
+      }
       case "Enter":
       case " ":
         event.preventDefault();
@@ -6909,7 +6783,7 @@ function ReportCell({
 
 // src/components/SearchBox/SearchBox.tsx
 import {
-  useEffect as useEffect14,
+  useEffect as useEffect12,
   useId as useId12,
   useMemo as useMemo13,
   useRef as useRef15,
@@ -6917,7 +6791,7 @@ import {
 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
 import { jsx as jsx50, jsxs as jsxs32 } from "react/jsx-runtime";
-function resolveSearchBoxPortalRoot(anchor) {
+function resolveSearchBoxPortalRoot() {
   return document.body;
 }
 function SearchBox({
@@ -6984,12 +6858,10 @@ function SearchBox({
     ],
     [resultOptions]
   );
-  const popupRoot = typeof document === "undefined" ? null : resolveSearchBoxPortalRoot(rootRef.current);
-  useEffect14(() => {
+  const popupRoot = typeof document === "undefined" ? null : resolveSearchBoxPortalRoot();
+  const [themePortalStyle, setThemePortalStyle] = useState23(() => void 0);
+  useEffect12(() => {
     if (disabled) {
-      setOpen(false);
-      setResults([]);
-      setStatus("idle");
       return;
     }
     if (!open) {
@@ -7020,13 +6892,11 @@ function SearchBox({
     popupRef,
     portalRoot: popupRoot
   });
-  useEffect14(() => {
+  useEffect12(() => {
     if (disabled || !open) {
       return;
     }
     if (trimmedQuery.length < minQueryLength) {
-      setResults([]);
-      setStatus("idle");
       return;
     }
     const nextRequestId = requestIdRef.current + 1;
@@ -7057,6 +6927,10 @@ function SearchBox({
     }
     onQueryChange?.(nextQuery);
   }
+  function openPopup() {
+    setThemePortalStyle(getThemePortalStyle(rootRef.current));
+    setOpen(true);
+  }
   function handleSelectItem(option) {
     setResolvedQuery(getItemText(option.item));
     setSelectedValue(option.value);
@@ -7099,7 +6973,7 @@ function SearchBox({
     switch (event.key) {
       case "ArrowDown":
         event.preventDefault();
-        setOpen(true);
+        openPopup();
         break;
       case "Enter":
         if (open && status === "success" && resultOptions[0]) {
@@ -7136,10 +7010,10 @@ function SearchBox({
               id: fieldId,
               onChange: (event) => {
                 setResolvedQuery(event.target.value);
-                setOpen(true);
+                openPopup();
                 setSelectedValue(null);
               },
-              onFocus: () => setOpen(true),
+              onFocus: openPopup,
               onKeyDown: handleInputKeyDown,
               placeholder,
               ref: inputRef,
@@ -7157,7 +7031,7 @@ function SearchBox({
               className: "nu-search-box__popup",
               id: `${fieldId}-popup`,
               ref: popupRef,
-              style: getThemePortalStyle(rootRef.current),
+              style: themePortalStyle,
               children: renderPopupContent()
             }
           ),
@@ -7170,7 +7044,6 @@ function SearchBox({
 
 // src/components/SpinBox/SpinBox.tsx
 import {
-  useEffect as useEffect15,
   useId as useId13,
   useMemo as useMemo14,
   useState as useState24
@@ -7227,18 +7100,16 @@ function SpinBox({
   );
   const [uncontrolledValue, setUncontrolledValue] = useState24(initialNumericValue);
   const numericValue = isControlled ? clampSpinValue(value ?? initialNumericValue, min, max) : uncontrolledValue;
-  const [draftValue, setDraftValue] = useState24(
+  const [uncontrolledDraftValue, setUncontrolledDraftValue] = useState24(
     () => formatSpinValue(initialNumericValue)
   );
-  useEffect15(() => {
-    setDraftValue(formatSpinValue(numericValue));
-  }, [numericValue]);
+  const draftValue = isControlled ? formatSpinValue(numericValue) : uncontrolledDraftValue;
   function commitValue(nextValue) {
     const clampedValue = clampSpinValue(nextValue, min, max);
     if (!isControlled) {
       setUncontrolledValue(clampedValue);
     }
-    setDraftValue(formatSpinValue(clampedValue));
+    setUncontrolledDraftValue(formatSpinValue(clampedValue));
     onValueChange?.(clampedValue);
   }
   function nudge(direction) {
@@ -7247,7 +7118,9 @@ function SpinBox({
   function handleChange(event) {
     const nextDraftValue = event.target.value;
     const parsedValue = parseSpinDraft(nextDraftValue);
-    setDraftValue(nextDraftValue);
+    if (!isControlled) {
+      setUncontrolledDraftValue(nextDraftValue);
+    }
     if (parsedValue !== null) {
       const clampedValue = clampSpinValue(parsedValue, min, max);
       if (!isControlled) {
@@ -7258,7 +7131,7 @@ function SpinBox({
     onChange?.(event);
   }
   function handleBlur(event) {
-    setDraftValue(formatSpinValue(numericValue));
+    setUncontrolledDraftValue(formatSpinValue(numericValue));
     onBlur?.(event);
   }
   function handleKeyDown(event) {
@@ -7401,7 +7274,7 @@ function SpinBox({
 
 // src/components/Splitter/Splitter.tsx
 import {
-  useEffect as useEffect16,
+  useEffect as useEffect13,
   useId as useId14,
   useRef as useRef16,
   useState as useState25
@@ -7450,13 +7323,13 @@ function Splitter({
   );
   const firstPaneId = useId14();
   const secondPaneId = useId14();
-  useEffect16(() => {
+  useEffect13(() => {
     if (!storageKey || typeof window === "undefined") {
       return;
     }
     window.localStorage.setItem(storageKey, String(activeValue));
   }, [activeValue, storageKey]);
-  useEffect16(() => {
+  useEffect13(() => {
     return () => {
       if (dragFrameRef.current !== null) {
         window.cancelAnimationFrame(dragFrameRef.current);
@@ -7605,7 +7478,7 @@ function Splitter({
 
 // src/components/TickBar/TickBar.tsx
 import {
-  useEffect as useEffect17,
+  useEffect as useEffect14,
   useId as useId15,
   useMemo as useMemo15,
   useRef as useRef17,
@@ -7671,7 +7544,7 @@ function TickBar({
     );
   }, [min, safeMax, safeStep, tickCount]);
   const renderedValue = valueRenderer ? valueRenderer(resolvedValue, min, safeMax) : String(resolvedValue);
-  useEffect17(() => {
+  useEffect14(() => {
     if (!dragging) {
       return;
     }
@@ -7987,7 +7860,7 @@ function ToolSeparator({ className, ...props }) {
 import {
   forwardRef as forwardRef3,
   useCallback as useCallback6,
-  useEffect as useEffect18,
+  useEffect as useEffect15,
   useId as useId16,
   useImperativeHandle as useImperativeHandle3,
   useMemo as useMemo16,
@@ -8356,7 +8229,7 @@ function TreeViewInner({
   const resolvedSelectedId = derivedSelectedId && selectableItems.some((entry) => entry.itemId === derivedSelectedId) ? derivedSelectedId : selectableItems[0]?.itemId ?? null;
   const [activeId, setActiveId] = useState27(resolvedSelectedId);
   const resolvedActiveId = activeId && selectableItems.some((entry) => entry.itemId === activeId) ? activeId : resolvedSelectedId;
-  useEffect18(() => {
+  useEffect15(() => {
     if (!resolvedActiveId) {
       return;
     }
@@ -8393,15 +8266,20 @@ function TreeViewInner({
     },
     [onItemSelect, selectedId]
   );
-  function activateResolvedItem(itemId) {
-    if (!itemId) {
-      return;
-    }
-    const nextEntry = selectableItems.find((entry) => entry.itemId === itemId);
-    if (nextEntry) {
-      activateEntry(nextEntry.item, nextEntry.itemId);
-    }
-  }
+  const activateResolvedItem = useCallback6(
+    (itemId) => {
+      if (!itemId) {
+        return;
+      }
+      const nextEntry = selectableItems.find(
+        (entry) => entry.itemId === itemId
+      );
+      if (nextEntry) {
+        activateEntry(nextEntry.item, nextEntry.itemId);
+      }
+    },
+    [activateEntry, selectableItems]
+  );
   function moveActive(direction) {
     if (selectableItems.length === 0) {
       return;
@@ -8493,7 +8371,7 @@ function TreeViewInner({
         event.preventDefault();
         activateResolvedItem(resolvedActiveId);
         break;
-      case " ":
+      case " ": {
         event.preventDefault();
         if (!resolvedActiveId) {
           return;
@@ -8509,6 +8387,7 @@ function TreeViewInner({
           setExpandedState(activeItem, !expandedIdSet.has(activeItem.id));
         }
         break;
+      }
       default:
         break;
     }
@@ -8549,7 +8428,13 @@ function TreeViewInner({
         }
       }
     }),
-    [data, resolvedActiveId, resolvedExpandedIds, onItemCheckChange]
+    [
+      activateResolvedItem,
+      data,
+      onItemCheckChange,
+      resolvedActiveId,
+      setExpandedState
+    ]
   );
   return /* @__PURE__ */ jsx56(
     "div",
@@ -8591,7 +8476,7 @@ var TreeView = forwardRef3(TreeViewInner);
 import {
   forwardRef as forwardRef4,
   useCallback as useCallback7,
-  useEffect as useEffect19,
+  useEffect as useEffect16,
   useId as useId17,
   useImperativeHandle as useImperativeHandle4,
   useLayoutEffect as useLayoutEffect4,
@@ -8987,18 +8872,6 @@ var TreeListViewRow = memo5(
 
 // src/components/TreeListView/TreeListView.tsx
 import { jsx as jsx58, jsxs as jsxs38 } from "react/jsx-runtime";
-function areTreeListColumnsEqual(previousColumns, nextColumns) {
-  if (previousColumns === nextColumns) {
-    return true;
-  }
-  if (previousColumns.length !== nextColumns.length) {
-    return false;
-  }
-  return previousColumns.every((previousColumn, index) => {
-    const nextColumn = nextColumns[index];
-    return previousColumn.align === nextColumn.align && previousColumn.className === nextColumn.className && previousColumn.field === nextColumn.field && previousColumn.headerAlign === nextColumn.headerAlign && previousColumn.id === nextColumn.id && previousColumn.minWidth === nextColumn.minWidth && previousColumn.renderCell === nextColumn.renderCell && previousColumn.resizable === nextColumn.resizable && previousColumn.title === nextColumn.title && previousColumn.tree === nextColumn.tree && previousColumn.width === nextColumn.width;
-  });
-}
 function TreeListViewInner({
   activeItemId: activeItemIdProp,
   checkedIds,
@@ -9023,17 +8896,8 @@ function TreeListViewInner({
   const rootRef = useRef19(null);
   const treeId = useId17();
   const itemRefs = useRef19({});
-  const columnsRef = useRef19(columns);
-  const getCellContentRef = useRef19(getCellContent);
-  const onItemDoubleClickRef = useRef19(onItemDoubleClick);
   const resizeFrameRef = useRef19(null);
   const resizeStateRef = useRef19(null);
-  if (!areTreeListColumnsEqual(columnsRef.current, columns)) {
-    columnsRef.current = columns;
-  }
-  getCellContentRef.current = getCellContent;
-  onItemDoubleClickRef.current = onItemDoubleClick;
-  const resolvedColumns = columnsRef.current;
   const isExpandedControlled = expandedIds !== void 0;
   const [uncontrolledExpandedIds, setUncontrolledExpandedIds] = useState28(() => {
     const expandedFromData = collectExpandedTreeListIds(data);
@@ -9066,30 +8930,30 @@ function TreeListViewInner({
   const resolvedActiveItemId = activeItemId && selectableItems.some((entry) => entry.itemId === activeItemId) ? activeItemId : resolvedSelectedId;
   const minColumnWidthById = useMemo17(
     () => Object.fromEntries(
-      resolvedColumns.map(
+      columns.map(
         (column) => [column.id, column.minWidth ?? 0]
       )
     ),
-    [resolvedColumns]
+    [columns]
   );
   const templateColumns = useMemo17(
-    () => getTreeListTemplateColumns(resolvedColumns, {
+    () => getTreeListTemplateColumns(columns, {
       autoColumnWidths,
       userColumnWidths
     }),
-    [autoColumnWidths, resolvedColumns, userColumnWidths]
+    [autoColumnWidths, columns, userColumnWidths]
   );
   const treeColumnId = useMemo17(
-    () => getTreeListTreeColumnId(resolvedColumns),
-    [resolvedColumns]
+    () => getTreeListTreeColumnId(columns),
+    [columns]
   );
   const rowIndexMap = useMemo17(
     () => new Map(
       visibleItems.map((entry, index) => [entry.itemId, index])
     ),
-    [visibleItems, dataVersion]
+    [visibleItems]
   );
-  useEffect19(() => {
+  useEffect16(() => {
     if (!resolvedActiveItemId) {
       return;
     }
@@ -9104,12 +8968,13 @@ function TreeListViewInner({
     []
   );
   const resolveCellContent = useCallback7(
-    (...args) => getCellContentRef.current?.(...args),
-    []
+    (...args) => getCellContent?.(...args),
+    [getCellContent]
+  );
+  const handleItemDoubleClick = useCallback7(
+    (item) => onItemDoubleClick?.(item),
+    [onItemDoubleClick]
   );
-  const handleItemDoubleClick = useCallback7((item) => {
-    onItemDoubleClickRef.current?.(item);
-  }, []);
   useLayoutEffect4(() => {
     const rootNode = rootRef.current;
     if (!rootNode) {
@@ -9118,7 +8983,7 @@ function TreeListViewInner({
     setAutoColumnWidths((currentWidths) => {
       let didChange = false;
       const nextWidths = { ...currentWidths };
-      resolvedColumns.forEach((column) => {
+      columns.forEach((column) => {
         if (currentWidths[column.id] !== void 0 || userColumnWidths[column.id] !== void 0 || column.width !== void 0) {
           return;
         }
@@ -9141,8 +9006,8 @@ function TreeListViewInner({
       });
       return didChange ? nextWidths : currentWidths;
     });
-  }, [resolvedColumns, userColumnWidths, visibleItems]);
-  useEffect19(() => {
+  }, [columns, userColumnWidths, visibleItems]);
+  useEffect16(() => {
     return () => {
       if (resizeFrameRef.current !== null) {
         window.cancelAnimationFrame(resizeFrameRef.current);
@@ -9265,13 +9130,17 @@ function TreeListViewInner({
   function isItemChecked(item) {
     return checkedIds ? checkedIds.includes(item.id) : item.checked === true;
   }
-  function toggleItemCheck(itemId) {
-    const item = findTreeListItemById(data, itemId);
-    if (!item || item.disabled || item.checked === void 0 && checkedIds === void 0) {
-      return;
-    }
-    onItemCheckChange?.(item, !isItemChecked(item));
-  }
+  const toggleItemCheck = useCallback7(
+    (itemId) => {
+      const item = findTreeListItemById(data, itemId);
+      if (!item || item.disabled || item.checked === void 0 && checkedIds === void 0) {
+        return;
+      }
+      const checked = checkedIds ? checkedIds.includes(item.id) : item.checked;
+      onItemCheckChange?.(item, !checked);
+    },
+    [checkedIds, data, onItemCheckChange]
+  );
   useImperativeHandle4(
     ref,
     () => ({
@@ -9305,7 +9174,13 @@ function TreeListViewInner({
         toggleItemCheck(itemId);
       }
     }),
-    [checkedIds, data, resolvedActiveItemId, resolvedExpandedIds]
+    [
+      activateResolvedItem,
+      data,
+      resolvedActiveItemId,
+      setExpandedState,
+      toggleItemCheck
+    ]
   );
   function handleKeyDown(event) {
     switch (event.key) {
@@ -9337,7 +9212,7 @@ function TreeListViewInner({
         event.preventDefault();
         activateResolvedItem(resolvedActiveItemId);
         break;
-      case " ":
+      case " ": {
         event.preventDefault();
         if (!resolvedActiveItemId) {
           return;
@@ -9353,6 +9228,7 @@ function TreeListViewInner({
           setExpandedState(activeItem, !expandedIdSet.has(activeItem.id));
         }
         break;
+      }
       default:
         break;
     }
@@ -9418,6 +9294,7 @@ function TreeListViewInner({
       ...props,
       "aria-activedescendant": resolvedActiveItemId ? `${treeId}-${resolvedActiveItemId}` : void 0,
       className: ["nu-tree-list-view", className].filter(Boolean).join(" "),
+      "data-version": dataVersion,
       onKeyDown: handleKeyDown,
       ref: rootRef,
       role: "treegrid",
@@ -9431,7 +9308,7 @@ function TreeListViewInner({
             style: {
               "--nu-tree-list-view-columns": templateColumns
             },
-            children: resolvedColumns.map((column, columnIndex) => /* @__PURE__ */ jsxs38(
+            children: columns.map((column, columnIndex) => /* @__PURE__ */ jsxs38(
               "span",
               {
                 className: [
@@ -9464,7 +9341,7 @@ function TreeListViewInner({
           {
             activeItemId: resolvedActiveItemId,
             checkedIds,
-            columns: resolvedColumns,
+            columns,
             depth: 0,
             expandedIdSet,
             getCellContent: getCellContent ? resolveCellContent : void 0,