@cosmoops/connect-sdk 0.24.0 → 0.24.1

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 `@cosmoops/connect-sdk` follows semver, with the 0.x convention that **minor
 versions may carry breaking changes** and patch versions never do.
 
+## 0.24.1
+
+### Fixed
+
+- **`<ConnectConfirmDialog />` never opened.** Its trigger was wrapped in
+  `Modal.Trigger`, which renders a `div role="button"` inside React Aria's
+  `Pressable` and depends on a plain `onClick` bubbling up to it. A React Aria
+  button nested inside - which every real trigger is, including HeroUI's
+  `<Button>` - calls `e.stopPropagation()` in its own `usePress` click
+  handler, so the click never arrived. Nothing threw and nothing warned; the
+  press was simply eaten, and every confirmation in every app built on this
+  SDK was inert. Twelve of them across the two reference apps: each delete
+  confirmation in the CRM, and each in the club app.
+
+  The trigger is now a direct child of the `Modal` root, which is React Aria's
+  `DialogTrigger`. Its `PressResponder` picks the trigger up directly, so
+  there is no nested pressable and no propagation to lose.
+
+  No call site changes. The prop's contract is now stated the right way round:
+  the trigger **must** be a pressable - a HeroUI `Button`, or anything else
+  built on React Aria's `useButton`. A non-pressable element (a bare `<span>`)
+  used to be the only thing that worked and now does not; nothing shipped
+  passes one.
+
 ## 0.24.0
 
 ### Fixed

package/dist/cjs/client/components/confirm-dialog.js

@@ -19,11 +19,19 @@ const react_2 = require("@heroui/react");
  * rejection is caught here rather than escaping - an error thrown out of an
  * async transition reaches the nearest error boundary and takes the page down.
  *
- * The anatomy is HeroUI's: `Modal.Backdrop` owns the open state,
- * `Modal.Container` the sizing, `Modal.Dialog` the focus trap. The trigger
- * goes inside `Modal.Trigger`, which *is* a React Aria button - so pass a
- * plain element, never a `<Button>`, or the nested button swallows the press
- * and the dialog silently never opens.
+ * The anatomy is HeroUI's: the `Modal` root owns the open state,
+ * `Modal.Container` the sizing, `Modal.Dialog` the focus trap. **The trigger
+ * is a direct child of the root**, never wrapped in `Modal.Trigger`.
+ *
+ * That wrapping is what this component used to do, and it meant the dialog
+ * never opened for any caller passing a `<Button>` - which was all of them.
+ * `Modal.Trigger` renders a `div role="button"` inside React Aria's
+ * `Pressable` and relies on a plain `onClick` bubbling up to it; a React Aria
+ * button nested inside calls `e.stopPropagation()` in its own `usePress`
+ * click handler, so the click never arrives. Nothing failed loudly - the
+ * press was simply eaten. The root is `DialogTrigger`, whose `PressResponder`
+ * the trigger registers with directly, so there is no nesting and no
+ * propagation to lose.
  */
 function ConnectConfirmDialog({ trigger, title, description, confirmLabel = "Confirm", cancelLabel = "Cancel", tone = "danger", onConfirm, }) {
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
@@ -36,5 +44,5 @@ function ConnectConfirmDialog({ trigger, title, description, confirmLabel = "Con
             // caller, which owns the toast and the rollback.
         });
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.Modal.Trigger, { onClick: () => setIsOpen(true), children: trigger }), (0, jsx_runtime_1.jsx)(react_2.Modal.Backdrop, { isOpen: isOpen, onOpenChange: setIsOpen, children: (0, jsx_runtime_1.jsx)(react_2.Modal.Container, { size: "sm", children: (0, jsx_runtime_1.jsxs)(react_2.Modal.Dialog, { children: [(0, jsx_runtime_1.jsx)(react_2.Modal.CloseTrigger, { onPress: () => setIsOpen(false) }), (0, jsx_runtime_1.jsx)(react_2.Modal.Header, { children: (0, jsx_runtime_1.jsx)(react_2.Modal.Heading, { children: title }) }), description && ((0, jsx_runtime_1.jsx)(react_2.Modal.Body, { children: (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-muted", children: description }) })), (0, jsx_runtime_1.jsxs)(react_2.Modal.Footer, { children: [(0, jsx_runtime_1.jsx)(react_2.Button, { variant: "secondary", onPress: () => setIsOpen(false), children: cancelLabel }), (0, jsx_runtime_1.jsx)(react_2.Button, { variant: tone === "danger" ? "danger" : "primary", onPress: confirm, children: confirmLabel })] })] }) }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_2.Modal, { isOpen: isOpen, onOpenChange: setIsOpen, children: [trigger, (0, jsx_runtime_1.jsx)(react_2.Modal.Backdrop, { children: (0, jsx_runtime_1.jsx)(react_2.Modal.Container, { size: "sm", children: (0, jsx_runtime_1.jsxs)(react_2.Modal.Dialog, { children: [(0, jsx_runtime_1.jsx)(react_2.Modal.CloseTrigger, { onPress: () => setIsOpen(false) }), (0, jsx_runtime_1.jsx)(react_2.Modal.Header, { children: (0, jsx_runtime_1.jsx)(react_2.Modal.Heading, { children: title }) }), description && ((0, jsx_runtime_1.jsx)(react_2.Modal.Body, { children: (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-muted", children: description }) })), (0, jsx_runtime_1.jsxs)(react_2.Modal.Footer, { children: [(0, jsx_runtime_1.jsx)(react_2.Button, { variant: "secondary", onPress: () => setIsOpen(false), children: cancelLabel }), (0, jsx_runtime_1.jsx)(react_2.Button, { variant: tone === "danger" ? "danger" : "primary", onPress: confirm, children: confirmLabel })] })] }) }) })] }));
 }

