@atlassian/aui 9.3.7 → 9.4.3

package/entry/behaviours/aui.behaviour.i18n.js

@@ -1 +1 @@
-export {default as i18n} from '@atlassian/aui/src/js/aui/i18n';
+export {I18n as i18n} from '@atlassian/aui/src/js/aui/i18n';

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@atlassian/aui",
     "description": "Atlassian User Interface library",
-    "version": "9.3.7",
+    "version": "9.4.3",
     "author": "Atlassian Pty Ltd.",
     "homepage": "https://aui.atlassian.com",
     "license": "Apache-2.0",
@@ -46,25 +46,21 @@
     },
     "devDependencies": {
         "@atlassian/adg-server-iconfont": "3.1.0",
-        "@atlassian/aui-webpack-config": "2.0.0",
-        "@babel/core": "7.13.15",
-        "@babel/preset-env": "7.13.15",
-        "bundlesize": "^1.0.0-beta.2",
+        "@atlassian/aui-webpack-config": "3.0.1",
+        "@babel/core": "7.14.0",
+        "@babel/preset-env": "7.14.1",
+        "bundlesize": "1.0.0-beta.2",
         "cross-env": "7.0.3",
-        "eslint": "7.24.0",
-        "glob": "7.1.2",
-        "ignore-emit-webpack-plugin": "^2.0.2",
+        "eslint": "7.26.0",
+        "glob": "7.1.6",
+        "ignore-emit-webpack-plugin": "2.0.6",
         "jquery": "3.5.1",
         "jquery-migrate": "3.3.2",
-        "less": "3.11.1",
-        "webpack-cli": "3.3.12"
+        "less": "3.13.1"
     },
     "scripts": {
         "prepublishOnly": "yarn clean && cross-env NODE_ENV=production yarn build",
         "clean": "rm -rf ./dist",
-        "dist/build:core": "webpack --config webpack/dist.aui-lib.webpack.config.js",
-        "dist/build:exts": "webpack --config webpack/dist.aui-extensions.webpack.config.js",
-        "dist/build:legacy": "yarn dist/build:core && yarn dist/build:exts",
         "dist/build:prototyping": "webpack --config webpack/dist.prototyping.webpack.config.js",
         "build": "yarn dist/build:prototyping",
         "watch": "yarn dist/build:prototyping --watch",

package/src/js/aui/layer.js

@@ -13,6 +13,7 @@ const LAYER_EVENT_PREFIX = 'aui-layer-';
 const AUI_EVENT_PREFIX = 'aui-';
 const ATTR_MODAL = 'modal';
 const ATTR_DOM_CONTAINER = 'dom-container';
+const ZINDEX_AUI_LAYER_MIN = 3000;
 
 var $doc = $(document);
 
@@ -182,10 +183,6 @@ Layer.prototype = {
             return this;
         }
 
-        if (!triggerEvent(this.$el, 'beforeHide', 'hide')) {
-            return this;
-        }
-
         // AUI-3708
         const thisLayer = this;
         oneTransitionEnd(this.$el.get(0), 'opacity', function () {
@@ -194,7 +191,7 @@ Layer.prototype = {
             }
         });
 
-        LayerManager.global.popUntil(this.$el);
+        LayerManager.global.popUntil(this.$el, true);
 
         return this;
     },
