From b13d78de4b3d9448dfbe6d3463ce2fdd929fb2f8 Mon Sep 17 00:00:00 2001
From: sirineJ <112706079+sirineJ@users.noreply.github.com>
Date: Wed, 18 Dec 2024 17:20:43 +0100
Subject: [PATCH] refactor hasNativeDialogSupport

---
 .../components/Modal/Modal.spec.tsx           | 32 +++++++------------
 .../circuit-ui/components/Modal/Modal.tsx     |  8 ++---
 .../components/Modal/ModalService.ts          |  3 --
 3 files changed, 15 insertions(+), 28 deletions(-)

diff --git a/packages/circuit-ui/components/Modal/Modal.spec.tsx b/packages/circuit-ui/components/Modal/Modal.spec.tsx
index 6e8a97e22d..16913f49d3 100644
--- a/packages/circuit-ui/components/Modal/Modal.spec.tsx
+++ b/packages/circuit-ui/components/Modal/Modal.spec.tsx
@@ -13,15 +13,7 @@
  * limitations under the License.
  */
 
-import {
-  beforeEach,
-  afterEach,
-  describe,
-  expect,
-  it,
-  vi,
-  type Mock,
-} from 'vitest';
+import { beforeEach, afterEach, describe, expect, it, vi } from 'vitest';
 import { createRef } from 'react';
 
 import {
@@ -34,15 +26,6 @@ import {
 } from '../../util/test-utils.js';
 
 import { ANIMATION_DURATION, Modal } from './Modal.js';
-import { hasNativeDialogSupport } from './ModalService.js';
-
-vi.mock('./ModalService.js', async (importOriginal) => {
-  const module = await importOriginal<typeof import('./ModalService.js')>();
-  return {
-    ...module,
-    hasNativeDialogSupport: vi.fn().mockReturnValue(true),
-  };
-});
 
 describe('Modal', () => {
   const props = {
@@ -53,16 +36,21 @@ describe('Modal', () => {
       <div data-testid="children">Modal dialog content</div>
     )),
   };
+  let originalHTMLDialogElement: typeof window.HTMLDialogElement;
 
   beforeEach(() => {
+    originalHTMLDialogElement = window.HTMLDialogElement;
     vi.useFakeTimers({ shouldAdvanceTime: true });
-    (hasNativeDialogSupport as Mock).mockReturnValue(true);
   });
 
   afterEach(() => {
     vi.runOnlyPendingTimers();
     vi.useRealTimers();
     vi.clearAllMocks();
+    Object.defineProperty(window, 'HTMLDialogElement', {
+      writable: true,
+      value: originalHTMLDialogElement,
+    });
   });
 
   it('should forward a ref', () => {
@@ -185,7 +173,11 @@ describe('Modal', () => {
     });
 
     it('should remove animation classes when closed when polyfill is used', async () => {
-      (hasNativeDialogSupport as Mock).mockReturnValue(false);
+      Object.defineProperty(window, 'HTMLDialogElement', {
+        writable: true,
+        value: undefined,
+      });
+
       render(<Modal {...props} open />);
       const dialog = screen.getByRole('dialog', { hidden: true });
 
diff --git a/packages/circuit-ui/components/Modal/Modal.tsx b/packages/circuit-ui/components/Modal/Modal.tsx
index 4d9b93886c..2c1697bc74 100644
--- a/packages/circuit-ui/components/Modal/Modal.tsx
+++ b/packages/circuit-ui/components/Modal/Modal.tsx
@@ -37,10 +37,7 @@ import type { Locale } from '../../util/i18n.js';
 import { useScrollLock } from '../../hooks/useScrollLock/useScrollLock.js';
 
 import classes from './Modal.module.css';
-import {
-  getFirstFocusableElement,
-  hasNativeDialogSupport,
-} from './ModalService.js';
+import { getFirstFocusableElement } from './ModalService.js';
 import { translations } from './translations/index.js';
 
 type DataAttribute = `data-${string}`;
@@ -122,7 +119,8 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>((props, ref) => {
     }
   }
 
-  const hasNativeDialog = hasNativeDialogSupport();
+  // eslint-disable-next-line compat/compat
+  const hasNativeDialog = window.HTMLDialogElement !== undefined;
 
   useScrollLock(open);
 
diff --git a/packages/circuit-ui/components/Modal/ModalService.ts b/packages/circuit-ui/components/Modal/ModalService.ts
index 694d908bdd..ce4edd4d2f 100644
--- a/packages/circuit-ui/components/Modal/ModalService.ts
+++ b/packages/circuit-ui/components/Modal/ModalService.ts
@@ -52,6 +52,3 @@ export function getFirstFocusableElement(
     ? focusableElements[0]
     : focusableElements[1];
 }
-
-export const hasNativeDialogSupport = (): boolean =>
-  'HTMLDialogElement' in window;