package/dist/cjs/server/client.js

@@ -161,4 +161,4 @@ class ConnectClient {
 }
 exports.ConnectClient = ConnectClient;
 /** Kept in step with `package.json` by `sdk.test.ts`. */
-exports.SDK_VERSION = "0.24.0";
+exports.SDK_VERSION = "0.24.1";

package/dist/esm/client/components/confirm-dialog.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { Button, Modal } from "@heroui/react";
 /**
@@ -16,11 +16,19 @@ import { Button, Modal } from "@heroui/react";
  * rejection is caught here rather than escaping - an error thrown out of an
  * async transition reaches the nearest error boundary and takes the page down.
  *
- * The anatomy is HeroUI's: `Modal.Backdrop` owns the open state,
- * `Modal.Container` the sizing, `Modal.Dialog` the focus trap. The trigger
- * goes inside `Modal.Trigger`, which *is* a React Aria button - so pass a
- * plain element, never a `<Button>`, or the nested button swallows the press
- * and the dialog silently never opens.
+ * The anatomy is HeroUI's: the `Modal` root owns the open state,
+ * `Modal.Container` the sizing, `Modal.Dialog` the focus trap. **The trigger
+ * is a direct child of the root**, never wrapped in `Modal.Trigger`.
+ *
+ * That wrapping is what this component used to do, and it meant the dialog
+ * never opened for any caller passing a `<Button>` - which was all of them.
+ * `Modal.Trigger` renders a `div role="button"` inside React Aria's
+ * `Pressable` and relies on a plain `onClick` bubbling up to it; a React Aria
+ * button nested inside calls `e.stopPropagation()` in its own `usePress`
+ * click handler, so the click never arrives. Nothing failed loudly - the
+ * press was simply eaten. The root is `DialogTrigger`, whose `PressResponder`
+ * the trigger registers with directly, so there is no nesting and no
+ * propagation to lose.
  */
 export function ConnectConfirmDialog({ trigger, title, description, confirmLabel = "Confirm", cancelLabel = "Cancel", tone = "danger", onConfirm, }) {
     const [isOpen, setIsOpen] = useState(false);
@@ -33,5 +41,5 @@ export function ConnectConfirmDialog({ trigger, title, description, confirmLabel
             // caller, which owns the toast and the rollback.
         });
     };
