@atlassian/aui 9.3.1 → 9.3.5

package/entry/aui.batch.prototyping.js

@@ -9,7 +9,7 @@ export * from './aui.batch.components';
 import './aui.component.form-notification';
 import './aui.component.form-validation';
 import { Header } from './aui.component.async-header';
-import { DatePicker } from './aui.component.form.date-select';
+import { DatePicker, CalendarWidget } from './aui.component.form.date-select';
 import { RestfulTable } from './aui.component.restful-table';
 import { sidebar } from './aui.component.sidebar';
 import { whenIType } from './behaviours/aui.behaviour.keyboard-shortcuts';
@@ -18,6 +18,7 @@ export {
     I18n,
     Header,
     DatePicker,
+    CalendarWidget,
     RestfulTable,
     sidebar,
     whenIType,

package/entry/aui.component.form.date-select.js

@@ -1,4 +1,4 @@
 import './styles/aui.pattern.forms';
 import './aui.component.inline-dialog2'; // so that the inline dialog styles get placed before date picker.
 import '@atlassian/aui/src/less/aui-date-picker.less';
-export { default as DatePicker } from '@atlassian/aui/src/js/aui/date-picker';
+export { default as DatePicker, CalendarWidget } from '@atlassian/aui/src/js/aui/date-picker';

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@atlassian/aui",
     "description": "Atlassian User Interface library",
-    "version": "9.3.1",
+    "version": "9.3.5",
     "author": "Atlassian Pty Ltd.",
     "homepage": "https://aui.atlassian.com",
     "license": "Apache-2.0",
@@ -28,35 +28,36 @@
         "README.md",
         "yarn.lock"
     ],