@@ -259,13 +256,16 @@ Layer.prototype = {
     },
 
     _hideLayer: function (triggerBeforeEvents) {
+        if (triggerBeforeEvents) {
+            if (!triggerEvent(this.$el, 'beforeHide', 'hide')) {
+                return false;
+            }
+        }
+
         if (this.isPersistent() || this.isBlanketed()) {
             FocusManager.global.exit(this.$el);
         }
 
-        if (triggerBeforeEvents) {
-            triggerEvent(this.$el, 'beforeHide', 'hide');
-        }
         // don't remove via jquery; that would cause this method to get re-called once or twice more :\
         this.el.removeAttribute('open');
         this.$el.removeData('_aui-layer-shown');
@@ -273,6 +273,7 @@ Layer.prototype = {
         this.$el.data('_aui-layer-cached-z-index', '');
         this.$el.trigger(EVENT_PREFIX + 'hide');
         this.$el.trigger(GLOBAL_EVENT_PREFIX + 'hide', [this.$el]);
+        return true;
     },
 
     _showLayer: function (zIndex) {
@@ -368,7 +369,7 @@ function nextZIndex (layerArr) {
         _nextZIndex = 0;
     }
 
-    return Math.max(3000, _nextZIndex);
+    return Math.max(ZINDEX_AUI_LAYER_MIN, _nextZIndex);
 }
 
 function updateBlanket (stack, oldBlanketIndex) {
@@ -383,20 +384,24 @@ function updateBlanket (stack, oldBlanketIndex) {
     }
 }
 
-function popLayers (stack, stopIndex, forceClosePersistent) {
+function popLayers (stack, stopIndex, forceClosePersistent, triggerBeforeEvents = true) {
     if (stopIndex < 0) {
-        return;
+        return [false, null];
     }
 
+    var $layer;
     for (var a = stack.length - 1; a >= stopIndex; a--) {
-        var $layer = stack[a];
+        $layer = stack[a];
         var layer = createLayer($layer);
 
         if (forceClosePersistent || !layer.isPersistent()) {
-            layer._hideLayer(true);
+            if (!layer._hideLayer(triggerBeforeEvents)) {
+                return [false, $layer];
+            }
             stack.splice(a, 1);
         }
     }
+    return [true, $layer];
 }
 
 function getParentLayer (layer) {
@@ -561,14 +566,24 @@ LayerManager.prototype = {
     },
 
     /**
-    * Removes all non-modal layers above & including the given element. If the given element is not an active layer, this method
-    * is a no-op. The given element will be removed regardless of whether or not it is modal.
-    *
-    * @param {HTMLElement | String | jQuery} element layer to pop.
-    *
-    * @returns {jQuery} The last layer that was popped, or null if no layer matching the given $el was found.
-    */
-    popUntil: function (element) {
+     * Gets the top layer, if it exists.
+     *
+     * @returns The layer on top of the stack, if it exists, otherwise null.
+     */
+    getTopLayer: function () {
+        return this._stack[this._stack.length - 1] || null;
+    },
+
+    /**
+     * Removes all non-modal layers above & including the given element. If the given element is not an active layer, this method
+     * is a no-op. The given element will be removed regardless of whether or not it is modal.
+     *
+     * @param {HTMLElement | String | jQuery} element layer to pop.
+     * @param {boolean} [triggerBeforeEvents=false]
+     *
+     * @returns {jQuery} The last layer that was popped, or null if no layer matching the given $el was found.
+     */
+    popUntil: function (element, triggerBeforeEvents = false) {
         var $el = (element instanceof $) ? element : $(element);
         var index = layerIndex(this._stack, $el);
 
@@ -576,41 +591,31 @@ LayerManager.prototype = {
             return null;
         }
 
-        var oldTopBlanketedIndex = topBlanketedIndex(this._stack);
+        const oldTopBlanketedIndex = topBlanketedIndex(this._stack);
 
         // Removes all layers above the current one.
-        popLayers(this._stack, index + 1, createLayer($el).isBlanketed());
+        const layer = createLayer($el);
+        const [success, $lastPopped] = popLayers(this._stack, index + 1, layer.isBlanketed(), triggerBeforeEvents)
+        if (!success) {
+            return $lastPopped;
+        }
 
         // Removes the current layer.
+        if (!layer._hideLayer(triggerBeforeEvents)) {
+            return $lastPopped;
+        }
         this._stack.splice(index, 1);
-        createLayer($el)._hideLayer();
-
         updateBlanket(this._stack, oldTopBlanketedIndex);
 
         return $el;
     },
 
-    /**
-    * Gets the top layer, if it exists.
-    *
-    * @returns The layer on top of the stack, if it exists, otherwise null.
-    */
-    getTopLayer: function () {
-        if (!this._stack.length) {
-            return null;
-        }
-
-        var $topLayer = this._stack[this._stack.length - 1];
-
-        return $topLayer;
-    },
-
     /**
     * Pops the top layer, if it exists and it is non modal and non persistent.
     *
     * @returns The layer that was popped, if it was popped.
     */
-    popTopIfNonPersistent: function () {
+    popTopIfNonPersistent: function (triggerBeforeEvents = false) {
         var $topLayer = this.getTopLayer();
         var layer = createLayer($topLayer);
 
@@ -618,7 +623,7 @@ LayerManager.prototype = {
             return null;
         }
 
-        return this.popUntil($topLayer);
+        return this.popUntil($topLayer, triggerBeforeEvents);
     },
 
     /**
@@ -627,7 +632,7 @@ LayerManager.prototype = {
     *
     * @returns The blanketed layer that was popped, if it exists, otherwise null.
     */
-    popUntilTopBlanketed: function () {
+    popUntilTopBlanketed: function (triggerBeforeEvents = false) {
         var i = topBlanketedIndex(this._stack);
 
         if (i < 0) {
@@ -642,7 +647,7 @@ LayerManager.prototype = {
             var $next = this.getNextHigherNonPeristentAndNonBlanketedLayer($topBlanketedLayer);
             if ($next) {
                 var stopIndex = layerIndex(this._stack, $next);
-                popLayers(this._stack, stopIndex, true);
+                popLayers(this._stack, stopIndex, true, triggerBeforeEvents);
                 return $next;
             }
             return null;
@@ -657,7 +662,7 @@ LayerManager.prototype = {
     * Pops all layers above and including the top persistent layer. If layers exist but none are persistent, this method
     * does nothing.
     */
-    popUntilTopPersistent: function () {
+    popUntilTopPersistent: function (triggerBeforeEvents = false) {
         var $toPop = LayerManager.global.getTopLayer();
         if (!$toPop) {
             return;
@@ -677,7 +682,7 @@ LayerManager.prototype = {
 
                 if ($toPop && !toPop.isPersistent()) {
                     stopIndex = layerIndex(this._stack, $toPop);
-                    popLayers(this._stack, stopIndex, true);
+                    popLayers(this._stack, stopIndex, true, triggerBeforeEvents);
                     updateBlanket(this._stack, oldTopBlanketedIndex);
                 } else {
                     // Here we have a blanketed persistent layer
@@ -686,7 +691,7 @@ LayerManager.prototype = {
             }
         } else {
             stopIndex = layerIndex(this._stack, $toPop);
-            popLayers(this._stack, stopIndex, true);
+            popLayers(this._stack, stopIndex, true, triggerBeforeEvents);
             updateBlanket(this._stack, oldTopBlanketedIndex);
         }
     }
@@ -698,7 +703,7 @@ LayerManager.prototype = {
 function initCloseLayerOnEscPress() {
     $doc.on('keydown', function (e) {
         if (e.keyCode === keyCode.ESCAPE) {
-            LayerManager.global.popUntilTopPersistent();
+            LayerManager.global.popUntilTopPersistent(true);
             e.preventDefault();
         }
     });
@@ -706,7 +711,7 @@ function initCloseLayerOnEscPress() {
 
 function initCloseLayerOnBlanketClick() {
     $doc.on('click', '.aui-blanket', function (e) {
-        if (LayerManager.global.popUntilTopBlanketed()) {
+        if (LayerManager.global.popUntilTopBlanketed(true)) {
             e.preventDefault();
         }
     });

package/src/js/aui/unique-id.js

@@ -9,7 +9,7 @@ var uniqueIDcounter = 0;
  * returning. Note uniqueID, uniqueIDstring, uniqueIDcounter = 0; set at top of
  * file.
  *
- * @param {String} prefix String to prepend to ID instead of default AUI prefix.
+ * @param {String} [prefix] String to prepend to ID instead of default AUI prefix.
  *
  * @returns {String}
  */

package/src/less/aui-appheader.less

@@ -36,7 +36,6 @@ aui-header,
     box-sizing: border-box;
     padding: 0 @aui-grid;
     position: relative;
-    z-index: @aui-z-header;
 
     .aui-header-before {
         flex-grow: 0;

package/src/less/aui-experimental-tooltip.less

@@ -4,7 +4,7 @@
     background-color: var(--aui-tooltip-bg-color);
     padding: 2px 6px;
     pointer-events: none;
-    z-index: 9999;
+    z-index: @aui-z-tooltip;
     border-radius: @aui-border-radius-small;
     font-size: @aui-font-size-small;
     line-height:  unit(20 / @aui-font-size-small);

package/src/less/aui-page-typography.less

@@ -108,7 +108,9 @@ cite {
     font-style: italic;
 }
 cite:before {
-    content: "\2014 \2009";
+    display: inline-block;
+    content: "\2014";
+    padding-right: 0.5em;
 }
 blockquote {
     border-left: 2px solid @aui-border-color;

package/src/less/aui-select2.less

@@ -28,8 +28,19 @@
 @aui-select2-chosen-border-radius: @aui-border-radius-smallish;
 @aui-select2-chosen-close-button-length: 17px;
 
+.select2-drop-mask {
+    z-index: @aui-z-select2 - 2;
+}
+
 .aui-select2-drop {
     --aui-item-border-radius: 0;
+    margin-top: @aui-dropdown-trigger-offset;
+    margin-bottom: 0;
+    z-index: @aui-z-select2 - 1; // override select2 z-indices to fit in AUI's ranges. sits above blanket but below suggestions.
+}
+
+.aui-select2 .select2-search {
+    z-index: @aui-z-select2;
 }
 
 .aui-select2-drop .select2-result-selectable .select2-match,
@@ -48,12 +59,6 @@
     padding: @aui-select2-search-input-padding+@aui-dropdown2-padding;
 }
 
-.aui-select2-drop {
-    margin-top: @aui-dropdown-trigger-offset;
-    margin-bottom: 0;
-    z-index: 9999; // re-instated style from core select2 style
-}
-
 .aui-select2-drop .select2-results ul.select2-result-sub > li .select2-result-label,
 .aui-select2-drop .select2-results .select2-result-label,
 .aui-select2-drop .select2-results .select2-searching,

package/src/less/aui-sidebar-skeleton.less

@@ -27,7 +27,6 @@
     #aui.box-sizing();
     min-width: @aui-sidebar-collapsed-width;
     position: absolute;
-    z-index: @aui-z-sidebar;
 
     // when the sidebar sits over the content
     &.aui-sidebar-fly-out {
@@ -56,11 +55,12 @@
         position: absolute;
         top: 0;
         bottom: auto;
+        // explicit z-index needed in order to appear over the top of page layout's #content and #footer on the sidebar's RHS.
+        // they use padding-left to "make space" for sidebar, meaning their background-color bleeds over the top of sidebar.
+        z-index: 1;
 
         &.aui-is-docked {
             position: fixed;
-            top: 0;
-            bottom: auto;
         }
     }
 
@@ -295,6 +295,8 @@
 #content .aui-sidebar + main,
 #content + #footer {
     .aui-page-sidebar & {
+        // needs to be padding, not margin, so that horizontal scrollbars are not drawn.
+        // future iterations of page layout should use grid or flexbox and carve out explicit space for sidebar.
         padding-left: var(--aui-sidebar-width);
     }
 

package/src/less/flag.less

@@ -6,7 +6,7 @@
     position: fixed;
     top: @gutter + 55px; // height of header plus some fudge.
     right: @gutter;
-    z-index: 4000;
+    z-index: @aui-z-flag-container;
 }
 
 .aui-flag {

package/src/less/forms.less

@@ -6,7 +6,6 @@
 
 form.aui {
     margin: 20px 0 0 0;
-    position: relative;
 }
 
 form.aui:first-child {

package/src/less/imports/aui-theme/core/layers.less

@@ -1,4 +1,13 @@
-@aui-z-base: 2;
-@aui-z-sidebar: @aui-z-base + 1;
-@aui-z-header: @aui-z-sidebar + 1;
-@aui-z-skip: @aui-z-header + 1;
+// See layer.js and ZINDEX_AUI_LAYER_MIN, too.
+// All modern components' z-index values should be managed by the layer manager.
+@aui-z-layer-min: 3000;
+@aui-z-dropdown: @aui-z-layer-min;
+@aui-z-inline-dialog: @aui-z-layer-min;
+@aui-z-modal-dialog: @aui-z-layer-min;
+
+// Additional manually-configured indexes, because sometimes we need things to be above or below the base.
+@aui-z-blanket: @aui-z-layer-min - 500; // so it appears below modals
+@aui-z-skip: @aui-z-layer-min + 1000; // so they appear above modals
+@aui-z-flag-container: @aui-z-layer-min + 1000; // so they appear above modals
+@aui-z-select2: @aui-z-layer-min + 3; // so it can paint an "overlay" behind its suggestion dropdown
+@aui-z-tooltip: @aui-z-layer-min + 2000; // so they appear over the top of pretty much everything

package/src/less/inline-dialog.less

@@ -12,7 +12,6 @@ aui-inline-dialog {
 
     display: block;
     position: absolute;
-    z-index: 100;
 
     // Handle FOUC
     &:not([resolved]) {
@@ -159,7 +158,6 @@ aui-inline-dialog {
 .aui-inline-dialog {
     display: none;
     position: absolute;
-    z-index: 100;
 
     .aui-inline-dialog-contents,
     .contents {

package/src/less/layer.less

@@ -23,7 +23,7 @@
     position: fixed;
     top: 0;
     width: 100%;
-    z-index: 2500;
+    z-index: @aui-z-blanket;
 
     &:not([hidden]) {
         #aui.transition.fadeIn(@aui-blanket-fade-time, @aui-blanket-fade-delay);

package/src/less/messages.less

@@ -51,11 +51,6 @@ aui-message, .aui-message {
     }
 }
 
-.aui-popup .aui-message.closeable,
-.aui-dialog .aui-message.closeable {
-    z-index: 4000;
-}
-
 .aui-message-error {
     --aui-message-icolor: var(--aui-message-error-icon-color);
     --aui-message-ig: @aui-glyph-exclamation-circle;