Skip to content

Commit da158c5

Browse files
bekmuradovbekmuradov
committed
fix: replace Radix UI Dialog with custom implementation
Radix UI Dialog caused React instance conflict in Module Federation. Custom Dialog eliminates @radix-ui/react-dialog dependency, fixes useRef null error when plugin loaded in host.
1 parent fc711eb commit da158c5

File tree

12 files changed

+433
-450
lines changed

12 files changed

+433
-450
lines changed

‎dist/118.js‎

Lines changed: 0 additions & 2 deletions
This file was deleted.

‎dist/411.js‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎dist/446.js‎

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/118.js.LICENSE.txt‎ renamed to ‎dist/446.js.LICENSE.txt‎

File renamed without changes.

‎dist/695.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/main.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/main.js.LICENSE.txt‎

Lines changed: 0 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,3 @@
1-
/**
2-
* @license React
3-
* react-dom.production.min.js
4-
*
5-
* Copyright (c) Facebook, Inc. and its affiliates.
6-
*
7-
* This source code is licensed under the MIT license found in the
8-
* LICENSE file in the root directory of this source tree.
9-
*/
10-
111
/**
122
* @license React
133
* react-jsx-runtime.production.min.js
@@ -28,16 +18,6 @@
2818
* LICENSE file in the root directory of this source tree.
2919
*/
3020

31-
/**
32-
* @license React
33-
* scheduler.production.min.js
34-
*
35-
* Copyright (c) Facebook, Inc. and its affiliates.
36-
*
37-
* This source code is licensed under the MIT license found in the
38-
* LICENSE file in the root directory of this source tree.
39-
*/
40-
4121
/**
4222
* @license lucide-react v0.525.0 - ISC
4323
*

‎dist/remoteEntry.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/remoteEntry.js.LICENSE.txt‎

Lines changed: 0 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,3 @@
1-
/**
2-
* @license React
3-
* react-dom.production.min.js
4-
*
5-
* Copyright (c) Facebook, Inc. and its affiliates.
6-
*
7-
* This source code is licensed under the MIT license found in the
8-
* LICENSE file in the root directory of this source tree.
9-
*/
10-
111
/**
122
* @license React
133
* react.production.min.js
@@ -17,13 +7,3 @@
177
* This source code is licensed under the MIT license found in the
188
* LICENSE file in the root directory of this source tree.
199
*/
20-
21-
/**
22-
* @license React
23-
* scheduler.production.min.js
24-
*
25-
* Copyright (c) Facebook, Inc. and its affiliates.
26-
*
27-
* This source code is licensed under the MIT license found in the
28-
* LICENSE file in the root directory of this source tree.
29-
*/

‎src/components/ui/dialog.tsx‎

Lines changed: 150 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -1,139 +1,162 @@
1-
import * as React from "react"
2-
import * as DialogPrimitive from "@radix-ui/react-dialog"
3-
import { XIcon } from "lucide-react"
1+
// import * as React from "react"
2+
// import { XIcon } from "lucide-react"
3+
// import { cn } from "@/lib/utils"
44

5-
import { cn } from "@/lib/utils"
5+
// interface DialogProps {
6+
// open?: boolean;
7+
// onOpenChange?: (open: boolean) => void;
8+
// children: React.ReactNode;
9+
// }
610

7-
function Dialog({
8-
...props
9-
}: React.ComponentProps<typeof DialogPrimitive.Root>) {
10-
return <DialogPrimitive.Root data-slot="dialog" {...props} />
11-
}
11+
// function Dialog({ open, onOpenChange, children }: DialogProps) {
12+
// React.useEffect(() => {
13+
// if (open) {
14+
// document.body.style.overflow = 'hidden';
15+
// } else {
16+
// document.body.style.overflow = 'unset';
17+
// }
18+
// return () => {
19+
// document.body.style.overflow = 'unset';
20+
// };
21+
// }, [open]);
1222

