Differential D7960 Diff 27048 lib/components/modal-overlay.react.js

Changeset View

Standalone View

lib/components/modal-overlay.react.js

// @flow		// @flow

		import FocusTrap from 'focus-trap-react';
import * as React from 'react';		import * as React from 'react';

import css from './modal-overlay.css';		import css from './modal-overlay.css';

type ModalOverlayProps = {		type ModalOverlayProps = {
+onClose: () => void,		+onClose: () => void,
+children?: React.Node,		+children?: React.Node,
+backgroundColor?: string,		+backgroundColor?: string,
};		};

		const focusTrapOptions = {
		fallbackFocus: '#modal-overlay',
		};

function ModalOverlay(props: ModalOverlayProps): React.Node {		function ModalOverlay(props: ModalOverlayProps): React.Node {
const {		const {
children,		children,
onClose,		onClose,
backgroundColor = 'var(--modal-overlay-background-90)',		backgroundColor = 'var(--modal-overlay-background-90)',
} = props;		} = props;

const overlayRef = React.useRef();		const overlayRef = React.useRef();
Show All 33 Lines	function ModalOverlay(props: ModalOverlayProps): React.Node {
const containerStyle = React.useMemo(		const containerStyle = React.useMemo(
() => ({		() => ({
backgroundColor,		backgroundColor,
}),		}),
[backgroundColor],		[backgroundColor],
);		);

return (		return (
		<FocusTrap focusTrapOptions={focusTrapOptions}>
<div		<div
		id="modal-overlay"
className={css.modalOverlay}		className={css.modalOverlay}
ref={overlayRef}		ref={overlayRef}
onMouseDown={onBackgroundMouseDown}		onMouseDown={onBackgroundMouseDown}
onMouseUp={onBackgroundMouseUp}		onMouseUp={onBackgroundMouseUp}
tabIndex={0}		tabIndex={-1}
onKeyDown={onKeyDown}		onKeyDown={onKeyDown}
style={containerStyle}		style={containerStyle}
>		>
{children}		{children}
</div>		</div>
		</FocusTrap>
);		);
}		}

export default ModalOverlay;		export default ModalOverlay;