@deadragdoll/reactnu 0.1.9 → 0.1.12

package/dist/index.cjs

@@ -1186,15 +1186,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 = (0, import_react5.useCallback)(
+    (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;
@@ -1260,7 +1265,7 @@ function ListBoxInner({
         toggleItemCheck(itemId);
       }
     }),
-    [resolvedActiveId, checkedIds, data]
+    [activateResolvedItem, resolvedActiveId, toggleItemCheck]
   );
   function handleKeyDown(event) {
     switch (event.key) {
@@ -1422,17 +1427,14 @@ function MdiWindowPickerDialog({
   const [selectedId, setSelectedId] = (0, import_react6.useState)(
     activeWindowId ?? resolvedWindows[0]?.id ?? ""
   );
-  (0, import_react6.useEffect)(() => {
-    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__ */ (0, import_jsx_runtime13.jsxs)(Stack, { gap: "md", children: [
@@ -1463,7 +1465,7 @@ function MdiWindowPickerDialog({
           onActivateWindow(item.id);
           onClose();
         },
-        selectedId,
+        selectedId: resolvedSelectedId,
         style: {
           maxHeight: "14rem",
           minHeight: "12rem"
@@ -2278,6 +2280,12 @@ function AppBarItem(props) {
       interactive: _interactive2,
       ...buttonProps
     } = props;
+    void _active2;
+    void _alignment2;
+    void _children2;
+    void _className2;
+    void _grow2;
+    void _interactive2;
     return (0, import_react13.createElement)(
       "button",
       {
@@ -2297,6 +2305,12 @@ function AppBarItem(props) {
     interactive: _interactive,
     ...staticProps
   } = props;
+  void _active;
+  void _alignment;
+  void _children;
+  void _className;
+  void _grow;
+  void _interactive;
   return (0, import_react13.createElement)(
     "div",
     {
@@ -2878,31 +2892,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) {
@@ -2928,28 +2917,6 @@ function NuWindowProvider({
   const creationOrderRef = (0, import_react17.useRef)(0);
   const idRef = (0, import_react17.useRef)(0);
   const windowBoundsByIdRef = (0, import_react17.useRef)({});
-  const boundsChangeHandlersRef = (0, import_react17.useRef)(
-    /* @__PURE__ */ new Map()
-  );
-  const windowStyleCacheRef = (0, import_react17.useRef)(
-    /* @__PURE__ */ new Map()
-  );
-  const closeHandlersRef = (0, import_react17.useRef)(/* @__PURE__ */ new Map());
-  const activateHandlersRef = (0, import_react17.useRef)(/* @__PURE__ */ new Map());
-  const bringToFrontHandlersRef = (0, import_react17.useRef)(/* @__PURE__ */ new Map());
-  const toggleMaximizedHandlersRef = (0, import_react17.useRef)(/* @__PURE__ */ new Map());
-  const toggleMinimizedHandlersRef = (0, import_react17.useRef)(/* @__PURE__ */ new Map());
-  const positionHandlersRef = (0, import_react17.useRef)(
-    /* @__PURE__ */ new Map()
-  );
-  const sizeHandlersRef = (0, import_react17.useRef)(/* @__PURE__ */ new Map());
-  const updateHandlersRef = (0, import_react17.useRef)(
-    /* @__PURE__ */ new Map()
-  );
-  const controlsCacheRef = (0, import_react17.useRef)(/* @__PURE__ */ new Map());
-  const contentCacheRef = (0, import_react17.useRef)(
-    /* @__PURE__ */ new Map()
-  );
   const [windows, setWindows] = (0, import_react17.useState)([]);
   const [windowBoundsById, setWindowBoundsById] = (0, import_react17.useState)({});
   const appHostMenuContext = (0, import_react17.useContext)(AppHostMenuContext);
@@ -3002,53 +2969,6 @@ function NuWindowProvider({
     },
     []
   );
-  const getBoundsChangeHandler = (0, import_react17.useCallback)(
-    (id) => {
-      let handler = boundsChangeHandlersRef.current.get(id);
-      if (!handler) {
-        handler = (bounds) => updateWindowBounds(id, bounds);
-        boundsChangeHandlersRef.current.set(id, handler);
-      }
-      return handler;
-    },
-    [updateWindowBounds]
-  );
-  const getWindowStyle = (0, import_react17.useCallback)(
-    (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;
-    },
-    []
-  );
-  (0, import_react17.useEffect)(() => {
-    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 = (0, import_react17.useCallback)((id) => {
     setWindows((currentWindows) => {
       const activationChain = getActivationChain(currentWindows, id);
@@ -3421,61 +3341,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__ */ (0, import_jsx_runtime26.jsxs)(import_react17.Fragment, { children: [
         isTopmostAppModal ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
           "div",
@@ -3505,7 +3387,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,
@@ -3513,11 +3395,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
           }
@@ -3810,6 +3691,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__ */ (0, import_jsx_runtime30.jsx)(
       "button",
       {
@@ -3829,6 +3711,7 @@ function ControlOpener(props) {
     );
   }
   const { ariaHidden = false, as: _as, ...spanProps } = props;
+  void _as;
   return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     "span",
     {
@@ -4483,7 +4366,7 @@ function findComboBoxOption(options, value) {
   }
   return options.find((option) => option.value === value) ?? null;
 }
-function resolveComboBoxPortalRoot(anchor) {
+function resolveComboBoxPortalRoot() {
   return document.body;
 }
 function ComboBox({
@@ -4545,7 +4428,8 @@ function ComboBox({
     ),
     [filteredData]
   );
-  const popupRoot = typeof document === "undefined" ? null : resolveComboBoxPortalRoot(rootRef.current);
+  const popupRoot = typeof document === "undefined" ? null : resolveComboBoxPortalRoot();
+  const [themePortalStyle, setThemePortalStyle] = (0, import_react22.useState)(() => void 0);
   (0, import_react22.useEffect)(() => {
     if (!open) {
       return;
@@ -4595,7 +4479,10 @@ function ComboBox({
     if (disabled) {
       return;
     }
-    setOpen((currentOpen) => !currentOpen);
+    if (!open) {
+      setThemePortalStyle(getThemePortalStyle(rootRef.current));
+    }
+    setOpen(!open);
     inputRef.current?.focus();
   }
   function handleInputKeyDown(event) {
@@ -4605,6 +4492,7 @@ function ComboBox({
     switch (event.key) {
       case "ArrowDown":
         event.preventDefault();
+        setThemePortalStyle(getThemePortalStyle(rootRef.current));
         setOpen(true);
         break;
       case "Enter":
@@ -4680,6 +4568,7 @@ function ComboBox({
                             id: fieldId,
                             onChange: (event) => {
                               setResolvedInputValue(event.target.value);
+                              setThemePortalStyle(getThemePortalStyle(rootRef.current));
                               setOpen(true);
                             },
                             onKeyDown: handleInputKeyDown,
@@ -4739,7 +4628,7 @@ function ComboBox({
               id: `${fieldId}-popup`,
               ref: popupRef,
               style: mergeSlotStyle(
-                getThemePortalStyle(rootRef.current),
+                themePortalStyle,
                 slotStyles?.popup
               ),
               children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
@@ -4805,7 +4694,7 @@ function resolveAnchorPosition(anchor) {
     top: rect.bottom - 1
   };
 }
-function resolvePortalRoot(anchor) {
+function resolvePortalRoot() {
   if (typeof document === "undefined") {
     return null;
   }
@@ -4828,7 +4717,7 @@ function PopupMenu({
   const [uncontrolledOpen, setUncontrolledOpen] = (0, import_react23.useState)(defaultOpen);
   const isControlled = open !== void 0;
   const resolvedOpen = isControlled ? open : uncontrolledOpen;
-  const portalRoot = resolvePortalRoot(anchor);
+  const portalRoot = resolvePortalRoot();
   const setResolvedOpen = (0, import_react23.useCallback)(
     (nextOpen) => {
       if (!nextOpen) {
@@ -5609,7 +5498,7 @@ function ListViewInner({
         toggleRowCheck(rowId);
       }
     }),
-    [resolvedActiveRowId, showCheckBox, checkedIds, data]
+    [activateRowId, resolvedActiveRowId, toggleRowCheck]
   );
   function handleKeyDown(event) {
     switch (event.key) {
@@ -6403,7 +6292,7 @@ function PropertyGrid({
   const isExpandedControlled = expandedIdsProp !== void 0;
   const isActiveControlled = activeIdProp !== void 0;
   const [uncontrolledExpandedIds, setUncontrolledExpandedIds] = (0, import_react32.useState)(() => getInitialExpandedIds(entries, defaultExpandedIds));
-  const resolvedExpandedIds = isExpandedControlled ? expandedIdsProp ?? [] : uncontrolledExpandedIds;
+  const resolvedExpandedIds = expandedIdsProp ?? uncontrolledExpandedIds;
   const expandedIdSet = (0, import_react32.useMemo)(
     () => new Set(
       resolvedExpandedIds.filter((expandedId) => groupIds.has(expandedId))
@@ -6416,24 +6305,8 @@ function PropertyGrid({
   );
   const interactiveRows = (0, import_react32.useMemo)(() => collectInteractiveRows(rows), [rows]);
   const [uncontrolledActiveId, setUncontrolledActiveId] = (0, import_react32.useState)(() => getInitialActiveId2(interactiveRows, defaultActiveId));
-  const resolvedActiveId = isActiveControlled ? activeIdProp : uncontrolledActiveId;
-  (0, import_react32.useEffect)(() => {
-    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);
@@ -6505,7 +6378,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);
@@ -6516,7 +6389,8 @@ function PropertyGrid({
           focusRowButton(parentRowId);
         }
         return;
-      case "ArrowRight":
+      }
+      case "ArrowRight": {
         event.preventDefault();
         if (row.type === "group") {
           if (!expandedIdSet.has(row.entry.id)) {
@@ -6528,6 +6402,7 @@ function PropertyGrid({
         }
         activateItemEditor(`${editorIdPrefix}-editor-${row.entry.id}`);
         return;
+      }
       case "Enter":
       case " ":
         event.preventDefault();
@@ -6919,7 +6794,7 @@ function ReportCell({
 var import_react35 = require("react");
 var import_react_dom4 = require("react-dom");
 var import_jsx_runtime50 = require("react/jsx-runtime");
-function resolveSearchBoxPortalRoot(anchor) {
+function resolveSearchBoxPortalRoot() {
   return document.body;
 }
 function SearchBox({
@@ -6986,12 +6861,10 @@ function SearchBox({
     ],
     [resultOptions]
   );
-  const popupRoot = typeof document === "undefined" ? null : resolveSearchBoxPortalRoot(rootRef.current);
+  const popupRoot = typeof document === "undefined" ? null : resolveSearchBoxPortalRoot();
+  const [themePortalStyle, setThemePortalStyle] = (0, import_react35.useState)(() => void 0);
   (0, import_react35.useEffect)(() => {
     if (disabled) {
-      setOpen(false);
-      setResults([]);
-      setStatus("idle");
       return;
     }
     if (!open) {
@@ -7027,8 +6900,6 @@ function SearchBox({
       return;
     }
     if (trimmedQuery.length < minQueryLength) {
-      setResults([]);
-      setStatus("idle");
       return;
     }
     const nextRequestId = requestIdRef.current + 1;
@@ -7059,6 +6930,10 @@ function SearchBox({
     }
     onQueryChange?.(nextQuery);
   }
+  function openPopup() {
+    setThemePortalStyle(getThemePortalStyle(rootRef.current));
+    setOpen(true);
+  }
   function handleSelectItem(option) {
     setResolvedQuery(getItemText(option.item));
     setSelectedValue(option.value);
@@ -7101,7 +6976,7 @@ function SearchBox({
     switch (event.key) {
       case "ArrowDown":
         event.preventDefault();
-        setOpen(true);
+        openPopup();
         break;
       case "Enter":
         if (open && status === "success" && resultOptions[0]) {
@@ -7138,10 +7013,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,
@@ -7159,7 +7034,7 @@ function SearchBox({
               className: "nu-search-box__popup",
               id: `${fieldId}-popup`,
               ref: popupRef,
-              style: getThemePortalStyle(rootRef.current),
+              style: themePortalStyle,
               children: renderPopupContent()
             }
           ),
@@ -7224,18 +7099,16 @@ function SpinBox({
   );
   const [uncontrolledValue, setUncontrolledValue] = (0, import_react36.useState)(initialNumericValue);
   const numericValue = isControlled ? clampSpinValue(value ?? initialNumericValue, min, max) : uncontrolledValue;
-  const [draftValue, setDraftValue] = (0, import_react36.useState)(
+  const [uncontrolledDraftValue, setUncontrolledDraftValue] = (0, import_react36.useState)(
     () => formatSpinValue(initialNumericValue)
   );
-  (0, import_react36.useEffect)(() => {
-    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) {
@@ -7244,7 +7117,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) {
@@ -7255,7 +7130,7 @@ function SpinBox({
     onChange?.(event);
   }
   function handleBlur(event) {
-    setDraftValue(formatSpinValue(numericValue));
+    setUncontrolledDraftValue(formatSpinValue(numericValue));
     onBlur?.(event);
   }
   function handleKeyDown(event) {
@@ -8370,15 +8245,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 = (0, import_react40.useCallback)(
+    (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;
@@ -8470,7 +8350,7 @@ function TreeViewInner({
         event.preventDefault();
         activateResolvedItem(resolvedActiveId);
         break;
-      case " ":
+      case " ": {
         event.preventDefault();
         if (!resolvedActiveId) {
           return;
@@ -8486,6 +8366,7 @@ function TreeViewInner({
           setExpandedState(activeItem, !expandedIdSet.has(activeItem.id));
         }
         break;
+      }
       default:
         break;
     }
@@ -8526,7 +8407,13 @@ function TreeViewInner({
         }
       }
     }),
-    [data, resolvedActiveId, resolvedExpandedIds, onItemCheckChange]
+    [
+      activateResolvedItem,
+      data,
+      onItemCheckChange,
+      resolvedActiveId,
+      setExpandedState
+    ]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
     "div",
@@ -8954,18 +8841,6 @@ var TreeListViewRow = (0, import_react41.memo)(
 
 // src/components/TreeListView/TreeListView.tsx
 var import_jsx_runtime58 = require("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,
@@ -8990,17 +8865,8 @@ function TreeListViewInner({
   const rootRef = (0, import_react42.useRef)(null);
   const treeId = (0, import_react42.useId)();
   const itemRefs = (0, import_react42.useRef)({});
-  const columnsRef = (0, import_react42.useRef)(columns);
-  const getCellContentRef = (0, import_react42.useRef)(getCellContent);
-  const onItemDoubleClickRef = (0, import_react42.useRef)(onItemDoubleClick);
   const resizeFrameRef = (0, import_react42.useRef)(null);
   const resizeStateRef = (0, import_react42.useRef)(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] = (0, import_react42.useState)(() => {
     const expandedFromData = collectExpandedTreeListIds(data);
@@ -9033,28 +8899,28 @@ function TreeListViewInner({
   const resolvedActiveItemId = activeItemId && selectableItems.some((entry) => entry.itemId === activeItemId) ? activeItemId : resolvedSelectedId;
   const minColumnWidthById = (0, import_react42.useMemo)(
     () => Object.fromEntries(
-      resolvedColumns.map(
+      columns.map(
         (column) => [column.id, column.minWidth ?? 0]
       )
     ),
-    [resolvedColumns]
+    [columns]
   );
   const templateColumns = (0, import_react42.useMemo)(
-    () => getTreeListTemplateColumns(resolvedColumns, {
+    () => getTreeListTemplateColumns(columns, {
       autoColumnWidths,
       userColumnWidths
     }),
-    [autoColumnWidths, resolvedColumns, userColumnWidths]
+    [autoColumnWidths, columns, userColumnWidths]
   );
   const treeColumnId = (0, import_react42.useMemo)(
-    () => getTreeListTreeColumnId(resolvedColumns),
-    [resolvedColumns]
+    () => getTreeListTreeColumnId(columns),
+    [columns]
   );
   const rowIndexMap = (0, import_react42.useMemo)(
     () => new Map(
       visibleItems.map((entry, index) => [entry.itemId, index])
     ),
-    [visibleItems, dataVersion]
+    [visibleItems]
   );
   (0, import_react42.useEffect)(() => {
     if (!resolvedActiveItemId) {
@@ -9071,12 +8937,13 @@ function TreeListViewInner({
     []
   );
   const resolveCellContent = (0, import_react42.useCallback)(
-    (...args) => getCellContentRef.current?.(...args),
-    []
+    (...args) => getCellContent?.(...args),
+    [getCellContent]
+  );
+  const handleItemDoubleClick = (0, import_react42.useCallback)(
+    (item) => onItemDoubleClick?.(item),
+    [onItemDoubleClick]
   );
-  const handleItemDoubleClick = (0, import_react42.useCallback)((item) => {
-    onItemDoubleClickRef.current?.(item);
-  }, []);
   (0, import_react42.useLayoutEffect)(() => {
     const rootNode = rootRef.current;
     if (!rootNode) {
@@ -9085,7 +8952,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;
         }
@@ -9108,7 +8975,7 @@ function TreeListViewInner({
       });
       return didChange ? nextWidths : currentWidths;
     });
-  }, [resolvedColumns, userColumnWidths, visibleItems]);
+  }, [columns, userColumnWidths, visibleItems]);
   (0, import_react42.useEffect)(() => {
     return () => {
       if (resizeFrameRef.current !== null) {
@@ -9232,13 +9099,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 = (0, import_react42.useCallback)(
+    (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]
+  );
   (0, import_react42.useImperativeHandle)(
     ref,
     () => ({
@@ -9272,7 +9143,13 @@ function TreeListViewInner({
         toggleItemCheck(itemId);
       }
     }),
-    [checkedIds, data, resolvedActiveItemId, resolvedExpandedIds]
+    [
+      activateResolvedItem,
+      data,
+      resolvedActiveItemId,
+      setExpandedState,
+      toggleItemCheck
+    ]
   );
   function handleKeyDown(event) {
     switch (event.key) {
@@ -9304,7 +9181,7 @@ function TreeListViewInner({
         event.preventDefault();
         activateResolvedItem(resolvedActiveItemId);
         break;
-      case " ":
+      case " ": {
         event.preventDefault();
         if (!resolvedActiveItemId) {
           return;
@@ -9320,6 +9197,7 @@ function TreeListViewInner({
           setExpandedState(activeItem, !expandedIdSet.has(activeItem.id));
         }
         break;
+      }
       default:
         break;
     }
@@ -9385,6 +9263,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",
@@ -9398,7 +9277,7 @@ function TreeListViewInner({
             style: {
               "--nu-tree-list-view-columns": templateColumns
             },
-            children: resolvedColumns.map((column, columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+            children: columns.map((column, columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
               "span",
               {
                 className: [
@@ -9431,7 +9310,7 @@ function TreeListViewInner({
           {
             activeItemId: resolvedActiveItemId,
             checkedIds,
-            columns: resolvedColumns,
+            columns,
             depth: 0,
             expandedIdSet,
             getCellContent: getCellContent ? resolveCellContent : void 0,