@atlassian/aui 10.0.4 → 10.1.1

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@atlassian/aui",
     "description": "Atlassian User Interface library",
-    "version": "10.0.4",
+    "version": "10.1.1",
     "author": "Atlassian Pty Ltd.",
     "homepage": "https://aui.atlassian.com",
     "license": "Apache-2.0",
@@ -33,7 +33,7 @@
     ],
     "//": "AUI's publishConfig is managed by its build scripts.",
     "peerDependencies": {
-        "jquery": "^2 || ^3"
+        "jquery": "^2 || ^3 || ^4"
     },
     "dependencies": {
         "@atlaskit/tokens": "4.9.1",
@@ -58,17 +58,18 @@
         "@types/backbone": "1.4.22",
         "@types/jqueryui": "1.12.23",
         "fs-extra": "9.1.0",
-        "ignore-emit-webpack-plugin": "2.0.6",
-        "jquery": "3.5.1",
-        "jquery-migrate": "3.5.2",
+        "ignore-emit-webpack-plugin": "^2.0.6",
+        "jquery": "4.0.0",
+        "jquery-3": "npm:jquery@3.7.1",
         "less": "4.2.0",
-        "react": "18.3.1"
+        "react": "18.3.1",
+        "webpack-merge": "6.0.1"
     },
     "scripts": {
         "prepublishOnly": "yarn clean && cross-env NODE_ENV=production yarn build && node scripts/prepublishOnly.js",
         "postpublish": "node scripts/postpublish.js",
         "clean": "rm -rf ./dist",
-        "dist/build:prototyping": "webpack --config webpack/dist.prototyping.webpack.config.js",
+        "dist/build:prototyping": "rspack --config webpack/dist.prototyping.webpack.config.js",
         "build": "yarn dist/build:prototyping",
         "watch": "yarn dist/build:prototyping --watch"
     }

package/src/js/aui/blanket.js

@@ -67,7 +67,7 @@ function dim(useShim, zIndex) {
         overflowEl.style.overflow = 'hidden';
     }
 