13-
function DialogTrigger({
14-
...props
15-
}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
16-
return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
17-
}
23+
// if (!open) return null;
1824

19-
function DialogPortal({
20-
...props
21-
}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
22-
return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
23-
}
25+
// return (
26+
// <div
27+
// data-slot="dialog"
28+
// onClick={(e) => {
29+
// if (e.target === e.currentTarget) {
30+
// onOpenChange?.(false);
31+
// }
32+
// }}
33+
// >
34+
// {children}
35+
// </div>
36+
// );
37+
// }
2438

25-
function DialogClose({
26-
...props
27-
}: React.ComponentProps<typeof DialogPrimitive.Close>) {
28-
return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
29-
}
39+
// const DialogOverlay = React.forwardRef<
40+
// HTMLDivElement,
41+
// React.HTMLAttributes<HTMLDivElement>
42+
// >(({ className, ...props }, ref) => (
43+
// <div
44+
// ref={ref}
45+
// data-slot="dialog-overlay"
46+
// className={cn(
47+
// "fixed inset-0 z-50 bg-black/50",
48+
// className
49+
// )}
50+
// {...props}
51+
// />
52+
// ));
53+
// DialogOverlay.displayName = "DialogOverlay";
3054

31-
const DialogOverlay = React.forwardRef<
32-
React.ElementRef<typeof DialogPrimitive.Overlay>,
33-
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
34-
>(({ className, ...props }, ref) => (
35-
<DialogPrimitive.Overlay
36-
ref={ref}
37-
data-slot="dialog-overlay"
38-
className={cn(
39-
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
40-
className
41-
)}
42-
{...props}
43-
/>
44-
))
45-
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
55+
// const DialogContent = React.forwardRef<
56+
// HTMLDivElement,
57+
// React.HTMLAttributes<HTMLDivElement> & {
58+
// showCloseButton?: boolean;
59+
// onClose?: () => void;
60+
// }
61+
// >(({ className, children, showCloseButton = true, onClose, ...props }, ref) => (
62+
// <div className="fixed inset-0 z-50 flex items-center justify-center" onClick={onClose}>
63+
// <DialogOverlay />
64+
// <div
65+
// ref={ref}
66+
// data-slot="dialog-content"
67+
// className={cn(
68+
// "bg-background relative z-50 grid w-full max-w-[calc(100%-2rem)] gap-4 rounded-lg border p-6 shadow-lg sm:max-w-lg",
69+
// className
70+
// )}
71+
// onClick={(e) => e.stopPropagation()}
72+
// {...props}
73+
// >
74+
// {children}
75+
// {showCloseButton && onClose && (
76+
// <button
77+
// onClick={onClose}
78+
// data-slot="dialog-close"
79+
// className="ring-offset-background focus:ring-ring absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
80+
// >
81+
// <XIcon />
82+
// <span className="sr-only">Close</span>
83+
// </button>
84+
// )}
85+
// </div>
86+
// </div>
87+
// ));
88+
// DialogContent.displayName = "DialogContent";
4689

47-
const DialogContent = React.forwardRef<
48-
React.ElementRef<typeof DialogPrimitive.Content>,
49-
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
50-
showCloseButton?: boolean
51-
}
52-
>(({ className, children, showCloseButton = true, ...props }, ref) => (
53-
<DialogPortal data-slot="dialog-portal">
54-
<DialogOverlay />
55-
<DialogPrimitive.Content
56-
ref={ref}
57-
data-slot="dialog-content"
58-
className={cn(
59-
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
60-
className
61-
)}
62-
{...props}
63-
>
64-
{children}
65-
{showCloseButton && (
66-
<DialogPrimitive.Close
67-
data-slot="dialog-close"
68-
className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
69-
>
70-
<XIcon />
71-
<span className="sr-only">Close</span>
72-
</DialogPrimitive.Close>
73-
)}
74-
</DialogPrimitive.Content>
75-
</DialogPortal>
76-
))
77-
DialogContent.displayName = DialogPrimitive.Content.displayName
90+
// function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
91+
// return (
92+
// <div
93+
// data-slot="dialog-header"
94+
// className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
95+
// {...props}
96+
// />
97+
// );
98+
// }
7899

