bootstrap 5.0.2 → 5.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (54) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +1 -1
  3. data/assets/javascripts/bootstrap/alert.js +78 -48
  4. data/assets/javascripts/bootstrap/base-component.js +22 -17
  5. data/assets/javascripts/bootstrap/button.js +19 -12
  6. data/assets/javascripts/bootstrap/carousel.js +66 -44
  7. data/assets/javascripts/bootstrap/collapse.js +114 -131
  8. data/assets/javascripts/bootstrap/dom/data.js +5 -5
  9. data/assets/javascripts/bootstrap/dom/event-handler.js +11 -5
  10. data/assets/javascripts/bootstrap/dom/manipulator.js +6 -6
  11. data/assets/javascripts/bootstrap/dom/selector-engine.js +49 -7
  12. data/assets/javascripts/bootstrap/dropdown.js +96 -106
  13. data/assets/javascripts/bootstrap/modal.js +241 -87
  14. data/assets/javascripts/bootstrap/offcanvas.js +203 -57
  15. data/assets/javascripts/bootstrap/popover.js +25 -58
  16. data/assets/javascripts/bootstrap/scrollspy.js +47 -66
  17. data/assets/javascripts/bootstrap/tab.js +41 -22
  18. data/assets/javascripts/bootstrap/toast.js +124 -29
  19. data/assets/javascripts/bootstrap/tooltip.js +122 -104
  20. data/assets/javascripts/bootstrap-sprockets.js +7 -7
  21. data/assets/javascripts/bootstrap.js +660 -630
  22. data/assets/javascripts/bootstrap.min.js +2 -2
  23. data/assets/stylesheets/_bootstrap-grid.scss +3 -1
  24. data/assets/stylesheets/_bootstrap-reboot.scss +2 -4
  25. data/assets/stylesheets/_bootstrap.scss +2 -1
  26. data/assets/stylesheets/bootstrap/_card.scss +2 -1
  27. data/assets/stylesheets/bootstrap/_functions.scss +51 -12
  28. data/assets/stylesheets/bootstrap/_grid.scss +11 -0
  29. data/assets/stylesheets/bootstrap/_helpers.scss +2 -0
  30. data/assets/stylesheets/bootstrap/_mixins.scss +1 -0
  31. data/assets/stylesheets/bootstrap/_modal.scss +1 -11
  32. data/assets/stylesheets/bootstrap/_navbar.scss +30 -1
  33. data/assets/stylesheets/bootstrap/_offcanvas.scss +4 -0
  34. data/assets/stylesheets/bootstrap/_placeholders.scss +51 -0
  35. data/assets/stylesheets/bootstrap/_reboot.scss +12 -8
  36. data/assets/stylesheets/bootstrap/_root.scss +40 -2
  37. data/assets/stylesheets/bootstrap/_tables.scss +8 -4
  38. data/assets/stylesheets/bootstrap/_toasts.scss +2 -2
  39. data/assets/stylesheets/bootstrap/_transitions.scss +6 -0
  40. data/assets/stylesheets/bootstrap/_utilities.scss +44 -8
  41. data/assets/stylesheets/bootstrap/_variables.scss +184 -11
  42. data/assets/stylesheets/bootstrap/bootstrap-utilities.scss +1 -1
  43. data/assets/stylesheets/bootstrap/forms/_form-control.scss +1 -1
  44. data/assets/stylesheets/bootstrap/forms/_form-select.scss +2 -0
  45. data/assets/stylesheets/bootstrap/helpers/_stacks.scss +15 -0
  46. data/assets/stylesheets/bootstrap/helpers/_vr.scss +8 -0
  47. data/assets/stylesheets/bootstrap/mixins/_backdrop.scss +14 -0
  48. data/assets/stylesheets/bootstrap/mixins/_grid.scss +29 -10
  49. data/assets/stylesheets/bootstrap/mixins/_utilities.scss +27 -6
  50. data/assets/stylesheets/bootstrap/mixins/_visually-hidden.scss +1 -1
  51. data/bootstrap.gemspec +3 -3
  52. data/lib/bootstrap/version.rb +2 -2
  53. data/tasks/updater/js.rb +6 -2
  54. metadata +12 -8