-    dim.$dim.removeAttr('hidden');
+    dim.$dim.prop('hidden', false);
 
     if (zIndex) {
         dim.$dim.css({ zIndex: zIndex });

package/src/js/aui/flag.js

@@ -168,7 +168,7 @@ function insertFlag($flag) {
     $flag.appendTo(flagContainer);
     recomputeStyle($flag);
 
-    $flag.removeAttr('hidden').attr('open', '');
+    $flag.attr('aria-hidden', 'false').attr('open', 'open');
 }
 
 amdify('aui/flag', flag);

package/src/js/aui/form-validation.js

@@ -183,7 +183,7 @@ function createArgumentAccessorFunction($field) {
 
 function changeFieldState($field, state, message) {
     $field.attr('data-' + ATTRIBUTE_FIELD_STATE, state);
-    $field.attr('aria-invalid', false);
+    $field.removeAttr('aria-invalid');
 
     if (state === UNVALIDATED) {
         return;

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

@@ -293,7 +293,7 @@ function InlineDialog(items, identifier, url, options) {
         // lazy load popup contents
         if (!contentLoading) {
             contentLoading = true;
-            if ($.isFunction(url)) {
+            if (typeof url === 'function') {
                 // If the passed in URL is a function, execute it. Otherwise simply load the content.
                 url(contents, trigger, doShowPopup);
             } else {
@@ -441,7 +441,7 @@ function InlineDialog(items, identifier, url, options) {
      */
     var bindHideOnExternalClick = function () {
         if (!hasBoundOnExternalClick) {
-            $('body').bind('click.' + externalClickNamespace, function (e) {
+            $('body').on('click.' + externalClickNamespace, function (e) {
                 var $target = $(e.target);
                 // hide the popup if the target of the event is not in the dialog
                 if (
@@ -539,18 +539,22 @@ function dimensionsOf(el) {
 }
 
 function getDimensions(popup, targetPosition, mousePosition, opts) {
-    var offsetX = $.isFunction(opts.offsetX)
-        ? opts.offsetX(popup, targetPosition, mousePosition, opts)
-        : opts.offsetX;
-    var offsetY = $.isFunction(opts.offsetY)
-        ? opts.offsetY(popup, targetPosition, mousePosition, opts)
-        : opts.offsetY;
-    var arrowOffsetX = $.isFunction(opts.arrowOffsetX)
-        ? opts.arrowOffsetX(popup, targetPosition, mousePosition, opts)
-        : opts.arrowOffsetX;
-    var arrowOffsetY = $.isFunction(opts.arrowOffsetY)
-        ? opts.arrowOffsetY(popup, targetPosition, mousePosition, opts)
-        : opts.arrowOffsetY;
+    var offsetX =
+        typeof opts.offsetX === 'function'
+            ? opts.offsetX(popup, targetPosition, mousePosition, opts)
+            : opts.offsetX;
+    var offsetY =
+        typeof opts.offsetY === 'function'
+            ? opts.offsetY(popup, targetPosition, mousePosition, opts)
+            : opts.offsetY;
+    var arrowOffsetX =
+        typeof opts.arrowOffsetX === 'function'
+            ? opts.arrowOffsetX(popup, targetPosition, mousePosition, opts)
+            : opts.arrowOffsetX;
+    var arrowOffsetY =
+        typeof opts.arrowOffsetY === 'function'
+            ? opts.arrowOffsetY(popup, targetPosition, mousePosition, opts)
+            : opts.arrowOffsetY;
 
     // Support positioning inside a scroll container other than <body>
     var isConstrainedScroll = opts.container.toLowerCase() !== 'body';
@@ -703,15 +707,18 @@ function calculateWestPositions(popup, targetPosition, mousePosition, opts) {
 }
 
 function calculateNorthSouthPositions(popup, targetPosition, mousePosition, opts) {
-    var offsetX = $.isFunction(opts.offsetX)
-        ? opts.offsetX(popup, targetPosition, mousePosition, opts)
-        : opts.offsetX;
-    var offsetY = $.isFunction(opts.offsetY)
-        ? opts.offsetY(popup, targetPosition, mousePosition, opts)
-        : opts.offsetY;
-    var arrowOffsetX = $.isFunction(opts.arrowOffsetX)
-        ? opts.arrowOffsetX(popup, targetPosition, mousePosition, opts)
-        : opts.arrowOffsetX;
+    var offsetX =
+        typeof opts.offsetX === 'function'
+            ? opts.offsetX(popup, targetPosition, mousePosition, opts)
+            : opts.offsetX;
+    var offsetY =
+        typeof opts.offsetY === 'function'
+            ? opts.offsetY(popup, targetPosition, mousePosition, opts)
+            : opts.offsetY;
+    var arrowOffsetX =
+        typeof opts.arrowOffsetX === 'function'
+            ? opts.arrowOffsetX(popup, targetPosition, mousePosition, opts)
+            : opts.arrowOffsetX;
 
     var viewportDimensions = dimensionsOf(window);
     var targetDimensions = dimensionsOf(targetPosition.target);

package/src/js/aui/layer.js

@@ -589,7 +589,7 @@ LayerManager.prototype = {
             this._stack
                 .slice()
                 .reverse()
-                .find((layer) => layer.attr('open')) || null
+                .find((layer) => layer.attr('open') !== undefined) || null
         );
     },
 

package/src/js/aui/query-input.js

@@ -6,7 +6,7 @@ var QueryInput = Backbone.View.extend({
     initialize: function () {
         bindAll(this, 'changed', 'val');
         this._lastValue = this.val();
-        this.$el.bind('keyup focus', this.changed);
+        this.$el.on('keyup focus', this.changed);
     },
 
     val: function () {

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

@@ -139,10 +139,10 @@ var EntryModel = Backbone.Model.extend({
         $.each(attributes, function (name, value) {
             if (!current[name]) {
                 if (typeof value === 'string') {
-                    if ($.trim(value) !== '') {
+                    if (value.trim() !== '') {
                         changed[name] = value;
                     }
-                } else if ($.isArray(value)) {
+                } else if (Array.isArray(value)) {
                     if (value.length !== 0) {
                         changed[name] = value;
                     }

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

@@ -20,7 +20,7 @@ function triggerEvt(name, args) {
  * @param {Function} func
  */
 function bindEvt(name, func) {
-    $eventTarget.bind(name, func);
+    $eventTarget.on(name, func);
 }
 
 /**

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

@@ -290,7 +290,7 @@ export default Backbone.View.extend({
 
                 $cell = $('<td />').append($editableRegion).appendTo(instance.$el);
 
-                if (!contents || !$.trim(contents)) {
+                if (!contents || !String(contents).trim()) {
                     $cell.addClass(instance.classNames.NO_VALUE);
                     $editableRegion.html(
                         $('<em />').text(this.emptyText || I18n.getText('aui.enter.value'))

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

@@ -109,7 +109,7 @@ var RestfulTable = Backbone.View.extend({
         // Let user know the table is loading
         this.showGlobalLoading();
         this.options.columns.forEach(function (column) {
-            var header = $.isFunction(column.header) ? column.header() : column.header;
+            var header = typeof column.header === 'function' ? column.header() : column.header;
             if (typeof header === 'undefined') {
                 logger.warn(
                     'You have not specified [header] for column [' +
@@ -300,7 +300,7 @@ var RestfulTable = Backbone.View.extend({
 
     fetchInitialResources: function () {
         var instance = this;
-        if ($.isFunction(this.options.resources.all)) {
+        if (typeof this.options.resources.all === 'function') {
             this.options.resources.all(function (entries) {
                 instance.populate(entries);
             });

package/src/js/aui/select2.js

@@ -106,7 +106,7 @@ $.fn.auiSelect2 = function (first) {
         // 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')) {
+        if (options.multiple || $selectInput.prop('multiple')) {
             // This is a multi-select, exiting
             return;
         }
@@ -137,7 +137,7 @@ $.fn.auiSelect2 = function (first) {
         const $selectInput = $(this);
         const wasAriaDescribedByCleared = $selectInput.data('was-ariadescribedby-cleared');
 
-        if (options.multiple || $selectInput.attr('multiple') || wasAriaDescribedByCleared) {
+        if (options.multiple || $selectInput.prop('multiple') || wasAriaDescribedByCleared) {
             return;
         }
 
@@ -153,7 +153,7 @@ $.fn.auiSelect2 = function (first) {
         const $selectInput = $(this);
         const $container = $selectInput.parent().find('.select2-container');
 
-        if (options.multiple || $selectInput.attr('multiple')) {
+        if (options.multiple || $selectInput.prop('multiple')) {
             if (searchLabel) {
                 $container.find('.select2-search-field label').text(searchLabel);
             }

package/src/js/aui/tabs.js

@@ -207,7 +207,7 @@ function calculateResponsiveTabs(tabsContainer, index) {
     var $dropdownTriggerTab = $tabsMenu.find('.aui-tabs-responsive-trigger').parent();
     var $dropdownTrigger = $dropdownTriggerTab.find('a');
     var dropdownId = $dropdownTrigger.attr('aria-controls');
-    var $dropdown = $(document.getElementById(dropdownId)).attr('aria-checked', false);
+    var $dropdown = $(document.getElementById(dropdownId)).removeAttr('aria-checked');
     var isResponsive = $dropdown.length > 0;
     var totalTabsWidth = ResponsiveAdapter.totalTabsWidth($visibleTabs, $dropdown);
     var needsResponsive = totalTabsWidth > $tabsContainer.outerWidth();
@@ -290,7 +290,7 @@ function switchToTab(tab) {
     var dropdownId = $dropdownTriggerTab.attr('aria-controls');
     var $dropdown = $(document.getElementById(dropdownId));
 
-    $dropdown.find('li a').attr('aria-checked', false).removeClass('checked aui-dropdown2-checked');
+    $dropdown.find('li a').removeAttr('aria-checked').removeClass('checked aui-dropdown2-checked');
     $dropdown.find('li').removeClass('active-tab');
 
     $tab.parent('li.menu-item')

package/src/js/aui/when-i-type.js

@@ -76,7 +76,7 @@ function whenIType(keys) {
     // Bind an arbitrary set of keys by calling bindKeyCombo on each triggering key combo.
     // A string like "abc 123" means (a then b then c) OR (1 then 2 then 3). abc is one key combo, 123 is another.
     function bindKeys(keys) {
-        var keyCombos = keys && keys.split ? $.trim(keys).split(' ') : [keys];
+        var keyCombos = keys && keys.split ? keys.trim().split(' ') : [keys];
 
         keyCombos.forEach(function (keyCombo) {
             bindKeyCombo(keyCombo);
@@ -562,7 +562,7 @@ whenIType.fromJSON = function (json, switchCtrlToMetaOnMac) {
                     );
                 }
 
-                if (!$.isArray(params)) {
+                if (!Array.isArray(params)) {
                     logger.error(
                         'Badly formatted shortcut parameter. String or JSON Array of parameters required: ' +
                             param

package/src/js-vendor-effective/jquery.hotkeys/jquery.hotkeys.js

@@ -66,7 +66,7 @@
 
 	function keyHandler( handleObj ) {
 		// Only care when a possible input has been specified
-		if ( !(jQuery.isPlainObject(handleObj.data) || jQuery.isArray(handleObj.data) || typeof handleObj.data === "string") ) {
+		if ( !(jQuery.isPlainObject(handleObj.data) || Array.isArray(handleObj.data) || typeof handleObj.data === "string") ) {
 			return;
 		}
 
@@ -79,7 +79,7 @@
 		(function (data) {
 			if (typeof data === 'string') {
 				options.combo = [ data ];
-			} else if (jQuery.isArray(data)) {
+			} else if (Array.isArray(data)) {
 				options.combo = data;
 			} else {
 				jQuery.extend(options, data);

package/src/js-vendor-effective/select2/select2.js

@@ -320,7 +320,8 @@ the specific language governing permissions and limitations under the Apache Lic
     function syncCssClasses(dest, src, adapter) {
         var classes, replacements = [], adapted;
 
-        classes = $.trim(dest.attr("class"));
+        const destClassesAttr = dest.attr("class");
+        classes = (destClassesAttr === undefined || destClassesAttr === null) ? "" : destClassesAttr.trim();
 
         if (classes) {
             classes = '' + classes; // for IE which returns object
@@ -332,7 +333,8 @@ the specific language governing permissions and limitations under the Apache Lic
             });
         }
 
-        classes = $.trim(src.attr("class"));
+        const srcClassesAttr = src.attr("class");
+        classes = (srcClassesAttr === undefined || srcClassesAttr === null) ? "" : srcClassesAttr.trim();
 
         if (classes) {
             classes = '' + classes; // for IE which returns object
@@ -428,7 +430,7 @@ the specific language governing permissions and limitations under the Apache Lic
                 if (handler && typeof handler.abort === "function") { handler.abort(); }
 
                 if (options.params) {
-                    if ($.isFunction(options.params)) {
+                    if (typeof options.params === 'function') {
                         $.extend(params, options.params.call(self));
                     } else {
                         $.extend(params, options.params);
@@ -481,12 +483,12 @@ the specific language governing permissions and limitations under the Apache Lic
             tmp,
             text = function (item) { return ""+item.text; }; // function used to retrieve the text portion of a data item that is matched against the search
 
-         if ($.isArray(data)) {
+         if (Array.isArray(data)) {
             tmp = data;
             data = { results: tmp };
         }
 
-         if ($.isFunction(data) === false) {
+         if (data !== 'function') {
             tmp = data;
             data = function() { return tmp; };
         }
@@ -495,7 +497,7 @@ the specific language governing permissions and limitations under the Apache Lic
         if (dataItem.text) {
             text = dataItem.text;
             // if text is not a function we assume it to be a key name
-            if (!$.isFunction(text)) {
+            if (text !== 'function') {
                 dataText = dataItem.text; // we need to store this in a separate variable because in the next step data gets reset and data.text is no longer available
                 text = function (item) { return item[dataText]; };
             }
@@ -535,11 +537,11 @@ the specific language governing permissions and limitations under the Apache Lic
 
     // TODO javadoc
     function tags(data) {
-        var isFunc = $.isFunction(data);
+        var isFunc = typeof data === 'function';
         return function (query) {
             var t = query.term, filtered = {results: []};
             var result = isFunc ? data(query) : data;
-            if ($.isArray(result)) {
+            if (Array.isArray(result)) {
                 $(result).each(function () {
                     var isObject = this.text !== undefined,
                         text = isObject ? this.text : this;
@@ -561,7 +563,7 @@ the specific language governing permissions and limitations under the Apache Lic
      * @param formatter
      */
     function checkFormatter(formatter, formatterName) {
-        if ($.isFunction(formatter)) return true;
+        if (typeof formatter === 'function') return true;
         if (!formatter) return false;
         if (typeof(formatter) === 'string') return true;
         throw new Error(formatterName +" must be a string, function, or falsy value");
@@ -576,7 +578,7 @@ the specific language governing permissions and limitations under the Apache Lic
    * @returns {*}
    */
     function evaluate(val, context) {
-        if ($.isFunction(val)) {
+        if (typeof val === 'function') {
             var args = Array.prototype.slice.call(arguments, 2);
             return val.apply(context, args);
         }
@@ -816,7 +818,7 @@ the specific language governing permissions and limitations under the Apache Lic
 
             this.lastSearchTerm = undefined;
 
-            if ($.isFunction(this.opts.initSelection)) {
+            if (typeof this.opts.initSelection === 'function') {
                 // initialize selection based on the current value of the source element
                 this.initSelection();
 
@@ -1026,7 +1028,7 @@ the specific language governing permissions and limitations under the Apache Lic
                 var elemTags = opts.element.data('tags');
 
                 // data-tags should actually be a boolean
-                if (!$.isArray(elemTags)) {
+                if (!Array.isArray(elemTags)) {
                     elemTags = [];
                 }
 
@@ -1045,7 +1047,7 @@ the specific language governing permissions and limitations under the Apache Lic
 
             // ajax.results -> ajax.processResults
             if (opts.ajax != null) {
-                if ($.isFunction(opts.ajax.processResults)) {
+                if (typeof opts.ajax.processResults === 'function') {
                     opts.ajax.results = opts.ajax.processResults;
                 }
             }
@@ -1055,32 +1057,32 @@ the specific language governing permissions and limitations under the Apache Lic
                 var lang = opts.language;
 
                 // formatNoMatches -> language.noMatches
-                if ($.isFunction(lang.noMatches)) {
+                if (typeof lang.noMatches === 'function') {
                     opts.formatNoMatches = lang.noMatches;
                 }
 
                 // formatSearching -> language.searching
-                if ($.isFunction(lang.searching)) {
+                if (typeof lang.searching === 'function') {
                     opts.formatSearching = lang.searching;
                 }
 
                 // formatInputTooShort -> language.inputTooShort
-                if ($.isFunction(lang.inputTooShort)) {
+                if (typeof lang.inputTooShort === 'function') {
                     opts.formatInputTooShort = lang.inputTooShort;
                 }
 
                 // formatInputTooLong -> language.inputTooLong
-                if ($.isFunction(lang.inputTooLong)) {
+                if (typeof lang.inputTooLong === 'function') {
                     opts.formatInputTooLong = lang.inputTooLong;
                 }
 
                 // formatLoading -> language.loadingMore
-                if ($.isFunction(lang.loadingMore)) {
+                if (typeof lang.loadingMore === 'function') {
                     opts.formatLoading = lang.loadingMore;
                 }
 
                 // formatSelectionTooBig -> language.maximumSelected
-                if ($.isFunction(lang.maximumSelected)) {
+                if (typeof lang.maximumSelected === 'function') {
                     opts.formatSelectionTooBig = lang.maximumSelected;
                 }
             }
@@ -1152,7 +1154,7 @@ the specific language governing permissions and limitations under the Apache Lic
                 opts.id = function (e) { return e[idKey]; };
             }
 
-            if ($.isArray(opts.element.data("select2Tags"))) {
+            if (Array.isArray(opts.element.data("select2Tags"))) {
                 if ("tags" in opts) {
                     throw "tags specified as both an attribute 'data-select2-tags' and in options of Select2 " + opts.element.attr("id");
                 }
@@ -1209,7 +1211,7 @@ the specific language governing permissions and limitations under the Apache Lic
                     } else if ("tags" in opts) {
                         opts.query = tags(opts.tags);
                         if (opts.createSearchChoice === undefined) {
-                            opts.createSearchChoice = function (term) { return {id: $.trim(term), text: $.trim(term)}; };
+                            opts.createSearchChoice = function (term) { return {id: (term === undefined || term === null) ? "" : term.trim(), text: (term === undefined || term === null) ? "" : term.trim()}; };
                         }
                         if (opts.initSelection === undefined) {
                             opts.initSelection = function (element, callback) {
@@ -1217,7 +1219,7 @@ the specific language governing permissions and limitations under the Apache Lic
                                 $(splitVal(element.val(), opts.separator, opts.transformVal)).each(function () {
                                     var obj = { id: this, text: this },
                                         tags = opts.tags;
-                                    if ($.isFunction(tags)) tags=tags();
+                                    if (typeof tags === 'function') tags=tags();
                                     $(tags).each(function() { if (equal(this.id, obj.id)) { obj = this; return false; } });
                                     data.push(obj);
                                 });
@@ -1904,7 +1906,7 @@ the specific language governing permissions and limitations under the Apache Lic
             var maxSelSize = this.getMaximumSelectionSize();
             if (maxSelSize >=1) {
                 data = this.data();
-                if ($.isArray(data) && data.length >= maxSelSize && checkFormatter(opts.formatSelectionTooBig, "formatSelectionTooBig")) {
+                if (Array.isArray(data) && data.length >= maxSelSize && checkFormatter(opts.formatSelectionTooBig, "formatSelectionTooBig")) {
                     render("<li class='select2-selection-limit'>" + evaluate(opts.formatSelectionTooBig, opts.element, maxSelSize) + "</li>");
                     return;
                 }
@@ -2070,7 +2072,7 @@ the specific language governing permissions and limitations under the Apache Lic
                     //Determine the placeholder option based on the specified placeholderOption setting
                     return (this.opts.placeholderOption === "first" && firstOption) ||
                            (typeof this.opts.placeholderOption === "function" && this.opts.placeholderOption(this.select));
-                } else if ($.trim(firstOption.text()) === "" && firstOption.val() === "") {
+                } else if (firstOption.text() == null ? "" : firstOption.text().trim() === "" && firstOption.val() === "") {
                     //No explicit placeholder option specified, use the first if it's blank
                     return firstOption;
                 }
@@ -2116,7 +2118,7 @@ the specific language governing permissions and limitations under the Apache Lic
                     }
 
                     return null;
-                } else if ($.isFunction(this.opts.width)) {
+                } else if (typeof this.opts.width === 'function') {
                     return this.opts.width();
                 } else {
                     return this.opts.width;
@@ -2530,7 +2532,7 @@ the specific language governing permissions and limitations under the Apache Lic
                             }
                             return is_match;
                         },
-                        callback: !$.isFunction(callback) ? $.noop : function() {
+                        callback: typeof callback !== 'function' ? $.noop : function() {
                             callback(match);
                         }
                     });
@@ -2822,7 +2824,7 @@ the specific language governing permissions and limitations under the Apache Lic
                             }
                             return is_match;
                         },
-                        callback: !$.isFunction(callback) ? $.noop : function() {
+                        callback: callback !== 'function' ? $.noop : function() {
                             // reorder matches based on the order they appear in the ids array because right now
                             // they are in the order in which they appear in data array
                             var ordered = [];
@@ -3625,7 +3627,7 @@ the specific language governing permissions and limitations under the Apache Lic
             return markup.join("");
         },
         transformVal: function(val) {
-            return $.trim(val);
+            return (val === undefined || val === null) ? "" : val.trim();
         },
         formatSelection: function (data, container, escapeMarkup) {
             return data ? escapeMarkup(this.text(data)) : undefined;
@@ -3642,7 +3644,7 @@ the specific language governing permissions and limitations under the Apache Lic
         id: function (e) { return e == undefined ? null : e.id; },
         text: function (e) {
           if (e && this.data && this.data.text) {
-            if ($.isFunction(this.data.text)) {
+            if (typeof this.data.text === 'function') {
               return this.data.text(e);
             } else {
               return e[this.data.text];