+    "//": "AUI's publishConfig is managed by its build scripts.",
     "peerDependencies": {
         "jquery": "^2 || ^3"
     },
     "dependencies": {
-        "@atlassian/tipsy": "^1.3.1",
-        "@popperjs/core": "^2.4.4",
-        "backbone": "^1.3.3",
+        "@atlassian/tipsy": "1.3.3",
+        "@popperjs/core": "2.4.4",
+        "backbone": "1.4.0",
         "css.escape": "1.5.0",
-        "fancy-file-input": "~2.0.4",
-        "jquery-ui": "^1.12.1",
+        "fancy-file-input": "2.0.4",
+        "jquery-ui": "1.12.1",
         "skatejs": "0.13.17",
         "skatejs-template-html": "0.0.0",
         "trim-extra-html-whitespace": "1.3.0",
-        "underscore": "^1.10.2"
+        "underscore": "1.13.1"
     },
     "devDependencies": {
         "@atlassian/adg-server-iconfont": "3.1.0",
         "@atlassian/aui-webpack-config": "2.0.0",
-        "@babel/core": "7.13.14",
-        "@babel/preset-env": "7.13.12",
+        "@babel/core": "7.13.15",
+        "@babel/preset-env": "7.13.15",
         "bundlesize": "^1.0.0-beta.2",
-        "cross-env": "^5.1.3",
-        "eslint": "^4.10.0",
-        "glob": "^7.1.2",
+        "cross-env": "7.0.3",
+        "eslint": "7.24.0",
+        "glob": "7.1.2",
         "ignore-emit-webpack-plugin": "^2.0.2",
-        "jquery": "^3",
-        "jquery-migrate": "^3",
+        "jquery": "3.5.1",
+        "jquery-migrate": "3.3.2",
         "less": "3.11.1",
-        "webpack-cli": "^3.3.11"
+        "webpack-cli": "3.3.12"
     },
     "scripts": {
         "prepublishOnly": "yarn clean && cross-env NODE_ENV=production yarn build",

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

@@ -21,13 +21,13 @@ const makePopup = ({horizontalAlignment, datePickerUUID}) => {
     return popup;
 };
 
-const makeConfig = ({dateFormat, $field, onSelect, hide, onChangeMonthYear}) => ({
-    'dateFormat': dateFormat,
-    'defaultDate': $field.val(),
-    'maxDate': $field.attr('max'),
-    'minDate': $field.attr('min'),
-    'nextText': '>',
-    'onSelect': function (dateText) {
+const makeConfig = ({ minDate, maxDate, dateFormat, $field, onSelect, hide, onChangeMonthYear}) => ({
+    dateFormat,
+    defaultDate: $field.val(),
+    maxDate: maxDate || $field.attr('max'),
+    minDate: minDate || $field.attr('min'),
+    nextText: '>',
+    onSelect: function (dateText) {
         $field.val(dateText);
         $field.trigger('change');
         hide();
@@ -35,7 +35,7 @@ const makeConfig = ({dateFormat, $field, onSelect, hide, onChangeMonthYear}) =>
         onSelect && onSelect.call(this, dateText);
     },
     onChangeMonthYear,
-    'prevText': '<'
+    prevText: '<'
 });
 
 const initCalendar = ({config, popupContents, getCalendarNode, hint}) => {
@@ -287,6 +287,8 @@ const initPolyfill = function (datePicker) {
         }
         const baseConfig = makeConfig({
             dateFormat: options.dateFormat,
+            minDate: options.minDate,
+            maxDate: options.maxDate,
             $field,
             onSelect: options.onSelect,
             hide: datePicker.hide,
@@ -337,6 +339,11 @@ const initPolyfill = function (datePicker) {
     // shows that changing the `type` of input does not erase its value.
     // see https://codepen.io/chrisdarroch/pen/YzwgjyJ
     $field.prop('type', 'text');
+    // Set default value on initialization to handle all date formats.
+    // It is possible, because of changing type to text on the line above.
+    $field.val($field.attr('value'));
+    // Trigger change to update calendar popup value.
+    $field.trigger('propertychange');
 
     // demonstrate the polyfill is initialised
     $field.attr('data-aui-dp-uuid', datePickerUUID);

package/src/js/aui/i18n.js

@@ -7,7 +7,7 @@ import keys from './internal/i18n/aui';
  * the key is returned - this could occur in plugin mode if the I18n transform is not performed;
  * or in flatpack mode if the i18n JS file is not loaded.
  */
-export var I18n = {
+const I18n = {
     keys: keys,
     getText: function (key, ...params) {
         if (Object.prototype.hasOwnProperty.call(this.keys, key)) {
@@ -18,6 +18,11 @@ export var I18n = {
     }
 };
 
+export {
+    I18n,
+    format
+}
+
 /**
  * Deprecated - do not use AJS.I18n.getText from global scope within AUI code. Use import { I18n } from '../i18n'
  * Also keep in mind that WRM is looking for patterns like "I18n.getText" so do not create

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

@@ -6,7 +6,7 @@ import globalize from './internal/globalize';
 import keyCode from './key-code';
 import cssEscape from 'css.escape';
 
-/* eslint quotmark:off, eqeqeq:off, strict:off, complexity:off */
+/* eslint quotes:off, eqeqeq:off, strict:off, complexity:off */
 
 /**
  * Creates a new inline dialog.

package/src/js/aui/internal/globalize.js

@@ -1,5 +1,18 @@
 const NAMESPACE = 'AJS';
 
+/**
+ * Makes given value available globally under window[name] attribute.
+ * Keep in mind that this is needed for p2-plugin where chunks of AUI
+ * can be loaded separately.
+ *
+ * In order for global namespace to work in `aui.prototyping.js` and
+ * `aui.prototyping.nodeps.js` the proper exports need to be added to:
+ * `packages/core/entry/aui.batch.prototyping.js`
+ *
+ * @param {string} name Name of the attribute
+ * @param {any} value Value to expose globally
+ * @returns exposed value
+ */
 export default function globalize (name, value) {
     if (typeof window[NAMESPACE] !== 'object') {
         window[NAMESPACE] = {};

package/src/js/aui/tabs.js

@@ -214,7 +214,7 @@ function calculateResponsiveTabs(tabsContainer, index) {
         }
 
         if (!$tabsContainer.hasClass('aui-tabs-disabled')) {
-            $dropdown.on('click', 'a', handleTabClick);
+            $dropdown.on('click.aui-tabs', 'a', handleTabClick);
         }
 
         /* Workaround for bug in Edge where the dom is just not being re-rendered properly
@@ -371,7 +371,7 @@ function getResponsiveTabs () {
 function initWindow () {
     const handler = debounce(responsiveResizeHandler, 200);
     handler(getResponsiveTabs());
-    $(window).on('resize', () => handler(getResponsiveTabs()));
+    $(window).on('resize.aui-tabs', () => handler(getResponsiveTabs()));
 }
 
 function initTab (tab) {
@@ -392,7 +392,7 @@ function initTab (tab) {
         });
 
         // Set up click event for tabs
-        $tabMenu.on('click', 'a', handleTabClick);
+        $tabMenu.on('click.aui-tabs', 'a', handleTabClick);
         $tab.data('aui-tab-events-bound', true);
 
         initPanes(tab);

package/src/js/aui/tooltip.js

@@ -3,6 +3,7 @@ import { createPopper } from '@popperjs/core';
 
 const AUI_TOOLTIP_CLASS_NAME = 'aui-tooltip';
 const AUI_TOOLTIP_ID = 'aui-tooltip';
+const AUI_TOOLTIP_TIMEOUT = 300;
 
 /**
  * The purpose of this map is to make it possible to use old Tipsy tooltip positions
@@ -30,6 +31,7 @@ const defaultOptions = {
     gravity: 'n',
     html: false,
     live: false,
+    enabled: true,
     suppress: () => false
 }
 
@@ -40,6 +42,7 @@ class Tooltip {
         this.triggerElement = triggerElement;
         this.$triggerElement = $(this.triggerElement);
         this.options = { ...defaultOptions, ...options };
+        this.enabled = this.options.enabled
         this.moveTitleToTooltip()
     }
 
@@ -101,12 +104,13 @@ class Tooltip {
         return $sharedTip;
     }
 
-
     show() {
+        if (this.enabled === false) {
+            return;
+        }
+        this.hide();
         const triggerElement = this.triggerElement;
 
-        const $tip = this.getFloatingTip();
-
         const placement = GRAVITY_MAP[this.options.gravity];
 
         clearTimeout(this.popperTimeout);
@@ -118,8 +122,7 @@ class Tooltip {
         }
 
         this.popperTimeout = setTimeout(() => {
-            const tipNode = $tip.get(0);
-            // tipNode.setAttribute('data-show', '');
+            const tipNode = this.getFloatingTip().get(0);
             tipNode.classList.remove('assistive');
 
             this.popperInstance = createPopper(triggerElement, tipNode, {
@@ -135,12 +138,11 @@ class Tooltip {
             });
 
             $(window).on(`scroll.${pluginKey}`, () => this.hide());
-        }, 500);
+        }, AUI_TOOLTIP_TIMEOUT);
     }
 
     hide() {
         const tipNode = this.getFloatingTip().get(0);
-        // tipNode.removeAttribute('data-show');
         tipNode.classList.add('assistive');
 
         clearTimeout(this.popperTimeout);
@@ -151,6 +153,15 @@ class Tooltip {
         }
         $(window).off(`scroll.${pluginKey}`);
     }
+
+    enable() {
+        this.enabled = true;
+    }
+
+    disable() {
+        this.hide();
+        this.enabled = false;
+    }
 }
 
 const tooltipsByDomNode = new WeakMap();
@@ -162,7 +173,9 @@ const getTooltipInstance = (domNode, options) => {
     let tooltip = tooltipsByDomNode.get(domNode);
     if (tooltip === undefined) {
         tooltip = new Tooltip(domNode, options);
-        tooltipsByDomNode.set(domNode, tooltip);
+        if (typeof domNode === 'object') {
+            tooltipsByDomNode.set(domNode, tooltip);
+        }
     }
     return tooltip;
 }

package/src/js/aui-css-deprecations.js

@@ -116,10 +116,18 @@ Use CSS flexbox or grid to vertically align it.
 See https://css-tricks.com/centering-css-complete-guide/ for techniques.`
 });
 
-//8.4.0
+// 8.4.0
 
 css('.aui-button-light', {
     sinceVersion: '8.4.0',
     removeInVersion: '10.0.0',
     extraInfo: 'ADGS allows only for normal and subtle buttons.'
 });
+
+// 9.3.5
+
+css('.aui-dropdown2-tailed', {
+    sinceVersion: '9.3.5',
+    removeInVersion: '10.0.0',
+    extraInfo: 'ADGS does not include tails on layered components'
+})

package/src/less/aui-appheader.less

@@ -16,6 +16,14 @@ aui-header,
     justify-content: flex-end;
 }
 
+.aui-nav-images() {
+    img, svg {
+        max-height: calc(var(--aui-appheader-logo-height, var(--aui-appheader-item-height, 100%)) - 10px);
+        display: inline-block;
+        vertical-align: text-bottom;
+    }
+}
+
 // Structural styles
 .aui-header {
     --aui-badge-text-color: var(--aui-appheader-text-color);
@@ -30,12 +38,6 @@ aui-header,
     position: relative;
     z-index: @aui-z-header;
 
-    img, svg {
-        max-height: calc(var(--aui-appheader-logo-height, var(--aui-appheader-item-height, 100%)) - 10px);
-        display: inline-block;
-        vertical-align: text-bottom;
-    }
-
     .aui-header-before {
         flex-grow: 0;
         margin-right: @section-gap;
@@ -57,6 +59,9 @@ aui-header,
         vertical-align: text-bottom;
         white-space: nowrap;
 
+        // Set styles for img/svg inside the header logo
+        .aui-nav-images();
+
         // Variant where logo is a CSS background-image
         .aui-header-logo-device {
             background-repeat: no-repeat;
@@ -90,6 +95,11 @@ aui-header,
             > button {
                 white-space: nowrap;
                 display: inline-block;
+
+                // Set styles for avatar images inside nav items
+                > .aui-avatar {
+                    .aui-nav-images();
+                }
             }
         }
     }
@@ -101,9 +111,10 @@ aui-header,
         background: var(--aui-appheader-bg-color);
         height: var(--aui-appheader-height, initial);
 
-        // Override the icon styles so that every icon in the header is a uniform size.
-        .aui-icon {
-            --aui-icon-size: 24px;
+        // Set color in locations where it will not bleed in to nested layered components.
+        .aui-header-before > :not(.aui-layer),
+        .aui-header-logo {
+            color: var(--aui-appheader-text-color, var(--aui-body-text));
         }
 
         // Target the links in the app header.
@@ -151,11 +162,18 @@ aui-header,
             margin-right: @section-gap / 2;
         }
 
+        // Override the icon styles so that every icon in the header is a uniform size...
+        // ...but only in the right-hand side of the header.
+        .aui-header-secondary > .aui-nav > li > a > .aui-icon {
+            --aui-icon-size: 24px;
+        }
+
+        // Bump up the font size when text is used in place of a logo
         .aui-header-logo {
-            color: var(--aui-appheader-text-color);
             font-size: @aui-font-size-xxlarge;
         }
 
+        // Reduce the font size when a logo has supporting text
         .aui-header-logo .aui-header-logo-text {
             font-size: @aui-font-size-medium;
         }

package/src/less/aui-select2.less

@@ -233,14 +233,16 @@
 .aui-select2-container.select2-container .select2-choice:after {
     #aui.icon-pseudoelement();
     content: @aui-glyph-chevron-down;
-    left: 100%; /* "left" + "margin-left" required because of webkit not working properly with "right" */
     height: 0;
     margin-left: -18px;
     margin-top: -2px;
     opacity: 1;
     position: absolute;
-    top: 7px;
+    top: calc(50% - 10px);
     width: 0;
+    font-size: 16px;
+    line-height: 24px;
+    right: 22px;
 }
 
 /* Set the default text color to inherit.
@@ -271,9 +273,12 @@
 .aui-select2-container.select2-container-multi .select2-choices {
     #aui-forms.aui-select2-input-field-style(normal);
     #aui.icon(@aui-glyph-chevron-down, {
-        font-size: inherit;
+        font-size: 16.5px;
         left: inherit;
-        right: 0;
+        color: var(--aui-button-default-text-color);
+        right: 3px;
+        top: 50%;
+        line-height: 16px;
     });
 
     min-height: 0;

package/src/less/aui-sidebar-badges.less

@@ -15,7 +15,7 @@
         > .aui-badge,
         > aui-badge {
             background-color: @aui-sidebar-badge-background-color;
-            border-color: $background-color; // to appear borderless
+            border-color: @aui-sidebar-badge-border-color;
             color: @aui-sidebar-badge-text-color;
 
             float: right;

package/src/less/forms-current.less

@@ -243,13 +243,14 @@ form.aui:not(.aui-legacy-forms) {
     }
 
     // both are @ak-color-N600
-    @chevron-dark:   url('data:image/svg+xml,%3Csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill="%23A5ADBA" d="m6.744 8.744a1.053 1.053 0 0 0 0 1.49l4.547 4.557a1 1 0 0 0 1.416 0l4.55-4.558a1.051 1.051 0 1 0-1.488-1.488l-3.77 3.776-3.768-3.776a1.051 1.051 0 0 0-1.487 0z"/%3E%3C/svg%3E%0A');
-    @chevron-light:  url('data:image/svg+xml,%3Csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill="%23344563" d="m6.744 8.744a1.053 1.053 0 0 0 0 1.49l4.547 4.557a1 1 0 0 0 1.416 0l4.55-4.558a1.051 1.051 0 1 0-1.488-1.488l-3.77 3.776-3.768-3.776a1.051 1.051 0 0 0-1.487 0z"/%3E%3C/svg%3E%0A');
+    @chevron-dark:   url('data:image/svg+xml,%3Csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill="%23A5ADBA" d="M8.292 10.293a1.009 1.009 0 000 1.419l2.939 2.965c.218.215.5.322.779.322s.556-.107.769-.322l2.93-2.955a1.01 1.01 0 000-1.419.987.987 0 00-1.406 0l-2.298 2.317-2.307-2.327a.99.99 0 00-1.406 0z"/%3E%3C/svg%3E%0A');
+    @chevron-light:  url('data:image/svg+xml,%3Csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill="%23344563" d="M8.292 10.293a1.009 1.009 0 000 1.419l2.939 2.965c.218.215.5.322.779.322s.556-.107.769-.322l2.93-2.955a1.01 1.01 0 000-1.419.987.987 0 00-1.406 0l-2.298 2.317-2.307-2.327a.99.99 0 00-1.406 0z"/%3E%3C/svg%3E%0A');
 
     select[disabled]:not([size]),
     .select:not([size]) {
         background-repeat: no-repeat;
-        background-position: 100% 50%;
+        background-position: calc(100% + 1.5px) 50%;
+        background-size: 25px;
     }
 
     select.select[disabled]:not([size]) {
@@ -259,7 +260,7 @@ form.aui:not(.aui-legacy-forms) {
     }
 
     select.select:not([size]) {
-        padding-right: 22px;
+        padding-right: 20px;
         background-image: @chevron-light;
     }
 

package/src/less/forms-radios-and-checkboxes.less

@@ -126,7 +126,8 @@ form.aui:not(.aui-legacy-forms) {
             pointer-events: none !important;
         }
 
-        label {
+        // AUI-5343 - direct child selector; prevents leak radio/checkbox properties to nested labels
+        > label {
             position: relative;
 
             // we need a pseudo-element to extend the clickable area of the label

package/src/less/imports/aui-theme/components/sidebar.less

@@ -16,5 +16,6 @@
 @aui-sidebar-tooltip-background-color: var(--aui-sidebar-tooltip-bg-color);
 
 @aui-sidebar-badge-background-color: var(--aui-sidebar-badge-bg-color);
+@aui-sidebar-badge-border-color: @aui-sidebar-background-color; // to match sidebar background colour
 @aui-sidebar-badge-text-color: var(--aui-sidebar-badge-text-color);
 @aui-sidebar-collapsed-badge-border-width: 2px;

package/src/less/imports/mixins/dropdown2-trigger-chevron-icon.less

@@ -2,7 +2,7 @@
 
 #aui {
     .aui-dropdown2-trigger-chevron-icon(@glyphsize: @aui-icon-size-small; @canvassize: @aui-icon-size-small-canvas) {
-        @canvas-padding: ((@canvassize - @glyphsize) / 2);
+
         #aui.icon-pseudoelement(@aui-icon-font-family);
         content: @aui-glyph-chevron-down;
         font-size: @glyphsize;
@@ -10,7 +10,7 @@
         line-height: 1;
         margin-top: -(@glyphsize / 2);
         position: absolute;
-        right: @canvas-padding;
+        right: 3.5px;
         top: 50%;
         text-indent: 0; // Reset indentation set by split button
         width: @glyphsize;

package/src/less/imports/mixins.less

@@ -11,14 +11,19 @@
 
 #aui {
     .visually-hidden() {
-        border: 0;
-        clip: rect(0 0 0 0);
-        height: 1px;
-        margin: -1px;
-        overflow: hidden;
-        padding: 0;
-        position: absolute;
-        width: 1px;
+        // this mixing is here only to reduce boilerplate (!important suffixes) - see the following call
+        .assistive-declarations() {
+            border: 0;
+            clip: rect(0 0 0 0);
+            height: 1px;
+            margin: -1px;
+            overflow: hidden;
+            padding: 0;
+            position: absolute;
+            width: 1px;
+        }
+        // AUI-5343 - prevents unexpected overrides of declarations from .assistive-declarations mixin
+        .assistive-declarations() !important;
     }
 
     .animation(@animation) {

package/src/less/single-select.less

@@ -136,8 +136,6 @@ aui-select {
 
         &:not([aria-busy])::before {
             #aui.aui-dropdown2-trigger-chevron-icon();
-
-            right: ((@select-trigger-width - @aui-icon-size-small - (@aui-button-border-width *2)) / 2);
         }
     }
 }