@motor-hero/ui-kit 0.30.0 → 0.31.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -37,6 +37,11 @@ export interface BaseDialogProps {
|
|
|
37
37
|
* modal so the bottom-sheet behaves. Pass explicitly to override.
|
|
38
38
|
*/
|
|
39
39
|
modal?: boolean
|
|
40
|
+
/**
|
|
41
|
+
* Applies backdrop-blur to the overlay behind the dialog.
|
|
42
|
+
* Defaults to true; pass false to keep the plain scrim.
|
|
43
|
+
*/
|
|
44
|
+
blurBackdrop?: boolean
|
|
40
45
|
/**
|
|
41
46
|
* Advanced: wraps the dialog's inner content (header + body + footer) inside
|
|
42
47
|
* Content. Used by FormDialog to inject a <form>. Defaults to identity.
|
|
@@ -64,6 +69,7 @@ export function BaseDialog({
|
|
|
64
69
|
size = "lg",
|
|
65
70
|
className,
|
|
66
71
|
modal,
|
|
72
|
+
blurBackdrop = true,
|
|
67
73
|
contentWrapper = (content) => content,
|
|
68
74
|
}: BaseDialogProps) {
|
|
69
75
|
const isDesktop = useIsDesktop()
|
|
@@ -106,10 +112,29 @@ export function BaseDialog({
|
|
|
106
112
|
</>
|
|
107
113
|
)
|
|
108
114
|
|
|
115
|
+
const isModal = modal ?? !isDesktop
|
|
116
|
+
|
|
109
117
|
return (
|
|
110
|
-
<Dialog.Root open={open} onOpenChange={onOpenChange} modal={
|
|
118
|
+
<Dialog.Root open={open} onOpenChange={onOpenChange} modal={isModal}>
|
|
111
119
|
<Dialog.Portal>
|
|
112
|
-
|
|
120
|
+
{isModal ? (
|
|
121
|
+
<Dialog.Overlay
|
|
122
|
+
className={cn(
|
|
123
|
+
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
|
124
|
+
blurBackdrop && "backdrop-blur-sm",
|
|
125
|
+
)}
|
|
126
|
+
/>
|
|
127
|
+
) : (
|
|
128
|
+
// Radix skips Dialog.Overlay when non-modal, so the backdrop is
|
|
129
|
+
// rendered by hand; pointer-events-none keeps outside interactions
|
|
130
|
+
// working (the reason the dialog is non-modal on desktop).
|
|
131
|
+
blurBackdrop && (
|
|
132
|
+
<div
|
|
133
|
+
aria-hidden
|
|
134
|
+
className="pointer-events-none fixed inset-0 z-50 bg-black/80 backdrop-blur-sm animate-in fade-in-0"
|
|
135
|
+
/>
|
|
136
|
+
)
|
|
137
|
+
)}
|
|
113
138
|
<Dialog.Content
|
|
114
139
|
onCloseAutoFocus={() => {
|
|
115
140
|
document.body.style.pointerEvents = ""
|