@react-aria/overlays 3.0.0-nightly.1658 → 3.0.0-nightly.1663

package/dist/types.d.ts

@@ -1,27 +1,27 @@
-import React, { HTMLAttributes, RefObject, AriaAttributes, ReactNode } from "react";
+import { DOMAttributes, AriaLabelingProps, DOMProps } from "@react-types/shared";
 import { PlacementAxis, PositionProps } from "@react-types/overlays";
+import React, { RefObject, AriaAttributes, ReactNode } from "react";
 import { AriaButtonProps } from "@react-types/button";
 import { OverlayTriggerState } from "@react-stately/overlays";
-import { AriaLabelingProps, DOMProps } from "@react-types/shared";
 interface AriaPositionProps extends PositionProps {
     /**
      * Element that that serves as the positioning boundary.
      * @default document.body
      */
-    boundaryElement?: HTMLElement;
+    boundaryElement?: Element;
     /**
      * The ref for the element which the overlay positions itself with respect to.
      */
-    targetRef: RefObject<HTMLElement>;
+    targetRef: RefObject<Element>;
     /**
      * The ref for the overlay element.
      */
-    overlayRef: RefObject<HTMLElement>;
+    overlayRef: RefObject<Element>;
     /**
      * A ref for the scrollable region within the overlay.
      * @default overlayRef
      */
-    scrollRef?: RefObject<HTMLElement>;
+    scrollRef?: RefObject<Element>;
     /**
      * Whether the overlay should update its position automatically.
      * @default true
@@ -37,9 +37,9 @@ interface AriaPositionProps extends PositionProps {
 }
 interface PositionAria {
     /** Props for the overlay container element. */
-    overlayProps: HTMLAttributes<Element>;
+    overlayProps: DOMAttributes;
     /** Props for the overlay tip arrow if any. */
-    arrowProps: HTMLAttributes<Element>;
+    arrowProps: DOMAttributes;
     /** Placement of the overlay with respect to the overlay trigger. */
     placement: PlacementAxis;
     /** Updates the position of the overlay. */
@@ -73,20 +73,20 @@ interface OverlayProps {
      * out interaction with elements that should not dismiss the overlay.
      * By default, onClose will always be called on interaction outside the overlay ref.
      */
-    shouldCloseOnInteractOutside?: (element: HTMLElement) => boolean;
+    shouldCloseOnInteractOutside?: (element: Element) => boolean;
 }
 interface OverlayAria {
     /** Props to apply to the overlay container element. */
-    overlayProps: HTMLAttributes<HTMLElement>;
+    overlayProps: DOMAttributes;
     /** Props to apply to the underlay element, if any. */
-    underlayProps: HTMLAttributes<HTMLElement>;
+    underlayProps: DOMAttributes;
 }
 /**
  * Provides the behavior for overlays such as dialogs, popovers, and menus.
  * Hides the overlay when the user interacts outside it, when the Escape key is pressed,
  * or optionally, on blur. Only the top-most overlay will close at once.
  */
-export function useOverlay(props: OverlayProps, ref: RefObject<HTMLElement>): OverlayAria;
+export function useOverlay(props: OverlayProps, ref: RefObject<Element>): OverlayAria;
 interface OverlayTriggerProps {
     /** Type of overlay that is opened by the trigger. */
     type: 'dialog' | 'menu' | 'listbox' | 'tree' | 'grid';
@@ -95,13 +95,13 @@ interface OverlayTriggerAria {
     /** Props for the trigger element. */
     triggerProps: AriaButtonProps;
     /** Props for the overlay container element. */
-    overlayProps: HTMLAttributes<HTMLElement>;
+    overlayProps: DOMAttributes;
 }
 /**
  * Handles the behavior and accessibility for an overlay trigger, e.g. a button
  * that opens a popover, menu, or other overlay that is positioned relative to the trigger.
  */
-export function useOverlayTrigger(props: OverlayTriggerProps, state: OverlayTriggerState, ref: RefObject<HTMLElement>): OverlayTriggerAria;
+export function useOverlayTrigger(props: OverlayTriggerProps, state: OverlayTriggerState, ref: RefObject<Element>): OverlayTriggerAria;
 interface PreventScrollOptions {
     /** Whether the scroll lock is disabled. */
     isDisabled?: boolean;
@@ -112,7 +112,7 @@ interface PreventScrollOptions {
  * shift due to the scrollbars disappearing.
  */
 export function usePreventScroll(options?: PreventScrollOptions): void;
-interface ModalProviderProps extends HTMLAttributes<HTMLElement> {
+interface ModalProviderProps extends DOMAttributes {
     children: ReactNode;
 }
 /**
@@ -149,7 +149,7 @@ interface OverlayContainerProps extends ModalProviderProps {
      * The container element in which the overlay portal will be placed.
      * @default document.body
      */
-    portalContainer?: HTMLElement;
+    portalContainer?: Element;
 }
 /**
  * A container for overlays like modals and popovers. Renders the overlay
@@ -159,7 +159,7 @@ interface OverlayContainerProps extends ModalProviderProps {
  * be accessible at once.
  */
 export function OverlayContainer(props: OverlayContainerProps): React.ReactPortal;
-interface ModalAriaProps extends HTMLAttributes<HTMLElement> {
+interface ModalAriaProps extends DOMAttributes {
     /** Data attribute marks the dom node as a modal for the aria-modal-polyfill. */
     'data-ismodal': boolean;
 }
@@ -195,6 +195,6 @@ export function DismissButton(props: DismissButtonProps): JSX.Element;
  * @param root - Nothing will be hidden above this element.
  * @returns - A function to restore all hidden elements.
  */
-export function ariaHideOutside(targets: HTMLElement[], root?: HTMLElement): () => void;
+export function ariaHideOutside(targets: Element[], root?: HTMLElement): () => void;
 
 //# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-aria/overlays/src/packages/@react-aria/overlays/src/calculatePosition.ts","packages/@react-aria/overlays/src/packages/@react-aria/overlays/src/useCloseOnScroll.ts","packages/@react-aria/overlays/src/packages/@react-aria/overlays/src/useOverlayPosition.ts","packages/@react-aria/overlays/src/packages/@react-aria/overlays/src/useOverlay.ts","packages/@react-aria/overlays/src/packages/@react-aria/overlays/src/useOverlayTrigger.ts","packages/@react-aria/overlays/src/packages/@react-aria/overlays/src/usePreventScroll.ts","packages/@react-aria/overlays/src/packages/@react-aria/overlays/src/useModal.tsx","packages/@react-aria/overlays/src/packages/@react-aria/overlays/src/DismissButton.tsx","packages/@react-aria/overlays/src/packages/@react-aria/overlays/src/ariaHideOutside.ts","packages/@react-aria/overlays/src/packages/@react-aria/overlays/src/index.ts","packages/@react-aria/overlays/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,null,null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport * from './useOverlayPosition';\nexport * from './useOverlay';\nexport * from './useOverlayTrigger';\nexport * from './usePreventScroll';\nexport * from './useModal';\nexport * from './DismissButton';\nexport * from './ariaHideOutside';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
+{"mappings":"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","sources":["packages/@react-aria/overlays/src/packages/@react-aria/overlays/src/calculatePosition.ts","packages/@react-aria/overlays/src/packages/@react-aria/overlays/src/useCloseOnScroll.ts","packages/@react-aria/overlays/src/packages/@react-aria/overlays/src/useOverlayPosition.ts","packages/@react-aria/overlays/src/packages/@react-aria/overlays/src/useOverlay.ts","packages/@react-aria/overlays/src/packages/@react-aria/overlays/src/useOverlayTrigger.ts","packages/@react-aria/overlays/src/packages/@react-aria/overlays/src/usePreventScroll.ts","packages/@react-aria/overlays/src/packages/@react-aria/overlays/src/useModal.tsx","packages/@react-aria/overlays/src/packages/@react-aria/overlays/src/DismissButton.tsx","packages/@react-aria/overlays/src/packages/@react-aria/overlays/src/ariaHideOutside.ts","packages/@react-aria/overlays/src/packages/@react-aria/overlays/src/index.ts","packages/@react-aria/overlays/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,null,null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nexport {useOverlayPosition} from './useOverlayPosition';\nexport {useOverlay} from './useOverlay';\nexport {useOverlayTrigger} from './useOverlayTrigger';\nexport {usePreventScroll} from './usePreventScroll';\nexport {ModalProvider, useModalProvider, OverlayProvider, OverlayContainer, useModal} from './useModal';\nexport {DismissButton} from './DismissButton';\nexport {ariaHideOutside} from './ariaHideOutside';\n"],"names":[],"version":3,"file":"types.d.ts.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-aria/overlays",
-  "version": "3.0.0-nightly.1658+a5a9d95db",
+  "version": "3.0.0-nightly.1663+2a6c48eb0",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -18,15 +18,15 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.6.2",
-    "@react-aria/i18n": "3.0.0-nightly.1658+a5a9d95db",
-    "@react-aria/interactions": "3.0.0-nightly.1658+a5a9d95db",
-    "@react-aria/ssr": "3.2.1-nightly.3358+a5a9d95db",
-    "@react-aria/utils": "3.0.0-nightly.1658+a5a9d95db",
-    "@react-aria/visually-hidden": "3.0.0-nightly.1658+a5a9d95db",
-    "@react-stately/overlays": "3.3.2-nightly.3358+a5a9d95db",
-    "@react-types/button": "3.5.2-nightly.3358+a5a9d95db",
-    "@react-types/overlays": "3.6.2-nightly.3358+a5a9d95db",
-    "@react-types/shared": "3.0.0-nightly.1658+a5a9d95db"
+    "@react-aria/i18n": "3.0.0-nightly.1663+2a6c48eb0",
+    "@react-aria/interactions": "3.0.0-nightly.1663+2a6c48eb0",
+    "@react-aria/ssr": "3.2.1-nightly.3363+2a6c48eb0",
+    "@react-aria/utils": "3.0.0-nightly.1663+2a6c48eb0",
+    "@react-aria/visually-hidden": "3.0.0-nightly.1663+2a6c48eb0",
+    "@react-stately/overlays": "3.3.2-nightly.3363+2a6c48eb0",
+    "@react-types/button": "3.5.2-nightly.3363+2a6c48eb0",
+    "@react-types/overlays": "3.6.2-nightly.3363+2a6c48eb0",
+    "@react-types/shared": "3.0.0-nightly.1663+2a6c48eb0"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
@@ -35,5 +35,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a5a9d95db94da277dca6267cca8bbe55dd6ccc69"
+  "gitHead": "2a6c48eb0099671cf9b530ec3d75882c549e9cb5"
 }

package/src/ariaHideOutside.ts

@@ -22,7 +22,7 @@ let refCountMap = new WeakMap<Element, number>();
  * @param root - Nothing will be hidden above this element.
  * @returns - A function to restore all hidden elements.
  */
-export function ariaHideOutside(targets: HTMLElement[], root = document.body) {
+export function ariaHideOutside(targets: Element[], root = document.body) {
   let visibleNodes = new Set<Element>(targets);
   let hiddenNodes = new Set<Element>();
   let walker = document.createTreeWalker(
@@ -31,7 +31,7 @@ export function ariaHideOutside(targets: HTMLElement[], root = document.body) {
     {
       acceptNode(node) {
         // If this node is a live announcer, add it to the set of nodes to keep visible.
-        if ((node instanceof HTMLElement && node.dataset.liveAnnouncer === 'true')) {
+        if (((node instanceof HTMLElement || node instanceof SVGElement) && node.dataset.liveAnnouncer === 'true')) {
           visibleNodes.add(node);
         }
 
@@ -46,7 +46,7 @@ export function ariaHideOutside(targets: HTMLElement[], root = document.body) {
 
         // VoiceOver on iOS has issues hiding elements with role="row". Hide the cells inside instead.
         // https://bugs.webkit.org/show_bug.cgi?id=222623
-        if (node instanceof HTMLElement && node.getAttribute('role') === 'row') {
+        if (node instanceof Element && node.getAttribute('role') === 'row') {
           return NodeFilter.FILTER_SKIP;
         }
 
@@ -93,7 +93,7 @@ export function ariaHideOutside(targets: HTMLElement[], root = document.body) {
       // and not already inside a hidden node, hide all of the new children.
       if (![...visibleNodes, ...hiddenNodes].some(node => node.contains(change.target))) {
         for (let node of change.addedNodes) {
-          if ((node instanceof HTMLElement && node.dataset.liveAnnouncer === 'true')) {
+          if (((node instanceof HTMLElement || node instanceof SVGElement) && node.dataset.liveAnnouncer === 'true')) {
             visibleNodes.add(node);
           } else if (node instanceof Element) {
             hide(node);

package/src/calculatePosition.ts

@@ -45,12 +45,12 @@ interface Offset {
 
 interface PositionOpts {
   placement: Placement,
-  targetNode: HTMLElement,
-  overlayNode: HTMLElement,
-  scrollNode: HTMLElement,
+  targetNode: Element,
+  overlayNode: Element,
+  scrollNode: Element,
   padding: number,
   shouldFlip: boolean,
-  boundaryElement: HTMLElement,
+  boundaryElement: Element,
   offset: number,
   crossOffset: number,
   maxHeight?: number
@@ -93,7 +93,7 @@ const PARSED_PLACEMENT_CACHE = {};
 // @ts-ignore
 let visualViewport = typeof window !== 'undefined' && window.visualViewport;
 
-function getContainerDimensions(containerNode: HTMLElement): Dimensions {
+function getContainerDimensions(containerNode: Element): Dimensions {
   let width = 0, height = 0, top = 0, left = 0;
   let scroll: Position = {};
 
@@ -113,7 +113,7 @@ function getContainerDimensions(containerNode: HTMLElement): Dimensions {
   return {width, height, scroll, top, left};
 }
 
-function getScroll(node: HTMLElement): Offset {
+function getScroll(node: Element): Offset {
   return {
     top: node.scrollTop,
     left: node.scrollLeft,
@@ -144,7 +144,7 @@ function getDelta(
   }
 }
 
-function getMargins(node: HTMLElement): Position {
+function getMargins(node: Element): Position {
   let style = window.getComputedStyle(node);
   return {
     top: parseInt(style.marginTop, 10) || 0,
@@ -364,7 +364,7 @@ export function calculatePosition(opts: PositionOpts): PositionResult {
     maxHeight
   } = opts;
 
-  let container = (overlayNode.offsetParent || document.body) as HTMLElement;
+  let container = ((overlayNode instanceof HTMLElement && overlayNode.offsetParent) || document.body) as Element;
   let isBodyContainer = container.tagName === 'BODY';
   const containerPositionStyle = window.getComputedStyle(container).position;
   let isContainerPositioned = !!containerPositionStyle && containerPositionStyle !== 'static';

package/src/index.ts

@@ -9,11 +9,10 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-
-export * from './useOverlayPosition';
-export * from './useOverlay';
-export * from './useOverlayTrigger';
-export * from './usePreventScroll';
-export * from './useModal';
-export * from './DismissButton';
-export * from './ariaHideOutside';
+export {useOverlayPosition} from './useOverlayPosition';
+export {useOverlay} from './useOverlay';
+export {useOverlayTrigger} from './useOverlayTrigger';
+export {usePreventScroll} from './usePreventScroll';
+export {ModalProvider, useModalProvider, OverlayProvider, OverlayContainer, useModal} from './useModal';
+export {DismissButton} from './DismissButton';
+export {ariaHideOutside} from './ariaHideOutside';

package/src/useCloseOnScroll.ts

@@ -17,10 +17,10 @@ import {RefObject, useEffect} from 'react';
 // it sets a close function here mapped from the trigger element. This way we can avoid
 // forcing users to pass an onClose function to useOverlayPosition which could be considered
 // a breaking change.
-export const onCloseMap: WeakMap<HTMLElement, () => void> = new WeakMap();
+export const onCloseMap: WeakMap<Element, () => void> = new WeakMap();
 
 interface CloseOnScrollOptions {
-  triggerRef: RefObject<HTMLElement>,
+  triggerRef: RefObject<Element>,
   isOpen?: boolean,
   onClose?: () => void
 }

package/src/useModal.tsx

@@ -10,11 +10,12 @@
  * governing permissions and limitations under the License.
  */
 
-import React, {AriaAttributes, HTMLAttributes, ReactNode, useContext, useEffect, useMemo, useState} from 'react';
+import {DOMAttributes} from '@react-types/shared';
+import React, {AriaAttributes, ReactNode, useContext, useEffect, useMemo, useState} from 'react';
 import ReactDOM from 'react-dom';
 import {useIsSSR} from '@react-aria/ssr';
 
-interface ModalProviderProps extends HTMLAttributes<HTMLElement> {
+interface ModalProviderProps extends DOMAttributes {
   children: ReactNode
 }
 
@@ -112,7 +113,7 @@ interface OverlayContainerProps extends ModalProviderProps {
    * The container element in which the overlay portal will be placed.
    * @default document.body
    */
-  portalContainer?: HTMLElement
+  portalContainer?: Element
 }
 
 /**
@@ -140,7 +141,7 @@ export function OverlayContainer(props: OverlayContainerProps): React.ReactPorta
   return ReactDOM.createPortal(contents, portalContainer);
 }
 
-interface ModalAriaProps extends HTMLAttributes<HTMLElement> {
+interface ModalAriaProps extends DOMAttributes {
   /** Data attribute marks the dom node as a modal for the aria-modal-polyfill. */
   'data-ismodal': boolean
 }

package/src/useOverlay.ts

@@ -10,7 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
-import {HTMLAttributes, RefObject, SyntheticEvent, useEffect} from 'react';
+import {DOMAttributes} from '@react-types/shared';
+import {RefObject, SyntheticEvent, useEffect} from 'react';
 import {useFocusWithin, useInteractOutside} from '@react-aria/interactions';
 
 interface OverlayProps {
@@ -41,24 +42,24 @@ interface OverlayProps {
    * out interaction with elements that should not dismiss the overlay.
    * By default, onClose will always be called on interaction outside the overlay ref.
    */
-  shouldCloseOnInteractOutside?: (element: HTMLElement) => boolean
+  shouldCloseOnInteractOutside?: (element: Element) => boolean
 }
 
 interface OverlayAria {
   /** Props to apply to the overlay container element. */
-  overlayProps: HTMLAttributes<HTMLElement>,
+  overlayProps: DOMAttributes,
   /** Props to apply to the underlay element, if any. */
-  underlayProps: HTMLAttributes<HTMLElement>
+  underlayProps: DOMAttributes
 }
 
-const visibleOverlays: RefObject<HTMLElement>[] = [];
+const visibleOverlays: RefObject<Element>[] = [];
 
 /**
  * Provides the behavior for overlays such as dialogs, popovers, and menus.
  * Hides the overlay when the user interacts outside it, when the Escape key is pressed,
  * or optionally, on blur. Only the top-most overlay will close at once.
  */
-export function useOverlay(props: OverlayProps, ref: RefObject<HTMLElement>): OverlayAria {
+export function useOverlay(props: OverlayProps, ref: RefObject<Element>): OverlayAria {
   let {
     onClose,
     shouldCloseOnBlur,
@@ -89,8 +90,8 @@ export function useOverlay(props: OverlayProps, ref: RefObject<HTMLElement>): Ov
     }
   };
 
-  let onInteractOutsideStart = (e: SyntheticEvent<HTMLElement>) => {
-    if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.target as HTMLElement)) {
+  let onInteractOutsideStart = (e: SyntheticEvent<Element>) => {
+    if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.target as Element)) {
       if (visibleOverlays[visibleOverlays.length - 1] === ref) {
         e.stopPropagation();
         e.preventDefault();
@@ -98,8 +99,8 @@ export function useOverlay(props: OverlayProps, ref: RefObject<HTMLElement>): Ov
     }
   };
 
-  let onInteractOutside = (e: SyntheticEvent<HTMLElement>) => {
-    if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.target as HTMLElement)) {
+  let onInteractOutside = (e: SyntheticEvent<Element>) => {
+    if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.target as Element)) {
       if (visibleOverlays[visibleOverlays.length - 1] === ref) {
         e.stopPropagation();
         e.preventDefault();
@@ -123,7 +124,7 @@ export function useOverlay(props: OverlayProps, ref: RefObject<HTMLElement>): Ov
   let {focusWithinProps} = useFocusWithin({
     isDisabled: !shouldCloseOnBlur,
     onBlurWithin: (e) => {
-      if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.relatedTarget as HTMLElement)) {
+      if (!shouldCloseOnInteractOutside || shouldCloseOnInteractOutside(e.relatedTarget as Element)) {
         onClose();
       }
     }

package/src/useOverlayPosition.ts

@@ -11,8 +11,9 @@
  */
 
 import {calculatePosition, PositionResult} from './calculatePosition';
-import {HTMLAttributes, RefObject, useCallback, useRef, useState} from 'react';
+import {DOMAttributes} from '@react-types/shared';
 import {Placement, PlacementAxis, PositionProps} from '@react-types/overlays';
+import {RefObject, useCallback, useRef, useState} from 'react';
 import {useCloseOnScroll} from './useCloseOnScroll';
 import {useLayoutEffect} from '@react-aria/utils';
 import {useLocale} from '@react-aria/i18n';
@@ -22,20 +23,20 @@ interface AriaPositionProps extends PositionProps {
    * Element that that serves as the positioning boundary.
    * @default document.body
    */
-  boundaryElement?: HTMLElement,
+  boundaryElement?: Element,
   /**
    * The ref for the element which the overlay positions itself with respect to.
    */
-  targetRef: RefObject<HTMLElement>,
+  targetRef: RefObject<Element>,
   /**
    * The ref for the overlay element.
    */
-  overlayRef: RefObject<HTMLElement>,
+  overlayRef: RefObject<Element>,
   /**
    * A ref for the scrollable region within the overlay.
    * @default overlayRef
    */
-  scrollRef?: RefObject<HTMLElement>,
+  scrollRef?: RefObject<Element>,
   /**
    * Whether the overlay should update its position automatically.
    * @default true
@@ -52,9 +53,9 @@ interface AriaPositionProps extends PositionProps {
 
 interface PositionAria {
   /** Props for the overlay container element. */
-  overlayProps: HTMLAttributes<Element>,
+  overlayProps: DOMAttributes,
   /** Props for the overlay tip arrow if any. */
-  arrowProps: HTMLAttributes<Element>,
+  arrowProps: DOMAttributes,
   /** Placement of the overlay with respect to the overlay trigger. */
   placement: PlacementAxis,
   /** Updates the position of the overlay. */

package/src/useOverlayTrigger.ts

@@ -11,9 +11,10 @@
  */
 
 import {AriaButtonProps} from '@react-types/button';
-import {HTMLAttributes, RefObject, useEffect} from 'react';
+import {DOMAttributes} from '@react-types/shared';
 import {onCloseMap} from './useCloseOnScroll';
 import {OverlayTriggerState} from '@react-stately/overlays';
+import {RefObject, useEffect} from 'react';
 import {useId} from '@react-aria/utils';
 
 interface OverlayTriggerProps {
@@ -26,14 +27,14 @@ interface OverlayTriggerAria {
   triggerProps: AriaButtonProps,
 
   /** Props for the overlay container element. */
-  overlayProps: HTMLAttributes<HTMLElement>
+  overlayProps: DOMAttributes
 }
 
 /**
  * Handles the behavior and accessibility for an overlay trigger, e.g. a button
  * that opens a popover, menu, or other overlay that is positioned relative to the trigger.
  */
-export function useOverlayTrigger(props: OverlayTriggerProps, state: OverlayTriggerState, ref: RefObject<HTMLElement>): OverlayTriggerAria {
+export function useOverlayTrigger(props: OverlayTriggerProps, state: OverlayTriggerState, ref: RefObject<Element>): OverlayTriggerAria {
   let {type} = props;
   let {isOpen} = state;