@caratlogic/design-system 0.1.6 → 0.1.7

package/dist/components/molecules/ConfirmDialog/ConfirmDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmDialog.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/ConfirmDialog/ConfirmDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAEhE,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAoE/C,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,CAAC"}
+{"version":3,"file":"ConfirmDialog.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/ConfirmDialog/ConfirmDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAc1B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAEhE,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAuE/C,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/components/molecules/Modal/Modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Modal/Modal.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAa,MAAM,eAAe,CAAC;AAE3D,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAS3D;;;;GAIG;AACH,wBAAgB,KAAK,CAAC,EACpB,IAAI,EACJ,OAAO,EACP,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,IAAW,EACX,eAAuB,EACvB,SAAS,EACT,aAAa,GACd,EAAE,UAAU,2CA4CZ"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/Modal/Modal.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAa,MAAM,eAAe,CAAC;AAE3D,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAS3D;;;;GAIG;AACH,wBAAgB,KAAK,CAAC,EACpB,IAAI,EACJ,OAAO,EACP,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,IAAW,EACX,eAAuB,EACvB,SAAS,EACT,aAAa,GACd,EAAE,UAAU,2CA8CZ"}

package/dist/index.cjs.js

@@ -4375,13 +4375,19 @@ const notify = {
     promise: sonner.toast.promise.bind(sonner.toast),
 };
 
+/**
+ * Only overlays that actually lock `<body>` count. `[data-radix-popper-content-wrapper]`
+ * is deliberately absent: a tooltip renders into one, so including it made an
+ * open tooltip — say, on the Edit button you just clicked — look like a live
+ * modal and suppress the release, leaving the page unclickable. Modal poppers
+ * (menus, selects) still match through their roles.
+ */
 const OVERLAY_CONTENT_SELECTOR = [
     '[data-slot="dialog-content"]',
     '[role="dialog"]',
     '[role="alertdialog"]',
     '[role="menu"]',
     '[role="listbox"]',
-    '[data-radix-popper-content-wrapper]',
 ].join(',');
 /**
  * `@radix-ui/react-dismissable-layer` keeps the value it must restore to
@@ -4393,6 +4399,36 @@ const OVERLAY_CONTENT_SELECTOR = [
  * Clearing is only safe once nothing is on screen, so this is a no-op while any
  * overlay content is still mounted.
  */
+/**
+ * Watches `<body>` and clears a lock that outlives every overlay.
+ *
+ * The per-overlay hooks handle the normal close path; this is the backstop for
+ * the ones they cannot see — an overlay unmounted by a route change, a layer
+ * combination nobody anticipated, a third-party popup. Returns a disposer.
+ *
+ * Cheap: an attribute-scoped MutationObserver that only reacts when something
+ * actually writes `style` or `data-scroll-locked` on `<body>`.
+ */
+function watchOverlayBodyLock() {
+    if (typeof document === 'undefined')
+        return () => { };
+    let timer;
+    const check = () => {
+        window.clearTimeout(timer);
+        // Outlive the exit animation, so a legitimately-open overlay is still
+        // mounted when `releaseStaleOverlayBodyLock` looks for it.
+        timer = window.setTimeout(() => releaseStaleOverlayBodyLock(), 500);
+    };
+    const observer = new MutationObserver(check);
+    observer.observe(document.body, {
+        attributes: true,
+        attributeFilter: ['style', 'data-scroll-locked'],
+    });
+    return () => {
+        window.clearTimeout(timer);
+        observer.disconnect();
+    };
+}
 function releaseStaleOverlayBodyLock() {
     if (typeof document === 'undefined')
         return;
@@ -12123,6 +12159,9 @@ function useRefundToWallet(open) {
 
 const ConfirmDialog = ({ open, onOpenChange, title, description, info, confirmLabel = 'Yes', cancelLabel = 'Cancel', confirmVariant = 'default', icon: Icon = Trash2, disabled = false, onConfirm, onCancel, }) => {
     const { refundToWallet, setRefundToWallet } = useRefundToWallet(open);
+    // Opened from a modal menu row, two dismissable layers overlap and Radix
+    // restores `pointer-events: none` to <body> on close, freezing the page.
+    useOverlayBodyLockRelease(open);
     return (jsxRuntime.jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: jsxRuntime.jsxs(DialogContent, { className: "gap-3 p-5", children: [jsxRuntime.jsxs(DialogHeader, { className: "gap-1.5", children: [jsxRuntime.jsxs(DialogTitle, { className: "flex items-center gap-2", children: [confirmVariant === 'destructive' && (jsxRuntime.jsx("span", { className: "inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-destructive/10", children: jsxRuntime.jsx(Icon, { className: "h-3.5 w-3.5 text-destructive" }) })), jsxRuntime.jsx("span", { children: title })] }), description && jsxRuntime.jsx(DialogDescription, { children: description }), info && (jsxRuntime.jsx(InfoCard, { info: info, title: title, refundToWallet: refundToWallet, onRefundChange: setRefundToWallet }))] }), jsxRuntime.jsxs(DialogFooter, { className: "mt-1", children: [jsxRuntime.jsx(Button$1, { variant: "outline", onClick: () => {
                                 onCancel?.();
                                 onOpenChange(false);
@@ -28606,6 +28645,8 @@ const SIZE_WIDTH = {
  */
 function Modal({ open, onClose, title, icon, children, footer, size = 'md', hideCloseButton = false, className, bodyClassName, }) {
     const maxWidth = SIZE_WIDTH[size];
+    // See ConfirmDialog: overlapping dismissable layers leak the <body> lock.
+    useOverlayBodyLockRelease(open);
     return (jsxRuntime.jsx(Dialog, { open: open, onOpenChange: (o) => !o && onClose(), children: jsxRuntime.jsxs(DialogContent, { hideCloseButton: true, style: {
                 width: `min(${maxWidth}px, calc(100vw - 2rem))`,
                 maxWidth: `${maxWidth}px`,
@@ -68044,4 +68085,5 @@ exports.useDropdownMenu = useDropdownMenu;
 exports.useNavbar = useNavbar;
 exports.useSidebar = useSidebar;
 exports.videoThumbnailSrc = videoThumbnailSrc;
+exports.watchOverlayBodyLock = watchOverlayBodyLock;
 //# sourceMappingURL=index.cjs.js.map