@atlassian/aui 7.10.0 → 7.10.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@atlassian/aui",
   "description": "Atlassian User Interface Framework",
-  "version": "7.10.0",
+  "version": "7.10.3",
   "author": "Atlassian Pty Ltd.",
   "homepage": "https://docs.atlassian.com/aui/latest/",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -35,11 +35,11 @@
     "skatejs-template-html": "0.0.0",
     "tether": "atlassian/tether#amd-with-global",
     "trim-extra-html-whitespace": "1.3.0",
-    "underscore": "1.6.0",
-    "webcomponents.js": "0.7.20"
+    "underscore": "1.13.1",
+    "webcomponents.js": "0.7.20",
+    "yarn-version-bump": "0.0.4"
   },
   "devDependencies": {
-    "@atlaskit/util-shared-styles": "2.10.4",
     "@atlassian/atlassian-soy-loader": "2.1.1",
     "@atlassian/eslint-config-atlassian-fecq": "*",
     "@atlassian/soy-template-plugin-js": "4.3.0",
@@ -58,69 +58,66 @@
     "eslint-plugin-mocha": "4.11.0",
     "extract-text-webpack-plugin": "^3.0.2",
     "file-loader": "1.1.5",
-    "galvatron": "treshugart/galvatron#2e399eb",
+    "galvatron": "treshugart/galvatron#d140aeb",
     "glob": "7.1.2",
-    "gulp": "gulpjs/gulp#4ed9a4a32755",
+    "gulp": "4.0.2",
     "gulp-auto-task": "treshugart/gulp-auto-task#f58bcb5",
     "gulp-babel": "7.0.0",
     "gulp-batch": "1.0.5",
-    "gulp-cli": "1.4.0",
-    "gulp-clone": "1.0.0",
+    "gulp-cli": "2.3.0",
+    "gulp-clone": "2.0.1",
     "gulp-concat": "2.6.1",
     "gulp-cssnano": "2.1.3",
-    "gulp-debug": "3.1.0",
-    "gulp-dedupe": "0.0.2",
-    "gulp-eslint": "4.0.0",
-    "gulp-filter": "5.0.1",
-    "gulp-header": "1.8.9",
-    "gulp-if": "2.0.2",
-    "gulp-less": "3.3.2",
+    "gulp-debug": "4.0.0",
+    "gulp-eslint": "6.0.0",
+    "gulp-filter": "6.0.0",
+    "gulp-header": "2.0.9",
+    "gulp-if": "3.0.0",
+    "gulp-less": "4.0.1",
     "gulp-native2ascii": "0.0.3",
-    "gulp-rename": "1.2.2",
-    "gulp-replace": "^0.6.1",
-    "gulp-sourcemaps": "2.6.1",
-    "gulp-tap": "1.0.1",
-    "gulp-uglify": "3.0.0",
-    "gulp-watch": "4.3.11",
-    "gulp-watch-less": "treshugart/gulp-watch-less#b647b49",
+    "gulp-rename": "2.0.0",
+    "gulp-sourcemaps": "3.0.0",
+    "gulp-tap": "2.0.0",
+    "gulp-uglify": "3.0.2",
+    "gulp-watch": "5.0.1",
+    "gulp-watch-less": "1.0.1",
     "gulp-webserver": "0.9.1",
-    "gulp-zip": "4.0.0",
+    "gulp-zip": "5.1.0",
     "jquery": "2.2.0",
     "jquery-migrate": "1.4.1",
     "jstransformer-handlebars": "^1.1.0",
-    "karma": "1.7.1",
-    "karma-chrome-launcher": "2.2.0",
-    "karma-coverage": "1.1.1",
-    "karma-firefox-launcher": "1.0.1",
-    "karma-junit-reporter": "1.2.0",
+    "karma": "6.2.0",
+    "karma-chrome-launcher": "3.1.0",
+    "karma-coverage": "2.0.3",
+    "karma-firefox-launcher": "2.1.0",
+    "karma-junit-reporter": "2.0.1",
     "karma-less-preprocessor": "0.3.3",
-    "karma-mocha": "1.3.0",
+    "karma-mocha": "2.0.1",
     "karma-safari-launcher": "1.0.0",
-    "karma-sauce-launcher": "1.2.0",
-    "karma-sinon-chai": "1.2.0",
-    "karma-spec-reporter": "0.0.31",
+    "karma-sauce-launcher": "4.3.5",
+    "karma-sinon-chai": "2.0.2",
+    "karma-spec-reporter": "0.0.32",
     "lazypipe": "1.0.1",
     "less": "^2.7.3",
     "less-loader": "^4.0.5",
-    "less-plugin-npm-import": "2.1.0",
     "lolex": "1.4.0",
     "map-stream": "0.0.7",
     "md5": "2.2.1",
     "merge-stream": "1.0.1",
     "metalsmith": "2.3.0",
-    "metalsmith-define": "^2.0.1",
-    "metalsmith-discover-helpers": "^0.1.0",
-    "metalsmith-discover-partials": "^0.1.0",
-    "metalsmith-in-place": "^4.1.1",
-    "metalsmith-layouts": "1.8.1",
-    "metalsmith-markdown": "0.2.1",
-    "metalsmith-rootpath": "^1.0.4",
+    "metalsmith-define": "2.1.3",
+    "metalsmith-discover-helpers": "0.1.1",
+    "metalsmith-discover-partials": "0.1.2",
+    "metalsmith-in-place": "4.4.2",
+    "metalsmith-layouts": "2.3.1",
+    "metalsmith-markdown": "1.3.0",
+    "metalsmith-rootpath": "1.0.4",
     "mime": "2.0.3",
     "minimatch": "3.0.4",
-    "mkdirp": "0.5.1",
-    "mocha": "2.4.5",
-    "multimatch": "2.1.0",
-    "phantomcss": "^1.1.5",
+    "mkdirp": "1.0.4",
+    "mocha": "8.3.2",
+    "multimatch": "5.0.0",
+    "phantomcss": "^1.6.0",
     "pre-commit": "1.2.2",
     "request": "2.83.0",
     "sandy": "0.6.1",
@@ -135,6 +132,22 @@
     "webpack": "3.10.0",
     "webpack-merge": "4.1.1"
   },
