refactor: rewrite wrapFocus utils in typescript

Author: adamalston

packages/react/src/components/ComposedModal/ComposedModal.tsx

@@ -1,3 +1,10 @@
+/**
+ * Copyright IBM Corp. 2021, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 import React, {
   useRef,
   useEffect,
@@ -23,8 +30,9 @@ import mergeRefs from '../../tools/mergeRefs';
 import cx from 'classnames';
 import toggleClass from '../../tools/toggleClass';
 import requiredIfGivenPropIsTruthy from '../../prop-types/requiredIfGivenPropIsTruthy';
-import wrapFocus, {
+import {
   elementOrParentIsFloatingMenu,
+  wrapFocus,
 } from '../../internal/wrapFocus';
 import { usePrefix } from '../../internal/usePrefix';
 import { keys, match } from '../../internal/keyboard';
@@ -299,11 +307,12 @@ const ComposedModal = React.forwardRef<HTMLDivElement, ComposedModalProps>(
     }
 
     function handleOnClick(evt: React.MouseEvent<HTMLDivElement>) {
-      const target = evt.target as Node;
-      const mouseDownTarget = onMouseDownTarget.current as Node;
+      const { target } = evt;
+      const mouseDownTarget = onMouseDownTarget.current;
       evt.stopPropagation();
       if (
         !preventCloseOnClickOutside &&
+        target instanceof Node &&
         !elementOrParentIsFloatingMenu(target, selectorsFloatingMenus) &&
         innerModal.current &&
         !innerModal.current.contains(target) &&
@@ -327,9 +336,7 @@ const ComposedModal = React.forwardRef<HTMLDivElement, ComposedModalProps>(
           endTrapNode: endSentinelNode,
           currentActiveNode,
           oldActiveNode,
-          selectorsFloatingMenus: selectorsFloatingMenus?.filter(
-            Boolean
-          ) as string[],
+          selectorsFloatingMenus: selectorsFloatingMenus?.filter(Boolean),
         });
       }
     }

packages/react/src/components/Modal/Modal.tsx

@@ -21,8 +21,9 @@ import ButtonSet from '../ButtonSet';
 import InlineLoading from '../InlineLoading';
 import { Layer } from '../Layer';
 import requiredIfGivenPropIsTruthy from '../../prop-types/requiredIfGivenPropIsTruthy';
-import wrapFocus, {
+import {
   elementOrParentIsFloatingMenu,
+  wrapFocus,
 } from '../../internal/wrapFocus';
 import { debounce } from 'es-toolkit/compat';
 import useIsomorphicEffect from '../../internal/useIsomorphicEffect';
@@ -316,10 +317,11 @@ const Modal = React.forwardRef(function Modal(
   }
 
   function handleOnClick(evt: React.MouseEvent<HTMLDivElement>) {
-    const target = evt.target as Node;
+    const { target } = evt;
     evt.stopPropagation();
     if (
       !preventCloseOnClickOutside &&
+      target instanceof Node &&
       !elementOrParentIsFloatingMenu(target, selectorsFloatingMenus) &&
       innerModal.current &&
       !innerModal.current.contains(target)
@@ -332,7 +334,11 @@ const Modal = React.forwardRef(function Modal(
     target: oldActiveNode,
     relatedTarget: currentActiveNode,
   }: React.FocusEvent<HTMLDivElement>) {
-    if (open && currentActiveNode && oldActiveNode) {
+    if (
+      open &&
+      oldActiveNode instanceof HTMLElement &&
+      currentActiveNode instanceof HTMLElement
+    ) {
       const { current: bodyNode } = innerModal;
       const { current: startTrapNode } = startTrap;
       const { current: endTrapNode } = endTrap;

packages/react/src/components/Notification/Notification.tsx

@@ -38,7 +38,7 @@ import { keys, matches, match } from '../../internal/keyboard';
 import { usePrefix } from '../../internal/usePrefix';
 import { useId } from '../../internal/useId';
 import { noopFn } from '../../internal/noopFn';
-import wrapFocus, { wrapFocusWithoutSentinels } from '../../internal/wrapFocus';
+import { wrapFocus, wrapFocusWithoutSentinels } from '../../internal/wrapFocus';
 import { useFeatureFlag } from '../FeatureFlags';
 import { warning } from '../../internal/warning';
 import deprecateValuesWithin from '../../prop-types/deprecateValuesWithin';

packages/react/src/internal/FloatingMenu.tsx

@@ -26,7 +26,7 @@ import { OptimizedResize } from './OptimizedResize';
 import { selectorFocusable, selectorTabbable } from './keyboard/navigation';
 import { PrefixContext } from './usePrefix';
 import { warning } from './warning';
-import wrapFocus, { wrapFocusWithoutSentinels } from './wrapFocus';
+import { wrapFocus, wrapFocusWithoutSentinels } from './wrapFocus';
 
 export const DIRECTION_LEFT = 'left';
 export const DIRECTION_TOP = 'top';
@@ -452,18 +452,22 @@ export const FloatingMenu = ({
   /**
    * Blur handler used when focus trapping is enabled.
    */
-  const handleBlur = (event: FocusEvent<HTMLDivElement>) => {
+  const handleBlur = (event: React.FocusEvent<HTMLDivElement>) => {
+    const { target, relatedTarget } = event;
+
     if (
       menuBodyRef.current &&
       startSentinelRef.current &&
-      endSentinelRef.current
+      endSentinelRef.current &&
+      target instanceof HTMLElement &&
+      relatedTarget instanceof HTMLElement
     ) {
       wrapFocus({
         bodyNode: menuBodyRef.current,
         startTrapNode: startSentinelRef.current,
         endTrapNode: endSentinelRef.current,
-        currentActiveNode: event.relatedTarget as HTMLElement,
-        oldActiveNode: event.target,
+        currentActiveNode: relatedTarget,
+        oldActiveNode: target,
       });
     }
   };
@@ -472,7 +476,11 @@ export const FloatingMenu = ({
    * Keydown handler for focus wrapping when experimental focus trap is enabled.
    */
   const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
-    if (match(event, keys.Tab) && menuBodyRef.current) {
+    if (
+      match(event, keys.Tab) &&
+      menuBodyRef.current &&
+      event.target instanceof HTMLElement
+    ) {
       wrapFocusWithoutSentinels({
         containerNode: menuBodyRef.current,
         currentActiveNode: event.target,

packages/react/src/internal/__tests__/wrapFocus-test.js

@@ -1,12 +1,12 @@
-import wrapFocus from '../wrapFocus';
-
 /**
- * Copyright IBM Corp. 2020
+ * Copyright IBM Corp. 2020, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
+import { wrapFocus } from '../wrapFocus';
+
 describe('wrapFocus', () => {
   let node;
   let spyInnerModal;