@atlassian/aui 9.3.22 → 9.3.23

package/src/js/aui/tabs.js

@@ -10,9 +10,10 @@ import skate from './internal/skate';
 var template = window.skateTemplateHtml;
 
 var STORAGE_PREFIX = '_internal-aui-tabs-';
-var RESPONSIVE_OPT_IN_SELECTOR = '.aui-tabs.horizontal-tabs[data-aui-responsive]:not([data-aui-responsive="false"]), aui-tabs[responsive]:not([responsive="false"])';
+var RESPONSIVE_OPT_IN_SELECTOR =
+    '.aui-tabs.horizontal-tabs[data-aui-responsive]:not([data-aui-responsive="false"]), aui-tabs[responsive]:not([responsive="false"])';
 
-function getPaneIdFromTabLink (el) {
+function getPaneIdFromTabLink(el) {
     let $el = $(el);
     let maybeId = String($el.attr('href') || '').trim();
     return maybeId.indexOf('#') === 0 ? maybeId.substr(1) : null;
@@ -23,17 +24,20 @@ function getPaneIdFromTabLink (el) {
  * @param {HTMLElement} el a tab link element with an href attribute pointing to a tab panel
  * @returns {HTMLElement|null} the element with matching ID if it exists, otherwise null
  */
-function getPaneFromTabLink (el) {
+function getPaneFromTabLink(el) {
     let maybeId = getPaneIdFromTabLink(el);
     return maybeId ? document.getElementById(maybeId) : null;
 }
 
-function enhanceTabLink (link) {
+function enhanceTabLink(link) {
     var $thisLink = $(link);
     var targetPane = getPaneFromTabLink($thisLink);
 
     if (!getPaneIdFromTabLink(link)) {
-        logger.error('A tab link must use an anchor link (e.g., <a href="#a-valid-id"></a>) to work correctly.', link);
+        logger.error(
+            'A tab link must use an anchor link (e.g., <a href="#a-valid-id"></a>) to work correctly.',
+            link
+        );
     }
 
     if (targetPane) {
@@ -47,8 +51,11 @@ function enhanceTabLink (link) {
             $thisLink.attr('aria-selected', 'false');
         }
     } else {
-        logger.warn('A tab panel could not be found with the tab link\'s configured href.' +
-            ' Check whether the tab link href is correct.', link);
+        logger.warn(
+            "A tab panel could not be found with the tab link's configured href." +
+                ' Check whether the tab link href is correct.',
+            link
+        );
     }
 }
 
@@ -93,7 +100,10 @@ var ResponsiveAdapter = {
     },
 
     createResponsiveDropdown: function ($tabsContainer, id) {
-        var dropdownMarkup = '<div class="aui-dropdown2 aui-tabs-responsive-dropdown" id="aui-tabs-responsive-dropdown-' + id + '">' +
+        var dropdownMarkup =
+            '<div class="aui-dropdown2 aui-tabs-responsive-dropdown" id="aui-tabs-responsive-dropdown-' +
+            id +
+            '">' +
             '<ul>' +
             '</ul>' +
             '</div>';
@@ -109,7 +119,12 @@ var ResponsiveAdapter = {
 
         var currentTotalTabWidth = 0;
 
-        for (var i = 0; hasMoreSpace(currentTotalTabWidth, dropdownTriggerTabWidth, parentWidth) && i < tabs.length; i++) {
+        for (
+            var i = 0;
+            hasMoreSpace(currentTotalTabWidth, dropdownTriggerTabWidth, parentWidth) &&
+            i < tabs.length;
+            i++
+        ) {
             var $tab = $(tabs[i]);
             var tabWidth = $tab.outerWidth(true);
             currentTotalTabWidth += tabWidth;
@@ -122,7 +137,11 @@ var ResponsiveAdapter = {
     moveVisibleTabs: function (oldVisibleTabs, $tabsParent, $dropdownTriggerTab) {
         var dropdownId = $dropdownTriggerTab.find('a').attr('aria-controls');
         var $dropdown = $('#' + dropdownId);
-        var newVisibleTabs = this.findNewVisibleTabs(oldVisibleTabs, $tabsParent.outerWidth(), $dropdownTriggerTab.parent().outerWidth(true));
+        var newVisibleTabs = this.findNewVisibleTabs(
+            oldVisibleTabs,
+            $tabsParent.outerWidth(),
+            $dropdownTriggerTab.parent().outerWidth(true)
+        );
         var lastTabIndex = newVisibleTabs.length - 1;
 
         for (var j = oldVisibleTabs.length - 1; j >= lastTabIndex; j--) {
@@ -168,14 +187,16 @@ var ResponsiveAdapter = {
     moveTabOutOfDropdown: function ($tab, $dropdownTriggerTab) {
         var isTabInDropdownActive = $tab.find('a').hasClass('aui-dropdown2-checked');
 
-        if (isTabInDropdownActive){
+        if (isTabInDropdownActive) {
             $tab.addClass('active-tab');
             $dropdownTriggerTab.removeClass('active-tab');
         }
 
-        $tab.children('a').removeClass('aui-dropdown2-radio aui-tabs-responsive-item aui-dropdown2-checked');
+        $tab.children('a').removeClass(
+            'aui-dropdown2-radio aui-tabs-responsive-item aui-dropdown2-checked'
+        );
         $dropdownTriggerTab.before($tab);
-    }
+    },
 };
 
 // this function is run by jquery .each() where 'this' is the current tabs container
@@ -185,7 +206,7 @@ function calculateResponsiveTabs(tabsContainer, index) {
     var $visibleTabs = $tabsMenu.find('li:not(.aui-tabs-responsive-trigger-item)');
     var $dropdownTriggerTab = $tabsMenu.find('.aui-tabs-responsive-trigger').parent();
     var $dropdownTrigger = $dropdownTriggerTab.find('a');
-    var dropdownId =  $dropdownTrigger.attr('aria-controls');
+    var dropdownId = $dropdownTrigger.attr('aria-controls');
     var $dropdown = $(document.getElementById(dropdownId)).attr('aria-checked', false);
     var isResponsive = $dropdown.length > 0;
     var totalTabsWidth = ResponsiveAdapter.totalTabsWidth($visibleTabs, $dropdown);
@@ -203,14 +224,23 @@ function calculateResponsiveTabs(tabsContainer, index) {
     $dropdown.attr('id', 'aui-tabs-responsive-dropdown-' + index);
 
     if (needsResponsive) {
-        var $newVisibleTabs = ResponsiveAdapter.moveVisibleTabs($visibleTabs.toArray(), $tabsContainer, $dropdownTriggerTab);
+        var $newVisibleTabs = ResponsiveAdapter.moveVisibleTabs(
+            $visibleTabs.toArray(),
+            $tabsContainer,
+            $dropdownTriggerTab
+        );
         var visibleTabWidth = ResponsiveAdapter.totalVisibleTabWidth($newVisibleTabs);
-        var remainingSpace = $tabsContainer.outerWidth() - visibleTabWidth  - $dropdownTriggerTab.outerWidth(true);
+        var remainingSpace =
+            $tabsContainer.outerWidth() - visibleTabWidth - $dropdownTriggerTab.outerWidth(true);
         var hasSpace = remainingSpace > 0;
 
         if (hasSpace) {
             var $tabsInDropdown = $dropdown.find('li');
-            ResponsiveAdapter.moveInvisibleTabs($tabsInDropdown.toArray(), remainingSpace, $dropdownTriggerTab);
+            ResponsiveAdapter.moveInvisibleTabs(
+                $tabsInDropdown.toArray(),
+                remainingSpace,
+                $dropdownTriggerTab
+            );
         }
 
         if (!$tabsContainer.hasClass('aui-tabs-disabled')) {
@@ -234,7 +264,7 @@ function calculateResponsiveTabs(tabsContainer, index) {
     }
 }
 
-function switchToTab (tab) {
+function switchToTab(tab) {
     var $tab = $(tab);
 
     // This probably isn't needed anymore. Remove once confirmed.
@@ -244,17 +274,17 @@ function switchToTab (tab) {
 
     var pane = getPaneFromTabLink($tab);
     if (!pane) {
-        logger.error('Cannot switch to tab panel because it does not exist.' +
-            ' Check whether the tab link href is correct.', tab);
+        logger.error(
+            'Cannot switch to tab panel because it does not exist.' +
+                ' Check whether the tab link href is correct.',
+            tab
+        );
         return;
     }
 
     var $pane = $(pane);
 
-    $pane
-        .addClass('active-pane')
-        .siblings('.tabs-pane')
-        .removeClass('active-pane')
+    $pane.addClass('active-pane').siblings('.tabs-pane').removeClass('active-pane');
 
     var $dropdownTriggerTab = $tab.parents('.aui-tabs').find('.aui-tabs-responsive-trigger-item a');
     var dropdownId = $dropdownTriggerTab.attr('aria-controls');
@@ -263,41 +293,52 @@ function switchToTab (tab) {
     $dropdown.find('li a').attr('aria-checked', false).removeClass('checked aui-dropdown2-checked');
     $dropdown.find('li').removeClass('active-tab');
 
-    $tab
-        .parent('li.menu-item')
+    $tab.parent('li.menu-item')
         .addClass('active-tab')
         .siblings('.menu-item')
         .removeClass('active-tab');
 
     if ($tab.hasClass('aui-tabs-responsive-item')) {
-        var $visibleTabs = $pane.parent('.aui-tabs').find('li.menu-item:not(.aui-tabs-responsive-trigger-item)');
+        var $visibleTabs = $pane
+            .parent('.aui-tabs')
+            .find('li.menu-item:not(.aui-tabs-responsive-trigger-item)');
 
         $visibleTabs.removeClass('active-tab');
         $visibleTabs.find('a').removeClass('checked').removeAttr('aria-checked');
     }
 
     if ($tab.hasClass('aui-tabs-responsive-item')) {
-        $pane.parent('.aui-tabs').find('li.menu-item.aui-tabs-responsive-trigger-item').addClass('active-tab');
+        $pane
+            .parent('.aui-tabs')
+            .find('li.menu-item.aui-tabs-responsive-trigger-item')
+            .addClass('active-tab');
     }
 
     $tab.closest('.tabs-menu').find('a').attr('aria-selected', 'false');
     $tab.attr('aria-selected', 'true');
     $tab.trigger('tabSelect', {
         tab: $tab,
-        pane: $pane
+        pane: $pane,
     });
 }
 
 function isPersistentTabGroup($tabGroup) {
     // Tab group persistent attribute exists and is not false
-    return $tabGroup.attr('data-aui-persist') !== undefined && $tabGroup.attr('data-aui-persist') !== 'false';
+    return (
+        $tabGroup.attr('data-aui-persist') !== undefined &&
+        $tabGroup.attr('data-aui-persist') !== 'false'
+    );
 }
 
 function createPersistentKey($tabGroup) {
     var tabGroupId = $tabGroup.attr('id');
     var value = $tabGroup.attr('data-aui-persist');
 
-    return STORAGE_PREFIX + (tabGroupId ? tabGroupId : '') + (value && value !== 'true' ? '-' + value : '');
+    return (
+        STORAGE_PREFIX +
+        (tabGroupId ? tabGroupId : '') +
+        (value && value !== 'true' ? '-' + value : '')
+    );
 }
 
 /* eslint max-depth: 1 */
@@ -321,13 +362,15 @@ function updateTabsFromLocalStorage($tabGroups) {
                     }
                 }
             } else {
-                logger.warn('A tab group must specify an id attribute if it specifies data-aui-persist.');
+                logger.warn(
+                    'A tab group must specify an id attribute if it specifies data-aui-persist.'
+                );
             }
         }
     }
 }
 
-function updateLocalStorageEntry ($tab) {
+function updateLocalStorageEntry($tab) {
     var $tabGroup = $tab.closest('.aui-tabs');
     var tabGroupId = $tabGroup.attr('id');
 
@@ -335,14 +378,14 @@ function updateLocalStorageEntry ($tab) {
         var tabId = getPaneIdFromTabLink($tab);
 
         if (tabId) {
-            window.localStorage.setItem(createPersistentKey($tabGroup),'#' + tabId);
+            window.localStorage.setItem(createPersistentKey($tabGroup), '#' + tabId);
         }
     } else {
         logger.warn('A tab group must specify an id attribute if it specifies data-aui-persist.');
     }
 }
 
-function handleTabClick (e) {
+function handleTabClick(e) {
     tabs.change($(e.target).closest('a'));
 
     if (e) {
@@ -350,31 +393,30 @@ function handleTabClick (e) {
     }
 }
 
-function responsiveResizeHandler (tabs) {
+function responsiveResizeHandler(tabs) {
     tabs.forEach(function (tab, index) {
         calculateResponsiveTabs(tab, index);
     });
 }
 
-
 // Initialisation
 // --------------
 
-function getTabs () {
+function getTabs() {
     return $('.aui-tabs:not(.aui-tabs-disabled)');
 }
 
-function getResponsiveTabs () {
+function getResponsiveTabs() {
     return $(RESPONSIVE_OPT_IN_SELECTOR).toArray();
 }
 
-function initWindow () {
+function initWindow() {
     const handler = debounce(responsiveResizeHandler, 200);
     handler(getResponsiveTabs());
     $(window).on('resize.aui-tabs', () => handler(getResponsiveTabs()));
 }
 
-function initTab (tab) {
+function initTab(tab) {
     var $tab = $(tab);
 
     tab.setAttribute('role', 'application');
@@ -399,7 +441,7 @@ function initTab (tab) {
     }
 }
 
-function initTabs () {
+function initTabs() {
     var tabs = getTabs();
 
     tabs.each(function () {
@@ -409,27 +451,29 @@ function initTabs () {
     updateTabsFromLocalStorage(tabs);
 }
 
-function initPane (pane) {
+function initPane(pane) {
     pane.setAttribute('role', 'tabpanel');
 }
 
-function initPanes (tab) {
+function initPanes(tab) {
     [].slice.call(tab.querySelectorAll('.tabs-pane')).forEach(initPane);
 }
 
-function initVerticalTabs () {
+function initVerticalTabs() {
     // Vertical tab truncation setup (adds title if clipped)
-    $('.aui-tabs.vertical-tabs').find('a').each(function () {
-        var thisTab = $(this);
-
-        // don't override existing titles
-        if (!thisTab.attr('title')) {
-            // if text has been truncated, add title
-            if (isClipped(thisTab)) {
-                thisTab.attr('title', thisTab.text());
+    $('.aui-tabs.vertical-tabs')
+        .find('a')
+        .each(function () {
+            var thisTab = $(this);
+
+            // don't override existing titles
+            if (!thisTab.attr('title')) {
+                // if text has been truncated, add title
+                if (isClipped(thisTab)) {
+                    thisTab.attr('title', thisTab.text());
+                }
             }
-        }
-    });
+        });
 }
 
 var tabs = {
@@ -449,24 +493,23 @@ var tabs = {
         if (isPersistentTabGroup($tabGroup) && window.localStorage) {
             updateLocalStorageEntry($a);
         }
-    }
+    },
 };
 
 $(tabs.setup);
 
-
 // Web Components
 // --------------
 
-function findComponent (element) {
+function findComponent(element) {
     return $(element).closest('aui-tabs').get(0);
 }
 
-function findPanes (tabs) {
+function findPanes(tabs) {
     return tabs.querySelectorAll('aui-tabs-pane');
 }
 
-function findTabs (tabs) {
+function findTabs(tabs) {
     return tabs.querySelectorAll('li[is=aui-tabs-tab]');
 }
 
@@ -497,8 +540,8 @@ const TabContainerEl = skate('aui-tabs', {
             }
 
             return this;
-        }
-    }
+        },
+    },
 });
 
 const TabItemEl = skate('aui-tabs-tab', {
@@ -506,13 +549,7 @@ const TabItemEl = skate('aui-tabs-tab', {
     created: function (element) {
         $(element).addClass('menu-item');
     },
-    template: template(
-        '<a href="#">',
-        '<strong>',
-        '<content></content>',
-        '</strong>',
-        '</a>'
-    )
+    template: template('<a href="#">', '<strong>', '<content></content>', '</strong>', '</a>'),
 });
 
 const TabPaneEl = skate('aui-tabs-pane', {
@@ -537,16 +574,10 @@ const TabPaneEl = skate('aui-tabs-pane', {
 
         $element.siblings('ul').append(tab);
     },
-    template: template(
-        '<content></content>'
-    )
+    template: template('<content></content>'),
 });
 
 globalize('tabs', tabs);
 
 export default tabs;
-export {
-    TabContainerEl,
-    TabPaneEl,
-    TabItemEl
-};
+export { TabContainerEl, TabPaneEl, TabItemEl };

package/src/js/aui/to-init.js

@@ -12,7 +12,7 @@ import globalize from './internal/globalize';
  *
  * @return {Object}
  */
-function toInit (func) {
+function toInit(func) {
     $.when($.ready).then(function () {
         // Ensure that every function passed through toInit happens asynchronously after DomContentLoaded events,
         // and will be executed in its own stack, meaning that the UI can be updated in-between expensive handlers.

package/src/js/aui/toggle.js

@@ -9,8 +9,8 @@ import skateTemplateHtml from 'skatejs-template-html';
 import skate from './internal/skate';
 import { INPUT_SUFFIX } from './internal/constants';
 import CustomEvent from './polyfills/custom-event';
-import SpinnerEl, {SIZE} from './spinner';
-import { I18n } from './i18n'
+import SpinnerEl, { SIZE } from './spinner';
+import { I18n } from './i18n';
 
 function fireChangeEvent(element) {
     if (element._canFireEventsNow) {
@@ -18,11 +18,11 @@ function fireChangeEvent(element) {
     }
 }
 
-function getInput (element) {
+function getInput(element) {
     return element._input || (element._input = element.querySelector('input'));
 }
 
-function getSpinner (element) {
+function getSpinner(element) {
     return element._spinner || (element._spinner = new SpinnerEl());
 }
 
@@ -34,10 +34,10 @@ function fallbackAttributeHandler(attributeName, element, change) {
     getInput(element).setAttribute(attributeName, change.newValue);
 }
 
-function getAttributeHandler (attributeName) {
+function getAttributeHandler(attributeName) {
     return {
         removed: removedAttributeHandler.bind(this, attributeName),
-        fallback: fallbackAttributeHandler.bind(this, attributeName)
+        fallback: fallbackAttributeHandler.bind(this, attributeName),
     };
 }
 
@@ -49,7 +49,7 @@ const formAttributeHandler = {
     fallback: function (element, change) {
         fallbackAttributeHandler.call(this, 'form', element, change);
         element._formId = change.newValue;
-    }
+    },
 };
 
 var idAttributeHandler = {
@@ -57,11 +57,11 @@ var idAttributeHandler = {
     fallback: function (element, change) {
         const val = `${change.newValue}${INPUT_SUFFIX}`;
         getInput(element).setAttribute('id', val);
-    }
+    },
 };
 
 var valueAttributeHandler = {
-    removed: function(element) {
+    removed: function (element) {
         removedAttributeHandler.call(this, 'value', element);
         // Internet Explorer 11 has a bug where it doesn't clear out the previous value
         // when the attribute is removed.
@@ -69,7 +69,7 @@ var valueAttributeHandler = {
     },
     fallback: function (element, change) {
         fallbackAttributeHandler.call(this, 'value', element, change);
-    }
+    },
 };
 
 var checkedAttributeHandler = {
@@ -78,7 +78,7 @@ var checkedAttributeHandler = {
     },
     fallback: function (element) {
         getInput(element).checked = true;
-    }
+    },
 };
 
 var labelHandler = {
@@ -87,7 +87,7 @@ var labelHandler = {
     },
     fallback: function (element, change) {
         getInput(element).setAttribute('aria-label', change.newValue);
-    }
+    },
 };
 
 function clickHandler(element, e) {
@@ -104,9 +104,12 @@ function setDisabledForLabels(element, disabled) {
     if (!element.id) {
         return;
     }
-    Array.prototype.forEach.call(document.querySelectorAll(`aui-label[for="${element.id}"]`), function (el) {
-        el.disabled = disabled;
-    });
+    Array.prototype.forEach.call(
+        document.querySelectorAll(`aui-label[for="${element.id}"]`),
+        function (el) {
+            el.disabled = disabled;
+        }
+    );
 }
 
 /**
@@ -152,10 +155,12 @@ const ToggleEl = skate('aui-toggle', {
 
         $(getInput(element)).tooltip({
             title: function () {
-                return this.checked ? this.getAttribute('tooltip-on') : this.getAttribute('tooltip-off');
+                return this.checked
+                    ? this.getAttribute('tooltip-on')
+                    : this.getAttribute('tooltip-off');
             },
             gravity: 's',
-            hoverable: false
+            hoverable: false,
         });
         bindEventsToInput(element);
         if (element.hasAttribute('checked')) {
@@ -167,38 +172,44 @@ const ToggleEl = skate('aui-toggle', {
         enforce(element).attributeExists('label');
     },
     events: {
-        click: clickHandler
+        click: clickHandler,
     },
     attributes: {
-        id: idAttributeHandler,
-        checked: checkedAttributeHandler,
-        disabled: getAttributeHandler('disabled'),
-        form: formAttributeHandler,
-        name: getAttributeHandler('name'),
-        value: valueAttributeHandler,
+        'id': idAttributeHandler,
+        'checked': checkedAttributeHandler,
+        'disabled': getAttributeHandler('disabled'),
+        'form': formAttributeHandler,
+        'name': getAttributeHandler('name'),
+        'value': valueAttributeHandler,
         'tooltip-on': {
             value: I18n.getText('aui.toggle.on'),
             fallback: function (element, change) {
-                getInput(element).setAttribute('tooltip-on', change.newValue || I18n.getText('aui.toggle.on'));
-            }
+                getInput(element).setAttribute(
+                    'tooltip-on',
+                    change.newValue || I18n.getText('aui.toggle.on')
+                );
+            },
         },
         'tooltip-off': {
             value: I18n.getText('aui.toggle.off'),
             fallback: function (element, change) {
-                getInput(element).setAttribute('tooltip-off', change.newValue || I18n.getText('aui.toggle.off'));
-            }
+                getInput(element).setAttribute(
+                    'tooltip-off',
+                    change.newValue || I18n.getText('aui.toggle.off')
+                );
+            },
         },
-        label: labelHandler
+        'label': labelHandler,
     },
     prototype: {
         focus: function () {
             getInput(this).focus();
             return this;
         },
-        get checked () {
+        get checked() {
             return getInput(this).checked;
         },
-        set checked (value) {
+        set checked(value) {
             // Need to explicitly set the property on the checkbox because the
             // checkbox's property doesn't change with it's attribute after it
             // is clicked.
@@ -207,41 +218,42 @@ const ToggleEl = skate('aui-toggle', {
                 setBooleanAttribute(this, 'checked', value);
             }
         },
-        get disabled () {
+        get disabled() {
             // AUI-4958 - this may be accessed by a jQuery event handler in response to
             // a DOMNodeInserted event being fired. In this scenario, the `template`
             // function has been called by skate, but the `created` callback has not.
             return getInput(this).disabled;
         },
-        set disabled (value) {
+        set disabled(value) {
             return setBooleanAttribute(this, 'disabled', value);
         },
-        get form () {
+        get form() {
             return document.getElementById(this._formId);
         },
-        set form (value) {
+        set form(value) {
             formAttributeHandler.fallback.call(this, this, { newValue: value || null });
             return this.form;
         },
-        get name () {
+        get name() {
             return getInput(this).name;
         },
-        set name (value) {
+        set name(value) {
             this.setAttribute('name', value);
             return value;
         },
-        get value () {
+        get value() {
             return getInput(this).value;
         },
-        set value (value) {  // Setting the value of an input to null sets it to empty string.
+        set value(value) {
+            // Setting the value of an input to null sets it to empty string.
             let newVal = value === null ? '' : value;
             this.setAttribute('value', newVal);
             return newVal;
         },
-        get busy () {
+        get busy() {
             return getInput(this).getAttribute('aria-busy') === 'true';
         },
-        set busy (value) {
+        set busy(value) {
             const input = getInput(this);
             const spinner = getSpinner(this);
 
@@ -266,8 +278,8 @@ const ToggleEl = skate('aui-toggle', {
             }
             setDisabledForLabels(this, !!value);
             return value;
-        }
-    }
+        },
+    },
 });
 
 export default ToggleEl;