Blame · Modal.tsx

b69ab31	1	/**
b69ab31	2	* Copyright (c) Meta Platforms, Inc. and affiliates.
b69ab31	3	*
b69ab31	4	* This source code is licensed under the MIT license found in the
b69ab31	5	* LICENSE file in the root directory of this source tree.
b69ab31	6	*/
b69ab31	7
b69ab31	8	import {Button} from 'isl-components/Button';
b69ab31	9	import {Icon} from 'isl-components/Icon';
b69ab31	10
b69ab31	11	import './Modal.css';
b69ab31	12
b69ab31	13	export function Modal({
b69ab31	14	className,
b69ab31	15	children,
b69ab31	16	width,
b69ab31	17	height,
b69ab31	18	maxWidth,
b69ab31	19	maxHeight,
b69ab31	20	'aria-labelledby': ariaLabelledBy,
b69ab31	21	'aria-describedby': ariaDescribedBy,
b69ab31	22	dismiss,
b69ab31	23	dataTestId,
b69ab31	24	}: {
b69ab31	25	className?: string;
b69ab31	26	children: React.ReactNode;
b69ab31	27	width?: string \| number;
b69ab31	28	height?: number \| string;
b69ab31	29	maxWidth?: string \| number;
b69ab31	30	maxHeight?: string \| number;
b69ab31	31	'aria-labelledby'?: string;
b69ab31	32	'aria-describedby'?: string;
b69ab31	33	/** Callback to dismiss the modal. If provided, an 'x' button is added to the top-right corner of the modal. */
b69ab31	34	dismiss?: () => void;
b69ab31	35	dataTestId?: string;
b69ab31	36	}) {
b69ab31	37	const style: React.CSSProperties = {
b69ab31	38	width: width ?? 'fit-content',
b69ab31	39	height: height ?? 'fit-content',
b69ab31	40	maxHeight: maxHeight ?? 'calc(100vh / var(--zoom))',
b69ab31	41	maxWidth: maxWidth ?? 'calc(100vw / var(--zoom))',
b69ab31	42	};
b69ab31	43	return (
b69ab31	44	<div
b69ab31	45	className="modal"
b69ab31	46	role="dialog"
b69ab31	47	aria-modal={true}
b69ab31	48	aria-labelledby={ariaLabelledBy}
b69ab31	49	aria-describedby={ariaDescribedBy}
b69ab31	50	data-testid={dataTestId}>
b69ab31	51	<div className={`modal-contents ${className ?? ''}`} style={style}>
b69ab31	52	{dismiss != null ? (
b69ab31	53	<div className="dismiss-modal">
b69ab31	54	<Button icon onClick={dismiss}>
b69ab31	55	<Icon icon="x" />
b69ab31	56	</Button>
b69ab31	57	</div>
b69ab31	58	) : null}
b69ab31	59	{children}
b69ab31	60	</div>
b69ab31	61	</div>
b69ab31	62	);
b69ab31	63	}