-    return (_jsxs(_Fragment, { children: [_jsx(Modal.Trigger, { onClick: () => setIsOpen(true), children: trigger }), _jsx(Modal.Backdrop, { isOpen: isOpen, onOpenChange: setIsOpen, children: _jsx(Modal.Container, { size: "sm", children: _jsxs(Modal.Dialog, { children: [_jsx(Modal.CloseTrigger, { onPress: () => setIsOpen(false) }), _jsx(Modal.Header, { children: _jsx(Modal.Heading, { children: title }) }), description && (_jsx(Modal.Body, { children: _jsx("p", { className: "text-sm text-muted", children: description }) })), _jsxs(Modal.Footer, { children: [_jsx(Button, { variant: "secondary", onPress: () => setIsOpen(false), children: cancelLabel }), _jsx(Button, { variant: tone === "danger" ? "danger" : "primary", onPress: confirm, children: confirmLabel })] })] }) }) })] }));
+    return (_jsxs(Modal, { isOpen: isOpen, onOpenChange: setIsOpen, children: [trigger, _jsx(Modal.Backdrop, { children: _jsx(Modal.Container, { size: "sm", children: _jsxs(Modal.Dialog, { children: [_jsx(Modal.CloseTrigger, { onPress: () => setIsOpen(false) }), _jsx(Modal.Header, { children: _jsx(Modal.Heading, { children: title }) }), description && (_jsx(Modal.Body, { children: _jsx("p", { className: "text-sm text-muted", children: description }) })), _jsxs(Modal.Footer, { children: [_jsx(Button, { variant: "secondary", onPress: () => setIsOpen(false), children: cancelLabel }), _jsx(Button, { variant: tone === "danger" ? "danger" : "primary", onPress: confirm, children: confirmLabel })] })] }) }) })] }));
 }

package/dist/esm/server/client.js

@@ -157,4 +157,4 @@ export class ConnectClient {
     }
 }
 /** Kept in step with `package.json` by `sdk.test.ts`. */
-export const SDK_VERSION = "0.24.0";
+export const SDK_VERSION = "0.24.1";

package/dist/types/client/components/confirm-dialog.d.ts

@@ -1,6 +1,13 @@
 import { type ReactNode } from "react";
 export interface ConnectConfirmDialogProps {
-    /** The control that opens it. Rendered inside `Modal.Trigger`. */
+    /**
+     * The control that opens it, and it **must be a pressable** - a HeroUI
+     * `Button`, or anything else built on React Aria's `useButton`. It is
+     * rendered as a direct child of the `Modal` root, which is React Aria's
+     * `DialogTrigger`: that puts a `PressResponder` around its children and the
+     * trigger registers with it. A plain `<span>` never registers, and React
+     * Aria warns that the responder has no pressable child.
+     */
     trigger: ReactNode;
     title: ReactNode;
     /** What will happen, in the user's words. Name the thing being acted on. */
@@ -25,10 +32,18 @@ export interface ConnectConfirmDialogProps {
  * rejection is caught here rather than escaping - an error thrown out of an
  * async transition reaches the nearest error boundary and takes the page down.
  *
- * The anatomy is HeroUI's: `Modal.Backdrop` owns the open state,
- * `Modal.Container` the sizing, `Modal.Dialog` the focus trap. The trigger
- * goes inside `Modal.Trigger`, which *is* a React Aria button - so pass a
- * plain element, never a `<Button>`, or the nested button swallows the press
- * and the dialog silently never opens.
+ * The anatomy is HeroUI's: the `Modal` root owns the open state,
+ * `Modal.Container` the sizing, `Modal.Dialog` the focus trap. **The trigger
+ * is a direct child of the root**, never wrapped in `Modal.Trigger`.
+ *
+ * That wrapping is what this component used to do, and it meant the dialog
+ * never opened for any caller passing a `<Button>` - which was all of them.
+ * `Modal.Trigger` renders a `div role="button"` inside React Aria's
+ * `Pressable` and relies on a plain `onClick` bubbling up to it; a React Aria
+ * button nested inside calls `e.stopPropagation()` in its own `usePress`
+ * click handler, so the click never arrives. Nothing failed loudly - the
+ * press was simply eaten. The root is `DialogTrigger`, whose `PressResponder`
+ * the trigger registers with directly, so there is no nesting and no
+ * propagation to lose.
  */
 export declare function ConnectConfirmDialog({ trigger, title, description, confirmLabel, cancelLabel, tone, onConfirm, }: Readonly<ConnectConfirmDialogProps>): import("react").JSX.Element;

package/dist/types/server/client.d.ts

@@ -123,4 +123,4 @@ export declare class ConnectClient {
     constructor(options: ConnectClientOptions);
 }
 /** Kept in step with `package.json` by `sdk.test.ts`. */
-export declare const SDK_VERSION = "0.24.0";
+export declare const SDK_VERSION = "0.24.1";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosmoops/connect-sdk",
-  "version": "0.24.0",
+  "version": "0.24.1",
   "description": "Official server-side SDK for the CosmoOps Connect platform API - Login with Connect, entitlements, billing and metering.",
   "license": "SEE LICENSE IN LICENSE",
   "type": "commonjs",