diff --git a/packages/@adobe/react-spectrum/src/table/Resizer.tsx b/packages/@adobe/react-spectrum/src/table/Resizer.tsx index 648e4720197..c3af2c5d954 100644 --- a/packages/@adobe/react-spectrum/src/table/Resizer.tsx +++ b/packages/@adobe/react-spectrum/src/table/Resizer.tsx @@ -8,7 +8,7 @@ import intlMessages from '../../intl/table/*.json'; import {isWebKit} from 'react-aria/private/utils/platform'; import {Key, RefObject} from '@react-types/shared'; import {mergeProps} from 'react-aria/mergeProps'; -import React, {createContext, ForwardedRef, useContext, useEffect, useState} from 'react'; +import React, {createContext, ForwardedRef, useContext} from 'react'; import ReactDOM from 'react-dom'; import styles from '@adobe/spectrum-css-temp/components/table/vars.css'; import {useLocale} from 'react-aria/I18nProvider'; @@ -63,27 +63,7 @@ export const Resizer = React.forwardRef(function Resizer( let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/table'); let {direction} = useLocale(); - let [isPointerDown, setIsPointerDown] = useState(false); - useEffect(() => { - let setDown = e => { - if (e.pointerType === 'mouse') { - setIsPointerDown(true); - } - }; - let setUp = e => { - if (e.pointerType === 'mouse') { - setIsPointerDown(false); - } - }; - document.addEventListener('pointerdown', setDown, {capture: true}); - document.addEventListener('pointerup', setUp, {capture: true}); - return () => { - document.removeEventListener('pointerdown', setDown, {capture: true}); - document.removeEventListener('pointerup', setUp, {capture: true}); - }; - }, []); - - let {inputProps, resizerProps} = useTableColumnResize( + let {inputProps, resizerProps, isMouseResizing} = useTableColumnResize( mergeProps(props, { 'aria-label': stringFormatter.format('columnResizer'), isDisabled: isEmpty @@ -128,7 +108,7 @@ export const Resizer = React.forwardRef(function Resizer( role="presentation" className={classNames(styles, 'spectrum-Table-columnResizerPlaceholder')} /> - +
diff --git a/packages/react-aria-components/src/Dialog.tsx b/packages/react-aria-components/src/Dialog.tsx index cd92cf30f06..0d78f95ef18 100644 --- a/packages/react-aria-components/src/Dialog.tsx +++ b/packages/react-aria-components/src/Dialog.tsx @@ -105,6 +105,7 @@ export function DialogTrigger(props: DialogTriggerProps): JSX.Element { { trigger: 'DialogTrigger', triggerRef: buttonRef, + id: overlayProps.id, 'aria-labelledby': overlayProps['aria-labelledby'] } ] diff --git a/packages/react-aria-components/src/Popover.tsx b/packages/react-aria-components/src/Popover.tsx index 3d1fa9fe874..17ae7e3d3d0 100644 --- a/packages/react-aria-components/src/Popover.tsx +++ b/packages/react-aria-components/src/Popover.tsx @@ -140,6 +140,7 @@ export interface PopoverRenderProps { } interface PopoverContextValue extends PopoverProps { + id?: string; /** Contexts to clear. */ clearContexts?: Context[]; } @@ -205,6 +206,7 @@ interface PopoverInnerProps extends AriaPopoverProps, RenderProps[]; + id?: string; } function PopoverInner({ @@ -318,6 +320,7 @@ function PopoverInner({ (null); - let {resizerProps, inputProps, isResizing} = useTableColumnResize( + let {resizerProps, inputProps, isResizing, isMouseResizing} = useTableColumnResize( { column, 'aria-label': props['aria-label'] || stringFormatter.format('tableResizer'), @@ -1425,24 +1425,15 @@ export const ColumnResizer = forwardRef(function ColumnResizer( } }); - let [isMouseDown, setMouseDown] = useState(false); - let onPointerDown = (e: PointerEvent) => { - if (e.pointerType === 'mouse') { - setMouseDown(true); - } - }; - - if (!isResizing && isMouseDown) { - setMouseDown(false); - } - let DOMProps = filterDOMProps(props, {global: true}); + // Cursor overlay is used to style the cursor against the entire screen. + // Do not turn off pointer events or the cursor will no longer be styled. return ( {isResizing && - isMouseDown && + isMouseResizing && ReactDOM.createPortal( -
, +
, document.body )} diff --git a/packages/react-aria-components/test/Popover.test.js b/packages/react-aria-components/test/Popover.test.js index 7b5ce4e5446..07d90b2ba01 100644 --- a/packages/react-aria-components/test/Popover.test.js +++ b/packages/react-aria-components/test/Popover.test.js @@ -56,11 +56,31 @@ describe('Popover', () => { expect(dialog).toBeInTheDocument(); expect(dialog.closest('.react-aria-Popover')).toHaveAttribute('data-trigger', 'DialogTrigger'); + expect(button).toHaveAttribute('aria-controls'); + expect(dialog).toHaveAttribute('id', button.getAttribute('aria-controls')); + await user.click(document.body); expect(dialog).not.toBeInTheDocument(); }); + it('applies overlay id to standalone popover', async () => { + let {getByRole} = render( + +