fix: hide modal close button when not dismissible (#1641)

* fix: hide modal close button when not dismissible

The close button in the modal header now only renders when the modal
is dismissible. This prevents confusion where users see a close button
but the modal cannot be dismissed by clicking outside or pressing Escape.

Changes:
- Add dismissible prop to ModalContext
- Conditionally render close button in ModalHeader based on dismissible
- Add tests to verify close button visibility behavior

* Add changeset

Author: ebbbang

.changeset/social-kings-cut.md

@@ -0,0 +1,5 @@
+---
+"flowbite-react": patch
+---
+
+Ensure modal close button respects dismissible prop

packages/ui/src/components/Modal/Modal.test.tsx

@@ -26,6 +26,34 @@ describe("Components / Modal", () => {
     expect(modal).not.toBeInTheDocument();
   });
 
+  it("should not render close button when modal is not dismissible", async () => {
+    const user = userEvent.setup();
+
+    render(<TestModal />);
+
+    await user.click(triggerButton());
+
+    const modal = dialog();
+    expect(modal).toBeInTheDocument();
+
+    const closeButton = screen.queryByLabelText("Close");
+    expect(closeButton).not.toBeInTheDocument();
+  });
+
+  it("should render close button when modal is dismissible", async () => {
+    const user = userEvent.setup();
+
+    render(<TestModal dismissible />);
+
+    await user.click(triggerButton());
+
+    const modal = dialog();
+    expect(modal).toBeInTheDocument();
+
+    const closeButton = screen.queryByLabelText("Close");
+    expect(closeButton).toBeInTheDocument();
+  });
+
   it("should append to root element when root prop is provided", async () => {
     const root = document.createElement("div");
     const user = userEvent.setup();
@@ -82,7 +110,7 @@ describe("Components / Modal", () => {
     it("should close `Modal` when `Space` is pressed on any of its buttons", async () => {
       const user = userEvent.setup();
 
-      render(<TestModal />);
+      render(<TestModal dismissible />);
 
       const openButton = triggerButton();
 

packages/ui/src/components/Modal/Modal.tsx

@@ -117,6 +117,7 @@ export const Modal = forwardRef<HTMLDivElement, ModalProps>((props, ref) => {
         clearTheme: props.clearTheme,
         applyTheme: props.applyTheme,
         popup,
+        dismissible,
         onClose,
         setHeaderId,
       }}

packages/ui/src/components/Modal/ModalContext.tsx

@@ -6,6 +6,7 @@ import type { ModalTheme } from "./Modal";
 
 export interface ModalContextValue extends ThemingProps<ModalTheme> {
   popup?: boolean;
+  dismissible?: boolean;
   setHeaderId: (id: string | undefined) => void;
   onClose?: () => void;
 }

packages/ui/src/components/Modal/ModalHeader.tsx

@@ -31,6 +31,7 @@ export const ModalHeader = forwardRef<HTMLDivElement, ModalHeaderProps>((props,
     clearTheme: rootClearTheme,
     applyTheme: rootApplyTheme,
     popup,
+    dismissible,
     onClose,
     setHeaderId,
   } = useModalContext();
@@ -64,9 +65,11 @@ export const ModalHeader = forwardRef<HTMLDivElement, ModalHeaderProps>((props,
       <Component id={headerId} className={theme.title}>
         {children}
       </Component>
-      <button aria-label="Close" className={theme.close.base} type="button" onClick={onClose}>
-        <OutlineXIcon aria-hidden className={theme.close.icon} />
-      </button>
+      {dismissible && (
+        <button aria-label="Close" className={theme.close.base} type="button" onClick={onClose}>
+          <OutlineXIcon aria-hidden className={theme.close.icon} />
+        </button>
+      )}
     </div>
   );
 });