renderModal()

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>
    );
  }