+  "resolutions": {
+    "cryptiles": "4.1.3",
+    "cssnano": "4.1.10",
+    "gulp-auto-task/**/glob": "5.0.15",
+    "gulp": "4.0.2",
+    "gulp-filter": "6.0.0",
+    "gulp-watch": "5.0.1",
+    "gulp-webserver/**/tiny-lr": "2.0.0",
+    "less/**/hoek": "4.2.1",
+    "micromatch": "4.0.2",
+    "open": "8.0.2",
+    "uglifyjs-webpack-plugin/**/serialize-javascript": "3.1.0",
+    "webfonts-generator/**/xmldom": "0.5.0",
+    "webpack/**/yargs": "11.1.1",
+    "yargs-parser": "20.2.7"
+  },
   "repository": {
     "type": "git",
     "url": "https://bitbucket.org/atlassian/aui"

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

@@ -10,14 +10,14 @@ import keyCode from './key-code';
 import i18n from './i18n';
 
 
-var datePickerCounter = 0;
+let datePickerCounter = 0;
 
-function DatePicker (field, options) {
-    var datePicker;
-    var initPolyfill;
-    var $field;
-    var datePickerUUID;
-    var parentPopup;
+function DatePicker (field, baseOptions) {
+    let datePicker;
+    let initPolyfill;
+    let $field;
+    let datePickerUUID;
+    let options = {};
 
     datePicker = {};
     datePickerUUID = datePickerCounter++;
@@ -28,7 +28,6 @@ function DatePicker (field, options) {
 
     $field = $(field);
     $field.attr('data-aui-dp-uuid', datePickerUUID);
-    options = $.extend(undefined, DatePicker.prototype.defaultOptions, options);
 
     // ---------------------------------------------------------------------
     // expose arguments with getters ---------------------------------------
@@ -48,16 +47,18 @@ function DatePicker (field, options) {
 
     initPolyfill = function () {
 
-        var calendar;
-        var handleDatePickerFocus;
-        var handleFieldBlur;
-        var handleFieldFocus;
-        var handleFieldUpdate;
-        var initCalendar;
-        var isSuppressingShow;
-        var isTrackingDatePickerFocus;
-        var popup;
-        var popupContents;
+        let calendar;
+        let attributeHandler;
+        let handleDatePickerFocus;
+        let handleFieldBlur;
+        let handleFieldFocus;
+        let handleFieldUpdate;
+        let initCalendar;
+        let isSuppressingShow;
+        let isTrackingDatePickerFocus;
+        let popup;
+        let parentPopup;
+        let popupContents;
 
         // -----------------------------------------------------------------
         // expose methods for controlling the popup ------------------------
@@ -83,6 +84,18 @@ function DatePicker (field, options) {
             }
         };
 
+        datePicker.setMin = function (value) {
+            if (typeof calendar !== 'undefined') {
+                return calendar.datepicker('option', 'minDate', value);
+            }
+        };
+
+        datePicker.setMax = function (value) {
+            if (typeof calendar !== 'undefined') {
+                return calendar.datepicker('option', 'maxDate', value);
+            }
+        };
+
         // -----------------------------------------------------------------
         // initialise the calendar -----------------------------------------
         // -----------------------------------------------------------------
@@ -107,7 +120,7 @@ function DatePicker (field, options) {
                 'nextText': '>',
                 'onSelect': function (dateText) {
                     $field.val(dateText);
-                    $field.change();
+                    $field.trigger('change');
                     datePicker.hide();
                     isSuppressingShow = true;
                     $field.focus();
@@ -137,6 +150,17 @@ function DatePicker (field, options) {
             $field.on('focusout keydown', handleFieldBlur);
             $field.on('propertychange keyup input paste', handleFieldUpdate);
 
+            // bind attribute handlers to account for html5 attributes
+            attributeHandler = new MutationObserver(function (mutationsList) {
+                mutationsList.forEach(function(mutation) {
+                    if (mutation.attributeName === 'min') {
+                        datePicker.setMin(mutation.target.getAttribute('min'));
+                    } else if (mutation.attributeName === 'max') {
+                        datePicker.setMax(mutation.target.getAttribute('max'));
+                    }
+                });
+            });
+            attributeHandler.observe($field[0], { attributes: true });
         };
 
         // -----------------------------------------------------------------
@@ -184,10 +208,6 @@ function DatePicker (field, options) {
             // the calendar
             if (val) {
                 calendar.datepicker('setDate', $field.val());
-                calendar.datepicker('option', {
-                    'maxDate': $field.attr('max'),
-                    'minDate': $field.attr('min')
-                });
             }
         };
 
@@ -200,12 +220,18 @@ function DatePicker (field, options) {
             // goodbye, cruel world!
             datePicker.hide();
 
+            if (attributeHandler) {
+                attributeHandler.disconnect();
+                attributeHandler = null;
+            }
+
             $field.attr('placeholder', null);
 
             $field.off('propertychange keyup input paste', handleFieldUpdate);
             $field.off('focus click', handleFieldFocus);
             $field.off('focusout keydown', handleFieldBlur);
             $('body').off('keydown', handleFieldBlur);
+            $('body').off('focus blur click mousedown keydown', handleDatePickerFocus);
 
             if (DatePicker.prototype.browserSupportsDateField) {
                 $field[0].type = 'date';
@@ -315,11 +341,16 @@ function DatePicker (field, options) {
 
     };
 
+    datePicker.reconfigure = function (newOptions) {
+        options = $.extend(undefined, DatePicker.prototype.defaultOptions, newOptions);
+        datePicker.reset();
+    };
+
     // ---------------------------------------------------------------------
     // bootstrap -----------------------------------------------------------
     // ---------------------------------------------------------------------
 
-    datePicker.reset();
+    datePicker.reconfigure(baseOptions);
 
     return datePicker;
 
@@ -401,9 +432,17 @@ DatePicker.prototype.localisations = {
 // -------------------------------------------------------------------------
 // finally, integrate with jQuery for convenience --------------------------
 // -------------------------------------------------------------------------
+const key = 'aui-datepicker';
 
 $.fn.datePicker = function (options) {
-    return new DatePicker(this, options);
+    let picker = this.data(key);
+    if (!picker) {
+        picker = new DatePicker(this, options);
+        this.data(key, picker);
+    } else if (typeof options === 'object') {
+        picker.reconfigure(options);
+    }
+    return picker;
 };
 
 globalize('DatePicker', DatePicker);

package/src/js/aui/dropdown2.js

@@ -14,6 +14,7 @@ import keyCode from './key-code';
 import layer from './layer';
 import state from './internal/state';
 import skate from './internal/skate';
+import escapeHtml from './escape-html';
 
 function isChecked(el) {
     return $(el).is('.checked, .aui-dropdown2-checked, [aria-checked="true"]');
@@ -67,7 +68,7 @@ function makeAsyncDropdownContents (json) {
             var itemHtml = `
                 <${tagName} ${makeAttribute('for')} ${makeAttribute('href')} ${makeBooleanAttribute('interactive')}
                     ${makeBooleanAttribute('checked')} ${makeBooleanAttribute('disabled')} ${makeBooleanAttribute('hidden')}>
-                    ${itemData.content}
+                    ${escapeHtml(itemData.content)}
                 </${tagName}>`;
 
             return itemHtml;

package/src/js/aui/internal/select/option.js

@@ -18,7 +18,7 @@ export default skate('aui-option', {
         serialize: function () {
             var json = {};
             if (this.hasAttribute('img-src')) {
-                json['img-src'] = this.getAttribute('img-src');
+                json['img-src'] = escapeHtml(this.getAttribute('img-src'));
             }
             json.value = this.value;
             json.label = escapeHtml(this.textContent);

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

@@ -272,7 +272,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,6 +214,10 @@ function switchToTab (tab) {
         return;
     }
 
+    if ($tab.attr('href') === undefined) {
+        return;
+    }
+
     var $pane = $($tab.attr('href').match(REGEX)[0]);
 
     $pane
@@ -412,7 +416,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/js-vendor/jquery/jquery-ui/jquery.ui.dialog.js

@@ -1,3 +1,4 @@
+/*! THIS FILE HAS BEEN MODIFIED BY ATLASSIAN. Modified lines are marked below, search "ATLASSIAN" */
 /*!
  * jQuery UI Dialog 1.8.24
  *
@@ -164,12 +165,19 @@ $.widget("ui.dialog", {
 				.text(options.closeText)
 				.appendTo(uiDialogTitlebarClose),
 
+		/**
+		 * FOLLOWING LINES MODIFIED BY ATLASSIAN
+		 * 
+		 * This is a backport of the fix in #6016 in commit 7e9060c109b928769a664dbcc2c17bd21231b6f3
+		 */
 			uiDialogTitle = $('<span></span>')
 				.addClass('ui-dialog-title')
 				.attr('id', titleId)
-				.html(title)
 				.prependTo(uiDialogTitlebar);
 
+			this._title(uiDialogTitle);
+		/** END ATLASSIAN */		
+
 		//handling of deprecated beforeclose (vs beforeClose) option
 		//Ticket #4669 http://dev.jqueryui.com/ticket/4669
 		//TODO: remove in 1.9pre
@@ -193,6 +201,19 @@ $.widget("ui.dialog", {
 			uiDialog.bgiframe();
 		}
 	},
+	
+	/**
+	 * FOLLOWING LINES MODIFIED BY ATLASSIAN
+	 * 
+	 * This is a backport of the fix in #6016 in commit 7e9060c109b928769a664dbcc2c17bd21231b6f3
+	 */
+	_title: function(title) {
+		if (!this.options.title) {
+			title.html("&#160;");
+		}
+		title.text(this.options.title);
+	},
+	/** END ATLASSIAN */
 
 	_init: function() {
 		if ( this.options.autoOpen ) {
@@ -627,8 +648,14 @@ $.widget("ui.dialog", {
 				}
 				break;
 			case "title":
-				// convert whatever was passed in o a string, for html() to not throw up
-				$(".ui-dialog-title", self.uiDialogTitlebar).html("" + (value || '&#160;'));
+				/**
+				 * FOLLOWING LINES MODIFIED BY ATLASSIAN
+				 * 
+				 * This is a backport of the fix in #6016 in commit 7e9060c109b928769a664dbcc2c17bd21231b6f3
+				 */
+				this._title(self.uiDialogTitlebar.find(".ui-dialog-title"));
+				/** END ATLASSIAN */		
+
 				break;
 		}
 

package/src/less/imports/aui-theme/core/atlaskit-theme/borders.less

@@ -0,0 +1 @@
+@ak-border-radius: 3px;

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

@@ -0,0 +1,112 @@
+// Primary color palette
+@ak-color-primary1: @ak-color-N800;
+@ak-color-primary2: @ak-color-B500;
+@ak-color-primary3: @ak-color-N0;
+
+// Secondary color palette
+@ak-color-secondary1: @ak-color-R300;
+@ak-color-secondary2: @ak-color-Y300;
+@ak-color-secondary3: @ak-color-G300;
+@ak-color-secondary4: @ak-color-P300;
+@ak-color-secondary5: @ak-color-T300;
+
+// Reds
+@ak-color-R50: #FFEBE6;
+@ak-color-R75: #FFBDAD;
+@ak-color-R100: #FF8F73;
+@ak-color-R200: #FF7452;
+@ak-color-R300: #FF5630;
+@ak-color-R400: #DE350B;
+@ak-color-R500: #BF2600;
+
+// Yellows
+@ak-color-Y50: #FFFAE6;
+@ak-color-Y75: #FFF0B3;
+@ak-color-Y100: #FFE380;
+@ak-color-Y200: #FFC400;
+@ak-color-Y300: #FFAB00;
+@ak-color-Y400: #FF991F;
+@ak-color-Y500: #FF8B00;
+
+// Greens
+@ak-color-G50: #E3FCEF;
+@ak-color-G75: #ABF5D1;
+@ak-color-G100: #79F2C0;
+@ak-color-G200: #57D9A3;
+@ak-color-G300: #36B37E;
+@ak-color-G400: #00875A;
+@ak-color-G500: #006644;
+
+// Blues
+@ak-color-B50: #DEEBFF;
+@ak-color-B75: #B3D4FF;
+@ak-color-B100: #4C9AFF;
+@ak-color-B200: #2684FF;
+@ak-color-B300: #0065FF;
+@ak-color-B400: #0052CC;
+@ak-color-B500: #0747A6;
+
+// Purples
+@ak-color-P50: #EAE6FF;
+@ak-color-P75: #C0B6F2;
+@ak-color-P100: #998DD9;
+@ak-color-P200: #8777D9;
+@ak-color-P300: #6554C0;
+@ak-color-P400: #5243AA;
+@ak-color-P500: #403294;
+
+// Teals
+@ak-color-T50: #E6FCFF;
+@ak-color-T75: #B3F5FF;
+@ak-color-T100: #79E2F2;
+@ak-color-T200: #00C7E6;
+@ak-color-T300: #00B8D9;
+@ak-color-T400: #00A3BF;
+@ak-color-T500: #008DA6;
+
+@ak-color-N0: #FFFFFF;
+@ak-color-N10: #FAFBFC;
+@ak-color-N20: #F4F5F7;
+@ak-color-N30: #EBECF0;
+@ak-color-N40: #DFE1E6;
+@ak-color-N50: #C1C7D0;
+@ak-color-N60: #B3BAC5;
+@ak-color-N70: #A5ADBA;
+@ak-color-N80: #97A0AF;
+@ak-color-N90: #8993A4;
+@ak-color-N100: #7A869A;
+@ak-color-N200: #6B778C;
+@ak-color-N300: #5E6C84;
+@ak-color-N400: #505F79;
+@ak-color-N500: #42526E;
+@ak-color-N600: #344563;
+@ak-color-N700: #253858;
+@ak-color-N800: #172B4D;
+
+// ATTENTION: update the tints this if you update this one
+@ak-color-N900: #091E42;
+
+
+// Each tint is made of N900 and an alpha channel
+// ak-color-NXXXA: rgba(red(@ak-color-N900), green(@ak-color-N900), 66, ALPHA);
+// but we can't use this, because the JS export would not transform it properly
+// so it follows:
+// ak-color-N900 -> rgb(9,30,66)
+
+@ak-color-N10A: rgba(9, 30, 66, 0.02);
+@ak-color-N20A: rgba(9, 30, 66, 0.04);
+@ak-color-N30A: rgba(9, 30, 66, 0.08);
+@ak-color-N40A: rgba(9, 30, 66, 0.13);
+@ak-color-N50A: rgba(9, 30, 66, 0.25);
+@ak-color-N60A: rgba(9, 30, 66, 0.31);
+@ak-color-N70A: rgba(9, 30, 66, 0.36);
+@ak-color-N80A: rgba(9, 30, 66, 0.42);
+@ak-color-N90A: rgba(9, 30, 66, 0.48);
+@ak-color-N100A: rgba(9, 30, 66, 0.54);
+@ak-color-N200A: rgba(9, 30, 66, 0.60);
+@ak-color-N300A: rgba(9, 30, 66, 0.66);
+@ak-color-N400A: rgba(9, 30, 66, 0.71);
+@ak-color-N500A: rgba(9, 30, 66, 0.77);
+@ak-color-N600A: rgba(9, 30, 66, 0.82);
+@ak-color-N700A: rgba(9, 30, 66, 0.89);
+@ak-color-N800A: rgba(9, 30, 66, 0.95);

package/src/less/imports/aui-theme/core/atlaskit-theme/fonts.less

@@ -0,0 +1,3 @@
+@ak-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+@ak-font-size-default: 14px;
+@ak-code-font-family: "SFMono-Medium", "SF Mono", "Segoe UI Mono", "Roboto Mono", "Ubuntu Mono", Menlo, Courier, monospace;

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

@@ -1,4 +1,4 @@
-@import '~@atlaskit/util-shared-styles/src/colors';
+@import 'atlaskit-theme/colors';
 
 //
 // ADG3 Compatible Colours Palette

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

@@ -1,4 +1,4 @@
-@import '~@atlaskit/util-shared-styles/src/fonts';
+@import 'atlaskit-theme/fonts';
 @import 'colors';
 
 @aui-text-color: @ak-color-N800;