@atlassian/aui 9.2.0 → 9.2.4

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@atlassian/aui",
     "description": "Atlassian User Interface library",
-    "version": "9.2.0",
+    "version": "9.2.4",
     "author": "Atlassian Pty Ltd.",
     "homepage": "https://aui.atlassian.com",
     "license": "Apache-2.0",
@@ -28,35 +28,36 @@
         "README.md",
         "yarn.lock"
     ],
+    "//": "AUI's publishConfig is managed by its build scripts.",
     "peerDependencies": {
         "jquery": "^2 || ^3"
     },
     "dependencies": {
-        "@atlassian/tipsy": "^1.3.1",
-        "@popperjs/core": "^2.4.4",
-        "backbone": "^1.3.3",
+        "@atlassian/tipsy": "1.3.3",
+        "@popperjs/core": "2.4.4",
+        "backbone": "1.4.0",
         "css.escape": "1.5.0",
-        "fancy-file-input": "~2.0.4",
-        "jquery-ui": "^1.12.1",
+        "fancy-file-input": "2.0.4",
+        "jquery-ui": "1.12.1",
         "skatejs": "0.13.17",
         "skatejs-template-html": "0.0.0",
         "trim-extra-html-whitespace": "1.3.0",
-        "underscore": "^1.10.2"
+        "underscore": "1.13.1"
     },
     "devDependencies": {
         "@atlassian/adg-server-iconfont": "3.1.0",
         "@atlassian/aui-webpack-config": "2.0.0",
-        "@babel/core": "^7.10.1",
-        "@babel/preset-env": "^7.10.1",
+        "@babel/core": "7.13.14",
+        "@babel/preset-env": "7.13.12",
         "bundlesize": "^1.0.0-beta.2",
-        "cross-env": "^5.1.3",
-        "eslint": "^4.10.0",
-        "glob": "^7.1.2",
+        "cross-env": "7.0.3",
+        "eslint": "7.24.0",
+        "glob": "7.1.2",
         "ignore-emit-webpack-plugin": "^2.0.2",
-        "jquery": "^3",
-        "jquery-migrate": "^3",
+        "jquery": "3.5.1",
+        "jquery-migrate": "3.3.2",
         "less": "3.11.1",
-        "webpack-cli": "^3.3.11"
+        "webpack-cli": "3.3.12"
     },
     "scripts": {
         "prepublishOnly": "yarn clean && cross-env NODE_ENV=production yarn build",

package/src/js/aui/date-picker.js

@@ -337,6 +337,11 @@ const initPolyfill = function (datePicker) {
     // shows that changing the `type` of input does not erase its value.
     // see https://codepen.io/chrisdarroch/pen/YzwgjyJ
     $field.prop('type', 'text');
+    // Set default value on initialization to handle all date formats.
+    // It is possible, because of changing type to text on the line above.
+    $field.val($field.attr('value'));
+    // Trigger change to update calendar popup value.
+    $field.trigger('propertychange');
 
     // demonstrate the polyfill is initialised
     $field.attr('data-aui-dp-uuid', datePickerUUID);

package/src/js/aui/dropdown2.js

@@ -12,10 +12,10 @@ import keyCode from './key-code';
 import layer from './layer';
 import state from './internal/state';
 import skate from './internal/skate';
+import escapeHtml from './escape-html';
 import {ifGone} from './internal/elements';
 import {doIfTrigger, setTrigger} from './trigger';
 import generateUniqueId from './unique-id';
-import escapeHtml from './escape-html';
 
 function isHidden(el) {
     return el.hasAttribute('hidden') || el.classList.contains('hidden');

package/src/js/aui/focus-manager.js

@@ -30,7 +30,7 @@ import {getTrigger} from './trigger';
             }
             return imageMap && visible(imageMap);
         }
-        var isFormElement = /input|select|textarea|button|object/.test(nodeName);
+        var isFormElement = /input|select|textarea|button|object|iframe/.test(nodeName);
         var isAnchor = nodeName === 'a';
         var isAnchorTabbable = (element.href || isTabIndexNotNaN);
 
@@ -205,8 +205,10 @@ function focusTrapHandler(focusTrapStack, event) {
         newFocusIdx = 0;
     }
 
-    $tabbableElements.eq(newFocusIdx).trigger('focus');
-    event.preventDefault();
+    if ($tabbableElements.get(newFocusIdx).nodeName !== 'IFRAME') {
+        $tabbableElements.eq(newFocusIdx).trigger('focus');
+        event.preventDefault();
+    }
 }
 
 // AUI-4403 - Previous maintainers pretended multiple FocusManager instances made sense.

package/src/js/aui/i18n.js

