Merge pull request #147 from linked-planet/dev

work on shadow dom support

Author: marcus-wishes

bundler_plugins/index.ts

@@ -1,11 +1,6 @@
 // the .js extension is necessary because the bundler plugins are not typescript files
 // and we need to use the .js extension to import them as esm modules
 import viteAppendCssPlugin from "./vite-append-css-plugin.js"
-import { postcssClassPrefixerPlugin } from "./postcss_prefix_classname-plugin.js"
 import rollupClassPrefixerPlugin from "./rollup_class_prefixer-plugin.js"
 
-export {
-	viteAppendCssPlugin,
-	postcssClassPrefixerPlugin,
-	rollupClassPrefixerPlugin,
-}
+export { viteAppendCssPlugin, rollupClassPrefixerPlugin }

bundler_plugins/postcss_prefix_classname-plugin.ts

@@ -1,11 +1,9 @@
 import ReactDOM from "react-dom"
 import type { ComponentPropsWithoutRef } from "react"
 import { twMerge } from "tailwind-merge"
-import { getPortal } from "../utils"
-
+import { usePortalContainer } from "../utils"
 type BlanketProps = ComponentPropsWithoutRef<"div"> & {
-	usePortal?: boolean
-	portalContainer?: HTMLElement | null
+	usePortal?: boolean | ShadowRoot
 }
 
 export function Blanket({
@@ -14,9 +12,10 @@ export function Blanket({
 	"aria-label": ariaLabel,
 	role,
 	usePortal = true,
-	portalContainer = getPortal("uikts-blanket"),
 	...props
 }: BlanketProps) {
+	const portalContainer = usePortalContainer(usePortal, "uikts-blanket", null)
+
 	const ele = (
 		<div
 			className={twMerge(
@@ -38,7 +37,7 @@ export function Blanket({
 			</div>
 		</div>
 	)
-	if (!usePortal || portalContainer === null) {
+	if (!portalContainer) {
 		return ele
 	}
 	return ReactDOM.createPortal(ele, portalContainer)

library/src/components/Blanket.tsx

@@ -1,7 +1,13 @@
 import * as RDd from "@radix-ui/react-dropdown-menu"
-import { forwardRef, useMemo, useRef, type ForwardedRef } from "react"
+import {
+	forwardRef,
+	useImperativeHandle,
+	useMemo,
+	useRef,
+	type ForwardedRef,
+} from "react"
 import { twMerge } from "tailwind-merge"
-import { getPortal } from "../utils"
+import { usePortalContainer } from "../utils"
 import { Button, type ButtonProps } from "./Button"
 import { overlayBaseStyle } from "./styleHelper"
 import { IconSizeHelper } from "./IconSizeHelper"
@@ -425,7 +431,7 @@ export type DropdownMenuProps = {
 	trigger?: React.ReactNode
 	triggerComponent?: React.ReactElement<DropdownTriggerProps>
 	children: React.ReactNode
-	usePortal?: boolean
+	usePortal?: boolean | ShadowRoot
 	testId?: string
 	hideChevron?: boolean
 	modal?: boolean
@@ -590,6 +596,9 @@ const Menu = forwardRef<HTMLButtonElement, DropdownMenuProps>(
 				contentStyle,
 			],
 		)
+		const triggerRef = useRef<HTMLButtonElement>(null)
+		// biome-ignore lint/style/noNonNullAssertion: save here
+		useImperativeHandle(ref, () => triggerRef.current!)
 
 		const _trigger = triggerComponent ?? (
 			<Trigger
@@ -601,12 +610,18 @@ const Menu = forwardRef<HTMLButtonElement, DropdownMenuProps>(
 				chevronStyle={chevronStyle}
 				style={triggerStyle}
 				{...props}
-				ref={ref}
+				ref={triggerRef}
 			>
 				{trigger ?? "trigger"}
 			</Trigger>
 		)
 
+		const portalContainer = usePortalContainer(
+			usePortal,
+			"uikts-dropdown",
+			triggerRef.current,
+		)
+
 		return (
 			<RDd.Root
 				open={open}
@@ -623,7 +638,7 @@ const Menu = forwardRef<HTMLButtonElement, DropdownMenuProps>(
 					{_trigger}
 				</RDd.Trigger>
 				{usePortal ? (
-					<RDd.Portal container={getPortal(portalDivId)}>
+					<RDd.Portal container={portalContainer}>
 						{content}
 					</RDd.Portal>
 				) : (

library/src/components/DropdownMenu.tsx

@@ -8,11 +8,14 @@ import React, {
 	useEffect,
 	useState,
 	useCallback,
+	useImperativeHandle,
 } from "react"
 import { twJoin, twMerge } from "tailwind-merge"
-import { getPortal } from "../utils/getPortal"
+
 import { overlayBaseStyle } from "./styleHelper"
 import { VisuallyHidden } from "@radix-ui/react-visually-hidden"
+import { Button } from "./Button"
+import usePortalContainer from "../utils/usePortalContainer"
 
 type ModalDialogProps = {
 	open?: boolean
@@ -25,7 +28,7 @@ type ModalDialogProps = {
 	style?: CSSProperties
 	shouldCloseOnEscapePress?: boolean
 	shouldCloseOnOverlayClick?: boolean
-	usePortal?: boolean
+	usePortal?: boolean | ShadowRoot
 	useModal?: boolean
 	id?: string
 	triggerId?: string
@@ -35,11 +38,14 @@ type ModalDialogProps = {
 	accessibleDialogDescription: string
 	role?: RDialog.DialogContentProps["role"]
 	tabIndex?: RDialog.DialogContentProps["tabIndex"]
+	ref?: React.Ref<HTMLButtonElement>
 }
 
 const blanketStyles =
 	"fixed inset-0 bg-blanket ease-out transition-opacity duration-200 animate-fade-in"
 
+const portalContainerId = "uikts-modal" as const
+
 function Container({
 	shouldCloseOnEscapePress = true,
 	shouldCloseOnOverlayClick = true,
@@ -60,7 +66,18 @@ function Container({
 	role = "dialog",
 	accessibleDialogDescription,
 	tabIndex = undefined,
+	ref,
 }: ModalDialogProps) {
+	const triggerRef = useRef<HTMLButtonElement>(null)
+	// biome-ignore lint/style/noNonNullAssertion: safe if the trigger is used
+	useImperativeHandle(ref, () => triggerRef.current!)
+
+	const portalContainer: HTMLElement | null = usePortalContainer(
+		usePortal,
+		portalContainerId,
+		triggerRef.current,
+	)
+
 	const content = useMemo(
 		() => (
 			<>
@@ -126,6 +143,8 @@ function Container({
 		],
 	)
 
+	console.log("portalContainer", portalContainer?.parentElement?.parentNode)
+
 	return (
 		<RDialog.Root
 			open={open}
@@ -134,13 +153,18 @@ function Container({
 			modal={useModal}
 		>
 			{trigger && (
-				<RDialog.Trigger id={triggerId} data-testid={triggerTestId}>
-					{trigger}
+				<RDialog.Trigger
+					id={triggerId}
+					data-testid={triggerTestId}
+					asChild
+					ref={triggerRef}
+				>
+					<Button>{"Open Modal"}</Button>
 				</RDialog.Trigger>
 			)}
 
 			{usePortal ? (
-				<RDialog.Portal container={getPortal("uikts-modal")}>
+				<RDialog.Portal container={portalContainer}>
 					{content}
 				</RDialog.Portal>
 			) : (

library/src/components/Modal.tsx

@@ -1,7 +1,7 @@
 import * as RPo from "@radix-ui/react-popover"
 import { forwardRef, useMemo, useRef } from "react"
 import { twMerge } from "tailwind-merge"
-import { getPortal } from "../utils"
+import { usePortalContainer } from "../utils"
 import { Button, type ButtonProps } from "./Button"
 import { overlayBaseStyle } from "./styleHelper"
 import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"
@@ -70,7 +70,7 @@ const Trigger = forwardRef<HTMLButtonElement, TriggerProps>(
 )
 
 export type PopoverProps = RPo.PopoverProps & {
-	usePortal?: boolean
+	usePortal?: boolean | ShadowRoot
 	/* trigger replaces the content of the trigger button */
 	trigger?: React.ReactNode
 	/* triggerComponent replaces the the trigger button component */
@@ -203,6 +203,13 @@ function Root({
 		</Trigger>
 	)
 
+	const triggerRef = useRef<HTMLButtonElement>(null)
+	const portalContainer = usePortalContainer(
+		usePortal,
+		"uikts-popover",
+		triggerRef.current,
+	)
+
 	return (
 		<RPo.Root
 			open={open}
@@ -211,11 +218,11 @@ function Root({
 			onOpenChange={onOpenChange}
 			data-testid={testId}
 		>
-			<RPo.Trigger asChild={triggerAsChild}>{_trigger}</RPo.Trigger>
+			<RPo.Trigger asChild ref={triggerRef}>
+				{_trigger}
+			</RPo.Trigger>
 			{usePortal ? (
-				<RPo.Portal container={getPortal(portalDivId)}>
-					{content}
-				</RPo.Portal>
+				<RPo.Portal container={portalContainer}>{content}</RPo.Portal>
 			) : (
 				content
 			)}

library/src/components/Popover.tsx

@@ -327,7 +327,7 @@ const toastProxyMap = (() => {
 			const value = Reflect.get(target, prop, receiver)
 			// If the property is a method, bind it to the target Map
 			if (typeof value === "function") {
-				return (...args: any[]) => {
+				return (...args: unknown[]) => {
 					const result = value.apply(target, args)
 					mapSnapshot = new Map(target)
 					if (

library/src/components/ToastFlag.tsx

@@ -1,15 +1,15 @@
 import * as RTTp from "@radix-ui/react-tooltip"
 import type React from "react"
-import { type CSSProperties, useMemo } from "react"
+import { type CSSProperties, useMemo, useRef } from "react"
 import { twMerge } from "tailwind-merge"
-import { getPortal } from "../utils"
+import { usePortalContainer } from "../utils"
 
 const portalDivId = "uikts-tooltip" as const
 
 export type TooltipProps = {
 	tooltipContent?: React.ReactNode
 	tooltipHTMLContent?: string
-	usePortal?: boolean
+	usePortal?: boolean | ShadowRoot
 	className?: string
 	style?: CSSProperties
 	tooltipClassName?: string
@@ -79,6 +79,14 @@ export function Tooltip({
 		tooltipStyle,
 	])
 
+	const triggerRef = useRef<HTMLButtonElement>(null)
+
+	const portalContainer = usePortalContainer(
+		usePortal,
+		"uikts-tooltip",
+		triggerRef.current,
+	)
+
 	return (
 		<RTTp.Root
 			open={open}
@@ -92,13 +100,12 @@ export function Tooltip({
 				asChild
 				data-testid={triggerTestId}
 				id={triggerId}
+				ref={triggerRef}
 			>
 				{children}
 			</RTTp.Trigger>
 			{usePortal ? (
-				<RTTp.Portal container={getPortal(portalDivId)}>
-					{content}
-				</RTTp.Portal>
+				<RTTp.Portal container={portalContainer}>{content}</RTTp.Portal>
 			) : (
 				content
 			)}

library/src/components/Tooltip.tsx

@@ -10,6 +10,8 @@ export interface SelectSingleFormFieldProps<
 	options: Array<{ label: string; value: A }>
 	onChange?: (value: A) => void
 	placeholder?: string
+	usePortal?: boolean
+	menuIsOpen?: boolean
 }
 
 export function SelectSingleFormField<
@@ -24,6 +26,8 @@ export function SelectSingleFormField<
 	required,
 	options,
 	placeholder,
+	usePortal,
+	menuIsOpen,
 }: SelectSingleFormFieldProps<T, A>) {
 	const fieldValue = formProps.watch(name)
 	const onChangeCB = useRef(onChange)
@@ -55,6 +59,8 @@ export function SelectSingleFormField<
 				required={required}
 				disabled={formProps.readonly}
 				placeholder={placeholder}
+				usePortal={usePortal}
+				menuIsOpen={menuIsOpen}
 			/>
 		</div>
 	)