@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.
|
@@ -29,6 +29,11 @@ export interface BaseDialogProps {
|
|
|
29
29
|
* modal so the bottom-sheet behaves. Pass explicitly to override.
|
|
30
30
|
*/
|
|
31
31
|
modal?: boolean;
|
|
32
|
+
/**
|
|
33
|
+
* Applies backdrop-blur to the overlay behind the dialog.
|
|
34
|
+
* Defaults to true; pass false to keep the plain scrim.
|
|
35
|
+
*/
|
|
36
|
+
blurBackdrop?: boolean;
|
|
32
37
|
/**
|
|
33
38
|
* Advanced: wraps the dialog's inner content (header + body + footer) inside
|
|
34
39
|
* Content. Used by FormDialog to inject a <form>. Defaults to identity.
|
|
@@ -45,6 +50,6 @@ export interface BaseDialogProps {
|
|
|
45
50
|
* can persist after closing a dialog that contained a Select/Popover,
|
|
46
51
|
* which would otherwise make the rest of the page unclickable.
|
|
47
52
|
*/
|
|
48
|
-
export declare function BaseDialog({ open, onOpenChange, title, description, children, footer, size, className, modal, contentWrapper, }: BaseDialogProps): React.JSX.Element;
|
|
53
|
+
export declare function BaseDialog({ open, onOpenChange, title, description, children, footer, size, className, modal, blurBackdrop, contentWrapper, }: BaseDialogProps): React.JSX.Element;
|
|
49
54
|
export {};
|
|
50
55
|
//# sourceMappingURL=base-dialog.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base-dialog.d.ts","sourceRoot":"","sources":["../../src/components/base-dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKtC,QAAA,MAAM,WAAW;;;;;;;;;;;CAWP,CAAA;AAEV,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,WAAW,CAAA;AAErD,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,QAAQ,EAAE,SAAS,CAAA;IACnB,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,SAAS,KAAK,SAAS,CAAA;CACnD;AAED;;;;;;;;;GASG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,WAAW,EACX,QAAQ,EACR,MAAM,EACN,IAAW,EACX,SAAS,EACT,KAAK,EACL,cAAqC,GACtC,EAAE,eAAe,
|
|
1
|
+
{"version":3,"file":"base-dialog.d.ts","sourceRoot":"","sources":["../../src/components/base-dialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKtC,QAAA,MAAM,WAAW;;;;;;;;;;;CAWP,CAAA;AAEV,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,WAAW,CAAA;AAErD,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,KAAK,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,QAAQ,EAAE,SAAS,CAAA;IACnB,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,SAAS,KAAK,SAAS,CAAA;CACnD;AAED;;;;;;;;;GASG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,WAAW,EACX,QAAQ,EACR,MAAM,EACN,IAAW,EACX,SAAS,EACT,KAAK,EACL,YAAmB,EACnB,cAAqC,GACtC,EAAE,eAAe,qBAkFjB"}
|
package/dist/index.cjs
CHANGED
|
@@ -497,6 +497,7 @@ function BaseDialog({
|
|
|
497
497
|
size = "lg",
|
|
498
498
|
className,
|
|
499
499
|
modal,
|
|
500
|
+
blurBackdrop = true,
|
|
500
501
|
contentWrapper = (content) => content
|
|
501
502
|
}) {
|
|
502
503
|
const isDesktop = useIsDesktop();
|
|
@@ -527,8 +528,28 @@ function BaseDialog({
|
|
|
527
528
|
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "min-h-0 flex-1 overflow-y-auto px-6 py-4", children }),
|
|
528
529
|
footer && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex shrink-0 flex-col-reverse gap-2 border-t px-6 py-3 sm:flex-row sm:justify-end", children: footer })
|
|
529
530
|
] });
|
|
530
|
-
|
|
531
|
-
|
|
531
|
+
const isModal = modal ?? !isDesktop;
|
|
532
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Dialog.Root, { open, onOpenChange, modal: isModal, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Dialog.Portal, { children: [
|
|
533
|
+
isModal ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
534
|
+
Dialog.Overlay,
|
|
535
|
+
{
|
|
536
|
+
className: cn(
|
|
537
|
+
"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",
|
|
538
|
+
blurBackdrop && "backdrop-blur-sm"
|
|
539
|
+
)
|
|
540
|
+
}
|
|
541
|
+
) : (
|
|
542
|
+
// Radix skips Dialog.Overlay when non-modal, so the backdrop is
|
|
543
|
+
// rendered by hand; pointer-events-none keeps outside interactions
|
|
544
|
+
// working (the reason the dialog is non-modal on desktop).
|
|
545
|
+
blurBackdrop && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
546
|
+
"div",
|
|
547
|
+
{
|
|
548
|
+
"aria-hidden": true,
|
|
549
|
+
className: "pointer-events-none fixed inset-0 z-50 bg-black/80 backdrop-blur-sm animate-in fade-in-0"
|
|
550
|
+
}
|
|
551
|
+
)
|
|
552
|
+
),
|
|
532
553
|
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
533
554
|
Dialog.Content,
|
|
534
555
|
{
|