@tangle-network/ui 11.13.1 → 11.14.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @tangle-network/ui
 
+## 11.14.0
+
+### Minor Changes
+
+- 999438e: Add DialogContent hideCloseButton with a false default. It hides only the built-in close button, preserving Radix dismissal handlers, explicit close actions, variants and refs. Callers that require an explicit choice must still guard Escape/outside events and provide an accessible cancel or completion action.
+
 ## 11.13.1
 
 ### Patch Changes

package/dist/primitives/dialog.d.ts

@@ -8,6 +8,12 @@ declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.Dialo
 declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const DialogContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
   variant?: "default" | "sandbox";
+  /**
+   * Hide only the built-in close button. Escape/outside dismissal still follows
+   * Radix's handlers; prevent those events explicitly when a choice is required
+   * and provide an accessible way to finish or cancel the operation.
+   */
+  hideCloseButton?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
 declare function DialogHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
 declare namespace DialogHeader {

package/dist/primitives/dialog.js

@@ -15,7 +15,7 @@ const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__P
 	...props
 }));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-const DialogContent = React.forwardRef(({ className, children, variant = "default", ...props }, ref) => {
+const DialogContent = React.forwardRef(({ className, children, variant = "default", hideCloseButton = false, ...props }, ref) => {
 	return /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsxs(DialogPrimitive.Content, {
 		ref,
 		className: cn("fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%]", "gap-4 rounded-lg border bg-card p-6 shadow-lg duration-200", "data-[state=closed]:animate-out data-[state=open]:animate-in", "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95", "data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]", "data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]", {
@@ -23,7 +23,7 @@ const DialogContent = React.forwardRef(({ className, children, variant = "defaul
 			sandbox: "border-[var(--border-accent)] shadow-[var(--shadow-accent)]"
 		}[variant], className),
 		...props,
-		children: [children, /* @__PURE__ */ jsxs(DialogPrimitive.Close, {
+		children: [children, !hideCloseButton && /* @__PURE__ */ jsxs(DialogPrimitive.Close, {
 			className: cn("absolute top-4 right-4 rounded-sm opacity-70 transition-[opacity,box-shadow] hover:opacity-100 focus-visible:opacity-100 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", focusRing),
 			children: [/* @__PURE__ */ jsx(X, { className: "h-4 w-4" }), /* @__PURE__ */ jsx("span", {
 				className: "sr-only",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.13.1",
+  "version": "11.14.0",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",

package/src/primitives/dialog-dismissal.stories.tsx

@@ -0,0 +1,48 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "./button";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "./dialog";
+
+const meta = {
+  title: "Primitives/Dialog/Dismissal",
+  component: DialogContent,
+  parameters: { layout: "centered" },
+} satisfies Meta<typeof DialogContent>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function ExplicitChoiceExample() {
+  const [open, setOpen] = useState(false);
+  const [choice, setChoice] = useState("No choice recorded.");
+  const finish = (value: string) => {
+    setChoice(value);
+    setOpen(false);
+  };
+  return (
+    <div className="space-y-4">
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogTrigger asChild><Button>Review operation</Button></DialogTrigger>
+        <DialogContent
+          hideCloseButton
+          onEscapeKeyDown={(event) => event.preventDefault()}
+          onInteractOutside={(event) => event.preventDefault()}
+        >
+          <DialogHeader>
+            <DialogTitle>Continue this operation?</DialogTitle>
+            <DialogDescription>
+              This example requires an explicit choice. Hiding the close button
+              alone does not block Escape or outside dismissal; these handlers do.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => finish("Cancelled in this example.")}>Cancel</Button>
+            <Button onClick={() => finish("Confirmed in this example.")}>Confirm</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+      <output className="block text-sm text-muted-foreground" aria-live="polite">{choice}</output>
+    </div>
+  );
+}
+
+export const ExplicitChoice: Story = { render: () => <ExplicitChoiceExample /> };

package/src/primitives/dialog.test.tsx

@@ -0,0 +1,75 @@
+import { createRef, type ComponentProps } from "react";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogTitle } from "./dialog";
+
+function Example(props: ComponentProps<typeof DialogContent>) {
+  return (
+    <Dialog defaultOpen>
+      <DialogContent {...props}>
+        <DialogTitle>Confirm operation</DialogTitle>
+        <DialogDescription>Choose whether to continue.</DialogDescription>
+        <DialogClose asChild><button type="button">Cancel operation</button></DialogClose>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+describe("DialogContent close-button visibility", () => {
+  it("retains the default accessible close button and its dismissal behavior", async () => {
+    const user = userEvent.setup();
+    render(<Example />);
+    expect(screen.getByRole("dialog", { name: "Confirm operation" })).toBeInTheDocument();
+    await user.click(screen.getByRole("button", { name: "Close", exact: true }));
+    await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull());
+  });
+
+  it.each(["default", "sandbox"] as const)("hides only the built-in button for the %s variant", async (variant) => {
+    const user = userEvent.setup();
+    render(<Example hideCloseButton variant={variant} />);
+    expect(screen.queryByRole("button", { name: "Close", exact: true })).toBeNull();
+    expect(screen.getByRole("dialog")).not.toHaveAttribute("hideCloseButton");
+    expect(screen.getByRole("dialog")).toHaveAccessibleDescription("Choose whether to continue.");
+    await user.click(screen.getByRole("button", { name: "Cancel operation" }));
+    await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull());
+  });
+
+  it("restores the same default button when visibility changes", () => {
+    const { rerender } = render(<Example hideCloseButton />);
+    expect(screen.queryByRole("button", { name: "Close", exact: true })).toBeNull();
+    rerender(<Example hideCloseButton={false} />);
+    expect(screen.getByRole("button", { name: "Close", exact: true })).toBeInTheDocument();
+    rerender(<Example hideCloseButton />);
+    expect(screen.queryByRole("button", { name: "Close", exact: true })).toBeNull();
+  });
+
+  it("does not silently disable Escape when the close button is hidden", async () => {
+    const user = userEvent.setup();
+    render(<Example hideCloseButton />);
+    await user.keyboard("{Escape}");
+    await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull());
+  });
+
+  it("preserves the caller's Escape guard and an explicit keyboard-operable exit", async () => {
+    const user = userEvent.setup();
+    const guard = vi.fn((event: KeyboardEvent) => event.preventDefault());
+    render(<Example hideCloseButton onEscapeKeyDown={guard} />);
+    await user.keyboard("{Escape}");
+    expect(guard).toHaveBeenCalledOnce();
+    expect(screen.getByRole("dialog")).toBeInTheDocument();
+    screen.getByRole("button", { name: "Cancel operation" }).focus();
+    await user.keyboard("{Enter}");
+    await waitFor(() => expect(screen.queryByRole("dialog")).toBeNull());
+  });
+
+  it("forwards content refs, native attributes and class overrides", () => {
+    const ref = createRef<HTMLDivElement>();
+    render(<Example ref={ref} hideCloseButton id="operation-dialog" data-example="retained" className="max-w-xl" />);
+    const dialog = screen.getByRole("dialog");
+    expect(ref.current).toBe(dialog);
+    expect(dialog).toHaveAttribute("id", "operation-dialog");
+    expect(dialog).toHaveAttribute("data-example", "retained");
+    expect(dialog).toHaveClass("max-w-xl");
+  });
+});

package/src/primitives/dialog.tsx

@@ -33,8 +33,14 @@ const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
     variant?: "default" | "sandbox";
+    /**
+     * Hide only the built-in close button. Escape/outside dismissal still follows
+     * Radix's handlers; prevent those events explicitly when a choice is required
+     * and provide an accessible way to finish or cancel the operation.
+     */
+    hideCloseButton?: boolean;
   }
->(({ className, children, variant = "default", ...props }, ref) => {
+>(({ className, children, variant = "default", hideCloseButton = false, ...props }, ref) => {
   const variants = {
     default: "border-border",
     sandbox: "border-[var(--border-accent)] shadow-[var(--shadow-accent)]",
@@ -59,15 +65,17 @@ const DialogContent = React.forwardRef<
         {...props}
       >
         {children}
-        <DialogPrimitive.Close
-          className={cn(
-            "absolute top-4 right-4 rounded-sm opacity-70 transition-[opacity,box-shadow] hover:opacity-100 focus-visible:opacity-100 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
-            focusRing,
-          )}
-        >
-          <X className="h-4 w-4" />
-          <span className="sr-only">Close</span>
-        </DialogPrimitive.Close>
+        {!hideCloseButton && (
+          <DialogPrimitive.Close
+            className={cn(
+              "absolute top-4 right-4 rounded-sm opacity-70 transition-[opacity,box-shadow] hover:opacity-100 focus-visible:opacity-100 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
+              focusRing,
+            )}
+          >
+            <X className="h-4 w-4" />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
       </DialogPrimitive.Content>
     </DialogPortal>
   );