@atlaskit/editor-plugin-date 5.1.5 → 5.1.6

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-date
 
+## 5.1.6
+
+### Patch Changes
+
+- [`45b7e7965939b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/45b7e7965939b) -
+  [ux] [I18N-2877] add locale to datepicker i18n and day of week
+- Updated dependencies
+
 ## 5.1.5
 
 ### Patch Changes

package/dist/cjs/ui/DatePicker/index.js

@@ -24,8 +24,10 @@ var _utils = require("@atlaskit/editor-common/utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 var _datePickerInput = _interopRequireDefault(require("./date-picker-input"));
+var _internal = require("./utils/internal");
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var PopupWithListeners = (0, _ui.withOuterListeners)(_ui.Popup);
@@ -101,7 +103,8 @@ var DatePicker = /*#__PURE__*/function (_React$Component) {
   return (0, _createClass2.default)(DatePicker, [{
     key: "render",
     value: function render() {
-      var _this2 = this;
+      var _getDFLocale,
+        _this2 = this;
       var _this$props = this.props,
         element = _this$props.element,
         _onSelect = _this$props.onSelect,
@@ -131,6 +134,7 @@ var DatePicker = /*#__PURE__*/function (_React$Component) {
       if (!timestamp) {
         return null;
       }
+      var defaultWeekStartDay = (0, _expValEquals.expValEquals)('platform_editor_locale_datepicker', 'isEnabled', true) ? (_getDFLocale = (0, _internal.getDFLocale)(intl.locale)) === null || _getDFLocale === void 0 || (_getDFLocale = _getDFLocale.options) === null || _getDFLocale === void 0 ? void 0 : _getDFLocale.weekStartsOn : undefined;
       return /*#__PURE__*/_react.default.createElement(PopupWithListeners
       // Ignored via go/ees005
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -176,8 +180,9 @@ var DatePicker = /*#__PURE__*/function (_React$Component) {
           year: year,
           selected: selected,
           ref: _this2.handleRef,
-          weekStartDay: weekStartDay,
-          testId: 'datepicker'
+          weekStartDay: weekStartDay !== null && weekStartDay !== void 0 ? weekStartDay : defaultWeekStartDay,
+          testId: 'datepicker',
+          locale: intl.locale
         }));
       }));
     }

package/dist/cjs/ui/DatePicker/utils/internal.js

@@ -1,21 +1,26 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.adjustDate = adjustDate;
 exports.findDateSegmentByPosition = findDateSegmentByPosition;
+exports.getDFLocale = getDFLocale;
 exports.getLocaleDatePlaceholder = getLocaleDatePlaceholder;
 exports.isDatePossiblyValid = isDatePossiblyValid;
 exports.isToday = isToday;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _addDays = _interopRequireDefault(require("date-fns/addDays"));
 var _addMonths = _interopRequireDefault(require("date-fns/addMonths"));
 var _addYears = _interopRequireDefault(require("date-fns/addYears"));
+var locales = _interopRequireWildcard(require("date-fns/locale"));
 var _formatParse = require("./formatParse");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; } // eslint-disable-next-line import/no-namespace
 function isDigit(c) {
   if (c === undefined) {
     return false;
@@ -186,4 +191,30 @@ function adjustDate(date, activeSegment, adjustment) {
 function isToday(date) {
   var today = new Date();
   return date !== undefined && today.getDate() === date.day && date.month === today.getMonth() + 1 && date.year === today.getFullYear();
+}
+
+/**
+ * Get the corresponding date-fns locale for a given locale string. Ideally we could rely on Intl
+ * but firefox does not support getting the first day of the week from it. We have to handle silly
+ * use cases like 'nl-NL' where the language code is the same as the region code because someone
+ * decided to format them in this non-standard way
+ * @param localeString Locale string, eg. 'en-AU'
+ * @returns Locale or undefined if not found
+ * @example
+ * getDFLocale('en-AU') // returns enAU locale
+ */
+function getDFLocale(localeString) {
+  var dfLocaleString = localeString;
+  var _localeString$split = localeString.split('-'),
+    _localeString$split2 = (0, _slicedToArray2.default)(_localeString$split, 2),
+    lang = _localeString$split2[0],
+    region = _localeString$split2[1];
+  if (region) {
+    if (lang.toLocaleLowerCase() === region.toLocaleLowerCase()) {
+      dfLocaleString = lang;
+    } else {
+      dfLocaleString = "".concat(lang).concat(region);
+    }
+  }
+  return locales[dfLocaleString];
 }

package/dist/es2019/ui/DatePicker/index.js

@@ -12,9 +12,11 @@ import { timestampToIsoFormat, timestampToUTCDate } from '@atlaskit/editor-commo
 import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { N0, N60A } from '@atlaskit/theme/colors';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 const PopupWithListeners = withOuterListeners(Popup);
 import DatePickerInput from './date-picker-input';
+import { getDFLocale } from './utils/internal';
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 const popupContentWrapper = null;
@@ -84,6 +86,7 @@ class DatePicker extends React.Component {
     }
   }
   render() {
+    var _getDFLocale, _getDFLocale$options;
     const {
       element,
       onSelect,
@@ -117,6 +120,7 @@ class DatePicker extends React.Component {
     if (!timestamp) {
       return null;
     }
+    const defaultWeekStartDay = expValEquals('platform_editor_locale_datepicker', 'isEnabled', true) ? (_getDFLocale = getDFLocale(intl.locale)) === null || _getDFLocale === void 0 ? void 0 : (_getDFLocale$options = _getDFLocale.options) === null || _getDFLocale$options === void 0 ? void 0 : _getDFLocale$options.weekStartsOn : undefined;
     return /*#__PURE__*/React.createElement(PopupWithListeners
     // Ignored via go/ees005
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -155,8 +159,9 @@ class DatePicker extends React.Component {
       year: year,
       selected: selected,
       ref: this.handleRef,
-      weekStartDay: weekStartDay,
-      testId: 'datepicker'
+      weekStartDay: weekStartDay !== null && weekStartDay !== void 0 ? weekStartDay : defaultWeekStartDay,
+      testId: 'datepicker',
+      locale: intl.locale
     }))));
   }
 }

package/dist/es2019/ui/DatePicker/utils/internal.js

@@ -1,6 +1,8 @@
 import addDays from 'date-fns/addDays';
 import addMonths from 'date-fns/addMonths';
 import addYears from 'date-fns/addYears';
+// eslint-disable-next-line import/no-namespace
+import * as locales from 'date-fns/locale';
 import { dateToDateType, dateTypeToDate, formatDateType } from './formatParse';
 function isDigit(c) {
   if (c === undefined) {
@@ -161,4 +163,27 @@ export function adjustDate(date, activeSegment, adjustment) {
 export function isToday(date) {
   const today = new Date();
   return date !== undefined && today.getDate() === date.day && date.month === today.getMonth() + 1 && date.year === today.getFullYear();
+}
+
+/**
+ * Get the corresponding date-fns locale for a given locale string. Ideally we could rely on Intl
+ * but firefox does not support getting the first day of the week from it. We have to handle silly
+ * use cases like 'nl-NL' where the language code is the same as the region code because someone
+ * decided to format them in this non-standard way
+ * @param localeString Locale string, eg. 'en-AU'
+ * @returns Locale or undefined if not found
+ * @example
+ * getDFLocale('en-AU') // returns enAU locale
+ */
+export function getDFLocale(localeString) {
+  let dfLocaleString = localeString;
+  const [lang, region] = localeString.split('-');
+  if (region) {
+    if (lang.toLocaleLowerCase() === region.toLocaleLowerCase()) {
+      dfLocaleString = lang;
+    } else {
+      dfLocaleString = `${lang}${region}`;
+    }
+  }
+  return locales[dfLocaleString];
 }

package/dist/esm/ui/DatePicker/index.js

@@ -19,9 +19,11 @@ import { timestampToIsoFormat, timestampToUTCDate } from '@atlaskit/editor-commo
 import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { N0, N60A } from '@atlaskit/theme/colors';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 var PopupWithListeners = withOuterListeners(Popup);
 import DatePickerInput from './date-picker-input';
+import { getDFLocale } from './utils/internal';
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 var popupContentWrapper = null;
@@ -95,7 +97,8 @@ var DatePicker = /*#__PURE__*/function (_React$Component) {
   return _createClass(DatePicker, [{
     key: "render",
     value: function render() {
-      var _this2 = this;
+      var _getDFLocale,
+        _this2 = this;
       var _this$props = this.props,
         element = _this$props.element,
         _onSelect = _this$props.onSelect,
@@ -125,6 +128,7 @@ var DatePicker = /*#__PURE__*/function (_React$Component) {
       if (!timestamp) {
         return null;
       }
+      var defaultWeekStartDay = expValEquals('platform_editor_locale_datepicker', 'isEnabled', true) ? (_getDFLocale = getDFLocale(intl.locale)) === null || _getDFLocale === void 0 || (_getDFLocale = _getDFLocale.options) === null || _getDFLocale === void 0 ? void 0 : _getDFLocale.weekStartsOn : undefined;
       return /*#__PURE__*/React.createElement(PopupWithListeners
       // Ignored via go/ees005
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -170,8 +174,9 @@ var DatePicker = /*#__PURE__*/function (_React$Component) {
           year: year,
           selected: selected,
           ref: _this2.handleRef,
-          weekStartDay: weekStartDay,
-          testId: 'datepicker'
+          weekStartDay: weekStartDay !== null && weekStartDay !== void 0 ? weekStartDay : defaultWeekStartDay,
+          testId: 'datepicker',
+          locale: intl.locale
         }));
       }));
     }

package/dist/esm/ui/DatePicker/utils/internal.js

@@ -1,9 +1,12 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 import addDays from 'date-fns/addDays';
 import addMonths from 'date-fns/addMonths';
 import addYears from 'date-fns/addYears';
+// eslint-disable-next-line import/no-namespace
+import * as locales from 'date-fns/locale';
 import { dateToDateType, dateTypeToDate, formatDateType } from './formatParse';
 function isDigit(c) {
   if (c === undefined) {
@@ -175,4 +178,30 @@ export function adjustDate(date, activeSegment, adjustment) {
 export function isToday(date) {
   var today = new Date();
   return date !== undefined && today.getDate() === date.day && date.month === today.getMonth() + 1 && date.year === today.getFullYear();
+}
+
+/**
+ * Get the corresponding date-fns locale for a given locale string. Ideally we could rely on Intl
+ * but firefox does not support getting the first day of the week from it. We have to handle silly
+ * use cases like 'nl-NL' where the language code is the same as the region code because someone
+ * decided to format them in this non-standard way
+ * @param localeString Locale string, eg. 'en-AU'
+ * @returns Locale or undefined if not found
+ * @example
+ * getDFLocale('en-AU') // returns enAU locale
+ */
+export function getDFLocale(localeString) {
+  var dfLocaleString = localeString;
+  var _localeString$split = localeString.split('-'),
+    _localeString$split2 = _slicedToArray(_localeString$split, 2),
+    lang = _localeString$split2[0],
+    region = _localeString$split2[1];
+  if (region) {
+    if (lang.toLocaleLowerCase() === region.toLocaleLowerCase()) {
+      dfLocaleString = lang;
+    } else {
+      dfLocaleString = "".concat(lang).concat(region);
+    }
+  }
+  return locales[dfLocaleString];
 }

package/dist/types/ui/DatePicker/utils/internal.d.ts

@@ -30,3 +30,14 @@ export declare function getLocaleDatePlaceholder(locale: string): string | undef
  */
 export declare function adjustDate(date: DateType, activeSegment: DateSegment, adjustment: number): DateType;
 export declare function isToday(date: DateType | undefined): boolean;
+/**
+ * Get the corresponding date-fns locale for a given locale string. Ideally we could rely on Intl
+ * but firefox does not support getting the first day of the week from it. We have to handle silly
+ * use cases like 'nl-NL' where the language code is the same as the region code because someone
+ * decided to format them in this non-standard way
+ * @param localeString Locale string, eg. 'en-AU'
+ * @returns Locale or undefined if not found
+ * @example
+ * getDFLocale('en-AU') // returns enAU locale
+ */
+export declare function getDFLocale(localeString: string): Locale | undefined;

package/dist/types-ts4.5/ui/DatePicker/utils/internal.d.ts

@@ -30,3 +30,14 @@ export declare function getLocaleDatePlaceholder(locale: string): string | undef
  */
 export declare function adjustDate(date: DateType, activeSegment: DateSegment, adjustment: number): DateType;
 export declare function isToday(date: DateType | undefined): boolean;
+/**
+ * Get the corresponding date-fns locale for a given locale string. Ideally we could rely on Intl
+ * but firefox does not support getting the first day of the week from it. We have to handle silly
+ * use cases like 'nl-NL' where the language code is the same as the region code because someone
+ * decided to format them in this non-standard way
+ * @param localeString Locale string, eg. 'en-AU'
+ * @returns Locale or undefined if not found
+ * @example
+ * getDFLocale('en-AU') // returns enAU locale
+ */
+export declare function getDFLocale(localeString: string): Locale | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-date",
-	"version": "5.1.5",
+	"version": "5.1.6",
 	"description": "Date plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -48,7 +48,7 @@
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/textfield": "^8.0.0",
 		"@atlaskit/theme": "^19.0.0",
-		"@atlaskit/tmp-editor-statsig": "^11.0.0",
+		"@atlaskit/tmp-editor-statsig": "^11.3.0",
 		"@atlaskit/tokens": "^6.0.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",