rework of the tooltip - removed react-tooltip in favor of the radix one

library/src/components/DropdownMenu.tsx

@@ -8,6 +8,7 @@ import { Button } from "./Button"
 import RadioIcon from "@atlaskit/icon/glyph/radio"
 import CheckboxIcon from "@atlaskit/icon/glyph/checkbox"
 import { twJoin, twMerge } from "tailwind-merge"
+import { getPortal } from "../utils"
 
 const commonStyles =
 	"pl-1 pr-5 py-1.5 flex items-center outline-none border-l-[2.5px] border-l-transparent cursor-default" as const
@@ -19,6 +20,8 @@ const normalStyles =
 
 const descriptionStyle = "text-text-subtlest text-[12px] leading-4 h-4" as const
 
+const portalDivId = "uikts-dropdown" as const
+
 function Item({
 	description,
 	elemBefore,
@@ -256,7 +259,7 @@ function SubMenu({
 			)
 		}
 		return trigger
-	}, [trigger])
+	}, [chevronSide, trigger])
 
 	return (
 		<RDd.Sub defaultOpen={defaultOpen} open={open}>
@@ -365,7 +368,13 @@ function Menu({
 			}}
 		>
 			<RDd.Trigger asChild>{triggerNode}</RDd.Trigger>
-			{usePortal ? <RDd.Portal>{content}</RDd.Portal> : content}
+			{usePortal ? (
+				<RDd.Portal container={getPortal(portalDivId)}>
+					{content}
+				</RDd.Portal>
+			) : (
+				content
+			)}
 		</RDd.Root>
 	)
 }

library/src/components/Tooltip.tsx

@@ -1,74 +1,84 @@
-import React, { CSSProperties, useRef } from "react"
-import { Tooltip as TTP, VariantType, PlacesType } from "react-tooltip"
+import React, { CSSProperties, useMemo } from "react"
+import { twMerge } from "tailwind-merge"
+import * as RTTp from "@radix-ui/react-tooltip"
+import { getPortal } from "../utils"
+
+const portalDivId = "uikts-tooltip" as const
 
 type TooltipProps = {
-	id?: string
-	place?: PlacesType
 	tooltipContent?: React.ReactNode
 	tooltipHTMLContent?: string
-	variant?: VariantType
-	opacity?: number
-} & React.ComponentPropsWithoutRef<"div">
-
-const borderColors: { [key in VariantType]: string } = {
-	light: "#000",
-	dark: "#fff",
-	error: "#ff0000",
-	info: "#0000ff",
-	success: "#00ff00",
-	warning: "#ffff00",
-} as const
+	usePortal?: boolean
+	className?: string
+	style?: CSSProperties
+	tooltipClassName?: string
+	tooltipStyle?: CSSProperties
+	side?: RTTp.TooltipContentProps["side"]
+	align?: RTTp.TooltipContentProps["align"]
+} & RTTp.TooltipProps
 
-/**
- * A tooltip component that wraps the children in a div and adds a tooltip to it.
- * Use tooltipContent for the tooltip content and tooltipHTMLContent in case you have a stringified HTML content.
- * The variant defines the color of the tooltip - if it is undefined, it is unstyled.
- */
 export function Tooltip({
 	tooltipContent,
 	tooltipHTMLContent,
-	id,
-	place = "left",
-	opacity = 1,
-	variant,
 	children,
-	...props
+	tooltipStyle,
+	tooltipClassName,
+	className,
+	style,
+	side = "top",
+	align = "center",
+	usePortal = true,
 }: TooltipProps) {
-	const ttID = useRef(
-		id ?? "tooltip-" + Math.random().toString(36).substring(7),
-	)
-
-	const themeVariant =
-		variant ??
-		(document
-			.getElementsByTagName("html")[0]
-			.getAttribute("data-color-mode") as VariantType) ??
-		("light" as VariantType)
-
-	const ttContent = tooltipContent ?? (
-		<div
-			dangerouslySetInnerHTML={{
-				__html: tooltipHTMLContent ?? "No Content",
-			}}
-		></div>
-	)
+	const content = useMemo(() => {
+		return (
+			<RTTp.Content
+				className={twMerge(
+					"bg-surface-overlay border-border shadow-overlay rounded border p-2",
+					tooltipClassName,
+				)}
+				style={tooltipStyle}
+				side={side}
+				align={align}
+			>
+				<>
+					{tooltipHTMLContent && (
+						<div
+							dangerouslySetInnerHTML={{
+								__html: tooltipHTMLContent,
+							}}
+						></div>
+					)}
+					{tooltipContent}
+				</>
+			</RTTp.Content>
+		)
+	}, [
+		align,
+		side,
+		tooltipClassName,
+		tooltipContent,
+		tooltipHTMLContent,
+		tooltipStyle,
+	])
 
 	return (
-		<div id={ttID.current} {...props}>
-			{children}
-			<TTP
-				border={`solid 2px ${borderColors[themeVariant]} `}
-				anchorSelect={"#" + ttID.current}
-				place={place}
-				variant={themeVariant}
-				style={
-					{
-						"--rt-opacity": opacity,
-					} as CSSProperties
-				}
-			>
-				{ttContent}
-			</TTP>
-		</div>
+		<RTTp.Root>
+			<RTTp.Trigger className={className} style={style} asChild>
+				<div className={className} style={style}>
+					{children}
+				</div>
+			</RTTp.Trigger>
+			{usePortal ? (
+				<RTTp.Portal container={getPortal(portalDivId)}>
+					{content}
+				</RTTp.Portal>
+			) : (
+				content
+			)}
+		</RTTp.Root>
 	)
 }
+
+export function TooltipProvider(props: RTTp.TooltipProviderProps) {
+	return <RTTp.TooltipProvider {...props} />
+}

library/src/components/inputs/Select.tsx

@@ -37,7 +37,7 @@ export type OptionType<ValueType> = {
 
 export type OptionGroupType<ValueType> = GroupBase<OptionType<ValueType>>
 
-const portalDivId = "uikts-select"
+const portalDivId = "uikts-select" as const
 
 function useClassNamesConfig<
 	Option = unknown,

library/src/index.ts

@@ -1,5 +1,4 @@
 import "react-toastify/dist/ReactToastify.css"
-import "react-tooltip/dist/react-tooltip.css"
 import "./styles.css"
 
 export * from "./components"