@@ -1,21 +1,27 @@
1
1
  /*!
2
- * Bootstrap modal.js v5.0.2 (https://getbootstrap.com/)
2
+ * Bootstrap modal.js v5.1.3 (https://getbootstrap.com/)
3
3
  * Copyright 2011-2021 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
4
4
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
5
5
  */
6
6
  (function (global, factory) {
7
- typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('./dom/selector-engine.js'), require('./dom/event-handler.js'), require('./dom/manipulator.js'), require('./base-component.js')) :
8
- typeof define === 'function' && define.amd ? define(['./dom/selector-engine', './dom/event-handler', './dom/manipulator', './base-component'], factory) :
9
- (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Modal = factory(global.SelectorEngine, global.EventHandler, global.Manipulator, global.Base));
10
- }(this, (function (SelectorEngine, EventHandler, Manipulator, BaseComponent) { 'use strict';
7
+ typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('./dom/event-handler.js'), require('./dom/manipulator.js'), require('./dom/selector-engine.js'), require('./base-component.js')) :
8
+ typeof define === 'function' && define.amd ? define(['./dom/event-handler', './dom/manipulator', './dom/selector-engine', './base-component'], factory) :
9
+ (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Modal = factory(global.EventHandler, global.Manipulator, global.SelectorEngine, global.Base));
10
+ })(this, (function (EventHandler, Manipulator, SelectorEngine, BaseComponent) { 'use strict';
11
11
 
12
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
12
+ const _interopDefaultLegacy = e => e && typeof e === 'object' && 'default' in e ? e : { default: e };
13
13
 
14
- var SelectorEngine__default = /*#__PURE__*/_interopDefaultLegacy(SelectorEngine);
15
- var EventHandler__default = /*#__PURE__*/_interopDefaultLegacy(EventHandler);
16
- var Manipulator__default = /*#__PURE__*/_interopDefaultLegacy(Manipulator);
17
- var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
14
+ const EventHandler__default = /*#__PURE__*/_interopDefaultLegacy(EventHandler);
15
+ const Manipulator__default = /*#__PURE__*/_interopDefaultLegacy(Manipulator);
16
+ const SelectorEngine__default = /*#__PURE__*/_interopDefaultLegacy(SelectorEngine);
17
+ const BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
18
18
 
19
+ /**
20
+ * --------------------------------------------------------------------------
21
+ * Bootstrap (v5.1.3): util/index.js
22
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
23
+ * --------------------------------------------------------------------------
24
+ */
19
25
  const MILLISECONDS_MULTIPLIER = 1000;
20
26
  const TRANSITION_END = 'transitionend'; // Shoutout AngusCroll (https://goo.gl/pxwQGp)
21
27
 
@@ -102,7 +108,7 @@
102
108
  }
103
109
 
104
110
  if (typeof obj === 'string' && obj.length > 0) {
105
- return SelectorEngine__default['default'].findOne(obj);
111
+ return document.querySelector(obj);
106
112
  }
107
113
 
108
114
  return null;
@@ -128,7 +134,35 @@
128
134
  return getComputedStyle(element).getPropertyValue('visibility') === 'visible';
129
135
  };
130
136
 
131
- const reflow = element => element.offsetHeight;
137
+ const isDisabled = element => {
138
+ if (!element || element.nodeType !== Node.ELEMENT_NODE) {
139
+ return true;
140
+ }
141
+
142
+ if (element.classList.contains('disabled')) {
143
+ return true;
144
+ }
145
+
146
+ if (typeof element.disabled !== 'undefined') {
147
+ return element.disabled;
148
+ }
149
+
150
+ return element.hasAttribute('disabled') && element.getAttribute('disabled') !== 'false';
151
+ };
152
+ /**
153
+ * Trick to restart an element's animation
154
+ *
155
+ * @param {HTMLElement} element
156
+ * @return void
157
+ *
158
+ * @see https://www.charistheo.io/blog/2021/02/restart-a-css-animation-with-javascript/#restarting-a-css-animation
159
+ */
160
+
161
+
162
+ const reflow = element => {
163
+ // eslint-disable-next-line no-unused-expressions
164
+ element.offsetHeight;
165
+ };
132
166
 
133
167
  const getjQuery = () => {
134
168
  const {
@@ -218,7 +252,7 @@
218
252
 
219
253
  /**
220
254
  * --------------------------------------------------------------------------
221
- * Bootstrap (v5.0.2): util/scrollBar.js
255
+ * Bootstrap (v5.1.3): util/scrollBar.js
222
256
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
223
257
  * --------------------------------------------------------------------------
224
258
  */
@@ -287,18 +321,18 @@
287
321
  const actualValue = element.style[styleProp];
288
322
 
289
323
  if (actualValue) {
290
- Manipulator__default['default'].setDataAttribute(element, styleProp, actualValue);
324
+ Manipulator__default.default.setDataAttribute(element, styleProp, actualValue);
291
325
  }
292
326
  }
293
327
 
294
328
  _resetElementAttributes(selector, styleProp) {
295
329
  const manipulationCallBack = element => {
296
- const value = Manipulator__default['default'].getDataAttribute(element, styleProp);
330
+ const value = Manipulator__default.default.getDataAttribute(element, styleProp);
297
331
 
298
332
  if (typeof value === 'undefined') {
299
333
  element.style.removeProperty(styleProp);
300
334
  } else {
301
- Manipulator__default['default'].removeDataAttribute(element, styleProp);
335
+ Manipulator__default.default.removeDataAttribute(element, styleProp);
302
336
  element.style[styleProp] = value;
303
337
  }
304
338
  };
@@ -310,7 +344,7 @@
310
344
  if (isElement(selector)) {
311
345
  callBack(selector);
312
346
  } else {
313
- SelectorEngine__default['default'].find(selector, this._element).forEach(callBack);
347
+ SelectorEngine__default.default.find(selector, this._element).forEach(callBack);
314
348
  }
315
349
  }
316
350
 
@@ -322,11 +356,12 @@
322
356
 
323
357
  /**
324
358
  * --------------------------------------------------------------------------
325
- * Bootstrap (v5.0.2): util/backdrop.js
326
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
359
+ * Bootstrap (v5.1.3): util/backdrop.js
360
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
327
361
  * --------------------------------------------------------------------------
328
362
  */
329
- const Default$1 = {
363
+ const Default$2 = {
364
+ className: 'modal-backdrop',
330
365
  isVisible: true,
331
366
  // if false, we use the backdrop helper without adding any element to the dom
332
367
  isAnimated: false,
@@ -334,17 +369,17 @@
334
369
  // give the choice to place backdrop under different elements
335
370
  clickCallback: null
336
371
  };
337
- const DefaultType$1 = {
372
+ const DefaultType$2 = {
373
+ className: 'string',
338
374
  isVisible: 'boolean',
339
375
  isAnimated: 'boolean',
340
376
  rootElement: '(element|string)',
341
377
  clickCallback: '(function|null)'
342
378
  };
343
- const NAME$1 = 'backdrop';
344
- const CLASS_NAME_BACKDROP = 'modal-backdrop';
379
+ const NAME$2 = 'backdrop';
345
380
  const CLASS_NAME_FADE$1 = 'fade';
346
381
  const CLASS_NAME_SHOW$1 = 'show';
347
- const EVENT_MOUSEDOWN = `mousedown.bs.${NAME$1}`;
382
+ const EVENT_MOUSEDOWN = `mousedown.bs.${NAME$2}`;
348
383
 
349
384
  class Backdrop {
350
385
  constructor(config) {
@@ -390,7 +425,7 @@
390
425
  _getElement() {
391
426
  if (!this._element) {
392
427
  const backdrop = document.createElement('div');
393
- backdrop.className = CLASS_NAME_BACKDROP;
428
+ backdrop.className = this._config.className;
394
429
 
395
430
  if (this._config.isAnimated) {
396
431
  backdrop.classList.add(CLASS_NAME_FADE$1);
@@ -403,12 +438,12 @@
403
438
  }
404
439
 
405
440
  _getConfig(config) {
406
- config = { ...Default$1,
441
+ config = { ...Default$2,
407
442
  ...(typeof config === 'object' ? config : {})
408
443
  }; // use getElement() with the default "body" to get a fresh Element on each instantiation
409
444
 
410
445
  config.rootElement = getElement(config.rootElement);
411
- typeCheckConfig(NAME$1, config, DefaultType$1);
446
+ typeCheckConfig(NAME$2, config, DefaultType$2);
412
447
  return config;
413
448
  }
414
449
 
@@ -417,9 +452,9 @@
417
452
  return;
418
453
  }
419
454
 
420
- this._config.rootElement.appendChild(this._getElement());
455
+ this._config.rootElement.append(this._getElement());
421
456
 
422
- EventHandler__default['default'].on(this._getElement(), EVENT_MOUSEDOWN, () => {
457
+ EventHandler__default.default.on(this._getElement(), EVENT_MOUSEDOWN, () => {
423
458
  execute(this._config.clickCallback);
424
459
  });
425
460
  this._isAppended = true;
@@ -430,7 +465,7 @@
430
465
  return;
431
466
  }
432
467
 
433
- EventHandler__default['default'].off(this._element, EVENT_MOUSEDOWN);
468
+ EventHandler__default.default.off(this._element, EVENT_MOUSEDOWN);
434
469
 
435
470
  this._element.remove();
436
471
 
@@ -445,7 +480,136 @@
445
480
 
446
481
  /**
447
482
  * --------------------------------------------------------------------------
448
- * Bootstrap (v5.0.2): modal.js
483
+ * Bootstrap (v5.1.3): util/focustrap.js
484
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
485
+ * --------------------------------------------------------------------------
486
+ */
487
+ const Default$1 = {
488
+ trapElement: null,
489
+ // The element to trap focus inside of
490
+ autofocus: true
491
+ };
492
+ const DefaultType$1 = {
493
+ trapElement: 'element',
494
+ autofocus: 'boolean'
495
+ };
496
+ const NAME$1 = 'focustrap';
497
+ const DATA_KEY$1 = 'bs.focustrap';
498
+ const EVENT_KEY$1 = `.${DATA_KEY$1}`;
499
+ const EVENT_FOCUSIN = `focusin${EVENT_KEY$1}`;
500
+ const EVENT_KEYDOWN_TAB = `keydown.tab${EVENT_KEY$1}`;
501
+ const TAB_KEY = 'Tab';
502
+ const TAB_NAV_FORWARD = 'forward';
503
+ const TAB_NAV_BACKWARD = 'backward';
504
+
505
+ class FocusTrap {
506
+ constructor(config) {
507
+ this._config = this._getConfig(config);
508
+ this._isActive = false;
509
+ this._lastTabNavDirection = null;
510
+ }
511
+
512
+ activate() {
513
+ const {
514
+ trapElement,
515
+ autofocus
516
+ } = this._config;
517
+
518
+ if (this._isActive) {
519
+ return;
520
+ }
521
+
522
+ if (autofocus) {
523
+ trapElement.focus();
524
+ }
525
+
526
+ EventHandler__default.default.off(document, EVENT_KEY$1); // guard against infinite focus loop
527
+
528
+ EventHandler__default.default.on(document, EVENT_FOCUSIN, event => this._handleFocusin(event));
529
+ EventHandler__default.default.on(document, EVENT_KEYDOWN_TAB, event => this._handleKeydown(event));
530
+ this._isActive = true;
531
+ }
532
+
533
+ deactivate() {
534
+ if (!this._isActive) {
535
+ return;
536
+ }
537
+
538
+ this._isActive = false;
539
+ EventHandler__default.default.off(document, EVENT_KEY$1);
540
+ } // Private
541
+
542
+
543
+ _handleFocusin(event) {
544
+ const {
545
+ target
546
+ } = event;
547
+ const {
548
+ trapElement
549
+ } = this._config;
550
+
551
+ if (target === document || target === trapElement || trapElement.contains(target)) {
552
+ return;
553
+ }
554
+
555
+ const elements = SelectorEngine__default.default.focusableChildren(trapElement);
556
+
557
+ if (elements.length === 0) {
558
+ trapElement.focus();
559
+ } else if (this._lastTabNavDirection === TAB_NAV_BACKWARD) {
560
+ elements[elements.length - 1].focus();
561
+ } else {
562
+ elements[0].focus();
563
+ }
564
+ }
565
+
566
+ _handleKeydown(event) {
567
+ if (event.key !== TAB_KEY) {
568
+ return;
569
+ }
570
+
571
+ this._lastTabNavDirection = event.shiftKey ? TAB_NAV_BACKWARD : TAB_NAV_FORWARD;
572
+ }
573
+
574
+ _getConfig(config) {
575
+ config = { ...Default$1,
576
+ ...(typeof config === 'object' ? config : {})
577
+ };
578
+ typeCheckConfig(NAME$1, config, DefaultType$1);
579
+ return config;
580
+ }
581
+
582
+ }
583
+
584
+ /**
585
+ * --------------------------------------------------------------------------
586
+ * Bootstrap (v5.1.3): util/component-functions.js
587
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
588
+ * --------------------------------------------------------------------------
589
+ */
590
+
591
+ const enableDismissTrigger = (component, method = 'hide') => {
592
+ const clickEvent = `click.dismiss${component.EVENT_KEY}`;
593
+ const name = component.NAME;
594
+ EventHandler__default.default.on(document, clickEvent, `[data-bs-dismiss="${name}"]`, function (event) {
595
+ if (['A', 'AREA'].includes(this.tagName)) {
596
+ event.preventDefault();
597
+ }
598
+
599
+ if (isDisabled(this)) {
600
+ return;
601
+ }
602
+
603
+ const target = getElementFromSelector(this) || this.closest(`.${name}`);
604
+ const instance = component.getOrCreateInstance(target); // Method argument is left, for Alert and only, as it doesn't implement the 'hide' method
605
+
606
+ instance[method]();
607
+ });
608
+ };
609
+
610
+ /**
611
+ * --------------------------------------------------------------------------
612
+ * Bootstrap (v5.1.3): modal.js
449
613
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
450
614
  * --------------------------------------------------------------------------
451
615
  */
@@ -475,7 +639,6 @@
475
639
  const EVENT_HIDDEN = `hidden${EVENT_KEY}`;
476
640
  const EVENT_SHOW = `show${EVENT_KEY}`;
477
641
  const EVENT_SHOWN = `shown${EVENT_KEY}`;
478
- const EVENT_FOCUSIN = `focusin${EVENT_KEY}`;
479
642
  const EVENT_RESIZE = `resize${EVENT_KEY}`;
480
643
  const EVENT_CLICK_DISMISS = `click.dismiss${EVENT_KEY}`;
481
644
  const EVENT_KEYDOWN_DISMISS = `keydown.dismiss${EVENT_KEY}`;
@@ -486,22 +649,23 @@
486
649
  const CLASS_NAME_FADE = 'fade';
487
650
  const CLASS_NAME_SHOW = 'show';
488
651
  const CLASS_NAME_STATIC = 'modal-static';
652
+ const OPEN_SELECTOR = '.modal.show';
489
653
  const SELECTOR_DIALOG = '.modal-dialog';
490
654
  const SELECTOR_MODAL_BODY = '.modal-body';
491
655
  const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="modal"]';
492
- const SELECTOR_DATA_DISMISS = '[data-bs-dismiss="modal"]';
493
656
  /**
494
657
  * ------------------------------------------------------------------------
495
658
  * Class Definition
496
659
  * ------------------------------------------------------------------------
497
660
  */
498
661
 
499
- class Modal extends BaseComponent__default['default'] {
662
+ class Modal extends BaseComponent__default.default {
500
663
  constructor(element, config) {
501
664
  super(element);
502
665
  this._config = this._getConfig(config);
503
- this._dialog = SelectorEngine__default['default'].findOne(SELECTOR_DIALOG, this._element);
666
+ this._dialog = SelectorEngine__default.default.findOne(SELECTOR_DIALOG, this._element);
504
667
  this._backdrop = this._initializeBackDrop();
668
+ this._focustrap = this._initializeFocusTrap();
505
669
  this._isShown = false;
506
670
  this._ignoreBackdropClick = false;
507
671
  this._isTransitioning = false;
@@ -527,7 +691,7 @@
527
691
  return;
528
692
  }
529
693
 
530
- const showEvent = EventHandler__default['default'].trigger(this._element, EVENT_SHOW, {
694
+ const showEvent = EventHandler__default.default.trigger(this._element, EVENT_SHOW, {
531
695
  relatedTarget
532
696
  });
533
697
 
@@ -551,9 +715,8 @@
551
715
 
552
716
  this._setResizeEvent();
553
717
 
554
- EventHandler__default['default'].on(this._element, EVENT_CLICK_DISMISS, SELECTOR_DATA_DISMISS, event => this.hide(event));
555
- EventHandler__default['default'].on(this._dialog, EVENT_MOUSEDOWN_DISMISS, () => {
556
- EventHandler__default['default'].one(this._element, EVENT_MOUSEUP_DISMISS, event => {
718
+ EventHandler__default.default.on(this._dialog, EVENT_MOUSEDOWN_DISMISS, () => {
719
+ EventHandler__default.default.one(this._element, EVENT_MOUSEUP_DISMISS, event => {
557
720
  if (event.target === this._element) {
558
721
  this._ignoreBackdropClick = true;
559
722
  }
@@ -563,16 +726,12 @@
563
726
  this._showBackdrop(() => this._showElement(relatedTarget));
564
727
  }
565
728
 
566
- hide(event) {
567
- if (event && ['A', 'AREA'].includes(event.target.tagName)) {
568
- event.preventDefault();
569
- }
570
-
729
+ hide() {
571
730
  if (!this._isShown || this._isTransitioning) {
572
731
  return;
573
732
  }
574
733
 
575
- const hideEvent = EventHandler__default['default'].trigger(this._element, EVENT_HIDE);
734
+ const hideEvent = EventHandler__default.default.trigger(this._element, EVENT_HIDE);
576
735
 
577
736
  if (hideEvent.defaultPrevented) {
578
737
  return;
@@ -590,29 +749,24 @@
590
749
 
591
750
  this._setResizeEvent();
592
751
 
593
- EventHandler__default['default'].off(document, EVENT_FOCUSIN);
752
+ this._focustrap.deactivate();
594
753
 
595
754
  this._element.classList.remove(CLASS_NAME_SHOW);
596
755
 
597
- EventHandler__default['default'].off(this._element, EVENT_CLICK_DISMISS);
598
- EventHandler__default['default'].off(this._dialog, EVENT_MOUSEDOWN_DISMISS);
756
+ EventHandler__default.default.off(this._element, EVENT_CLICK_DISMISS);
757
+ EventHandler__default.default.off(this._dialog, EVENT_MOUSEDOWN_DISMISS);
599
758
 
600
759
  this._queueCallback(() => this._hideModal(), this._element, isAnimated);
601
760
  }
602
761
 
603
762
  dispose() {
604
- [window, this._dialog].forEach(htmlElement => EventHandler__default['default'].off(htmlElement, EVENT_KEY));
763
+ [window, this._dialog].forEach(htmlElement => EventHandler__default.default.off(htmlElement, EVENT_KEY));
605
764
 
606
765
  this._backdrop.dispose();
607
766
 
608
- super.dispose();
609
- /**
610
- * `document` has 2 events `EVENT_FOCUSIN` and `EVENT_CLICK_DATA_API`
611
- * Do not move `document` in `htmlElements` array
612
- * It will remove `EVENT_CLICK_DATA_API` event that should remain
613
- */
767
+ this._focustrap.deactivate();
614
768
 
615
- EventHandler__default['default'].off(document, EVENT_FOCUSIN);
769
+ super.dispose();
616
770
  }
617
771
 
618
772
  handleUpdate() {
@@ -628,9 +782,15 @@
628
782
  });
629
783
  }
630
784
 
785
+ _initializeFocusTrap() {
786
+ return new FocusTrap({
787
+ trapElement: this._element
788
+ });
789
+ }
790
+
631
791
  _getConfig(config) {
632
792
  config = { ...Default,
633
- ...Manipulator__default['default'].getDataAttributes(this._element),
793
+ ...Manipulator__default.default.getDataAttributes(this._element),
634
794
  ...(typeof config === 'object' ? config : {})
635
795
  };
636
796
  typeCheckConfig(NAME, config, DefaultType);
@@ -640,11 +800,11 @@
640
800
  _showElement(relatedTarget) {
641
801
  const isAnimated = this._isAnimated();
642
802
 
643
- const modalBody = SelectorEngine__default['default'].findOne(SELECTOR_MODAL_BODY, this._dialog);
803
+ const modalBody = SelectorEngine__default.default.findOne(SELECTOR_MODAL_BODY, this._dialog);
644
804
 
645
805
  if (!this._element.parentNode || this._element.parentNode.nodeType !== Node.ELEMENT_NODE) {
646
806
  // Don't move modal's DOM position
647
- document.body.appendChild(this._element);
807
+ document.body.append(this._element);
648
808
  }
649
809
 
650
810
  this._element.style.display = 'block';
@@ -667,17 +827,13 @@
667
827
 
668
828
  this._element.classList.add(CLASS_NAME_SHOW);
669
829
 
670
- if (this._config.focus) {
671
- this._enforceFocus();
672
- }
673
-
674
830
  const transitionComplete = () => {
675
831
  if (this._config.focus) {
676
- this._element.focus();
832
+ this._focustrap.activate();
677
833
  }
678
834
 
679
835
  this._isTransitioning = false;
680
- EventHandler__default['default'].trigger(this._element, EVENT_SHOWN, {
836
+ EventHandler__default.default.trigger(this._element, EVENT_SHOWN, {
681
837
  relatedTarget
682
838
  });
683
839
  };
@@ -685,19 +841,9 @@
685
841
  this._queueCallback(transitionComplete, this._dialog, isAnimated);
686
842
  }
687
843
 
688
- _enforceFocus() {
689
- EventHandler__default['default'].off(document, EVENT_FOCUSIN); // guard against infinite focus loop
690
-
691
- EventHandler__default['default'].on(document, EVENT_FOCUSIN, event => {
692
- if (document !== event.target && this._element !== event.target && !this._element.contains(event.target)) {
693
- this._element.focus();
694
- }
695
- });
696
- }
697
-
698
844
  _setEscapeEvent() {
699
845
  if (this._isShown) {
700
- EventHandler__default['default'].on(this._element, EVENT_KEYDOWN_DISMISS, event => {
846
+ EventHandler__default.default.on(this._element, EVENT_KEYDOWN_DISMISS, event => {
701
847
  if (this._config.keyboard && event.key === ESCAPE_KEY) {
702
848
  event.preventDefault();
703
849
  this.hide();
@@ -706,15 +852,15 @@
706
852
  }
707
853
  });
708
854
  } else {
709
- EventHandler__default['default'].off(this._element, EVENT_KEYDOWN_DISMISS);
855
+ EventHandler__default.default.off(this._element, EVENT_KEYDOWN_DISMISS);
710
856
  }
711
857
  }
712
858
 
713
859
  _setResizeEvent() {
714
860
  if (this._isShown) {
715
- EventHandler__default['default'].on(window, EVENT_RESIZE, () => this._adjustDialog());
861
+ EventHandler__default.default.on(window, EVENT_RESIZE, () => this._adjustDialog());
716
862
  } else {
717
- EventHandler__default['default'].off(window, EVENT_RESIZE);
863
+ EventHandler__default.default.off(window, EVENT_RESIZE);
718
864
  }
719
865
  }
720
866
 
@@ -736,12 +882,12 @@
736
882
 
737
883
  this._scrollBar.reset();
738
884
 
739
- EventHandler__default['default'].trigger(this._element, EVENT_HIDDEN);
885
+ EventHandler__default.default.trigger(this._element, EVENT_HIDDEN);
740
886
  });
741
887
  }
742
888
 
743
889
  _showBackdrop(callback) {
744
- EventHandler__default['default'].on(this._element, EVENT_CLICK_DISMISS, event => {
890
+ EventHandler__default.default.on(this._element, EVENT_CLICK_DISMISS, event => {
745
891
  if (this._ignoreBackdropClick) {
746
892
  this._ignoreBackdropClick = false;
747
893
  return;
@@ -766,7 +912,7 @@
766
912
  }
767
913
 
768
914
  _triggerBackdropTransition() {
769
- const hideEvent = EventHandler__default['default'].trigger(this._element, EVENT_HIDE_PREVENTED);
915
+ const hideEvent = EventHandler__default.default.trigger(this._element, EVENT_HIDE_PREVENTED);
770
916
 
771
917
  if (hideEvent.defaultPrevented) {
772
918
  return;
@@ -851,28 +997,36 @@
851
997
  */
852
998
 
853
999
 
854
- EventHandler__default['default'].on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
1000
+ EventHandler__default.default.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
855
1001
  const target = getElementFromSelector(this);
856
1002
 
857
1003
  if (['A', 'AREA'].includes(this.tagName)) {
858
1004
  event.preventDefault();
859
1005
  }
860
1006
 
861
- EventHandler__default['default'].one(target, EVENT_SHOW, showEvent => {
1007
+ EventHandler__default.default.one(target, EVENT_SHOW, showEvent => {
862
1008
  if (showEvent.defaultPrevented) {
863
1009
  // only register focus restorer if modal will actually get shown
864
1010
  return;
865
1011
  }
866
1012
 
867
- EventHandler__default['default'].one(target, EVENT_HIDDEN, () => {
1013
+ EventHandler__default.default.one(target, EVENT_HIDDEN, () => {
868
1014
  if (isVisible(this)) {
869
1015
  this.focus();
870
1016
  }
871
1017
  });
872
- });
1018
+ }); // avoid conflict when clicking moddal toggler while another one is open
1019
+
1020
+ const allReadyOpen = SelectorEngine__default.default.findOne(OPEN_SELECTOR);
1021
+
1022
+ if (allReadyOpen) {
1023
+ Modal.getInstance(allReadyOpen).hide();
1024
+ }
1025
+
873
1026
  const data = Modal.getOrCreateInstance(target);
874
1027
  data.toggle(this);
875
1028
  });
1029
+ enableDismissTrigger(Modal);
876
1030
  /**
877
1031
  * ------------------------------------------------------------------------
878
1032
  * jQuery
@@ -884,4 +1038,4 @@
884
1038
 
885
1039
  return Modal;
886
1040
 
887
- })));
1041
+ }));