@atlassian/aui 9.4.6-0c8cd15d6 → 9.5.0

package/entry/aui.batch.components.js

@@ -1,4 +1,6 @@
 // JS components
+export * from './aui.component.avatar'
+export * from './aui.component.avatar-group'
 export * from './aui.component.banner'
 export * from './aui.component.button'
 export * from './aui.component.dialog2'

package/entry/aui.component.avatar-group.js

@@ -0,0 +1,4 @@
+import './styles/aui.pattern.avatar';
+import '@atlassian/aui/src/less/aui-avatars.less';
+import { AvatarGroupEl } from '@atlassian/aui/src/js/aui/avatar-group';
+export { AvatarGroupEl };

package/entry/aui.component.avatar.js

@@ -0,0 +1,5 @@
+import './styles/aui.pattern.avatar';
+import '@atlassian/aui/src/less/aui-avatars.less';
+import { AvatarBadged } from '@atlassian/aui/src/js/aui/avatar-badged';
+import { AvatarEl } from '@atlassian/aui/src/js/aui/avatar';
+export { AvatarEl, AvatarBadged };

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@atlassian/aui",
     "description": "Atlassian User Interface library",
-    "version": "9.4.6-0c8cd15d6",
+    "version": "9.5.0",
     "author": "Atlassian Pty Ltd.",
     "homepage": "https://aui.atlassian.com",
     "license": "Apache-2.0",
