[pull] master from react-bootstrap:master

src/BootstrapModalManager.tsx

@@ -1,7 +1,5 @@
-import addClass from 'dom-helpers/addClass';
 import css from 'dom-helpers/css';
 import qsa from 'dom-helpers/querySelectorAll';
-import removeClass from 'dom-helpers/removeClass';
 import ModalManager, {
   type ContainerState,
   type ModalManagerOptions,
@@ -42,7 +40,7 @@ class BootstrapModalManager extends ModalManager {
     super.setContainerStyle(containerState);
 
     const container = this.getElement();
-    addClass(container, 'modal-open');
+    container.classList.add('modal-open');
 
     if (!containerState.scrollBarWidth) return;
 
@@ -64,7 +62,7 @@ class BootstrapModalManager extends ModalManager {
     super.removeContainerStyle(containerState);
 
     const container = this.getElement();
-    removeClass(container, 'modal-open');
+    container.classList.remove('modal-open');
 
     const paddingProp = this.isRTL ? 'paddingLeft' : 'paddingRight';
     const marginProp = this.isRTL ? 'marginLeft' : 'marginRight';

src/Modal.tsx

@@ -1,8 +1,6 @@
 import clsx from 'clsx';
-import addEventListener from 'dom-helpers/addEventListener';
 import canUseDOM from 'dom-helpers/canUseDOM';
 import ownerDocument from 'dom-helpers/ownerDocument';
-import removeEventListener from 'dom-helpers/removeEventListener';
 import getScrollbarSize from 'dom-helpers/scrollbarSize';
 import useCallbackRef from '@restart/hooks/useCallbackRef';
 import useEventCallback from '@restart/hooks/useEventCallback';
@@ -192,7 +190,7 @@ const Modal = React.forwardRef<ModalHandle, ModalProps>(
     });
 
     useWillUnmount(() => {
-      removeEventListener(window as any, 'resize', handleWindowResize);
+      window.removeEventListener('resize', handleWindowResize);
       removeStaticModalAnimationRef.current?.();
     });
 
@@ -273,15 +271,15 @@ const Modal = React.forwardRef<ModalHandle, ModalProps>(
       onEntering?.(node, isAppearing);
 
       // FIXME: This should work even when animation is disabled.
-      addEventListener(window as any, 'resize', handleWindowResize);
+      window.addEventListener('resize', handleWindowResize);
     };
 
     const handleExited = (node) => {
       if (node) node.style.display = ''; // RHL removes it sometimes
       onExited?.(node);
 
       // FIXME: This should work even when animation is disabled.
-      removeEventListener(window as any, 'resize', handleWindowResize);
+      window.removeEventListener('resize', handleWindowResize);
     };
 
     const renderBackdrop = useCallback(

src/OverlayTrigger.tsx

@@ -1,4 +1,3 @@
-import contains from 'dom-helpers/contains';
 import * as React from 'react';
 import { cloneElement, useCallback, useRef } from 'react';
 import useTimeout from '@restart/hooks/useTimeout';
@@ -105,7 +104,7 @@ function handleMouseOverOut(
   const target = e.currentTarget;
   const related = e.relatedTarget || e.nativeEvent[relatedNative];
 
-  if ((!related || related !== target) && !contains(target, related)) {
+  if ((!related || related !== target) && !target.contains(related)) {
     handler(...args);
   }
 }

src/transitionEndListener.ts

@@ -1,11 +1,10 @@
-import css from 'dom-helpers/css';
 import transitionEnd from 'dom-helpers/transitionEnd';
 
 function parseDuration(
   node: HTMLElement,
-  property: 'transitionDuration' | 'transitionDelay',
+  property: 'transition-duration' | 'transition-delay',
 ) {
-  const str = css(node, property) || '';
+  const str = node.style.getPropertyValue(property);
   const mult = str.indexOf('ms') === -1 ? 1000 : 1;
   return parseFloat(str) * mult;
 }
@@ -14,8 +13,8 @@ export default function transitionEndListener(
   element: HTMLElement,
   handler: (e: TransitionEvent) => void,
 ) {
-  const duration = parseDuration(element, 'transitionDuration');
-  const delay = parseDuration(element, 'transitionDelay');
+  const duration = parseDuration(element, 'transition-duration');
+  const delay = parseDuration(element, 'transition-delay');
   const remove = transitionEnd(
     element,
     (e) => {

src/useOverlayOffset.tsx

@@ -1,5 +1,4 @@
 import { useMemo, useRef } from 'react';
-import hasClass from 'dom-helpers/hasClass';
 import { Offset, Options } from '@restart/ui/usePopper';
 import { useBootstrapPrefix } from './ThemeProvider';
 import Popover from './Popover';
@@ -24,11 +23,11 @@ export default function useOverlayOffset(
           }
 
           if (overlayRef.current) {
-            if (hasClass(overlayRef.current, popoverClass)) {
+            if (overlayRef.current.classList.contains(popoverClass)) {
               return Popover.POPPER_OFFSET;
             }
 
-            if (hasClass(overlayRef.current, tooltipClass)) {
+            if (overlayRef.current.classList.contains(tooltipClass)) {
               return Tooltip.TOOLTIP_OFFSET;
             }
           }

test/ModalSpec.tsx

@@ -323,11 +323,7 @@ describe('<Modal>', () => {
       const { rerender } = render(<Component />);
       rerender(<Modal show={false}>Foo</Modal>);
 
-      expect(offSpy).toHaveBeenCalledWith(
-        'resize',
-        expect.anything(),
-        undefined,
-      );
+      expect(offSpy).toHaveBeenCalledWith('resize', expect.anything());
     });
   });