@atlassian/aui 9.3.21 → 9.3.23

package/src/js/aui/dropdown2.js

@@ -13,8 +13,8 @@ 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 { ifGone } from './internal/elements';
+import { doIfTrigger, setTrigger } from './trigger';
 import generateUniqueId from './unique-id';
 
 function isHidden(el) {
@@ -40,7 +40,7 @@ function handleFocus(dropdown, e = {}) {
         const isKeyDownEvent = e.type.indexOf('key') > -1;
         if (dropdown.isSubmenu) {
             !isMouseEvent ? dropdown.focusItem(0) : dropdown.focus();
-        } else if (isKeyDownEvent){
+        } else if (isKeyDownEvent) {
             const isUpArrow = e.keyCode === keyCode.UP;
             // set focus to last item in the menu to navigate bottom -> up
             if (isUpArrow) {
@@ -64,43 +64,46 @@ var LOADING = 'loading';
 var ERROR = 'error';
 var SUCCESS = 'success';
 
-
 // ASYNC DROPDOWN FUNCTIONS
 
-function makeAsyncDropdownContents (json) {
-    var dropdownContents = json.map(function makeSection (sectionData) {
-        var sectionItemsHtml = sectionData.items.map(function makeSectionItem (itemData) {
-            function makeBooleanAttribute (attr) {
-                return itemData[attr] ? `${attr} ="true"` : '';
-            }
-
-            function makeAttribute (attr) {
-                return itemData[attr] ? `${attr}="${itemData[attr]}"` : '';
-            }
-
-            var tagName = 'aui-item-' + itemData.type;
-            var itemHtml = `
+function makeAsyncDropdownContents(json) {
+    var dropdownContents = json
+        .map(function makeSection(sectionData) {
+            var sectionItemsHtml = sectionData.items
+                .map(function makeSectionItem(itemData) {
+                    function makeBooleanAttribute(attr) {
+                        return itemData[attr] ? `${attr} ="true"` : '';
+                    }
+
+                    function makeAttribute(attr) {
+                        return itemData[attr] ? `${attr}="${itemData[attr]}"` : '';
+                    }
+
+                    var tagName = 'aui-item-' + itemData.type;
+                    var itemHtml = `
                 <${tagName} ${makeAttribute('for')} ${makeAttribute('href')} ${makeBooleanAttribute('interactive')}
                     ${makeBooleanAttribute('checked')} ${makeBooleanAttribute('disabled')} ${makeBooleanAttribute('hidden')}>
                     ${escapeHtml(itemData.content)}
                 </${tagName}>`;
 
-            return itemHtml;
-        }).join('');
+                    return itemHtml;
+                })
+                .join('');
 
-        var sectionAttributes = sectionData.label ? `label="${sectionData.label}"` : '';
-        var sectionHtml = `
+            var sectionAttributes = sectionData.label ? `label="${sectionData.label}"` : '';
+            var sectionHtml = `
             <aui-section ${sectionAttributes}>
                 ${sectionItemsHtml}
             </aui-section>`;
 
-        return sectionHtml;
-    }).join('\n');
+            return sectionHtml;
+        })
+        .join('\n');
 
     return dropdownContents;
 }
 
-function setDropdownContents (dropdown, json) {
+function setDropdownContents(dropdown, json) {
     state(dropdown).set('loading-state', SUCCESS);
     dropdown.innerHTML = makeAsyncDropdownContents(json);
     skate.init(dropdown);
@@ -108,7 +111,7 @@ function setDropdownContents (dropdown, json) {
      * to make the loading state more accessible, we might need to move focus inside the dropdown container,
      * which would change the check from "focus is on trigger" to "focus is within dropdown".
      */
-    doIfTrigger(dropdown, function(trigger) {
+    doIfTrigger(dropdown, function (trigger) {
         // Only manage focus if the focus was on the triggering element at the time it loaded.
         // Otherwise, the user likely moved on and doesn't want it any more.
         if (document.activeElement === trigger) {
@@ -117,7 +120,7 @@ function setDropdownContents (dropdown, json) {
     });
 }
 
-function setDropdownErrorState (dropdown) {
+function setDropdownErrorState(dropdown) {
     state(dropdown).set('loading-state', ERROR);
     state(dropdown).set('hasErrorBeenShown', dropdown.isVisible());
     dropdown.innerHTML = `
@@ -127,7 +130,7 @@ function setDropdownErrorState (dropdown) {
     `;
 }
 
-function setDropdownLoadingState (dropdown) {
+function setDropdownLoadingState(dropdown) {
     state(dropdown).set('loading-state', LOADING);
     state(dropdown).set('hasErrorBeenShown', false);
 
@@ -142,13 +145,13 @@ function setDropdownLoadingState (dropdown) {
     `;
 }
 
-function setDropdownLoaded (dropdown) {
+function setDropdownLoaded(dropdown) {
     doIfTrigger(dropdown, function (trigger) {
         trigger.setAttribute('aria-busy', 'false');
     });
 }
 
-function loadContentsIfAsync (dropdown) {
+function loadContentsIfAsync(dropdown) {
     if (!dropdown.src || state(dropdown).get('loading-state') === LOADING) {
         return;
     }
@@ -175,7 +178,7 @@ function loadContentsIfAsync (dropdown) {
 function loadContentWhenMouseEnterTrigger(dropdown) {
     var isDropdownUnloaded = state(dropdown).get('loading-state') === UNLOADED;
     var hasCurrentErrorBeenShown = state(dropdown).get('hasErrorBeenShown');
-    if (isDropdownUnloaded || hasCurrentErrorBeenShown && !dropdown.isVisible()) {
+    if (isDropdownUnloaded || (hasCurrentErrorBeenShown && !dropdown.isVisible())) {
         loadContentsIfAsync(dropdown);
     }
 }
@@ -191,18 +194,19 @@ function loadContentWhenMenuShown(dropdown) {
     }
 }
 
-
 // The dropdown's trigger
 // ----------------------
 
-function triggerCreated (trigger) {
+function triggerCreated(trigger) {
     let dropdownID = trigger.getAttribute('aria-controls');
 
     if (!dropdownID) {
         dropdownID = trigger.getAttribute('aria-owns');
 
         if (!dropdownID) {
-            logger.error('Dropdown triggers need either a "aria-owns" or "aria-controls" attribute');
+            logger.error(
+                'Dropdown triggers need either a "aria-owns" or "aria-controls" attribute'
+            );
         } else {
             trigger.removeAttribute('aria-owns');
             trigger.setAttribute('aria-controls', dropdownID);
@@ -282,9 +286,10 @@ function triggerCreated (trigger) {
         if (e.currentTarget !== trigger) {
             return;
         }
-        const normalInvoke = (e.keyCode === keyCode.ENTER || e.keyCode === keyCode.SPACE);
-        const submenuInvoke = (e.keyCode === keyCode.RIGHT && trigger.hasSubmenu());
-        const rootMenuInvoke = ((e.keyCode === keyCode.UP || e.keyCode === keyCode.DOWN) && !trigger.hasSubmenu());
+        const normalInvoke = e.keyCode === keyCode.ENTER || e.keyCode === keyCode.SPACE;
+        const submenuInvoke = e.keyCode === keyCode.RIGHT && trigger.hasSubmenu();
+        const rootMenuInvoke =
+            (e.keyCode === keyCode.UP || e.keyCode === keyCode.DOWN) && !trigger.hasSubmenu();
 
         if (normalInvoke) {
             handleIt(e);
@@ -298,8 +303,7 @@ function triggerCreated (trigger) {
         .on('aui-button-invoke', handleIt)
         .on('click', handleIt)
         .on('keydown', handleKeydown)
-        .on('mouseenter', handleMouseEnter)
-    ;
+        .on('mouseenter', handleMouseEnter);
 }
 
 var triggerPrototype = {
@@ -314,13 +318,15 @@ var triggerPrototype = {
     },
 
     isEnabled: function () {
-        return this.getAttribute('aria-disabled') !== 'true' &&
-            this.classList.contains('aui-dropdown2-disabled') === false;
+        return (
+            this.getAttribute('aria-disabled') !== 'true' &&
+            this.classList.contains('aui-dropdown2-disabled') === false
+        );
     },
 
     hasSubmenu: function () {
         return this.classList.contains('aui-dropdown2-sub-trigger');
-    }
+    },
 };
 
 //To remove at a later date. Some dropdown triggers initialise lazily, so we need to listen for mousedown
@@ -335,8 +341,9 @@ function bindLazyTriggerInitialisation() {
                 removeInVersion: '10.0.0',
                 alternativeName: 'initialisation on DOM insertion',
                 sinceVersion: '5.8.0',
-                extraInfo: 'Dropdown2 triggers should have all necessary attributes on DOM insertion',
-                deprecationType: 'JS'
+                extraInfo:
+                    'Dropdown2 triggers should have all necessary attributes on DOM insertion',
+                deprecationType: 'JS',
             });
             lazyDeprecate();
         }
@@ -348,62 +355,69 @@ bindLazyTriggerInitialisation();
 // Dropdown trigger groups
 // -----------------------
 
-$(document).on('mouseenter', '.aui-dropdown2-trigger-group a, .aui-dropdown2-trigger-group button', function (e) {
-    const $item = $(e.currentTarget);
+$(document).on(
+    'mouseenter',
+    '.aui-dropdown2-trigger-group a, .aui-dropdown2-trigger-group button',
+    function (e) {
+        const $item = $(e.currentTarget);
 
-    if ($item.is('.aui-dropdown2-active')) {
-        return; // No point doing anything if we're hovering over the already-active item trigger.
-    }
+        if ($item.is('.aui-dropdown2-active')) {
+            return; // No point doing anything if we're hovering over the already-active item trigger.
+        }
 
-    if ($item.closest('.aui-dropdown2').length) {
-        return; // We don't want to deal with dropdown items, just the potential triggers in the group.
-    }
+        if ($item.closest('.aui-dropdown2').length) {
+            return; // We don't want to deal with dropdown items, just the potential triggers in the group.
+        }
 
-    const $triggerGroup = $item.closest('.aui-dropdown2-trigger-group');
+        const $triggerGroup = $item.closest('.aui-dropdown2-trigger-group');
 
-    const $groupActiveTrigger = $triggerGroup.find('.aui-dropdown2-active');
-    if ($groupActiveTrigger.length && $item.is('.aui-dropdown2-trigger')) {
-        $groupActiveTrigger.blur(); // Remove focus from the previously opened menu.
-        $item.trigger('aui-button-invoke'); // Open this trigger's menu.
-        e.preventDefault();
-    }
+        const $groupActiveTrigger = $triggerGroup.find('.aui-dropdown2-active');
+        if ($groupActiveTrigger.length && $item.is('.aui-dropdown2-trigger')) {
+            $groupActiveTrigger.blur(); // Remove focus from the previously opened menu.
+            $item.trigger('aui-button-invoke'); // Open this trigger's menu.
+            e.preventDefault();
+        }
 
-    const $groupFocusedTrigger = $triggerGroup.find(':focus');
-    if ($groupFocusedTrigger.length && $item.is('.aui-dropdown2-trigger')) {
-        $groupFocusedTrigger.blur();
+        const $groupFocusedTrigger = $triggerGroup.find(':focus');
+        if ($groupFocusedTrigger.length && $item.is('.aui-dropdown2-trigger')) {
+            $groupFocusedTrigger.blur();
+        }
     }
-});
-
+);
 
 // Dropdown items
 // --------------
 
-function getDropdownItems (dropdown, filter) {
+function getDropdownItems(dropdown, filter) {
     return $(dropdown)
-        .find([
-            // Legacy markup.
-            '> ul > li',
-            '> .aui-dropdown2-section > ul > li',
-            '> .aui-dropdown2-section > div[role="group"] > ul > li',
-            '> div > .aui-dropdown2-section > div[role="group"] > ul > li',
-            // Web component.
-            'aui-item-link',
-            'aui-item-checkbox',
-            'aui-item-radio'
-        ].join(', '))
+        .find(
+            [
+                // Legacy markup.
+                '> ul > li',
+                '> .aui-dropdown2-section > ul > li',
+                '> .aui-dropdown2-section > div[role="group"] > ul > li',
+                '> div > .aui-dropdown2-section > div[role="group"] > ul > li',
+                // Web component.
+                'aui-item-link',
+                'aui-item-checkbox',
+                'aui-item-radio',
+            ].join(', ')
+        )
         .filter(filter)
-        .children('a, button, [role="checkbox"], [role="menuitemcheckbox"], [role="radio"], [role="menuitemradio"]');
+        .children(
+            'a, button, [role="checkbox"], [role="menuitemcheckbox"], [role="radio"], [role="menuitemradio"]'
+        );
 }
 
-function getAllDropdownItems (dropdown) {
+function getAllDropdownItems(dropdown) {
     return getDropdownItems(dropdown, () => true);
 }
 
-function getVisibleDropdownItems (dropdown) {
+function getVisibleDropdownItems(dropdown) {
     return getDropdownItems(dropdown, (i, el) => !isHidden(el));
 }
 
-function amendDropdownItem (item) {
+function amendDropdownItem(item) {
     item.setAttribute('tabindex', '-1');
 
     /**
@@ -415,7 +429,7 @@ function amendDropdownItem (item) {
     }
 }
 
-function amendDropdownContent (dropdown) {
+function amendDropdownContent(dropdown) {
     // Add assistive semantics to each dropdown item
     getAllDropdownItems(dropdown).each((i, el) => amendDropdownItem(el));
 }
@@ -428,16 +442,15 @@ function amendDropdownContent (dropdown) {
  *
  * Calling this function will add the new namespaced classes to elements with legacy names.
  */
-function migrateAndSyncLegacyClassNames (dropdown) {
+function migrateAndSyncLegacyClassNames(dropdown) {
     var $dropdown = $(dropdown);
 
     // Migrate away from legacy, unprefixed class names
-    ['disabled', 'interactive', 'active', 'checked'].forEach(type => {
+    ['disabled', 'interactive', 'active', 'checked'].forEach((type) => {
         $dropdown.find(`.${type}`).addClass(`aui-dropdown2-${type}`);
     });
 }
 
-
 // The Dropdown itself
 // -------------------
 
@@ -473,7 +486,7 @@ function setLayerAlignment(dropdown, trigger) {
         preventOverflow: false,
         // space between a dropdown trigger and the dropdown itself, based on @aui-dropdown-trigger-offset
         // only added for dropdowns which are not submenus
-        offset: (trigger.hasSubmenu && trigger.hasSubmenu()) ? [-3, 0] : [0, 3]
+        offset: trigger.hasSubmenu && trigger.hasSubmenu() ? [-3, 0] : [0, 3],
     });
 
     dropdown._auiAlignment.enable();
@@ -484,7 +497,10 @@ function saveCurrentAlignment(dropdown) {
     if (dropdown.hasAttribute('data-aui-alignment')) {
         $dropdown.data('previous-data-aui-alignment', dropdown.getAttribute('data-aui-alignment'));
     }
-    $dropdown.data('had-data-aui-alignment-static', dropdown.hasAttribute('data-aui-alignment-static'));
+    $dropdown.data(
+        'had-data-aui-alignment-static',
+        dropdown.hasAttribute('data-aui-alignment-static')
+    );
 }
 
 function restorePreviousAlignment(dropdown) {
@@ -510,12 +526,12 @@ function getDropdownHideLocation(dropdown, trigger) {
 }
 
 var keyboardClose = false;
-function keyboardCloseDetected () {
+function keyboardCloseDetected() {
     keyboardClose = true;
 }
 
-function wasProbablyClosedViaKeyboard () {
-    var result = (keyboardClose === true);
+function wasProbablyClosedViaKeyboard() {
+    var result = keyboardClose === true;
     keyboardClose = false;
     return result;
 }
@@ -523,7 +539,6 @@ function wasProbablyClosedViaKeyboard () {
 function bindDropdownBehaviourToLayer(dropdown) {
     layer(dropdown);
 
-
     dropdown.addEventListener('aui-layer-show', function (e) {
         if (dropdown !== e.target) {
             return;
@@ -577,7 +592,7 @@ function bindDropdownBehaviourToLayer(dropdown) {
     });
 }
 
-function bindItemInteractionBehaviourToDropdown (dropdown) {
+function bindItemInteractionBehaviourToDropdown(dropdown) {
     var $dropdown = $(dropdown);
 
     function belongsToDropdown(item) {
@@ -610,7 +625,7 @@ function bindItemInteractionBehaviourToDropdown (dropdown) {
         }
     });
 
-    const hideIfNotSubmenuAndNotInteractive = function(e) {
+    const hideIfNotSubmenuAndNotInteractive = function (e) {
         var item = e.currentTarget;
 
         if (item.getAttribute('aria-disabled') === 'true') {
@@ -620,7 +635,6 @@ function bindItemInteractionBehaviourToDropdown (dropdown) {
 
         const isSubmenuTrigger = e.currentTarget.hasSubmenu && e.currentTarget.hasSubmenu();
         if (!isSubmenuTrigger && !item.classList.contains('aui-dropdown2-interactive')) {
-
             var theMenu = dropdown;
             do {
                 var dd = layer(theMenu);
@@ -632,60 +646,78 @@ function bindItemInteractionBehaviourToDropdown (dropdown) {
         }
     };
 
-    $dropdown.on('click keydown', 'a, button, [role="menuitem"], [role="menuitemcheckbox"], [role="checkbox"], [role="menuitemradio"], [role="radio"]', function (e) {
-        if (!belongsToDropdown(e.target)) {
-            return;
-        }
-        const item = e.currentTarget;
-        const eventKeyCode = e.keyCode;
-        const isEnter = eventKeyCode === keyCode.ENTER;
-        const isSpace = eventKeyCode === keyCode.SPACE;
+    $dropdown.on(
+        'click keydown',
+        'a, button, [role="menuitem"], [role="menuitemcheckbox"], [role="checkbox"], [role="menuitemradio"], [role="radio"]',
+        function (e) {
+            if (!belongsToDropdown(e.target)) {
+                return;
+            }
+            const item = e.currentTarget;
+            const eventKeyCode = e.keyCode;
+            const isEnter = eventKeyCode === keyCode.ENTER;
+            const isSpace = eventKeyCode === keyCode.SPACE;
 
-        // AUI-4283: Accessibility - need to ignore enter on links/buttons so
-        // that the dropdown remains visible to allow the click event to eventually fire.
-        const itemIgnoresEnter = isEnter && $(item).is('a[href], button');
+            // AUI-4283: Accessibility - need to ignore enter on links/buttons so
+            // that the dropdown remains visible to allow the click event to eventually fire.
+            const itemIgnoresEnter = isEnter && $(item).is('a[href], button');
 
-        if (!itemIgnoresEnter && (e.type === 'click' || isEnter || isSpace)) {
-            hideIfNotSubmenuAndNotInteractive(e);
+            if (!itemIgnoresEnter && (e.type === 'click' || isEnter || isSpace)) {
+                hideIfNotSubmenuAndNotInteractive(e);
+            }
         }
-    });
+    );
 
     // close a submenus when the mouse moves over items other than its trigger
-    $dropdown.on('mouseenter', 'a, button, [role="menuitem"], [role="menuitemcheckbox"], [role="checkbox"], [role="menuitemradio"], [role="radio"]', function (e) {
-        if (!belongsToDropdown(e.target)) {
-            return;
-        }
-        var item = e.currentTarget;
-        var hasSubmenu = item.hasSubmenu && item.hasSubmenu();
+    $dropdown.on(
+        'mouseenter',
+        'a, button, [role="menuitem"], [role="menuitemcheckbox"], [role="checkbox"], [role="menuitemradio"], [role="radio"]',
+        function (e) {
+            if (!belongsToDropdown(e.target)) {
+                return;
+            }
+            var item = e.currentTarget;
+            var hasSubmenu = item.hasSubmenu && item.hasSubmenu();
 
-        if (!e.isDefaultPrevented() && !hasSubmenu) {
-            var maybeALayer = layer(dropdown).above();
+            if (!e.isDefaultPrevented() && !hasSubmenu) {
+                var maybeALayer = layer(dropdown).above();
 
-            if (maybeALayer) {
-                layer(maybeALayer).hide();
+                if (maybeALayer) {
+                    layer(maybeALayer).hide();
+                }
             }
         }
-    });
+    );
 }
 
-$(window).on('resize', debounce(function () {
-    $('.aui-dropdown2').each(function (index, dropdown) {
-        skate.init(dropdown);
-        if (dropdown.isVisible()){
-            dropdown.hide();
-        }
-    });
-}, 1000, true));
+$(window).on(
+    'resize',
+    debounce(
+        function () {
+            $('.aui-dropdown2').each(function (index, dropdown) {
+                skate.init(dropdown);
+                if (dropdown.isVisible()) {
+                    dropdown.hide();
+                }
+            });
+        },
+        1000,
+        true
+    )
+);
 
 // Dropdowns
 // ---------
 
-function dropdownCreated (dropdown) {
+function dropdownCreated(dropdown) {
     dropdown.classList.add('aui-dropdown2');
-    dropdown.setAttribute('tabindex','-1');
+    dropdown.setAttribute('tabindex', '-1');
 
     if (dropdown.hasAttribute('data-container')) {
-        dropdown.setAttribute('data-aui-alignment-container', dropdown.getAttribute('data-container'));
+        dropdown.setAttribute(
+            'data-aui-alignment-container',
+            dropdown.getAttribute('data-container')
+        );
         dropdown.removeAttribute('data-container');
     }
 
@@ -724,9 +756,13 @@ function dropdownCreated (dropdown) {
 
             if (this.isEnabled() && this.isChecked() === false) {
                 // toggle the checked state
-                $(radio).closest('ul,[role=group]').find('.aui-dropdown2-checked').not(this).each(function () {
-                    this.uncheck();
-                });
+                $(radio)
+                    .closest('ul,[role=group]')
+                    .find('.aui-dropdown2-checked')
+                    .not(this)
+                    .each(function () {
+                        this.uncheck();
+                    });
                 radio.check();
             }
         }
@@ -836,7 +872,7 @@ var dropdownPrototype = {
      */
     isVisible: function () {
         return layer(this).isVisible();
-    }
+    },
 };
 
 // Web component API for dropdowns
@@ -852,7 +888,7 @@ var disabledAttributeHandler = {
         var a = element.children[0];
         a.setAttribute('aria-disabled', 'false');
         a.classList.remove('disabled', 'aui-dropdown2-disabled');
-    }
+    },
 };
 
 var interactiveAttributeHandler = {
@@ -863,7 +899,7 @@ var interactiveAttributeHandler = {
     removed: function (element) {
         var a = element.children[0];
         a.classList.remove('interactive', 'aui-dropdown2-interactive');
-    }
+    },
 };
 
 var checkedAttributeHandler = {
@@ -871,14 +907,14 @@ var checkedAttributeHandler = {
         var a = element.children[0];
         a.classList.add('checked', 'aui-dropdown2-checked');
         a.setAttribute('aria-checked', true);
-        element.dispatchEvent(new CustomEvent('change', {bubbles: true}));
+        element.dispatchEvent(new CustomEvent('change', { bubbles: true }));
     },
     removed: function (element) {
         var a = element.children[0];
         a.classList.remove('checked', 'aui-dropdown2-checked');
         a.setAttribute('aria-checked', false);
-        element.dispatchEvent(new CustomEvent('change', {bubbles: true}));
-    }
+        element.dispatchEvent(new CustomEvent('change', { bubbles: true }));
+    },
 };
 
 var hiddenAttributeHandler = {
@@ -887,10 +923,10 @@ var hiddenAttributeHandler = {
     },
     removed: function (element) {
         disabledAttributeHandler.removed(element);
-    }
+    },
 };
 
-var stringAttributeHandlerGenerator = function(attrName) {
+var stringAttributeHandlerGenerator = function (attrName) {
     return {
         fallback: function (element, change) {
             var a = element.children[0];
@@ -899,25 +935,26 @@ var stringAttributeHandlerGenerator = function(attrName) {
         removed: function (element) {
             var a = element.children[0];
             a.removeAttribute(attrName);
-        }
+        },
     };
 };
 
 const convertCssClassesToArray = function (spaceDelimitedClasses = '') {
-    return spaceDelimitedClasses.split(' ').map(str => str.trim()).filter(x => x);
-}
+    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>'
-    ),
+    template: template('<a role="menuitem" tabindex="-1"><content></content></a>'),
     attributes: {
-        disabled: disabledAttributeHandler,
-        interactive: interactiveAttributeHandler,
-        hidden: hiddenAttributeHandler,
-        href: stringAttributeHandlerGenerator('href'),
+        'disabled': disabledAttributeHandler,
+        'interactive': interactiveAttributeHandler,
+        'hidden': hiddenAttributeHandler,
+        'href': stringAttributeHandlerGenerator('href'),
         'item-id': stringAttributeHandlerGenerator('id'),
-        for: {
+        'for': {
             created: function (element) {
                 var anchor = element.children[0];
                 anchor.setAttribute('aria-controls', element.getAttribute('for'));
@@ -931,7 +968,7 @@ const ItemLinkEl = skate('aui-item-link', {
                 var anchor = element.children[0];
                 anchor.removeAttribute('aria-controls');
                 $(anchor).removeClass('aui-dropdown2-sub-trigger');
-            }
+            },
         },
         'extra-classes': function (element, change) {
             const anchor = element.children[0];
@@ -945,17 +982,17 @@ const ItemLinkEl = skate('aui-item-link', {
     },
 });
 
-const [ItemCheckboxEl, ItemRadioEl] = ['checkbox', 'radio'].map(type => {
+const [ItemCheckboxEl, ItemRadioEl] = ['checkbox', 'radio'].map((type) => {
     return skate(`aui-item-${type}`, {
         template: template(
             `<span role="${type}" class="aui-dropdown2-${type}" tabindex="-1"><content></content></span>`
         ),
         attributes: {
             'item-id': stringAttributeHandlerGenerator('id'),
-            disabled: disabledAttributeHandler,
-            interactive: interactiveAttributeHandler,
-            checked: checkedAttributeHandler,
-            hidden: hiddenAttributeHandler
+            'disabled': disabledAttributeHandler,
+            'interactive': interactiveAttributeHandler,
+            'checked': checkedAttributeHandler,
+            'hidden': hiddenAttributeHandler,
         },
     });
 });
@@ -975,11 +1012,11 @@ const SectionEl = skate('aui-section', {
             headingElement.textContent = data.newValue;
             headingElement.id = id;
             groupElement.setAttribute('aria-labelledby', id);
-        }
+        },
     },
     created: function (element) {
         element.classList.add('aui-dropdown2-section');
-    }
+    },
 });
 
 const DropdownEl = skate('aui-dropdown-menu', {
@@ -995,12 +1032,12 @@ const DropdownEl = skate('aui-dropdown-menu', {
         ifGone(dropdown).then(() => destroyAlignment(dropdown));
     },
     attributes: {
-        src: {}
+        src: {},
     },
     prototype: dropdownPrototype,
     events: {
-        'aui-layer-show': loadContentWhenMenuShown
-    }
+        'aui-layer-show': loadContentWhenMenuShown,
+    },
 });
 
 // Legacy dropdown inits
@@ -1009,19 +1046,19 @@ const DropdownEl = skate('aui-dropdown-menu', {
 skate('aui-dropdown2', {
     type: skate.type.CLASSNAME,
     created: dropdownCreated,
-    prototype: dropdownPrototype
+    prototype: dropdownPrototype,
 });
 
 skate('data-aui-dropdown2', {
     type: skate.type.ATTRIBUTE,
     created: dropdownCreated,
-    prototype: dropdownPrototype
+    prototype: dropdownPrototype,
 });
 
 skate('aui-dropdown2-trigger', {
     type: skate.type.CLASSNAME,
     created: triggerCreated,
-    prototype: triggerPrototype
+    prototype: triggerPrototype,
 });
 
 skate('aui-dropdown2-sub-trigger', {
@@ -1029,22 +1066,21 @@ skate('aui-dropdown2-sub-trigger', {
     created: function (trigger) {
         trigger.classList.add('aui-dropdown2-trigger');
         skate.init(trigger);
-    }
+    },
 });
 
 // Checkboxes and radios
 // ---------------------
-['checkbox', 'radio'].map(type => {
+['checkbox', 'radio'].map((type) => {
     return skate(`aui-dropdown2-${type}`, {
         type: skate.type.CLASSNAME,
 
         created: function (checkbox) {
             // determine checked state based on any one of three attributes, then sync all of them.
-            const checked = (
+            const checked =
                 checkbox.getAttribute('aria-checked') === 'true' ||
                 checkbox.classList.contains('checked') ||
-                checkbox.classList.contains('aui-dropdown2-checked')
-            );
+                checkbox.classList.contains('aui-dropdown2-checked');
             checkbox.classList[checked ? 'add' : 'remove']('checked', 'aui-dropdown2-checked');
             checkbox.setAttribute('aria-checked', checked);
 
@@ -1053,7 +1089,7 @@ skate('aui-dropdown2-sub-trigger', {
 
             // swap from the "menuitemX" role to plain role for VoiceOver
             if (supportsVoiceOver()) {
-                checkbox.setAttribute('role',type);
+                checkbox.setAttribute('role', type);
             }
         },
 
@@ -1088,15 +1124,9 @@ skate('aui-dropdown2-sub-trigger', {
                     .attr('aria-checked', 'true')
                     .addClass('checked aui-dropdown2-checked')
                     .trigger('aui-dropdown2-item-check');
-            }
-        }
+            },
+        },
     });
-})
-
-export {
-    DropdownEl,
-    ItemLinkEl,
-    ItemRadioEl,
-    ItemCheckboxEl,
-    SectionEl,
-};
+});
+
+export { DropdownEl, ItemLinkEl, ItemRadioEl, ItemCheckboxEl, SectionEl };