@gitlab/ui 84.1.0 → 85.0.0

package/src/vendor/bootstrap-vue/src/components/modal/modal.js

@@ -0,0 +1,1022 @@
+import { COMPONENT_UID_KEY, extend } from '../../vue'
+import { NAME_MODAL } from '../../constants/components'
+import { IS_BROWSER } from '../../constants/env'
+import {
+  EVENT_NAME_CANCEL,
+  EVENT_NAME_CHANGE,
+  EVENT_NAME_CLOSE,
+  EVENT_NAME_HIDDEN,
+  EVENT_NAME_HIDE,
+  EVENT_NAME_OK,
+  EVENT_NAME_SHOW,
+  EVENT_NAME_SHOWN,
+  EVENT_NAME_TOGGLE,
+  EVENT_OPTIONS_NO_CAPTURE
+} from '../../constants/events'
+import { CODE_ESC } from '../../constants/key-codes'
+import {
+  PROP_TYPE_ARRAY_OBJECT_STRING,
+  PROP_TYPE_ARRAY_STRING,
+  PROP_TYPE_BOOLEAN,
+  PROP_TYPE_OBJECT,
+  PROP_TYPE_STRING
+} from '../../constants/props'
+import { HTMLElement } from '../../constants/safe-types'
+import {
+  SLOT_NAME_DEFAULT,
+  SLOT_NAME_MODAL_BACKDROP,
+  SLOT_NAME_MODAL_CANCEL,
+  SLOT_NAME_MODAL_FOOTER,
+  SLOT_NAME_MODAL_HEADER,
+  SLOT_NAME_MODAL_HEADER_CLOSE,
+  SLOT_NAME_MODAL_OK,
+  SLOT_NAME_MODAL_TITLE
+} from '../../constants/slots'
+import { arrayIncludes, concat } from '../../utils/array'
+import {
+  attemptFocus,
+  closest,
+  contains,
+  getActiveElement,
+  getTabables,
+  requestAF,
+  select
+} from '../../utils/dom'
+import { getRootActionEventName, getRootEventName, eventOn, eventOff } from '../../utils/events'
+import { htmlOrText } from '../../utils/html'
+import { identity } from '../../utils/identity'
+import { isString, isUndefinedOrNull } from '../../utils/inspect'
+import { makeModelMixin } from '../../utils/model'
+import { sortKeys } from '../../utils/object'
+import { observeDom } from '../../utils/observe-dom'
+import { makeProp, makePropsConfigurable } from '../../utils/props'
+import { attrsMixin } from '../../mixins/attrs'
+import { idMixin, props as idProps } from '../../mixins/id'
+import { listenOnDocumentMixin } from '../../mixins/listen-on-document'
+import { listenOnRootMixin } from '../../mixins/listen-on-root'
+import { listenOnWindowMixin } from '../../mixins/listen-on-window'
+import { normalizeSlotMixin } from '../../mixins/normalize-slot'
+import { scopedStyleMixin } from '../../mixins/scoped-style'
+import { BButton } from '../button/button'
+import { BButtonClose } from '../button/button-close'
+import { BVTransition } from '../transition/bv-transition'
+import { BVTransporter } from '../transporter/transporter'
+import { BvModalEvent } from './helpers/bv-modal-event.class'
+import { modalManager } from './helpers/modal-manager'
+
+// --- Constants ---
+
+const {
+  mixin: modelMixin,
+  props: modelProps,
+  prop: MODEL_PROP_NAME,
+  event: MODEL_EVENT_NAME
+} = makeModelMixin('visible', {
+  type: PROP_TYPE_BOOLEAN,
+  defaultValue: false,
+  event: EVENT_NAME_CHANGE
+})
+
+const TRIGGER_BACKDROP = 'backdrop'
+const TRIGGER_ESC = 'esc'
+const TRIGGER_FORCE = 'FORCE'
+const TRIGGER_TOGGLE = 'toggle'
+
+const BUTTON_CANCEL = 'cancel'
+// TODO: This should be renamed to 'close'
+const BUTTON_CLOSE = 'headerclose'
+const BUTTON_OK = 'ok'
+
+const BUTTONS = [BUTTON_CANCEL, BUTTON_CLOSE, BUTTON_OK]
+
+// `ObserveDom` config to detect changes in modal content
+// so that we can adjust the modal padding if needed
+const OBSERVER_CONFIG = {
+  subtree: true,
+  childList: true,
+  characterData: true,
+  attributes: true,
+  attributeFilter: ['style', 'class']
+}
+
+// --- Props ---
+
+export const props = makePropsConfigurable(
+  sortKeys({
+    ...idProps,
+    ...modelProps,
+    ariaLabel: makeProp(PROP_TYPE_STRING),
+    autoFocusButton: makeProp(
+      PROP_TYPE_STRING,
+      null,
+      /* istanbul ignore next */ value => {
+        return isUndefinedOrNull(value) || arrayIncludes(BUTTONS, value)
+      }
+    ),
+    bodyBgVariant: makeProp(PROP_TYPE_STRING),
+    bodyClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
+    bodyTextVariant: makeProp(PROP_TYPE_STRING),
+    busy: makeProp(PROP_TYPE_BOOLEAN, false),
+    buttonSize: makeProp(PROP_TYPE_STRING),
+    cancelDisabled: makeProp(PROP_TYPE_BOOLEAN, false),
+    cancelTitle: makeProp(PROP_TYPE_STRING, 'Cancel'),
+    cancelTitleHtml: makeProp(PROP_TYPE_STRING),
+    cancelVariant: makeProp(PROP_TYPE_STRING, 'secondary'),
+    centered: makeProp(PROP_TYPE_BOOLEAN, false),
+    contentClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
+    dialogClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
+    footerBgVariant: makeProp(PROP_TYPE_STRING),
+    footerBorderVariant: makeProp(PROP_TYPE_STRING),
+    footerClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
+    footerTag: makeProp(PROP_TYPE_STRING, 'footer'),
+    footerTextVariant: makeProp(PROP_TYPE_STRING),
+    headerBgVariant: makeProp(PROP_TYPE_STRING),
+    headerBorderVariant: makeProp(PROP_TYPE_STRING),
+    headerClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
+    headerCloseContent: makeProp(PROP_TYPE_STRING, '×'),
+    headerCloseLabel: makeProp(PROP_TYPE_STRING, 'Close'),
+    headerCloseVariant: makeProp(PROP_TYPE_STRING),
+    headerTag: makeProp(PROP_TYPE_STRING, 'header'),
+    headerTextVariant: makeProp(PROP_TYPE_STRING),
+    // TODO: Rename to `noBackdrop` and deprecate `hideBackdrop`
+    hideBackdrop: makeProp(PROP_TYPE_BOOLEAN, false),
+    // TODO: Rename to `noFooter` and deprecate `hideFooter`
+    hideFooter: makeProp(PROP_TYPE_BOOLEAN, false),
+    // TODO: Rename to `noHeader` and deprecate `hideHeader`
+    hideHeader: makeProp(PROP_TYPE_BOOLEAN, false),
+    // TODO: Rename to `noHeaderClose` and deprecate `hideHeaderClose`
+    hideHeaderClose: makeProp(PROP_TYPE_BOOLEAN, false),
+    ignoreEnforceFocusSelector: makeProp(PROP_TYPE_ARRAY_STRING),
+    lazy: makeProp(PROP_TYPE_BOOLEAN, false),
+    modalClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
+    noCloseOnBackdrop: makeProp(PROP_TYPE_BOOLEAN, false),
+    noCloseOnEsc: makeProp(PROP_TYPE_BOOLEAN, false),
+    noEnforceFocus: makeProp(PROP_TYPE_BOOLEAN, false),
+    noFade: makeProp(PROP_TYPE_BOOLEAN, false),
+    noStacking: makeProp(PROP_TYPE_BOOLEAN, false),
+    okDisabled: makeProp(PROP_TYPE_BOOLEAN, false),
+    okOnly: makeProp(PROP_TYPE_BOOLEAN, false),
+    okTitle: makeProp(PROP_TYPE_STRING, 'OK'),
+    okTitleHtml: makeProp(PROP_TYPE_STRING),
+    okVariant: makeProp(PROP_TYPE_STRING, 'primary'),
+    // HTML Element, CSS selector string or Vue component instance
+    returnFocus: makeProp([HTMLElement, PROP_TYPE_OBJECT, PROP_TYPE_STRING]),
+    scrollable: makeProp(PROP_TYPE_BOOLEAN, false),
+    size: makeProp(PROP_TYPE_STRING, 'md'),
+    static: makeProp(PROP_TYPE_BOOLEAN, false),
+    title: makeProp(PROP_TYPE_STRING),
+    titleClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
+    titleHtml: makeProp(PROP_TYPE_STRING),
+    titleSrOnly: makeProp(PROP_TYPE_BOOLEAN, false),
+    titleTag: makeProp(PROP_TYPE_STRING, 'h5')
+  }),
+  NAME_MODAL
+)
+
+// --- Main component ---
+
+// @vue/component
+export const BModal = /*#__PURE__*/ extend({
+  name: NAME_MODAL,
+  mixins: [
+    attrsMixin,
+    idMixin,
+    modelMixin,
+    listenOnDocumentMixin,
+    listenOnRootMixin,
+    listenOnWindowMixin,
+    normalizeSlotMixin,
+    scopedStyleMixin
+  ],
+  inheritAttrs: false,
+  props,
+  data() {
+    return {
+      isHidden: true, // If modal should not be in document
+      isVisible: false, // Controls modal visible state
+      isTransitioning: false, // Used for style control
+      isShow: false, // Used for style control
+      isBlock: false, // Used for style control
+      isOpening: false, // To signal that the modal is in the process of opening
+      isClosing: false, // To signal that the modal is in the process of closing
+      ignoreBackdropClick: false, // Used to signify if click out listener should ignore the click
+      isModalOverflowing: false,
+      // The following items are controlled by the modalManager instance
+      scrollbarWidth: 0,
+      zIndex: modalManager.getBaseZIndex(),
+      isTop: true,
+      isBodyOverflowing: false
+    }
+  },
+  computed: {
+    modalId() {
+      return this.safeId()
+    },
+    modalOuterId() {
+      return this.safeId('__BV_modal_outer_')
+    },
+    modalHeaderId() {
+      return this.safeId('__BV_modal_header_')
+    },
+    modalBodyId() {
+      return this.safeId('__BV_modal_body_')
+    },
+    modalTitleId() {
+      return this.safeId('__BV_modal_title_')
+    },
+    modalContentId() {
+      return this.safeId('__BV_modal_content_')
+    },
+    modalFooterId() {
+      return this.safeId('__BV_modal_footer_')
+    },
+    modalBackdropId() {
+      return this.safeId('__BV_modal_backdrop_')
+    },
+    modalClasses() {
+      return [
+        {
+          fade: !this.noFade,
+          show: this.isShow
+        },
+        this.modalClass
+      ]
+    },
+    modalStyles() {
+      const sbWidth = `${this.scrollbarWidth}px`
+      return {
+        paddingLeft: !this.isBodyOverflowing && this.isModalOverflowing ? sbWidth : '',
+        paddingRight: this.isBodyOverflowing && !this.isModalOverflowing ? sbWidth : '',
+        // Needed to fix issue https://github.com/bootstrap-vue/bootstrap-vue/issues/3457
+        // Even though we are using v-show, we must ensure 'none' is restored in the styles
+        display: this.isBlock ? 'block' : 'none'
+      }
+    },
+    dialogClasses() {
+      return [
+        {
+          [`modal-${this.size}`]: this.size,
+          'modal-dialog-centered': this.centered,
+          'modal-dialog-scrollable': this.scrollable
+        },
+        this.dialogClass
+      ]
+    },
+    headerClasses() {
+      return [
+        {
+          [`bg-${this.headerBgVariant}`]: this.headerBgVariant,
+          [`text-${this.headerTextVariant}`]: this.headerTextVariant,
+          [`border-${this.headerBorderVariant}`]: this.headerBorderVariant
+        },
+        this.headerClass
+      ]
+    },
+    titleClasses() {
+      return [{ 'sr-only': this.titleSrOnly }, this.titleClass]
+    },
+    bodyClasses() {
+      return [
+        {
+          [`bg-${this.bodyBgVariant}`]: this.bodyBgVariant,
+          [`text-${this.bodyTextVariant}`]: this.bodyTextVariant
+        },
+        this.bodyClass
+      ]
+    },
+    footerClasses() {
+      return [
+        {
+          [`bg-${this.footerBgVariant}`]: this.footerBgVariant,
+          [`text-${this.footerTextVariant}`]: this.footerTextVariant,
+          [`border-${this.footerBorderVariant}`]: this.footerBorderVariant
+        },
+        this.footerClass
+      ]
+    },
+    modalOuterStyle() {
+      // Styles needed for proper stacking of modals
+      return {
+        position: 'absolute',
+        zIndex: this.zIndex
+      }
+    },
+    slotScope() {
+      return {
+        cancel: this.onCancel,
+        close: this.onClose,
+        hide: this.hide,
+        ok: this.onOk,
+        visible: this.isVisible
+      }
+    },
+    computeIgnoreEnforceFocusSelector() {
+      // Normalize to an single selector with selectors separated by `,`
+      return concat(this.ignoreEnforceFocusSelector)
+        .filter(identity)
+        .join(',')
+        .trim()
+    },
+    computedAttrs() {
+      // If the parent has a scoped style attribute, and the modal
+      // is portalled, add the scoped attribute to the modal wrapper
+      const scopedStyleAttrs = !this.static ? this.scopedStyleAttrs : {}
+
+      return {
+        ...scopedStyleAttrs,
+        ...this.bvAttrs,
+        id: this.modalOuterId
+      }
+    },
+    computedModalAttrs() {
+      const { isVisible, ariaLabel } = this
+
+      return {
+        id: this.modalId,
+        role: 'dialog',
+        'aria-hidden': isVisible ? null : 'true',
+        'aria-modal': isVisible ? 'true' : null,
+        'aria-label': ariaLabel,
+        'aria-labelledby':
+          this.hideHeader ||
+          ariaLabel ||
+          // TODO: Rename slot to `title` and deprecate `modal-title`
+          !(this.hasNormalizedSlot(SLOT_NAME_MODAL_TITLE) || this.titleHtml || this.title)
+            ? null
+            : this.modalTitleId,
+        'aria-describedby': this.modalBodyId
+      }
+    }
+  },
+  watch: {
+    [MODEL_PROP_NAME](newValue, oldValue) {
+      if (newValue !== oldValue) {
+        this[newValue ? 'show' : 'hide']()
+      }
+    }
+  },
+  created() {
+    // Define non-reactive properties
+    this.$_observer = null
+    this.$_returnFocus = this.returnFocus || null
+  },
+  mounted() {
+    // Set initial z-index as queried from the DOM
+    this.zIndex = modalManager.getBaseZIndex()
+    // Listen for events from others to either open or close ourselves
+    // and listen to all modals to enable/disable enforce focus
+    this.listenOnRoot(getRootActionEventName(NAME_MODAL, EVENT_NAME_SHOW), this.showHandler)
+    this.listenOnRoot(getRootActionEventName(NAME_MODAL, EVENT_NAME_HIDE), this.hideHandler)
+    this.listenOnRoot(getRootActionEventName(NAME_MODAL, EVENT_NAME_TOGGLE), this.toggleHandler)
+    // Listen for `bv:modal::show events`, and close ourselves if the
+    // opening modal not us
+    this.listenOnRoot(getRootEventName(NAME_MODAL, EVENT_NAME_SHOW), this.modalListener)
+    // Initially show modal?
+    if (this[MODEL_PROP_NAME] === true) {
+      this.$nextTick(this.show)
+    }
+  },
+  beforeDestroy() {
+    // Ensure everything is back to normal
+    modalManager.unregisterModal(this)
+    this.setObserver(false)
+    if (this.isVisible) {
+      this.isVisible = false
+      this.isShow = false
+      this.isTransitioning = false
+    }
+  },
+  methods: {
+    setObserver(on = false) {
+      this.$_observer && this.$_observer.disconnect()
+      this.$_observer = null
+      if (on) {
+        this.$_observer = observeDom(
+          this.$refs.content,
+          this.checkModalOverflow.bind(this),
+          OBSERVER_CONFIG
+        )
+      }
+    },
+    // Private method to update the v-model
+    updateModel(value) {
+      if (value !== this[MODEL_PROP_NAME]) {
+        this.$emit(MODEL_EVENT_NAME, value)
+      }
+    },
+    // Private method to create a BvModalEvent object
+    buildEvent(type, options = {}) {
+      return new BvModalEvent(type, {
+        // Default options
+        cancelable: false,
+        target: this.$refs.modal || this.$el || null,
+        relatedTarget: null,
+        trigger: null,
+        // Supplied options
+        ...options,
+        // Options that can't be overridden
+        vueTarget: this,
+        componentId: this.modalId
+      })
+    },
+    // Public method to show modal
+    show() {
+      if (this.isVisible || this.isOpening) {
+        // If already open, or in the process of opening, do nothing
+        /* istanbul ignore next */
+        return
+      }
+      /* istanbul ignore next */
+      if (this.isClosing) {
+        // If we are in the process of closing, wait until hidden before re-opening
+        /* istanbul ignore next */
+        this.$once(EVENT_NAME_HIDDEN, this.show)
+        /* istanbul ignore next */
+        return
+      }
+      this.isOpening = true
+      // Set the element to return focus to when closed
+      this.$_returnFocus = this.$_returnFocus || this.getActiveElement()
+      const showEvent = this.buildEvent(EVENT_NAME_SHOW, {
+        cancelable: true
+      })
+      this.emitEvent(showEvent)
+      // Don't show if canceled
+      if (showEvent.defaultPrevented || this.isVisible) {
+        this.isOpening = false
+        // Ensure the v-model reflects the current state
+        this.updateModel(false)
+        return
+      }
+      // Show the modal
+      this.doShow()
+    },
+    // Public method to hide modal
+    hide(trigger = '') {
+      if (!this.isVisible || this.isClosing) {
+        /* istanbul ignore next */
+        return
+      }
+      this.isClosing = true
+      const hideEvent = this.buildEvent(EVENT_NAME_HIDE, {
+        cancelable: trigger !== TRIGGER_FORCE,
+        trigger: trigger || null
+      })
+      // We emit specific event for one of the three built-in buttons
+      if (trigger === BUTTON_OK) {
+        this.$emit(EVENT_NAME_OK, hideEvent)
+      } else if (trigger === BUTTON_CANCEL) {
+        this.$emit(EVENT_NAME_CANCEL, hideEvent)
+      } else if (trigger === BUTTON_CLOSE) {
+        this.$emit(EVENT_NAME_CLOSE, hideEvent)
+      }
+      this.emitEvent(hideEvent)
+      // Hide if not canceled
+      if (hideEvent.defaultPrevented || !this.isVisible) {
+        this.isClosing = false
+        // Ensure v-model reflects current state
+        this.updateModel(true)
+        return
+      }
+      // Stop observing for content changes
+      this.setObserver(false)
+      // Trigger the hide transition
+      this.isVisible = false
+      // Update the v-model
+      this.updateModel(false)
+    },
+    // Public method to toggle modal visibility
+    toggle(triggerEl) {
+      if (triggerEl) {
+        this.$_returnFocus = triggerEl
+      }
+      if (this.isVisible) {
+        this.hide(TRIGGER_TOGGLE)
+      } else {
+        this.show()
+      }
+    },
+    // Private method to get the current document active element
+    getActiveElement() {
+      // Returning focus to `document.body` may cause unwanted scrolls,
+      // so we exclude setting focus on body
+      const activeElement = getActiveElement(IS_BROWSER ? [document.body] : [])
+      // Preset the fallback return focus value if it is not set
+      // `document.activeElement` should be the trigger element that was clicked or
+      // in the case of using the v-model, which ever element has current focus
+      // Will be overridden by some commands such as toggle, etc.
+      // Note: On IE 11, `document.activeElement` may be `null`
+      // So we test it for truthiness first
+      // https://github.com/bootstrap-vue/bootstrap-vue/issues/3206
+      return activeElement && activeElement.focus ? activeElement : null
+    },
+    // Private method to finish showing modal
+    doShow() {
+      /* istanbul ignore next: commenting out for now until we can test stacking */
+      if (modalManager.modalsAreOpen && this.noStacking) {
+        // If another modal(s) is already open, wait for it(them) to close
+        this.listenOnRootOnce(getRootEventName(NAME_MODAL, EVENT_NAME_HIDDEN), this.doShow)
+        return
+      }
+      modalManager.registerModal(this)
+      // Place modal in DOM
+      this.isHidden = false
+      this.$nextTick(() => {
+        // We do this in `$nextTick()` to ensure the modal is in DOM first
+        // before we show it
+        this.isVisible = true
+        this.isOpening = false
+        // Update the v-model
+        this.updateModel(true)
+        this.$nextTick(() => {
+          // Observe changes in modal content and adjust if necessary
+          // In a `$nextTick()` in case modal content is lazy
+          this.setObserver(true)
+        })
+      })
+    },
+    // Transition handlers
+    onBeforeEnter() {
+      this.isTransitioning = true
+      this.setResizeEvent(true)
+    },
+    onEnter() {
+      this.isBlock = true
+      // We add the `show` class 1 frame later
+      // `requestAF()` runs the callback before the next repaint, so we need
+      // two calls to guarantee the next frame has been rendered
+      requestAF(() => {
+        requestAF(() => {
+          this.isShow = true
+        })
+      })
+    },
+    onAfterEnter() {
+      this.checkModalOverflow()
+      this.isTransitioning = false
+      // We use `requestAF()` to allow transition hooks to complete
+      // before passing control over to the other handlers
+      // This will allow users to not have to use `$nextTick()` or `requestAF()`
+      // when trying to pre-focus an element
+      requestAF(() => {
+        this.emitEvent(this.buildEvent(EVENT_NAME_SHOWN))
+        this.setEnforceFocus(true)
+        this.$nextTick(() => {
+          // Delayed in a `$nextTick()` to allow users time to pre-focus
+          // an element if the wish
+          this.focusFirst()
+        })
+      })
+    },
+    onBeforeLeave() {
+      this.isTransitioning = true
+      this.setResizeEvent(false)
+      this.setEnforceFocus(false)
+    },
+    onLeave() {
+      // Remove the 'show' class
+      this.isShow = false
+    },
+    onAfterLeave() {
+      this.isBlock = false
+      this.isTransitioning = false
+      this.isModalOverflowing = false
+      this.isHidden = true
+      this.$nextTick(() => {
+        this.isClosing = false
+        modalManager.unregisterModal(this)
+        this.returnFocusTo()
+        // TODO: Need to find a way to pass the `trigger` property
+        //       to the `hidden` event, not just only the `hide` event
+        this.emitEvent(this.buildEvent(EVENT_NAME_HIDDEN))
+      })
+    },
+    emitEvent(bvEvent) {
+      const { type } = bvEvent
+      // We emit on `$root` first in case a global listener wants to cancel
+      // the event first before the instance emits its event
+      this.emitOnRoot(getRootEventName(NAME_MODAL, type), bvEvent, bvEvent.componentId)
+      this.$emit(type, bvEvent)
+    },
+    // UI event handlers
+    onDialogMousedown() {
+      // Watch to see if the matching mouseup event occurs outside the dialog
+      // And if it does, cancel the clickOut handler
+      const modal = this.$refs.modal
+      const onceModalMouseup = event => {
+        eventOff(modal, 'mouseup', onceModalMouseup, EVENT_OPTIONS_NO_CAPTURE)
+        if (event.target === modal) {
+          this.ignoreBackdropClick = true
+        }
+      }
+      eventOn(modal, 'mouseup', onceModalMouseup, EVENT_OPTIONS_NO_CAPTURE)
+    },
+    onClickOut(event) {
+      if (this.ignoreBackdropClick) {
+        // Click was initiated inside the modal content, but finished outside.
+        // Set by the above onDialogMousedown handler
+        this.ignoreBackdropClick = false
+        return
+      }
+      // Do nothing if not visible, backdrop click disabled, or element
+      // that generated click event is no longer in document body
+      if (!this.isVisible || this.noCloseOnBackdrop || !contains(document.body, event.target)) {
+        return
+      }
+      // If backdrop clicked, hide modal
+      if (!contains(this.$refs.content, event.target)) {
+        this.hide(TRIGGER_BACKDROP)
+      }
+    },
+    onOk() {
+      this.hide(BUTTON_OK)
+    },
+    onCancel() {
+      this.hide(BUTTON_CANCEL)
+    },
+    onClose() {
+      this.hide(BUTTON_CLOSE)
+    },
+    onEsc(event) {
+      // If ESC pressed, hide modal
+      if (event.keyCode === CODE_ESC && this.isVisible && !this.noCloseOnEsc) {
+        this.hide(TRIGGER_ESC)
+      }
+    },
+    // Document focusin listener
+    focusHandler(event) {
+      // If focus leaves modal content, bring it back
+      const content = this.$refs.content
+      const { target } = event
+      if (
+        this.noEnforceFocus ||
+        !this.isTop ||
+        !this.isVisible ||
+        !content ||
+        document === target ||
+        contains(content, target) ||
+        (this.computeIgnoreEnforceFocusSelector &&
+          closest(this.computeIgnoreEnforceFocusSelector, target, true))
+      ) {
+        return
+      }
+      const tabables = getTabables(this.$refs.content)
+      const bottomTrap = this.$refs['bottom-trap']
+      const topTrap = this.$refs['top-trap']
+      if (bottomTrap && target === bottomTrap) {
+        // If user pressed TAB out of modal into our bottom trab trap element
+        // Find the first tabable element in the modal content and focus it
+        if (attemptFocus(tabables[0])) {
+          // Focus was successful
+          return
+        }
+      } else if (topTrap && target === topTrap) {
+        // If user pressed CTRL-TAB out of modal and into our top tab trap element
+        // Find the last tabable element in the modal content and focus it
+        if (attemptFocus(tabables[tabables.length - 1])) {
+          // Focus was successful
+          return
+        }
+      }
+      // Otherwise focus the modal content container
+      attemptFocus(content, { preventScroll: true })
+    },
+    // Turn on/off focusin listener
+    setEnforceFocus(on) {
+      this.listenDocument(on, 'focusin', this.focusHandler)
+    },
+    // Resize listener
+    setResizeEvent(on) {
+      this.listenWindow(on, 'resize', this.checkModalOverflow)
+      this.listenWindow(on, 'orientationchange', this.checkModalOverflow)
+    },
+    // Root listener handlers
+    showHandler(id, triggerEl) {
+      if (id === this.modalId) {
+        this.$_returnFocus = triggerEl || this.getActiveElement()
+        this.show()
+      }
+    },
+    hideHandler(id) {
+      if (id === this.modalId) {
+        this.hide('event')
+      }
+    },
+    toggleHandler(id, triggerEl) {
+      if (id === this.modalId) {
+        this.toggle(triggerEl)
+      }
+    },
+    modalListener(bvEvent) {
+      // If another modal opens, close this one if stacking not permitted
+      if (this.noStacking && bvEvent.vueTarget !== this) {
+        this.hide()
+      }
+    },
+    // Focus control handlers
+    focusFirst() {
+      // Don't try and focus if we are SSR
+      if (IS_BROWSER) {
+        requestAF(() => {
+          const modal = this.$refs.modal
+          const content = this.$refs.content
+          const activeElement = this.getActiveElement()
+          // If the modal contains the activeElement, we don't do anything
+          if (modal && content && !(activeElement && contains(content, activeElement))) {
+            const ok = this.$refs['ok-button']
+            const cancel = this.$refs['cancel-button']
+            const close = this.$refs['close-button']
+            // Focus the appropriate button or modal content wrapper
+            const autoFocus = this.autoFocusButton
+            /* istanbul ignore next */
+            const el =
+              autoFocus === BUTTON_OK && ok
+                ? ok.$el || ok
+                : autoFocus === BUTTON_CANCEL && cancel
+                  ? cancel.$el || cancel
+                  : autoFocus === BUTTON_CLOSE && close
+                    ? close.$el || close
+                    : content
+            // Focus the element
+            attemptFocus(el)
+            if (el === content) {
+              // Make sure top of modal is showing (if longer than the viewport)
+              this.$nextTick(() => {
+                modal.scrollTop = 0
+              })
+            }
+          }
+        })
+      }
+    },
+    returnFocusTo() {
+      // Prefer `returnFocus` prop over event specified
+      // `return_focus` value
+      let el = this.returnFocus || this.$_returnFocus || null
+      this.$_returnFocus = null
+      this.$nextTick(() => {
+        // Is el a string CSS selector?
+        el = isString(el) ? select(el) : el
+        if (el) {
+          // Possibly could be a component reference
+          el = el.$el || el
+          attemptFocus(el)
+        }
+      })
+    },
+    checkModalOverflow() {
+      if (this.isVisible) {
+        const modal = this.$refs.modal
+        this.isModalOverflowing = modal.scrollHeight > document.documentElement.clientHeight
+      }
+    },
+    makeModal(h) {
+      // Modal header
+      let $header = h()
+      if (!this.hideHeader) {
+        // TODO: Rename slot to `header` and deprecate `modal-header`
+        let $modalHeader = this.normalizeSlot(SLOT_NAME_MODAL_HEADER, this.slotScope)
+        if (!$modalHeader) {
+          let $closeButton = h()
+          if (!this.hideHeaderClose) {
+            $closeButton = h(
+              BButtonClose,
+              {
+                props: {
+                  content: this.headerCloseContent,
+                  disabled: this.isTransitioning,
+                  ariaLabel: this.headerCloseLabel,
+                  textVariant: this.headerCloseVariant || this.headerTextVariant
+                },
+                on: { click: this.onClose },
+                ref: 'close-button'
+              },
+              // TODO: Rename slot to `header-close` and deprecate `modal-header-close`
+              [this.normalizeSlot(SLOT_NAME_MODAL_HEADER_CLOSE)]
+            )
+          }
+
+          $modalHeader = [
+            h(
+              this.titleTag,
+              {
+                staticClass: 'modal-title',
+                class: this.titleClasses,
+                attrs: { id: this.modalTitleId },
+                // TODO: Rename slot to `title` and deprecate `modal-title`
+                domProps: this.hasNormalizedSlot(SLOT_NAME_MODAL_TITLE)
+                  ? {}
+                  : htmlOrText(this.titleHtml, this.title)
+              },
+              // TODO: Rename slot to `title` and deprecate `modal-title`
+              this.normalizeSlot(SLOT_NAME_MODAL_TITLE, this.slotScope)
+            ),
+            $closeButton
+          ]
+        }
+
+        $header = h(
+          this.headerTag,
+          {
+            staticClass: 'modal-header',
+            class: this.headerClasses,
+            attrs: { id: this.modalHeaderId },
+            ref: 'header'
+          },
+          [$modalHeader]
+        )
+      }
+
+      // Modal body
+      const $body = h(
+        'div',
+        {
+          staticClass: 'modal-body',
+          class: this.bodyClasses,
+          attrs: { id: this.modalBodyId },
+          ref: 'body'
+        },
+        this.normalizeSlot(SLOT_NAME_DEFAULT, this.slotScope)
+      )
+
+      // Modal footer
+      let $footer = h()
+      if (!this.hideFooter) {
+        // TODO: Rename slot to `footer` and deprecate `modal-footer`
+        let $modalFooter = this.normalizeSlot(SLOT_NAME_MODAL_FOOTER, this.slotScope)
+        if (!$modalFooter) {
+          let $cancelButton = h()
+          if (!this.okOnly) {
+            $cancelButton = h(
+              BButton,
+              {
+                props: {
+                  variant: this.cancelVariant,
+                  size: this.buttonSize,
+                  disabled: this.cancelDisabled || this.busy || this.isTransitioning
+                },
+                // TODO: Rename slot to `cancel-button` and deprecate `modal-cancel`
+                domProps: this.hasNormalizedSlot(SLOT_NAME_MODAL_CANCEL)
+                  ? {}
+                  : htmlOrText(this.cancelTitleHtml, this.cancelTitle),
+                on: { click: this.onCancel },
+                ref: 'cancel-button'
+              },
+              // TODO: Rename slot to `cancel-button` and deprecate `modal-cancel`
+              this.normalizeSlot(SLOT_NAME_MODAL_CANCEL)
+            )
+          }
+
+          const $okButton = h(
+            BButton,
+            {
+              props: {
+                variant: this.okVariant,
+                size: this.buttonSize,
+                disabled: this.okDisabled || this.busy || this.isTransitioning
+              },
+              // TODO: Rename slot to `ok-button` and deprecate `modal-ok`
+              domProps: this.hasNormalizedSlot(SLOT_NAME_MODAL_OK)
+                ? {}
+                : htmlOrText(this.okTitleHtml, this.okTitle),
+              on: { click: this.onOk },
+              ref: 'ok-button'
+            },
+            // TODO: Rename slot to `ok-button` and deprecate `modal-ok`
+            this.normalizeSlot(SLOT_NAME_MODAL_OK)
+          )
+
+          $modalFooter = [$cancelButton, $okButton]
+        }
+
+        $footer = h(
+          this.footerTag,
+          {
+            staticClass: 'modal-footer',
+            class: this.footerClasses,
+            attrs: { id: this.modalFooterId },
+            ref: 'footer'
+          },
+          [$modalFooter]
+        )
+      }
+
+      // Assemble modal content
+      const $modalContent = h(
+        'div',
+        {
+          staticClass: 'modal-content',
+          class: this.contentClass,
+          attrs: {
+            id: this.modalContentId,
+            tabindex: '-1'
+          },
+          ref: 'content'
+        },
+        [$header, $body, $footer]
+      )
+
+      // Tab traps to prevent page from scrolling to next element in
+      // tab index during enforce-focus tab cycle
+      let $tabTrapTop = h()
+      let $tabTrapBottom = h()
+      if (this.isVisible && !this.noEnforceFocus) {
+        $tabTrapTop = h('span', {
+          attrs: { tabindex: '0' },
+          ref: 'top-trap'
+        })
+        $tabTrapBottom = h('span', {
+          attrs: { tabindex: '0' },
+          ref: 'bottom-trap'
+        })
+      }
+
+      // Modal dialog wrapper
+      const $modalDialog = h(
+        'div',
+        {
+          staticClass: 'modal-dialog',
+          class: this.dialogClasses,
+          on: { mousedown: this.onDialogMousedown },
+          ref: 'dialog'
+        },
+        [$tabTrapTop, $modalContent, $tabTrapBottom]
+      )
+
+      // Modal
+      let $modal = h(
+        'div',
+        {
+          staticClass: 'modal',
+          class: this.modalClasses,
+          style: this.modalStyles,
+          attrs: this.computedModalAttrs,
+          on: { keydown: this.onEsc, click: this.onClickOut },
+          directives: [{ name: 'show', value: this.isVisible }],
+          ref: 'modal'
+        },
+        [$modalDialog]
+      )
+
+      // Wrap modal in transition
+      // Sadly, we can't use `BVTransition` here due to the differences in
+      // transition durations for `.modal` and `.modal-dialog`
+      // At least until https://github.com/vuejs/vue/issues/9986 is resolved
+      $modal = h(
+        'transition',
+        {
+          props: {
+            enterClass: '',
+            enterToClass: '',
+            enterActiveClass: '',
+            leaveClass: '',
+            leaveActiveClass: '',
+            leaveToClass: ''
+          },
+          on: {
+            beforeEnter: this.onBeforeEnter,
+            enter: this.onEnter,
+            afterEnter: this.onAfterEnter,
+            beforeLeave: this.onBeforeLeave,
+            leave: this.onLeave,
+            afterLeave: this.onAfterLeave
+          }
+        },
+        [$modal]
+      )
+
+      // Modal backdrop
+      let $backdrop = h()
+      if (!this.hideBackdrop && this.isVisible) {
+        $backdrop = h(
+          'div',
+          {
+            staticClass: 'modal-backdrop',
+            attrs: { id: this.modalBackdropId }
+          },
+          // TODO: Rename slot to `backdrop` and deprecate `modal-backdrop`
+          this.normalizeSlot(SLOT_NAME_MODAL_BACKDROP)
+        )
+      }
+      $backdrop = h(BVTransition, { props: { noFade: this.noFade } }, [$backdrop])
+
+      // Assemble modal and backdrop in an outer <div>
+      return h(
+        'div',
+        {
+          style: this.modalOuterStyle,
+          attrs: this.computedAttrs,
+          key: `modal-outer-${this[COMPONENT_UID_KEY]}`
+        },
+        [$modal, $backdrop]
+      )
+    }
+  },
+  render(h) {
+    if (this.static) {
+      return this.lazy && this.isHidden ? h() : this.makeModal(h)
+    } else {
+      return this.isHidden ? h() : h(BVTransporter, [this.makeModal(h)])
+    }
+  }
+})