@atlassian/aui 9.4.2 → 9.4.5

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@atlassian/aui",
     "description": "Atlassian User Interface library",
-    "version": "9.4.2",
+    "version": "9.4.5",
     "author": "Atlassian Pty Ltd.",
     "homepage": "https://aui.atlassian.com",
     "license": "Apache-2.0",

package/src/js/aui/dropdown2.js

@@ -884,6 +884,10 @@ var stringAttributeHandlerGenerator = function(attrName) {
     };
 };
 
+const convertCssClassesToArray = function (spaceDelimitedClasses = '') {
+    return spaceDelimitedClasses.split(' ').map(str => str.trim()).filter(x => x);
+}
+
 const ItemLinkEl = skate('aui-item-link', {
     template: template(
         '<a role="menuitem" tabindex="-1"><content></content></a>'
@@ -909,7 +913,16 @@ const ItemLinkEl = skate('aui-item-link', {
                 anchor.removeAttribute('aria-controls');
                 $(anchor).removeClass('aui-dropdown2-sub-trigger');
             }
-        }
+        },
+        'extra-classes': function (element, change) {
+            const anchor = element.children[0];
+            if (change.oldValue) {
+                anchor.classList.remove(...convertCssClassesToArray(change.oldValue));
+            }
+            if (change.newValue) {
+                anchor.classList.add(...convertCssClassesToArray(change.newValue));
+            }
+        },
     },
 });
 

package/src/js/aui/header-async.js

@@ -1,10 +1,15 @@
 import createHeader from './internal/header/create-header';
 import skate from './internal/skate';
 
-const Header = skate('aui-header', {
-    type: skate.type.CLASSNAME,
+const Header = skate('aui-header-end', {
+    type: skate.type.ELEMENT,
     created: function (element) {
-        createHeader(element);
+        const auiHeader = element.parentElement;
+        if (auiHeader && auiHeader.classList.contains('aui-header')) {
+            createHeader(auiHeader);
+        } else {
+            console.log('Could not async. initialise aui-header');
+        }
     }
 });
 

package/src/js/aui/internal/header/create-header.js

@@ -213,6 +213,10 @@ Header.prototype = {
                 $navItemDropdown.addClass('aui-dropdown2-sub-menu');
                 $navItemDropdown.appendTo('body');
             }
+            if ($navItemTrigger.get(0).hasAttribute('data-aui-extra-classes')) { // an opt-in behaviour
+                const extraClasses = Array.from($navItemTrigger.get(0).classList).filter(cls => !cls.startsWith('aui-'));
+                moreDropdownItemEl.setAttribute('extra-classes', extraClasses.join(' '));
+            }
             skate.init(moreDropdownItemEl);
             template.wrap(moreDropdownItemEl).textContent = $navItemTrigger.text();
 

package/src/js/aui/tooltip.js

@@ -37,6 +37,17 @@ const defaultOptions = {
 
 let $sharedTip;
 
+const getTipNode = () => {
+    return $sharedTip && $sharedTip.get(0);
+}
+
+const toggleTooltipVisibility = (shouldBeHidden = false) => {
+    const tipNode = getTipNode();
+    if (tipNode) {
+        tipNode.classList.toggle('assistive', shouldBeHidden)
+    }
+}
+
 class Tooltip {
     constructor(triggerElement, options) {
         this.triggerElement = triggerElement;
@@ -79,15 +90,8 @@ class Tooltip {
         this.$triggerElement.off(`.${pluginKey}`);
     }
 
-    getFloatingTip() {
+    buildTip(title) {
         const options = this.options;
-
-        let title = typeof options.title === 'function' ?
-            options.title :
-            typeof options.title === 'string' ?
-                () => options.title :
-                () => this.originalTitle || '';
-
         if ($sharedTip === undefined) {
             $sharedTip =
                 $(`<div id="${AUI_TOOLTIP_ID}" class="${AUI_TOOLTIP_CLASS_NAME} assistive" role="tooltip"><p class="aui-tooltip-content"></p></div>`)
@@ -96,23 +100,35 @@ class Tooltip {
         }
 
         if (options.html) {
-            $sharedTip.find('.aui-tooltip-content').html(title.call(this.triggerElement));
+            $sharedTip.find('.aui-tooltip-content').html(title);
         } else {
-            $sharedTip.find('.aui-tooltip-content').text(title.call(this.triggerElement));
+            $sharedTip.find('.aui-tooltip-content').text(title);
         }
-
         return $sharedTip;
     }
 
+    getTipTitle() {
+        const options = this.options;
+
+        let title = typeof options.title === 'function' ?
+            options.title :
+            typeof options.title === 'string' ?
+                () => options.title :
+                () => this.originalTitle || '';
+
+        let actualTitle = title.call(this.triggerElement);
+        return (actualTitle.trim().length === 0) ? undefined : actualTitle;
+    }
+
     show() {
-        if (this.enabled === false) {
+        const tipTitle = this.getTipTitle();
+        if (this.enabled === false || !tipTitle) {
             return;
         }
+
         this.hide();
         const triggerElement = this.triggerElement;
-
         const placement = GRAVITY_MAP[this.options.gravity];
-
         clearTimeout(this.popperTimeout);
 
         if (typeof this.options.suppress === 'function') {
@@ -121,9 +137,9 @@ class Tooltip {
             }
         }
 
+        const tipNode = this.buildTip(tipTitle).get(0);
         this.popperTimeout = setTimeout(() => {
-            const tipNode = this.getFloatingTip().get(0);
-            tipNode.classList.remove('assistive');
+            this.showTooltip();
 
             this.popperInstance = createPopper(triggerElement, tipNode, {
                 placement,
@@ -139,12 +155,11 @@ class Tooltip {
 
             $(window).on(`scroll.${pluginKey}`, () => this.hide());
         }, AUI_TOOLTIP_TIMEOUT);
+
     }
 
     hide() {
-        const tipNode = this.getFloatingTip().get(0);
-        tipNode.classList.add('assistive');
-
+        this.hideTooltip();
         clearTimeout(this.popperTimeout);
 
         if (this.popperInstance) {
@@ -154,6 +169,14 @@ class Tooltip {
         $(window).off(`scroll.${pluginKey}`);
     }
 
+    showTooltip() {
+        toggleTooltipVisibility(false);
+    }
+
+    hideTooltip() {
+        toggleTooltipVisibility(true);
+    }
+
     enable() {
         this.enabled = true;
     }
@@ -191,7 +214,7 @@ $.fn.tooltip = function (arg) {
 
     // Get the tooltip instance assigned to the first element in the collection
     if (arg === true) {
-        const firstDomNode = $collection.get(0)
+        const firstDomNode = $collection.get(0);
         return getTooltipInstance(firstDomNode);
     }
 

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

@@ -17,7 +17,7 @@
         --aui-page-border: @ak-color-N40;
         --aui-border: @ak-color-N40;
         --aui-border-strong: @ak-color-N100;
-        --aui-focus: @ak-color-B100;
+        --aui-focus: @ak-color-B200;
         --aui-link-color: @ak-color-B400;
         --aui-link-decoration: none;
         --aui-link-hover-color: @ak-color-B300;