in src/modal/modal.tsx [228:299]
renderModal(renderedContent: React.ReactNode) {
const { overrides = {}, closeable, role, autoFocus, focusLock, returnFocus } = this.props;
const {
Root: RootOverride,
Dialog: DialogOverride,
DialogContainer: DialogContainerOverride,
Close: CloseOverride,
} = overrides;
const [Root, rootProps] = getOverrides(RootOverride, StyledRoot);
const [DialogContainer, dialogContainerProps] = getOverrides(
DialogContainerOverride,
StyledDialogContainer
);
const [Dialog, dialogProps] = getOverrides(DialogOverride, StyledDialog);
const [Close, closeProps] = getOverrides(CloseOverride, StyledClose);
const sharedProps = this.getSharedProps();
return (
<LocaleContext.Consumer>
{(locale) => (
<FocusLock
disabled={!focusLock}
// Allow focus to escape when UI is within an iframe
crossFrame={false}
returnFocus={returnFocus}
autoFocus={autoFocus}
>
<Root
data-baseweb="modal"
// eslint-disable-next-line @typescript-eslint/no-explicit-any
ref={this.rootRef as any}
{...sharedProps}
{...rootProps}
>
<DialogContainer
// eslint-disable-next-line @typescript-eslint/no-explicit-any
ref={this.dialogContainerRef as any}
{...sharedProps}
{...dialogContainerProps}
>
<Dialog
tabIndex={-1}
aria-modal
aria-label="dialog"
role={role}
{...sharedProps}
{...dialogProps}
>
{renderedContent}
{closeable ? (
<Close
aria-label={locale.modal.close}
onClick={this.onCloseClick}
{...sharedProps}
{...closeProps}
onFocus={forkFocus(closeProps, this.handleFocus)}
onBlur={forkBlur(closeProps, this.handleBlur)}
>
<CloseIcon />
</Close>
) : null}
</Dialog>
</DialogContainer>
</Root>
</FocusLock>
)}
</LocaleContext.Consumer>
);
}