diff --git a/packages/react-aria-components/docs/DropZone.mdx b/packages/react-aria-components/docs/DropZone.mdx index ce0851a8f56..068ba13e69c 100644 --- a/packages/react-aria-components/docs/DropZone.mdx +++ b/packages/react-aria-components/docs/DropZone.mdx @@ -269,6 +269,11 @@ function Example() { } ``` +If a `DropZone` is rendered in a positioned scroll container, focusing the visually hidden drop +button may cause the container to scroll. The `dropButtonStyle` prop can be used to adjust the +position of this internal button wrapper, for example `dropButtonStyle={{position: 'fixed', top: 0, +left: 0}}`. + ## Visual feedback A dropzone displays visual feedback to the user when a drag hovers over the drop target by passing the `getDropOperation` function. If a drop target only supports data of specific types (e.g. images, videos, text, etc.), then it should implement the `getDropOperation` prop and return `cancel` for types that aren't supported. This will prevent visual feedback indicating that the drop target accepts the dragged data when this is not true. [Read more about getDropOperation.](https://react-spectrum.adobe.com/react-aria/useDrop.html#getdropoperation) diff --git a/packages/react-aria-components/src/DropZone.tsx b/packages/react-aria-components/src/DropZone.tsx index b30df656d0c..ec727017062 100644 --- a/packages/react-aria-components/src/DropZone.tsx +++ b/packages/react-aria-components/src/DropZone.tsx @@ -27,7 +27,7 @@ import {getEventTarget, nodeContains} from 'react-aria/private/utils/shadowdom/D import intlMessages from '../intl/*.json'; import {isFocusable} from 'react-aria/private/utils/isFocusable'; import {mergeProps} from 'react-aria/mergeProps'; -import React, {createContext, ForwardedRef, forwardRef, useRef} from 'react'; +import React, {createContext, CSSProperties, ForwardedRef, forwardRef, useRef} from 'react'; import {TextContext} from './Text'; import {useButton} from 'react-aria/useButton'; import {useClipboard} from 'react-aria/useClipboard'; @@ -87,6 +87,11 @@ export interface DropZoneProps * @default 'react-aria-DropZone' */ className?: ClassNameOrFunction; + /** + * The inline style for the visually hidden drop button used for keyboard and screen reader drop + * interactions. + */ + dropButtonStyle?: CSSProperties; } export const DropZoneContext = createContext>(null); @@ -100,6 +105,7 @@ export const DropZone = forwardRef(function DropZone( ) { let {isDisabled = false} = props; [props, ref] = useContextProps(props, ref, DropZoneContext); + let {dropButtonStyle} = props; let dropzoneRef = useObjectRef(ref); let buttonRef = useRef(null); let {dropProps, dropButtonProps, isDropTarget} = useDrop({ @@ -162,7 +168,7 @@ export const DropZone = forwardRef(function DropZone( data-focus-visible={isFocusVisible || undefined} data-drop-target={isDropTarget || undefined} data-disabled={isDisabled || undefined}> - +