diff --git a/packages/components/src/drop-zone/index.tsx b/packages/components/src/drop-zone/index.tsx index abd158f7ce63d..be4f117e7d0c2 100644 --- a/packages/components/src/drop-zone/index.tsx +++ b/packages/components/src/drop-zone/index.tsx @@ -12,7 +12,7 @@ import { upload, Icon } from '@wordpress/icons'; import { getFilesFromDataTransfer } from '@wordpress/dom'; import { __experimentalUseDropZone as useDropZone, - useReducedMotion, + // useReducedMotion, } from '@wordpress/compose'; /** @@ -23,18 +23,19 @@ import type { WordPressComponentProps } from '../context'; import type { ReactNode } from 'react'; /** - * Handles fade-in/fade-out animation for its children if `reducedMotion` is disabled. - * Relies on the animations being defined in the CSS styles. + * Handles fade-in/fade-out animation for its children if `reducedMotion` is disabled, + * if not, just shows/hides the children without any animation. * - * @returns {JSX.Element | null} The animated container with children or null. + * Relies on the animations being defined in CSS styles. */ const MaybeFade: React.FC< { show: boolean; children: ReactNode; duration?: number; -} > = ( { show, children, duration = 200 } ) => { +} > = ( { show, children } ) => { const [ shouldRender, setRender ] = useState( show ); - const reducedMotion = useReducedMotion(); + //const reducedMotion = useReducedMotion(); + const reducedMotion = false; useEffect( () => { if ( show ) { @@ -47,7 +48,6 @@ const MaybeFade: React.FC< { const props = ! reducedMotion ? { className: show ? 'fade-enter' : 'fade-exit', - style: { animationDuration: `${ duration }ms` }, onAnimationEnd: () => { if ( ! show ) { setRender( false ); @@ -59,30 +59,22 @@ const MaybeFade: React.FC< { return shouldRender &&