@atlassian/aui 9.12.6 → 9.12.7

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

@@ -8,7 +8,7 @@ import { I18n } from './i18n';
 import InlineDialogEl from './inline-dialog2';
 import generateUniqueId from './unique-id';
 
-const makePopup = ({horizontalAlignment, datePickerUUID}) => {
+const makePopup = ({ horizontalAlignment, datePickerUUID }) => {
     const popupInlineDialogElement = new InlineDialogEl();
     popupInlineDialogElement.id = datePickerUUID;
 
@@ -21,7 +21,15 @@ const makePopup = ({horizontalAlignment, datePickerUUID}) => {
     return popup;
 };
 
-const makeConfig = ({ minDate, maxDate, dateFormat, $field, onSelect, hide, onChangeMonthYear}) => ({
+const makeConfig = ({
+    minDate,
+    maxDate,
+    dateFormat,
+    $field,
+    onSelect,
+    hide,
+    onChangeMonthYear,
+}) => ({
     dateFormat,
     defaultDate: $field.val(),
     maxDate: maxDate || $field.attr('max'),
@@ -35,10 +43,10 @@ const makeConfig = ({ minDate, maxDate, dateFormat, $field, onSelect, hide, onCh
         onSelect && onSelect.call(this, dateText);
     },
     onChangeMonthYear,
-    prevText: '<'
+    prevText: '<',
 });
 
-const initCalendar = ({config, popupContents, getCalendarNode, hint}) => {
+const initCalendar = ({ config, popupContents, getCalendarNode, hint }) => {
     const calendar = $(getCalendarNode());
 
     calendar.datepicker(config);
@@ -59,7 +67,6 @@ const makeDefaultPopupController = ($field, datePickerUUID) => {
     let parentPopup;
     let isTrackingDatePickerFocus = false; // used to prevent multiple bindings of handleDatePickerFocus within handleFieldBlur
 
-
     const $body = $('body');
 
     const handleDatePickerFocus = (event) => {
@@ -81,33 +88,33 @@ const makeDefaultPopupController = ($field, datePickerUUID) => {
 
     const handleFieldBlur = () => {
         // Trigger blur if event is keydown and esc OR is focusout.
-        if (!(isTrackingDatePickerFocus)) {
+        if (!isTrackingDatePickerFocus) {
             $body.on('focus blur click mousedown', '*', handleDatePickerFocus);
             isTrackingDatePickerFocus = true;
         }
     };
 
-
     const createPolyfill = function () {
         // bind additional field processing events
         $body.on('keydown', handleDatePickerFocus);
         $field.on('focusout keydown', handleFieldBlur);
-
-
     };
 
-    const getPopupContents = ({$field}) => {
-        const calculateHorizontalAlignment = $field => {
+    const getPopupContents = ({ $field }) => {
+        const calculateHorizontalAlignment = ($field) => {
             let inLeftHalf = $field.offset().left < window.innerWidth / 2;
             return inLeftHalf ? 'left' : 'right';
         };
 
-        popup = makePopup({horizontalAlignment: calculateHorizontalAlignment($field), datePickerUUID});
+        popup = makePopup({
+            horizontalAlignment: calculateHorizontalAlignment($field),
+            datePickerUUID,
+        });
 
         parentPopup = $field.closest('aui-inline-dialog').get(0);
         if (parentPopup) {
             parentPopup._datePickerPopup = popup; // AUI-2696 - hackish coupling to control inline-dialog close behaviour.
-            $(parentPopup).on('aui-hide', e => {
+            $(parentPopup).on('aui-hide', (e) => {
                 if (isTrackingDatePickerFocus) {
                     e.preventDefault();
                 }
@@ -127,7 +134,7 @@ const makeDefaultPopupController = ($field, datePickerUUID) => {
 
     const handleFieldFocus = () => {
         if (!popup.get(0).open) {
-            showDatePicker()
+            showDatePicker();
         }
     };
 
@@ -144,8 +151,7 @@ const makeDefaultPopupController = ($field, datePickerUUID) => {
         setTimeout(popup.refresh, 0);
     };
 
-    const getCalendarNode = () =>
-        popup.get(0).childNodes[0];
+    const getCalendarNode = () => popup.get(0).childNodes[0];
 
     const destroyPolyfill = () => {
         // goodbye, cruel world!
@@ -167,8 +173,8 @@ const makeDefaultPopupController = ($field, datePickerUUID) => {
         handleChangeMonthYear,
         getCalendarNode,
         destroyPolyfill,
-        createPolyfill
-    }
+        createPolyfill,
+    };
 };
 
 const initPolyfill = function (datePicker) {
@@ -211,9 +217,9 @@ const initPolyfill = function (datePicker) {
     // mutate datePicker public API
     // -----------------------------------------------------------------
     {
-        const withCalendar = callback => value => {
+        const withCalendar = (callback) => (value) => {
             if (typeof calendar !== 'undefined') {
-                return callback(value)
+                return callback(value);
             }
         };
 
@@ -254,26 +260,27 @@ const initPolyfill = function (datePicker) {
 
             delete datePicker.show;
             delete datePicker.hide;
-
         };
 
-        datePicker.setDate = withCalendar(value => {
-            calendar.datepicker('setDate', value)
+        datePicker.setDate = withCalendar((value) => {
+            calendar.datepicker('setDate', value);
         });
 
         datePicker.getDate = withCalendar(() => calendar.datepicker('getDate'));
 
-        datePicker.setMin = withCalendar(value => calendar.datepicker('option', 'minDate', value));
+        datePicker.setMin = withCalendar((value) =>
+            calendar.datepicker('option', 'minDate', value)
+        );
 
-        datePicker.setMax = withCalendar(value => calendar.datepicker('option', 'maxDate', value));
+        datePicker.setMax = withCalendar((value) =>
+            calendar.datepicker('option', 'maxDate', value)
+        );
     }
 
-
     // -----------------------------------------------------------------
     // polyfill bootstrap ----------------------------------------------
     // -----------------------------------------------------------------
 
-
     if (!(options.languageCode in DatePicker.prototype.localisations)) {
         options.languageCode = '';
     }
@@ -283,7 +290,9 @@ const initPolyfill = function (datePicker) {
 
     if (typeof calendar === 'undefined') {
         if (typeof $field.attr('step') !== 'undefined') {
-            logger.log('WARNING: The date picker polyfill currently does not support the step attribute!');
+            logger.log(
+                'WARNING: The date picker polyfill currently does not support the step attribute!'
+            );
         }
         const baseConfig = makeConfig({
             dateFormat: options.dateFormat,
@@ -292,7 +301,7 @@ const initPolyfill = function (datePicker) {
             $field,
             onSelect: options.onSelect,
             hide: datePicker.hide,
-            onChangeMonthYear: handleChangeMonthYear
+            onChangeMonthYear: handleChangeMonthYear,
         });
         const config = $.extend(undefined, baseConfig, i18nConfig);
 
@@ -304,16 +313,15 @@ const initPolyfill = function (datePicker) {
 
         calendar = initCalendar({
             config,
-            popupContents: getPopupContents({$field}),
+            popupContents: getPopupContents({ $field }),
             getCalendarNode,
-            hint: options.hint
+            hint: options.hint,
         });
 
         createPolyfill();
 
         $field.on('propertychange keyup input paste', handleFieldUpdate);
 
-
         // bind attribute handlers to account for html5 attributes
         attributeHandler = new MutationObserver(function (mutationsList) {
             mutationsList.forEach(function (mutation) {
@@ -324,7 +332,7 @@ const initPolyfill = function (datePicker) {
                 }
             });
         });
-        attributeHandler.observe($field.get(0), {attributes: true});
+        attributeHandler.observe($field.get(0), { attributes: true });
     }
 
     // bind what we need to start off with
@@ -372,17 +380,14 @@ function DatePicker(field, baseOptions) {
             const browserDoesNotSupportDateField = !DatePicker.prototype.browserSupportsDateField;
             const shouldOverrideBrowserDefault = options.overrideBrowserDefault !== false;
 
-            if (
-                browserDoesNotSupportDateField ||
-                shouldOverrideBrowserDefault
-            ) {
+            if (browserDoesNotSupportDateField || shouldOverrideBrowserDefault) {
                 initPolyfill(datePicker);
             }
         },
-        reconfigure: newOptions => {
+        reconfigure: (newOptions) => {
             options = $.extend(undefined, DatePicker.prototype.defaultOptions, newOptions);
             datePicker.reset();
-        }
+        },
     };
 
     datePicker.reconfigure(baseOptions);
@@ -400,14 +405,17 @@ DatePicker.prototype.defaultOptions = {
     overrideBrowserDefault: false,
     firstDay: -1,
     languageCode: $('html').attr('lang') || 'en-AU',
-    dateFormat: datepickerUI.W3C // same as $.datepicker.ISO_8601
+    dateFormat: datepickerUI.W3C, // same as $.datepicker.ISO_8601
 };
 
 function CalendarWidget(calendarNode, baseOptions) {
-    const options = $.extend({
-        'nextText': '>',
-        'prevText': '<'
-    }, baseOptions);
+    const options = $.extend(
+        {
+            nextText: '>',
+            prevText: '<',
+        },
+        baseOptions
+    );
 
     const $calendarNode = $(calendarNode);
 
@@ -431,7 +439,7 @@ function CalendarWidget(calendarNode, baseOptions) {
         $result.datepicker('destroy');
     };
 
-    return $result
+    return $result;
 }
 
 // adapted from the jQuery UI Datepicker widget (v1.8.16), with the following changes:
@@ -461,23 +469,28 @@ for (langCode in langs) {
  */
 
 DatePicker.prototype.localisations = {
-    'dayNames': [I18n.getText('ajs.datepicker.localisations.day-names.sunday'),
+    dayNames: [
+        I18n.getText('ajs.datepicker.localisations.day-names.sunday'),
         I18n.getText('ajs.datepicker.localisations.day-names.monday'),
         I18n.getText('ajs.datepicker.localisations.day-names.tuesday'),
         I18n.getText('ajs.datepicker.localisations.day-names.wednesday'),
         I18n.getText('ajs.datepicker.localisations.day-names.thursday'),
         I18n.getText('ajs.datepicker.localisations.day-names.friday'),
-        I18n.getText('ajs.datepicker.localisations.day-names.saturday')],
-    'dayNamesMin': [I18n.getText('ajs.datepicker.localisations.day-names-min.sunday'),
+        I18n.getText('ajs.datepicker.localisations.day-names.saturday'),
+    ],
+    dayNamesMin: [
+        I18n.getText('ajs.datepicker.localisations.day-names-min.sunday'),
         I18n.getText('ajs.datepicker.localisations.day-names-min.monday'),
         I18n.getText('ajs.datepicker.localisations.day-names-min.tuesday'),
         I18n.getText('ajs.datepicker.localisations.day-names-min.wednesday'),
         I18n.getText('ajs.datepicker.localisations.day-names-min.thursday'),
         I18n.getText('ajs.datepicker.localisations.day-names-min.friday'),
-        I18n.getText('ajs.datepicker.localisations.day-names-min.saturday')],
-    'firstDay': I18n.getText('ajs.datepicker.localisations.first-day'),
-    'isRTL': I18n.getText('ajs.datepicker.localisations.is-RTL') === 'true',
-    'monthNames': [I18n.getText('ajs.datepicker.localisations.month-names.january'),
+        I18n.getText('ajs.datepicker.localisations.day-names-min.saturday'),
+    ],
+    firstDay: I18n.getText('ajs.datepicker.localisations.first-day'),
+    isRTL: I18n.getText('ajs.datepicker.localisations.is-RTL') === 'true',
+    monthNames: [
+        I18n.getText('ajs.datepicker.localisations.month-names.january'),
         I18n.getText('ajs.datepicker.localisations.month-names.february'),
         I18n.getText('ajs.datepicker.localisations.month-names.march'),
         I18n.getText('ajs.datepicker.localisations.month-names.april'),
@@ -488,29 +501,37 @@ DatePicker.prototype.localisations = {
         I18n.getText('ajs.datepicker.localisations.month-names.september'),
         I18n.getText('ajs.datepicker.localisations.month-names.october'),
         I18n.getText('ajs.datepicker.localisations.month-names.november'),
-        I18n.getText('ajs.datepicker.localisations.month-names.december')],
-    'showMonthAfterYear': I18n.getText('ajs.datepicker.localisations.show-month-after-year') === 'true',
-    'yearSuffix': I18n.getText('ajs.datepicker.localisations.year-suffix')
+        I18n.getText('ajs.datepicker.localisations.month-names.december'),
+    ],
+    showMonthAfterYear:
+        I18n.getText('ajs.datepicker.localisations.show-month-after-year') === 'true',
+    yearSuffix: I18n.getText('ajs.datepicker.localisations.year-suffix'),
 };
 
+// TODO Workaround a localisation issue in WRM related to empty strings not being considered as valid localisation values
+// TODO Remove once this WRM PR is pulled in via platform (most probably) 8: https://bitbucket.org/atlassian/atlassian-plugins-webresource/pull-requests/1761/overview
+if (DatePicker.prototype.localisations.yearSuffix === 'ajs.datepicker.localisations.year-suffix') {
+    DatePicker.prototype.localisations.yearSuffix = '';
+}
 
 // -------------------------------------------------------------------------
 // finally, integrate with jQuery for convenience --------------------------
 // -------------------------------------------------------------------------
 const key = 'aui-datepicker';
 
-const makePlugin = (WidgetConstructor) => function (options) {
-    let picker = this.data(key);
-    if (!picker) {
-        picker = new WidgetConstructor(this, options);
-        this.data(key, picker);
-    } else if (typeof options === 'object') {
-        picker.reconfigure(options);
-    } else if (options === 'destroy') {
-        picker.destroy();
-    }
-    return picker;
-};
+const makePlugin = (WidgetConstructor) =>
+    function (options) {
+        let picker = this.data(key);
+        if (!picker) {
+            picker = new WidgetConstructor(this, options);
+            this.data(key, picker);
+        } else if (typeof options === 'object') {
+            picker.reconfigure(options);
+        } else if (options === 'destroy') {
+            picker.destroy();
+        }
+        return picker;
+    };
 
 $.fn.datePicker = makePlugin(DatePicker);
 globalize('DatePicker', DatePicker);
@@ -519,4 +540,4 @@ $.fn.calendarWidget = makePlugin(CalendarWidget);
 globalize('CalendarWidget', CalendarWidget);
 
 export default DatePicker;
-export { CalendarWidget }
+export { CalendarWidget };

package/src/js/aui/debounce.js

@@ -4,7 +4,7 @@ import * as deprecate from './internal/deprecation';
 /**
  * @deprecated Since 8.0.0 Use equivalent functions from libraries like lodash / underscore instead.
  */
-function debounce (func, wait) {
+function debounce(func, wait) {
     var timeout;
     var result;
 
@@ -26,7 +26,7 @@ function debounce (func, wait) {
 var deprecatedDebounce = deprecate.fn(debounce, 'AJS.debounce', {
     removeInVersion: '10.0.0',
     sinceVersion: '8.0.0',
-    extraInfo: 'Use equivalent functions from libraries like lodash / underscore instead'
+    extraInfo: 'Use equivalent functions from libraries like lodash / underscore instead',
 });
 
 export default deprecatedDebounce;
@@ -36,7 +36,7 @@ globalize('debounce', deprecatedDebounce);
 /**
  * @deprecated Since 8.0.0 Use equivalent functions from libraries like lodash / underscore instead.
  */
-function debounceImmediate (func, wait) {
+function debounceImmediate(func, wait) {
     var timeout = null;
     var result;
 
@@ -61,12 +61,9 @@ function debounceImmediate (func, wait) {
 var deprecatedDebounceImmediate = deprecate.fn(debounceImmediate, 'AJS.debounceImmediate', {
     removeInVersion: '10.0.0',
     sinceVersion: '8.0.0',
-    extraInfo: 'Use equivalent functions from libraries like lodash / underscore instead'
+    extraInfo: 'Use equivalent functions from libraries like lodash / underscore instead',
 });
 
-export {
-    deprecatedDebounceImmediate as debounceImmediate
-};
+export { deprecatedDebounceImmediate as debounceImmediate };
 
 globalize('debounceImmediate', deprecatedDebounceImmediate);
-

package/src/js/aui/design-tokens/design-tokens-full.js

@@ -5,19 +5,10 @@ import globalize from '../internal/globalize';
 import './design-tokens-init';
 
 // Export for NPM bundle, for which Webpack automatically puts those functions under AJS.DesignTokens
-export const {
-    setGlobalTheme,
-    token,
-    getTokenValue,
-    ThemeMutationObserver
-} = Tokens;
+export const { setGlobalTheme, token, getTokenValue, ThemeMutationObserver } = Tokens;
 
-export const {
-    setTestingThemeColor,
-    enableTestingTheme,
-    disableTestingTheme,
-    toggleTestingTheme
-} = TestingTheme;
+export const { setTestingThemeColor, enableTestingTheme, disableTestingTheme, toggleTestingTheme } =
+    TestingTheme;
 
 // Export for p2-plugin bundle, where we need to do put those functions under AJS.DesignTokens manually
 globalize('DesignTokens', {
@@ -29,5 +20,5 @@ globalize('DesignTokens', {
     toggleTestingTheme,
     enableTestingTheme,
     disableTestingTheme,
-    setTestingThemeColor
+    setTestingThemeColor,
 });

package/src/js/aui/design-tokens/design-tokens-init.js

@@ -1,7 +1,5 @@
 import { setGlobalTheme } from '@atlaskit/tokens';
 
-if (
-    document.documentElement.hasAttribute('data-color-mode-auto')
-) {
+if (document.documentElement.hasAttribute('data-color-mode-auto')) {
     setGlobalTheme({ colorMode: 'auto' });
 }

package/src/js/aui/design-tokens/design-tokens-testing-theme.js

@@ -14,22 +14,22 @@ const testingThemeSelector =
  * @param solidColor any valid CSS color, will be used to replace tokens
  */
 (function generateTestingTheme() {
-
-    const initialComment = 'This theme is autogenerated using AJS.DesignTokens.generateTestingTheme().'
+    const initialComment =
+        'This theme is autogenerated using AJS.DesignTokens.generateTestingTheme().';
 
     // If function called many times theme should be only added once
-    const isThemeAlreadyInitialised = !document.querySelector(testingThemeSelector)
+    const isThemeAlreadyInitialised = !document.querySelector(testingThemeSelector);
     if (!isThemeAlreadyInitialised) {
         return;
     }
 
     // We use overridable test color declaration to make theme configurable
-    const colorDeclaration = `${testingColorVariableName}: ${defaultTestingColor};`
-    const themeCSSDeclarations = Object.values(TokenNames)
-        .map(token => `\t${token}: var(${testingColorVariableName});`);
+    const colorDeclaration = `${testingColorVariableName}: ${defaultTestingColor};`;
+    const themeCSSDeclarations = Object.values(TokenNames).map(
+        (token) => `\t${token}: var(${testingColorVariableName});`
+    );
     const allDeclarations = [colorDeclaration, ...themeCSSDeclarations];
 
-
     const themeCSS = `/* ${initialComment} */\n${testingThemeSelector} {\n${allDeclarations.join('\n')}\n}`;
 
     const themeElement = document.createElement('style');
@@ -40,7 +40,7 @@ const testingThemeSelector =
     if (head) {
         head.appendChild(themeElement);
     }
-}());
+})();
 
 /**
  * Overrides default testing color by setting css variable. If no color passed, will revert to default.
@@ -71,7 +71,6 @@ function disableTestingTheme() {
  * @param targetState Optional parameter. Allows to force specific state.
  */
 function toggleTestingTheme(targetState) {
-
     // If not passed, invert existing state
     if (targetState == null) {
         targetState = !isTestingThemeEnabled();
@@ -80,9 +79,4 @@ function toggleTestingTheme(targetState) {
     targetState ? enableTestingTheme() : disableTestingTheme();
 }
 
-export {
-    setTestingThemeColor,
-    enableTestingTheme,
-    disableTestingTheme,
-    toggleTestingTheme
-}
+export { setTestingThemeColor, enableTestingTheme, disableTestingTheme, toggleTestingTheme };

package/src/js/aui/design-tokens/design-tokens.js

@@ -4,11 +4,9 @@ import globalize from '../internal/globalize';
 import './design-tokens-init';
 
 // Export for NPM bundle, for which Webpack automatically puts those functions under AJS.DesignTokens
-export const {
-    setGlobalTheme
-} = Tokens;
+export const { setGlobalTheme } = Tokens;
 
 // Export for p2-plugin bundle, where we need to do put those functions under AJS.DesignTokens manually
 globalize('DesignTokens', {
-    setGlobalTheme
+    setGlobalTheme,
 });