/** * External dependencies */ import { Suspense, useRef, useCallback } from '@wordpress/element'; import classnames from 'classnames'; import { Spinner } from '@woocommerce/components'; /** * Internal dependencies */ import useFocusOnMount from '../../hooks/useFocusOnMount'; import useFocusOutside from '../../hooks/useFocusOutside'; export const Panel = ( { content, isPanelOpen, isPanelSwitching, currentTab, tab, closePanel, clearPanel, } ) => { const handleFocusOutside = ( event ) => { const isClickOnModalOrSnackbar = event.target.closest( '.woocommerce-inbox-dismiss-confirmation_modal' ) || event.target.closest( '.components-snackbar__action' ); if ( isPanelOpen && ! isClickOnModalOrSnackbar ) { closePanel(); } }; const possibleFocusPanel = () => { if ( ! containerRef.current || ! isPanelOpen || ! tab ) { return; } focusOnMountRef( containerRef.current ); }; const finishTransition = ( e ) => { if ( e && e.propertyName === 'transform' ) { clearPanel(); possibleFocusPanel(); } }; const focusOnMountRef = useFocusOnMount(); const useFocusOutsideProps = useFocusOutside( handleFocusOutside ); const containerRef = useRef( null ); const mergedContainerRef = useCallback( ( node ) => { containerRef.current = node; focusOnMountRef( node ); }, [] ); if ( ! tab ) { return
; } if ( ! content ) { return null; } const classNames = classnames( 'woocommerce-layout__activity-panel-wrapper', { 'is-open': isPanelOpen, 'is-switching': isPanelSwitching, } ); return (