@hrnec06/react_utils 1.2.1 → 1.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hrnec06/react_utils",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "description": "A debugger component for react.",
   "exports": {
     ".": "./src/index.tsx"
@@ -21,6 +21,7 @@
   },
   "devDependencies": {
     "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.2.3",
     "tsup": "^8.5.0",
     "typescript": "^5.8.3"
   },
@@ -28,7 +29,8 @@
     "@hrnec06/util": "^1.4.14",
     "clsx": "^2.1.1",
     "lucide-react": "^0.525.0",
-    "react": "^19.1.0"
+    "react": "^19.1.0",
+    "react-dom": "^19.2.3"
   },
   "scripts": {
     "dev": "tsup src/index.tsx --format cjs,esm --dts --watch"

package/src/debugger/Debugger.tsx

@@ -1,5 +1,6 @@
 import { minmax, Nullable, Vector2 } from "@hrnec06/util";
 import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from 'react-dom';
 import {DebuggerContext} from "./DebuggerContext";
 import clsx from "clsx";
 import ResizeBorder from "./DebuggerWindowResize";
@@ -182,7 +183,7 @@ export default function Debug({
 
 	const calculateScrollHeight = () => {
 		if (!containerRef.current) return 0;
-	
+
 		return containerRef.current.scrollHeight - calculateContainerHeight();
 	}
 
@@ -206,7 +207,11 @@ export default function Debug({
 	const handleExpandChange = (path: string[], state: boolean) => {
 		if (!containerRef.current) return;
 
-		setScrollProgress(minmax((scrollProgress * scrollHeight) / calculateScrollHeight(), 0, 1));
+		let newScrollProgress = minmax((scrollProgress * scrollHeight) / calculateScrollHeight(), 0, 1);
+		if (isNaN(newScrollProgress))
+			newScrollProgress = 0;
+
+		setScrollProgress(newScrollProgress);
 
 		updateScrollHeight();
 	}
@@ -222,76 +227,79 @@ export default function Debug({
 		setScrollProgress(p => minmax(p + addProgress, 0, 1));
 	}
 
-	return (
-		<DebuggerContext.Provider
-			value={{
-				paths: {
-					exclude: excludePaths ?? [],
-					open: openPaths ?? []
-				},
-				options: {
-					compactArrays: compactArrays,
-					autoHeight: autoHeight,
-					openRoot: openRoot
-				},
-				window: {
-					resize: setWindowSize,
-					size: windowSize
-				},
-				placement: {
-					reposition: setPosition,
-					position: position
-				},
-				event: {
-					expand: handleExpandChange
-				},
-				scroll: {
-					setProgress: setScrollProgress,
-					progress: scrollProgress,
-					isScrollable: isScrollable
-				}
-			}}
-		>
-			<div className="fixed pointer-events-none w-full h-full left-0 top-0 overflow-hidden">
-				<div
-					className={clsx(
-						"absolute font-jetbrains pointer-events-auto",
-						size === 'tiny' && 'text-xs',
-						size === 'normal' && 'text-sm',
-						size === 'big' && 'text-base'
-					)}
-					style={{
-						left: finalPosition[0],
-						top: finalPosition[1],
-						width: windowSize[0],
-						height: windowSize[1],
-					}}
-				>
-					<ResizeBorder />
-
+	return createPortal(
+		(
+			<DebuggerContext.Provider
+				value={{
+					paths: {
+						exclude: excludePaths ?? [],
+						open: openPaths ?? []
+					},
+					options: {
+						compactArrays: compactArrays,
+						autoHeight: autoHeight,
+						openRoot: openRoot
+					},
+					window: {
+						resize: setWindowSize,
+						size: windowSize
+					},
+					placement: {
+						reposition: setPosition,
+						position: position
+					},
+					event: {
+						expand: handleExpandChange
+					},
+					scroll: {
+						setProgress: setScrollProgress,
+						progress: scrollProgress,
+						isScrollable: isScrollable
+					}
+				}}
+			>
+				<div className="fixed pointer-events-none w-full h-full left-0 top-0 overflow-hidden z-999999">
 					<div
-						onWheel={handleWheel}
-						className="bg-[#1f1f1f] shadow-lg rounded-md border border-[#4b4b4b] w-full h-full overflow-hidden flex"
+						className={clsx(
+							"absolute font-jetbrains pointer-events-auto",
+							size === 'tiny' && 'text-xs',
+							size === 'normal' && 'text-sm',
+							size === 'big' && 'text-base'
+						)}
+						style={{
+							left: finalPosition[0],
+							top: finalPosition[1],
+							width: windowSize[0],
+							height: windowSize[1],
+						}}
 					>
+						<ResizeBorder />
+
 						<div
-							ref={containerRef}
-							onMouseDown={handleMouseDown}
-							className=" cursor-grab w-full"
-							style={{
-								transform: `translateY(${-(scrollProgress * scrollHeight)}px)`
-							}}
+							onWheel={handleWheel}
+							className="bg-[#1f1f1f] shadow-lg rounded-md border border-[#4b4b4b] w-full h-full overflow-hidden flex"
 						>
-							<div className="p-3 pl-5">
-								<ParseValue value={value} />
+							<div
+								ref={containerRef}
+								onMouseDown={handleMouseDown}
+								className=" cursor-grab w-full"
+								style={{
+									transform: `translateY(${-(scrollProgress * scrollHeight)}px)`
+								}}
+							>
+								<div className="p-3 pl-5">
+									<ParseValue value={value} />
+								</div>
 							</div>
+							<ScrollBar
+								containerHeight={containerHeight}
+								scrollHeight={scrollHeight}
+							/>
 						</div>
-						<ScrollBar
-							containerHeight={containerHeight}
-							scrollHeight={scrollHeight}
-						/>
 					</div>
 				</div>
-			</div>
-		</DebuggerContext.Provider>
+			</DebuggerContext.Provider>
+		),
+		document.body
 	);
 }

package/src/debugger/parser/DebugParserSimple.tsx

@@ -34,7 +34,7 @@ export default function ParseValueSimple({
 			if (className === null || className.length > MAX_LENGTH)
 				return <ValueKeyword value="object" />
 
-			return className;
+			return (<span className="text-white">{className}</span>);
 		}
 		case 'string': {
 			if (value.length > MAX_LENGTH)

package/src/debugger/parser/ValueObject.tsx

@@ -53,7 +53,7 @@ export default function ValueObject({
 			<Chevron_Toggle expanded={expanded} onToggle={handleExpand} />
 
 			{
-				Object.getPrototypeOf(value) !== Object.prototype && <span>({value.constructor.name}) </span>
+				Object.getPrototypeOf(value) !== Object.prototype && <span className="text-white">({value.constructor.name}) </span>
 			}
 
 			{