@@ -35,27 +35,27 @@
     "dependencies": {
         "@atlassian/tipsy": "1.3.3",
         "@popperjs/core": "2.4.4",
-        "backbone": "1.4.0",
-        "css.escape": "1.5.0",
+        "backbone": "1.4.1",
+        "css.escape": "1.5.1",
         "fancy-file-input": "2.0.4",
-        "jquery-ui": "1.13.0",
+        "jquery-ui": "1.13.1",
         "skatejs": "0.13.17",
         "skatejs-template-html": "0.0.0",
         "trim-extra-html-whitespace": "1.3.0",
-        "underscore": "1.13.1"
+        "underscore": "1.13.4"
     },
     "devDependencies": {
         "@atlassian/adg-server-iconfont": "3.1.0",
         "@atlassian/aui-webpack-config": "3.0.1",
-        "@babel/core": "7.14.0",
-        "@babel/preset-env": "7.14.1",
+        "@babel/core": "7.18.6",
+        "@babel/preset-env": "7.18.6",
         "bundlesize": "1.0.0-beta.2",
         "cross-env": "7.0.3",
-        "eslint": "7.26.0",
-        "glob": "7.1.6",
+        "eslint": "7.32.0",
+        "glob": "7.2.3",
         "ignore-emit-webpack-plugin": "2.0.6",
         "jquery": "3.5.1",
-        "jquery-migrate": "3.3.2",
+        "jquery-migrate": "3.4.0",
         "less": "3.13.1"
     },
     "scripts": {

package/src/js/aui/avatar-badged.js

@@ -0,0 +1,38 @@
+import skate from './internal/skate';
+
+const DEFAULT_VALUE = 'bottom-end'
+
+const setBadgedPlacement = (element, newValue, oldValue) => {
+    const placementOptions = ['top-start', 'top-end', 'bottom-start', 'bottom-end'];
+    const newPlacementClass = placementOptions.includes(newValue) ? newValue : DEFAULT_VALUE;
+
+    if (oldValue !== null) {
+        element.classList.remove(`aui-avatar-badged-${oldValue}`);
+    }
+    element.classList.add(`aui-avatar-badged-${newPlacementClass}`);
+}
+
+const AvatarBadged = skate('aui-avatar-badged', {
+    attached(element) {
+        const value = element.getAttribute('placement');
+        if (value.length) {
+            setBadgedPlacement(element, value);
+        }
+    },
+
+    attributes: {
+        placement: {
+            value: DEFAULT_VALUE,
+
+            fallback: function(element, { newValue, oldValue}) {
+                setBadgedPlacement(element, newValue, oldValue);
+            },
+        }
+    },
+
+    created: function(element) {
+        element.className = 'aui-avatar-badged';
+    }
+});
+
+export { AvatarBadged };

package/src/js/aui/avatar-group.js

@@ -0,0 +1,165 @@
+import skate from './internal/skate';
+
+const DEFAULT_SIZE = 'medium';
+const sizes = {xsmall: 16, small: 24, medium: 32, large: 48, xlarge: 64, xxlarge: 96, xxxlarge: 128};
+let buttonDropdownIsActive = false;
+
+const setDefaultSizeValue = (value) => {
+    return Object.keys(sizes).includes(value) ? value : DEFAULT_SIZE;
+}
+
+const setAvatarGroupSize = (element, newValue, oldValue) => {
+    element.classList.remove(`aui-avatar-group-${oldValue}`);
+    element.classList.add(`aui-avatar-group-${newValue}`);
+}
+
+const setLeftPosition = (size, divisionNum, multiplyNum) => {
+    return `${(sizes[size] - sizes[size] / divisionNum) * multiplyNum}px`;
+}
+
+const addAvatarGroupStyle = (element, size, multiplyNum) => {
+    element.setAttribute('size', size);
+    element.classList.add('aui-avatar-group-item');
+    element.style.left = setLeftPosition(size, 4, multiplyNum);
+    element.style.zIndex = `${5 - multiplyNum}`;
+}
+
+const setBadgedDropdownItem = (element) => {
+    const avatars = element.parentNode.querySelectorAll('aui-avatar');
+    const badgedDropdown = element.parentNode.querySelector('.aui-avatar-group-dropdown')
+    const hiddenAvatarsList = [... avatars].slice(4);
+
+    if (!buttonDropdownIsActive) {
+        buttonDropdownIsActive = true;
+
+        hiddenAvatarsList.forEach(avatar => {
+            const avatarItemSrc = avatar.getAttribute('src');
+            const avatarItemAlt = avatar.getAttribute('alt');
+            const avatarItemTitle = avatar.getAttribute('title');
+
+            const avatarWrapper = document.createElement('span');
+            avatarWrapper.setAttribute('class', 'aui-avatar-group-dropdown-item');
+
+            if (avatarItemSrc) {
+                avatarWrapper.innerHTML = `<aui-avatar id="avatar-item" src=${avatarItemSrc} alt=${avatarItemAlt} title=${avatarItemTitle}></aui-avatar>`;
+            } else {
+                avatarWrapper.innerHTML = '<aui-avatar></aui-avatar>';
+            }
+
+            badgedDropdown.appendChild(avatarWrapper);
+        });
+    } else {
+        buttonDropdownIsActive = false;
+
+        hiddenAvatarsList.forEach(()=> {
+            const dropdownItems = document.querySelector('.aui-avatar-group-dropdown-item');
+            if (dropdownItems) {dropdownItems.remove();}
+        });
+    }
+
+}
+
+const handleClickOnBadged = (element) => {
+    const badgedDropdown = element.parentNode.querySelector('.aui-avatar-group-dropdown')
+    badgedDropdown.classList.toggle('aui-avatar-group-dropdown-show');
+
+    setBadgedDropdownItem(element);
+}
+
+const createAvatarGroupBadged = (element, size, avatars, amount) => {
+    const oldBadged = element.querySelector('.aui-avatar-group-badged');
+    if (oldBadged) {oldBadged.remove()};
+
+    const oldBadgedDropdown = element.querySelector('.aui-avatar-group-dropdown')
+    if (oldBadgedDropdown) {oldBadgedDropdown.remove()}
+    const multiplier = avatars.length - amount;
+
+    const groupBadged = document.createElement('button');
+    groupBadged.classList.add('aui-avatar-group-badged', 'aui-avatar-inner');
+    groupBadged.style.left = setLeftPosition(size, 4.5, multiplier);
+    groupBadged.innerText = `+${amount}`;
+    element.appendChild(groupBadged);
+
+    groupBadged.addEventListener('click', () => handleClickOnBadged(groupBadged))
+
+    const badgedDropdown = document.createElement('div');
+    badgedDropdown.classList.add('aui-avatar-group-dropdown');
+    badgedDropdown.style.left = setLeftPosition(size, 4.5, multiplier);
+    element.appendChild(badgedDropdown);
+}
+
+const tidyUpAvatarGroup = (element, size) => {
+    const avatars = element.querySelectorAll('aui-avatar');
+    let amountItems = avatars.length - 4;
+
+    avatars.forEach((avatar, index) => {
+        avatar.classList.toggle('aui-avatar-group-item-hidden', index >= 4);
+        addAvatarGroupStyle(avatar, size, index);
+    });
+
+    if (amountItems > 0) {
+        createAvatarGroupBadged(element, size, avatars, amountItems);
+    } else {
+        const badged = element.querySelector('.aui-avatar-group-badged');
+        if (badged) {badged.remove();}
+    }
+}
+
+const AvatarGroupEl = skate('aui-avatar-group', {
+    attributes: {
+        size: {
+            value: DEFAULT_SIZE,
+
+            fallback(element, { newValue , oldValue }) {
+                let value = setDefaultSizeValue(newValue);
+
+                skate.init(element);
+                setAvatarGroupSize(element, value, oldValue);
+                tidyUpAvatarGroup(element, value);
+            }
+        }
+    },
+
+    created(element) {
+        const avatarGroupSize = element.getAttribute('size')
+        const value = setDefaultSizeValue(avatarGroupSize);
+
+        element.className = 'aui-avatar-group';
+        setAvatarGroupSize(element, value);
+    }
+});
+
+const wasNodeRemoved = (mutation, target) => {
+    return  mutation.removedNodes.length > 0 && target.classList.contains('aui-avatar-group') && mutation.removedNodes[0].classList.contains('aui-avatar-group-item');
+}
+
+const wasNodeAdded = (mutation, target) => {
+    return mutation.addedNodes.length > 0 && target.classList.contains('aui-avatar-group') && mutation.addedNodes[0].classList.contains('aui-avatar');
+}
+
+const mutationObserver = new MutationObserver(function(mutation) {
+    mutation.forEach(function(mutation) {
+        const target = mutation.target;
+
+        if (wasNodeRemoved(mutation, target)) {
+            tidyUpAvatarGroup(target, target.getAttribute('size'));
+        }
+
+        if (wasNodeAdded(mutation, target)) {
+            setTimeout(() => {
+                tidyUpAvatarGroup(target, target.getAttribute('size'));
+            }, 0);
+        }
+    });
+});
+
+mutationObserver.observe(document.documentElement, {
+    attributes: false,
+    characterData: true,
+    childList: true,
+    subtree: true,
+    attributeOldValue: false,
+    characterDataOldValue: false
+});
+
+export { AvatarGroupEl };

package/src/js/aui/avatar.js

@@ -0,0 +1,76 @@
+import template from 'skatejs-template-html';
+import skate from './internal/skate';
+import personImage from '../../../../../packages/docs/src/docs/images/avatar-person.svg';
+import projectImage from '../../../../../packages/docs/src/docs/images/avatar-project.svg';
+
+const DEFAULT_AVATAR_IMAGES = new Map([
+    ['project', projectImage],
+    ['user', personImage]
+]);
+
+const getElementWrapper = (element, elementFind) => element.querySelector(elementFind);
+
+const replaceClass = (element, newValue, oldValue) => {
+    const elementWrapper = getElementWrapper(element, '.aui-avatar');
+
+    elementWrapper.classList.remove(`aui-avatar-${oldValue}`);
+    elementWrapper.classList.add(`aui-avatar-${newValue}`);
+}
+
+const getAvatarType = (element) => element.getAttribute('type') === 'project' ? 'project' : 'user';
+
+const setDefaultAvatarImage = (element) => {
+    if (element.hasAttribute('src')){
+        setImageSrc(element, element.getAttribute('src'));
+    } else {
+        const avatarType = getAvatarType(element);
+        const avatarSvg = DEFAULT_AVATAR_IMAGES.get(avatarType);
+        setImageSrc(element, avatarSvg);
+    }
+}
+
+const setImageAttr = (element, name, value) => getElementWrapper(element, 'img').setAttribute(name, value);
+const setImageSrc = (element, src) => setImageAttr(element, 'src', src);
+const setImageAlt = (element, alt) => setImageAttr(element, 'alt', alt);
+const setImageTitle = (element, title) => setImageAttr(element, 'title', title);
+
+const AvatarEl = skate('aui-avatar', {
+    template: template(`
+      <span class='aui-avatar'>
+         <span class='aui-avatar-inner'>
+            <img />
+         </span>
+         <content></content>
+      </span>
+   `),
+
+    attributes: {
+        size(element, { newValue , oldValue}) {
+            replaceClass(element, newValue, oldValue);
+        },
+
+        type(element, { newValue, oldValue}) {
+            replaceClass(element, newValue, oldValue);
+            setDefaultAvatarImage(element);
+        },
+
+        src(element, { newValue: value }) {
+            setImageSrc(element, value);
+        },
+
+        alt(element, {newValue: value}) {
+            setImageAlt(element, value);
+        },
+
+        title(element, {newValue: value}) {
+            setImageTitle(element, value);
+        },
+    },
+
+    created: function(element) {
+        element.className = 'aui-avatar';
+        setDefaultAvatarImage(element);
+    }
+});
+
+export { AvatarEl };

package/src/js/aui/blanket.js

@@ -18,7 +18,7 @@ function dim (useShim, zIndex) {
     }
 
     function isAuiLayer(element) {
-        return element.classList.contains('aui-layer');
+        return element.classList && element.classList.contains('aui-layer');
     }
 
     Array.prototype.forEach.call(document.body.children, function (element) {

package/src/js/aui/internal/header/create-header.js

@@ -241,6 +241,8 @@ Header.prototype = {
     }
 };
 
+
+
 function createTriggerAndAssociate(dropdown) {
     var trigger = document.createElement('a');
     trigger.setAttribute('class', 'aui-dropdown2-trigger');

package/src/js/aui/messages.js

@@ -20,6 +20,7 @@ function createMessageConstructor(type) {
      * @param {String} [obj.title] - Plain-text title of the message. If provided, will appear above the message body.
      * @param {String} obj.body - Content of the message. Can be HTML content.
      * @param {boolean} [obj.closeable] - If true, the message can be manually closed by the end-user via the UI.
+     * @param {boolean} [obj.removeOnHide] - If true, the message will be removed from the DOM after hide.
      * @param {boolean} [obj.fadeout]
      * @param {boolean} [obj.duration]
      * @param {boolean} [obj.delay]
@@ -41,6 +42,10 @@ function createMessageConstructor(type) {
         insertMessageIntoContext($message, obj.insert, context);
 
         // Attach the optional extra behaviours
+        if (obj.removeOnHide) {
+            makeRemoveOnHide($message, obj.delay, obj.duration);
+        }
+
         if (obj.closeable) {
             makeCloseable($message);
         }
@@ -53,6 +58,13 @@ function createMessageConstructor(type) {
     };
 }
 
+function makeRemoveOnHide(message, delay, duration) {
+    $(message || '.aui-message.aui-remove-on-hide').each(function () {
+        var $this = $(this);
+        makeFadeout($this, delay, duration)
+    })
+}
+
 function makeCloseable(message) {
     $(message || 'div.aui-message.closeable').each(function () {
         var $this = $(this);
@@ -145,9 +157,11 @@ function makeFadeout(message, delay, duration) {
  */
 var messages = {
     setup: function () {
+        makeRemoveOnHide();
         makeCloseable();
         makeFadeout();
     },
+    makeRemoveOnHide: makeRemoveOnHide,
     makeCloseable: makeCloseable,
     makeFadeout: makeFadeout,
     createMessage: createMessageConstructor
@@ -178,7 +192,7 @@ function insertMessageIntoContext($message, insertWhere, context) {
     }
 }
 
-function renderMessageElement ({id, closeable, fadeout, title, body}, type) {
+function renderMessageElement ({id, closeable, removeOnHide, fadeout, title, body}, type) {
     // Convert the options in to template values
     const titleHtml = title ? `<p class="title"><strong>${escapeHtml(title)}</strong></p>` : '';
     const html = `<div class="aui-message">${titleHtml}</div>`;
@@ -186,6 +200,7 @@ function renderMessageElement ({id, closeable, fadeout, title, body}, type) {
     // Construct the message element
     const $message = $(html)
         .append($.parseHTML(body || ''))
+        .addClass(removeOnHide ? 'aui-remove-on-hide' : '')
         .addClass(closeable ? 'closeable' : '')
         .addClass(fadeout ? 'fadeout' : '')
         .addClass(`aui-message-${type}`);
@@ -205,7 +220,7 @@ function renderMessageElement ({id, closeable, fadeout, title, body}, type) {
 
 $.fn.closeMessage = function () {
     var $message = $(this);
-    if ($message.hasClass('aui-message') && $message.hasClass('closeable')) {
+    if ($message.hasClass('aui-message') && ($message.hasClass('closeable') || $message.hasClass('aui-remove-on-hide'))) {
         $message.stop(true); //Stop any running animation
         $message.trigger('messageClose', [this]); //messageClose event Deprecated as of 5.3
         $message.remove();
@@ -230,6 +245,7 @@ const MessageEl = skate('aui-message', {
         element.innerHTML = '';
         messages[type](element, {
             body: body,
+            removeOnHide: element.getAttribute('removeOnHide'),
             closeable: element.getAttribute('closeable'),
             delay: element.getAttribute('delay'),
             duration: element.getAttribute('duration'),

package/src/js/aui/tooltip.js

@@ -92,10 +92,8 @@ class Tooltip {
 
     buildTip(title) {
         const options = this.options;
-        if ($sharedTip === undefined) {
-            $sharedTip =
-                $(`<div id="${AUI_TOOLTIP_ID}" class="${AUI_TOOLTIP_CLASS_NAME} assistive" role="tooltip"><p class="aui-tooltip-content"></p></div>`)
-
+        if ($sharedTip === undefined || $sharedTip.get(0) && !$sharedTip.get(0).isConnected) {
+            $sharedTip = $(`<div id="${AUI_TOOLTIP_ID}" class="${AUI_TOOLTIP_CLASS_NAME} assistive" role="tooltip"><p class="aui-tooltip-content"></p></div>`);
             $(document.body).append($sharedTip);
         }
 

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

@@ -497,14 +497,25 @@ whenIType.fromJSON = function (json, switchCtrlToMetaOnMac) {
     var shortcuts = [];
 
     if (json) {
+        var operation = null;
+        var param = null;
+        if (typeof json === 'object') {
+            operation = json.op;
+            param = json.param;
+        }
         $.each(json, function (i,item) {
-            const operation = item.op;
-            const param = item.param;
+            operation = (item.op) ? item.op : operation;
+            param = (item.param) ? item.param : param;
             let params;
 
             if (operation === 'execute' || operation === 'evaluate') {
                 // need to turn function string into function object
-                params = [new Function(param)];
+                // params = [new Function(param)];
+
+                // params = [(param) => JSON.parse(JSON.stringify(param))];
+                params = [function (param){
+                    return param;
+                }];
 
             } else if (/^\[[^\]\[]*,[^\]\[]*\]$/.test(param)) {
                 // pass in an array to send multiple params