fix: Don't crash when hovering hotbar menu index

- Remove all uses of React.ReactNode as it is unsafe, replace them with
  usages of SafeReactNode which doesn't contain the '{}' type

Signed-off-by: Sebastian Malton <sebastian@malton.name>

packages/ui-components/tooltip/src/tooltip.tsx

@@ -8,7 +8,7 @@ import "./tooltip.scss";
 import React from "react";
 import { createPortal } from "react-dom";
 import { observer } from "mobx-react";
-import type { IClassName } from "@k8slens/utilities";
+import type { IClassName, SafeReactNode } from "@k8slens/utilities";
 import { cssNames } from "@k8slens/utilities";
 import { observable, makeObservable, action, runInAction } from "mobx";
 import autoBindReact from "auto-bind/react";
@@ -35,7 +35,7 @@ export interface TooltipProps {
   className?: IClassName;
   formatters?: TooltipContentFormatters;
   style?: React.CSSProperties;
-  children?: React.ReactNode;
+  children?: SafeReactNode;
   "data-testid"?: string;
 }
 

packages/ui-components/tooltip/src/withTooltip.test.tsx

@@ -3,7 +3,7 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-import type { SingleOrMany } from "@k8slens/utilities";
+import type { SafeReactNode, SingleOrMany } from "@k8slens/utilities";
 import { render, RenderResult } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import React from "react";
@@ -12,7 +12,7 @@ import { withTooltip } from "./withTooltip";
 type MyComponentProps = {
   text: string;
   id?: string;
-  children?: SingleOrMany<React.ReactNode>;
+  children?: SingleOrMany<SafeReactNode>;
   "data-testid"?: string;
 };
 

packages/ui-components/tooltip/src/withTooltip.tsx

@@ -3,23 +3,22 @@
  * Licensed under MIT License. See LICENSE in root directory for more information.
  */
 
-import type { ReactNode } from "react";
 import React, { useState } from "react";
 import type { TooltipProps } from "./tooltip";
 import { Tooltip } from "./tooltip";
-import { isReactNode } from "@k8slens/utilities";
+import { isReactNode, SafeReactNode } from "@k8slens/utilities";
 import uniqueId from "lodash/uniqueId";
 import type { SingleOrMany } from "@k8slens/utilities";
 
 export interface TooltipDecoratorProps {
-  tooltip?: ReactNode | Omit<TooltipProps, "targetId">;
+  tooltip?: SafeReactNode | Omit<TooltipProps, "targetId">;
   /**
    * forces tooltip to detect the target's parent for mouse events. This is
    * useful for displaying tooltips even when the target is "disabled"
    */
   tooltipOverrideDisabled?: boolean;
   id?: string;
-  children?: SingleOrMany<React.ReactNode>;
+  children?: SingleOrMany<SafeReactNode>;
 }
 
 export function withTooltip<TargetProps>(