@@ -7,7 +7,7 @@ import keys from './internal/i18n/aui';
  * the key is returned - this could occur in plugin mode if the I18n transform is not performed;
  * or in flatpack mode if the i18n JS file is not loaded.
  */
-export var I18n = {
+const I18n = {
     keys: keys,
     getText: function (key, ...params) {
         if (Object.prototype.hasOwnProperty.call(this.keys, key)) {
@@ -18,6 +18,11 @@ export var I18n = {
     }
 };
 
+export {
+    I18n,
+    format
+}
+
 /**
  * Deprecated - do not use AJS.I18n.getText from global scope within AUI code. Use import { I18n } from '../i18n'
  * Also keep in mind that WRM is looking for patterns like "I18n.getText" so do not create

package/src/js/aui/inline-dialog.js

@@ -6,7 +6,7 @@ import globalize from './internal/globalize';
 import keyCode from './key-code';
 import cssEscape from 'css.escape';
 
-/* eslint quotmark:off, eqeqeq:off, strict:off, complexity:off */
+/* eslint quotes:off, eqeqeq:off, strict:off, complexity:off */
 
 /**
  * Creates a new inline dialog.

package/src/js/aui/messages.js

@@ -207,7 +207,7 @@ $.fn.closeMessage = function () {
     var $message = $(this);
     if ($message.hasClass('aui-message') && $message.hasClass('closeable')) {
         $message.stop(true); //Stop any running animation
-        $message.trigger('messageClose', [this]);  //messageClose event Deprecated as of 5.3
+        $message.trigger('messageClose', [this]); //messageClose event Deprecated as of 5.3
         $message.remove();
         $(document).trigger('aui-message-close', [this]);  //must trigger on document since the element has been removed
     }

package/src/js/aui/restful-table.js

@@ -251,7 +251,9 @@ var RestfulTable = Backbone.View.extend({
             this._applyFocusCoordinator(this._createRow);
 
             // focus create row
-            this._createRow.trigger(this._event.FOCUS);
+            if (this.options.autoFocus) {
+                this._createRow.trigger(this._event.FOCUS);
+            }
         }
 
         // when a model is removed from the collection, remove it from the viewport also

package/src/js/aui/tabs.js

@@ -214,7 +214,7 @@ function calculateResponsiveTabs(tabsContainer, index) {
         }
 
         if (!$tabsContainer.hasClass('aui-tabs-disabled')) {
-            $dropdown.on('click', 'a', handleTabClick);
+            $dropdown.on('click.aui-tabs', 'a', handleTabClick);
         }
 
         /* Workaround for bug in Edge where the dom is just not being re-rendered properly
@@ -315,6 +315,7 @@ function updateTabsFromLocalStorage($tabGroups) {
                 if (persistentTabId) {
                     var anchor = tabs.querySelector(`a[href$="${persistentTabId}"]`);
 
+                    // eslint-disable-next-line max-depth
                     if (anchor) {
                         switchToTab(anchor);
                     }
@@ -370,7 +371,7 @@ function getResponsiveTabs () {
 function initWindow () {
     const handler = debounce(responsiveResizeHandler, 200);
     handler(getResponsiveTabs());
-    $(window).on('resize', () => handler(getResponsiveTabs()));
+    $(window).on('resize.aui-tabs', () => handler(getResponsiveTabs()));
 }
 
 function initTab (tab) {
@@ -391,7 +392,7 @@ function initTab (tab) {
         });
 
         // Set up click event for tabs
-        $tabMenu.on('click', 'a', handleTabClick);
+        $tabMenu.on('click.aui-tabs', 'a', handleTabClick);
         $tab.data('aui-tab-events-bound', true);
 
         initPanes(tab);
@@ -439,7 +440,8 @@ var tabs = {
     },
 
     change: function (a) {
-        var $a = $(a);
+        var collection = a instanceof HTMLElement || a instanceof $ ? a : document.querySelector(a);
+        var $a = $(collection).first();
         var $tabGroup = $a.closest('.aui-tabs');
 
         switchToTab($a);

package/src/less/aui-buttons.less

@@ -237,6 +237,22 @@ a.aui-button,
     vertical-align: middle;
 }
 
+// Button link - icon and text
+.aui-button.aui-button-link.aui-button-link-icon-text {
+    &:hover,
+    &:focus {
+        text-underline-position: under;
+
+        .aui-icon {
+            // Align icon with underline from parent (button)
+            text-underline-position: from-font;
+            // Safari works without above (but other browsers need it)
+            // It lowers underline on icon, but not on text (Safari)
+            text-underline-offset: 1px;
+        }
+    }
+}
+
 // Icon Colours
 // ----------
 .aui-button .aui-icon {

package/src/less/aui-select2.less

@@ -234,14 +234,16 @@
 .aui-select2-container.select2-container .select2-choice:after {
     #aui.icon-pseudoelement();
     content: @aui-glyph-chevron-down;
-    left: 100%; /* "left" + "margin-left" required because of webkit not working properly with "right" */
     height: 0;
     margin-left: -18px;
     margin-top: -2px;
     opacity: 1;
     position: absolute;
-    top: 7px;
+    top: calc(50% - 10px);
     width: 0;
+    font-size: 16px;
+    line-height: 24px;
+    right: 22px;
 }
 
 /* Set the default text color to inherit.
@@ -272,9 +274,12 @@
 .aui-select2-container.select2-container-multi .select2-choices {
     #aui-forms.aui-select2-input-field-style(normal);
     #aui.icon(@aui-glyph-chevron-down, {
-        font-size: inherit;
+        font-size: 16.5px;
         left: inherit;
-        right: 0;
+        color: var(--aui-button-default-text-color);
+        right: 3px;
+        top: 50%;
+        line-height: 16px;
     });
 
     min-height: 0;

package/src/less/forms-current.less

@@ -243,13 +243,14 @@ form.aui:not(.aui-legacy-forms) {
     }
 
     // both are @ak-color-N600
-    @chevron-dark:   url('data:image/svg+xml,%3Csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill="%23A5ADBA" d="m6.744 8.744a1.053 1.053 0 0 0 0 1.49l4.547 4.557a1 1 0 0 0 1.416 0l4.55-4.558a1.051 1.051 0 1 0-1.488-1.488l-3.77 3.776-3.768-3.776a1.051 1.051 0 0 0-1.487 0z"/%3E%3C/svg%3E%0A');
-    @chevron-light:  url('data:image/svg+xml,%3Csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill="%23344563" d="m6.744 8.744a1.053 1.053 0 0 0 0 1.49l4.547 4.557a1 1 0 0 0 1.416 0l4.55-4.558a1.051 1.051 0 1 0-1.488-1.488l-3.77 3.776-3.768-3.776a1.051 1.051 0 0 0-1.487 0z"/%3E%3C/svg%3E%0A');
+    @chevron-dark:   url('data:image/svg+xml,%3Csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill="%23A5ADBA" d="M8.292 10.293a1.009 1.009 0 000 1.419l2.939 2.965c.218.215.5.322.779.322s.556-.107.769-.322l2.93-2.955a1.01 1.01 0 000-1.419.987.987 0 00-1.406 0l-2.298 2.317-2.307-2.327a.99.99 0 00-1.406 0z"/%3E%3C/svg%3E%0A');
+    @chevron-light:  url('data:image/svg+xml,%3Csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill="%23344563" d="M8.292 10.293a1.009 1.009 0 000 1.419l2.939 2.965c.218.215.5.322.779.322s.556-.107.769-.322l2.93-2.955a1.01 1.01 0 000-1.419.987.987 0 00-1.406 0l-2.298 2.317-2.307-2.327a.99.99 0 00-1.406 0z"/%3E%3C/svg%3E%0A');
 
     select[disabled]:not([size]),
     .select:not([size]) {
         background-repeat: no-repeat;
-        background-position: 100% 50%;
+        background-position: calc(100% + 1.5px) 50%;
+        background-size: 25px;
     }
 
     select.select[disabled]:not([size]) {
@@ -259,7 +260,7 @@ form.aui:not(.aui-legacy-forms) {
     }
 
     select.select:not([size]) {
-        padding-right: 22px;
+        padding-right: 20px;
         background-image: @chevron-light;
     }
 

package/src/less/imports/mixins/dropdown2-trigger-chevron-icon.less

@@ -2,7 +2,7 @@
 
 #aui {
     .aui-dropdown2-trigger-chevron-icon(@glyphsize: @aui-icon-size-small; @canvassize: @aui-icon-size-small-canvas) {
-        @canvas-padding: ((@canvassize - @glyphsize) / 2);
+
         #aui.icon-pseudoelement(@aui-icon-font-family);
         content: @aui-glyph-chevron-down;
         font-size: @glyphsize;
@@ -10,7 +10,7 @@
         line-height: 1;
         margin-top: -(@glyphsize / 2);
         position: absolute;
-        right: @canvas-padding;
+        right: 3.5px;
         top: 50%;
         text-indent: 0; // Reset indentation set by split button
         width: @glyphsize;

package/src/less/single-select.less

@@ -136,8 +136,6 @@ aui-select {
 
         &:not([aria-busy])::before {
             #aui.aui-dropdown2-trigger-chevron-icon();
-
-            right: ((@select-trigger-width - @aui-icon-size-small - (@aui-button-border-width *2)) / 2);
         }
     }
 }