@atlassian/aui 9.10.0 → 9.10.2

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@atlassian/aui",
     "description": "Atlassian User Interface library",
-    "version": "9.10.0",
+    "version": "9.10.2",
     "author": "Atlassian Pty Ltd.",
     "homepage": "https://aui.atlassian.com",
     "license": "Apache-2.0",
@@ -38,7 +38,7 @@
         "@popperjs/core": "2.11.8",
         "backbone": "1.5.0",
         "css.escape": "1.5.1",
-        "dompurify": "2.4.7",
+        "dompurify": "2.5.0",
         "fancy-file-input": "2.0.4",
         "jquery-ui": "1.13.2",
         "skatejs": "0.13.17",

package/src/js/aui/select2.js

@@ -1,5 +1,6 @@
 import $ from './jquery';
 import '../../js-vendor/jquery/plugins/jquery.select2';
+import layer from "./layer";
 
 /**
  * Wraps a vanilla Select2 with ADG _style_, as an auiSelect2 method on jQuery objects.
@@ -21,6 +22,7 @@ const auiHasAvatar = 'aui-has-avatar';
 
 $.fn.auiSelect2 = function (first) {
     let updatedArgs;
+    let dropdownLayer;
 
     if ($.isPlainObject(first)) {
         const auiOpts = $.extend({}, first);
@@ -79,14 +81,20 @@ $.fn.auiSelect2 = function (first) {
 
     select2Instance.on('select2-open', function () {
         const $selectInput = $(this);
+        const $selectDropdown = $selectInput.select2('dropdown');
+
+        if (!dropdownLayer) dropdownLayer = layer();
+        dropdownLayer.show(); // add layer to layer manager to get top z-index
+
+        $selectDropdown.css('z-index', dropdownLayer.$el.css('z-index'));
+        // mask is created during opening event, before open
+        $("#select2-drop-mask").css('z-index', dropdownLayer.$el.css('z-index'));
 
         if (options.multiple || $selectInput.attr('multiple')) {
             // This is a multi-select, exiting
             return;
         }
 
-        const $selectDropdown = $selectInput.select2('dropdown');
-
         if (searchLabel) {
             $selectDropdown.find('.select2-search label').text(searchLabel);
         }
@@ -94,6 +102,9 @@ $.fn.auiSelect2 = function (first) {
 
     select2Instance.on('select2-close', function () {
         const $selectInput = $(this);
+
+        dropdownLayer.hide();
+
         $selectInput.removeData('was-ariadescribedby-cleared');
     });
 

package/src/js/aui/tables-sortable.js

@@ -3,6 +3,7 @@ import '../../js-vendor/jquery/jquery.tablesorter';
 import globalize from './internal/globalize';
 
 const DEFAULT_SORT_OPTIONS = {
+    headerTemplate: '',
     sortMultiSortKey: '',
     headers: {},
     debug: false,

package/src/js/aui/tooltip.js

@@ -60,6 +60,7 @@ class Tooltip {
         this.enabled = this.options.enabled;
         this.moveTitleToTooltip();
         this.initContainer();
+        this.observeTriggerRemoval();
     }
 
     destroy() {
@@ -82,6 +83,38 @@ class Tooltip {
         });
     }
 
+    observeTriggerRemoval() {
+
+        const observedElements = [];
+
+        if (this.options.$delegationRoot && this.options.$delegationRoot.get(0)) {
+            observedElements.push(this.options.$delegationRoot.get(0));
+        }
+
+        if (this.triggerElement) {
+            observedElements.push(this.triggerElement);
+        }
+
+        this.triggerObservers = observedElements
+            .map(element => {
+                const parent = element.parentElement;
+                if (parent) {
+                    const observer = new MutationObserver(() => {
+                        const isToDestroy = !parent.contains(element);
+                        if (isToDestroy) {
+                            this.destroy();
+                        }
+                    });
+                    observer.observe(parent, {
+                        childList: true,
+                        subtree: false // We take trigger parent, so we only care about direct children
+                    });
+                    return observer;
+                }
+            })
+            .filter(observer => !!observer);
+    }
+
     unbindHandlers() {
         const selector = this.options.live;
 
@@ -93,6 +126,10 @@ class Tooltip {
             return;
         }
 
+        if (this.triggerObservers.length > 0) {
+            this.triggerObservers.forEach(observer => observer.disconnect());
+        }
+
         // We only need to unbind event handlers from this particular element
         this.$triggerElement.off(`.${pluginKey}`);
     }
@@ -310,14 +347,12 @@ $.fn.tooltip = function (arg) {
         $collection.on(activationEvents, selector, show);
         $collection.on(deactivationEvents, selector, hide);
         $collection.on('keyup', selector, hideOnEsc);
-
-        return $collection;
+    } else {
+        $collection.on(activationEvents, show);
+        $collection.on(deactivationEvents, hide);
+        $collection.on('keyup', hideOnEsc);
     }
 
-    $collection.on(activationEvents, show);
-    $collection.on(deactivationEvents, hide);
-    $collection.on('keyup', hideOnEsc);
-
     return $collection;
 };