79-
function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
80-
return (
81-
<div
82-
data-slot="dialog-header"
83-
className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
84-
{...props}
85-
/>
86-
)
87-
}
100+
// function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
101+
// return (
102+
// <div
103+
// data-slot="dialog-footer"
104+
// className={cn(
105+
// "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
106+
// className
107+
// )}
108+
// {...props}
109+
// />
110+
// );
111+
// }
88112

89-
function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
90-
return (
91-
<div
92-
data-slot="dialog-footer"
93-
className={cn(
94-
"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
95-
className
96-
)}
97-
{...props}
98-
/>
99-
)
100-
}
113+
// const DialogTitle = React.forwardRef<
114+
// HTMLHeadingElement,
115+
// React.HTMLAttributes<HTMLHeadingElement>
116+
// >(({ className, ...props }, ref) => (
117+
// <h2
118+
// ref={ref}
119+
// data-slot="dialog-title"
120+
// className={cn("text-lg leading-none font-semibold", className)}
121+
// {...props}
122+
// />
123+
// ));
124+
// DialogTitle.displayName = "DialogTitle";
101125

102-
const DialogTitle = React.forwardRef<
103-
React.ElementRef<typeof DialogPrimitive.Title>,
104-
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
105-
>(({ className, ...props }, ref) => (
106-
<DialogPrimitive.Title
107-
ref={ref}
108-
data-slot="dialog-title"
109-
className={cn("text-lg leading-none font-semibold", className)}
110-
{...props}
111-
/>
112-
))
113-
DialogTitle.displayName = DialogPrimitive.Title.displayName
126+
// const DialogDescription = React.forwardRef<
127+
// HTMLParagraphElement,
128+
// React.HTMLAttributes<HTMLParagraphElement>
129+
// >(({ className, ...props }, ref) => (
130+
// <p
131+
// ref={ref}
132+
// data-slot="dialog-description"
133+
// className={cn("text-muted-foreground text-sm", className)}
134+
// {...props}
135+
// />
136+
// ));
137+
// DialogDescription.displayName = "DialogDescription";
114138

115-
const DialogDescription = React.forwardRef<
116-
React.ElementRef<typeof DialogPrimitive.Description>,
117-
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
118-
>(({ className, ...props }, ref) => (
119-
<DialogPrimitive.Description
120-
ref={ref}
121-
data-slot="dialog-description"
122-
className={cn("text-muted-foreground text-sm", className)}
123-
{...props}
124-
/>
125-
))
126-
DialogDescription.displayName = DialogPrimitive.Description.displayName
139+
// function DialogTrigger({ ...props }: React.ButtonHTMLAttributes<HTMLButtonElement>) {
140+
// return <button data-slot="dialog-trigger" {...props} />;
141+
// }
127142

128-
export {
129-
Dialog,
130-
DialogClose,
131-
DialogContent,
132-
DialogDescription,
133-
DialogFooter,
134-
DialogHeader,
135-
DialogOverlay,
136-
DialogPortal,
137-
DialogTitle,
138-
DialogTrigger,
139-
}
143+
// function DialogClose({ ...props }: React.ButtonHTMLAttributes<HTMLButtonElement>) {
144+
// return <button data-slot="dialog-close" {...props} />;
145+
// }
146+
147+
// function DialogPortal({ children }: { children: React.ReactNode }) {
148+
// return <>{children}</>;
149+
// }
150+
151+
// export {
152+
// Dialog,
153+
// DialogClose,
154+
// DialogContent,
155+
// DialogDescription,
156+
// DialogFooter,
157+
// DialogHeader,
158+
// DialogOverlay,
159+
// DialogPortal,
160+
// DialogTitle,
161+
// DialogTrigger,
162+
// };

0 commit comments

Comments
 (0)