@atlaskit/link-picker 1.23.0 → 1.23.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/link-picker
 
+## 1.23.2
+
+### Patch Changes
+
+- [`44d226ae268`](https://bitbucket.org/atlassian/atlassian-frontend/commits/44d226ae268) - [ux] This adds support for Confluence Whiteboards in Link Picker search. This also adds a new scope in `@atlassian/search-client`, which contains pages, blogs and whiteboards.
+
+## 1.23.1
+
+### Patch Changes
+
+- [`1d9bcdf92d8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1d9bcdf92d8) - EDM-5278: refactor timestamp in link-picker to remove string concatenation, to switch between relative and absolute time with correct display values and add new atlas kit example to test translations for link-picker
+
 ## 1.23.0
 
 ### Minor Changes

package/dist/cjs/common/utils/date.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isMoreThanOneWeekAgo = isMoreThanOneWeekAgo;
+var _isBefore = _interopRequireDefault(require("date-fns/isBefore"));
+var _startOfDay = _interopRequireDefault(require("date-fns/startOfDay"));
+var _subWeeks = _interopRequireDefault(require("date-fns/subWeeks"));
+function isMoreThanOneWeekAgo(date) {
+  return (0, _isBefore.default)(new Date(date), startOfOneWeekAgo());
+}
+function startOfOneWeekAgo() {
+  return (0, _startOfDay.default)((0, _subWeeks.default)(new Date(), 1));
+}

package/dist/cjs/common/utils/dateUtils.js

@@ -0,0 +1,72 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DEFAULT_THRESHOLDS = void 0;
+exports.selectUnit = selectUnit;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+//copied from packages/activity-platform/recent-work-ui/src/common/ui/activity-event-type-message/utils.ts
+
+var MS_PER_SECOND = 1e3;
+var SECS_PER_MIN = 60;
+var SECS_PER_HOUR = SECS_PER_MIN * 60;
+var SECS_PER_DAY = SECS_PER_HOUR * 24;
+var SECS_PER_WEEK = SECS_PER_DAY * 7;
+
+// This function is a direct copy from https://github.com/formatjs/formatjs-old/blob/master/packages/intl-utils/src/diff.ts
+// If the year between 'from' and 'to' is different and there is more than a week between them, the function returns
+// 'year' as the unit. This means some activities display a '1 year ago' even though its 10 days old.
+//
+// In the below, we have removed the check for 'year' and 'month' as we display absolute dates for those periods.
+function selectUnit(from) {
+  var to = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : Date.now();
+  var thresholds = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  var resolvedThresholds = _objectSpread(_objectSpread({}, DEFAULT_THRESHOLDS), thresholds || {});
+  var secs = (+from - +to) / MS_PER_SECOND;
+  if (Math.abs(secs) < resolvedThresholds.second) {
+    return {
+      value: Math.round(secs),
+      unit: 'second'
+    };
+  }
+  var mins = secs / SECS_PER_MIN;
+  if (Math.abs(mins) < resolvedThresholds.minute) {
+    return {
+      value: Math.round(mins),
+      unit: 'minute'
+    };
+  }
+  var hours = secs / SECS_PER_HOUR;
+  if (Math.abs(hours) < resolvedThresholds.hour) {
+    return {
+      value: Math.round(hours),
+      unit: 'hour'
+    };
+  }
+  var days = secs / SECS_PER_DAY;
+  if (Math.abs(days) < resolvedThresholds.day) {
+    return {
+      value: Math.round(days),
+      unit: 'day'
+    };
+  }
+  var weeks = secs / SECS_PER_WEEK;
+  return {
+    value: Math.round(weeks),
+    unit: 'week'
+  };
+}
+var DEFAULT_THRESHOLDS = {
+  second: 45,
+  // seconds to minute
+  minute: 45,
+  // minutes to hour
+  hour: 22,
+  // hour to day
+  day: 5 // day to week
+};
+exports.DEFAULT_THRESHOLDS = DEFAULT_THRESHOLDS;

package/dist/cjs/i18n/languages.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = {
+  zh: 'Chinese',
+  zh_TW: 'Chinese (Traditional)',
+  cs: 'Czech',
+  nl: 'Dutch',
+  da: 'Danish',
+  en: 'English',
+  en_GB: 'English (United Kingdom)',
+  et: 'Estonian',
+  fi: 'Finnish',
+  fr: 'French',
+  de: 'German',
+  hu: 'Hungarian',
+  is: 'Icelandic',
+  it: 'Italian',
+  ja: 'Japanese',
+  ko: 'Korean',
+  nb: 'Norwegian Bokmål',
+  pl: 'Polish',
+  pt_BR: 'Portuguese (Brazil)',
+  pt_PT: 'Portuguese (Portugal)',
+  ro: 'Romanian',
+  ru: 'Russian',
+  sk: 'Slovak',
+  es: 'Spanish',
+  sv: 'Swedish',
+  th: 'Thai',
+  tr: 'Turkish',
+  uk: 'Ukrainian',
+  vi: 'Vietnamese'
+};
+exports.default = _default;

package/dist/cjs/ui/link-picker/list-item/index.js

@@ -56,13 +56,10 @@ var LinkSearchListItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref
     css: _styled.listItemContainerInnerStyles
   }, container)), date && (0, _react2.jsx)("div", {
     css: _styled.listItemContainerInnerStyles
-  }, container && (0, _react2.jsx)(_react.Fragment, null, "\xA0 \u2022\xA0 "), (0, _react2.jsx)(_react.Fragment, null, formatDate(date))))));
+  }, container && (0, _react2.jsx)(_react.Fragment, null, "\xA0 \u2022\xA0 "), (0, _react2.jsx)(_react.Fragment, null, date)))));
 });
 var _default = LinkSearchListItem;
 exports.default = _default;
-var formatDate = function formatDate(date) {
-  return [date.pageAction, date.dateString, date.timeSince].filter(Boolean).join(' ');
-};
 var isSVG = function isSVG(icon) {
   return icon.startsWith('<svg') && icon.endsWith('</svg>');
 };

package/dist/cjs/ui/link-picker/messages.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.searchMessages = exports.messages = exports.linkTextMessages = exports.linkMessages = exports.formMessages = void 0;
+exports.timeMessages = exports.searchMessages = exports.linkTextMessages = exports.linkMessages = exports.formMessages = void 0;
 var _reactIntlNext = require("react-intl-next");
 var searchMessages = (0, _reactIntlNext.defineMessages)({
   linkLabel: {
@@ -77,21 +77,16 @@ var linkTextMessages = (0, _reactIntlNext.defineMessages)({
   }
 });
 exports.linkTextMessages = linkTextMessages;
-var messages = (0, _reactIntlNext.defineMessages)({
-  timeUpdated: {
-    id: 'fabric.linkPicker.time.updated',
-    defaultMessage: 'Updated',
-    description: 'Time last updated'
+var timeMessages = (0, _reactIntlNext.defineMessages)({
+  updated: {
+    id: 'fabric.linkPicker.time.message.updated',
+    defaultMessage: 'Updated {time}',
+    description: 'Time last updated where {time} can be an absolute value e.g. June 5, 2023 or a relative value e.g. 3 hours ago'
   },
-  timeViewed: {
-    id: 'fabric.linkPicker.time.viewed',
-    defaultMessage: 'Viewed',
-    description: 'Time last viewed'
-  },
-  timeAgo: {
-    id: 'fabric.linkPicker.time.ago',
-    defaultMessage: 'ago',
-    description: 'Some time ago'
+  viewed: {
+    id: 'fabric.linkPicker.time.message.viewed',
+    defaultMessage: 'Viewed {time}',
+    description: 'Time last viewed where {time} can be an absolute value e.g. June 5, 2023 or a relative value e.g. 3 hours ago'
   }
 });
-exports.messages = messages;
+exports.timeMessages = timeMessages;

package/dist/cjs/ui/link-picker/transformTimeStamp.js

@@ -5,31 +5,36 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.transformTimeStamp = void 0;
-var _formatDistance = _interopRequireDefault(require("date-fns/formatDistance"));
-var _differenceInCalendarDays = _interopRequireDefault(require("date-fns/differenceInCalendarDays"));
-var _format = _interopRequireDefault(require("date-fns/format"));
 var _messages = require("./messages");
-var renderAbsoluteOrRelativeDate = function renderAbsoluteOrRelativeDate(timeStamp, pageAction, intl) {
-  var pageActionText = '';
-  switch (pageAction) {
-    case 'updated':
-      pageActionText = intl.formatMessage(_messages.messages.timeUpdated);
-      break;
-    case 'viewed':
-      pageActionText = intl.formatMessage(_messages.messages.timeViewed);
-      break;
+var _date = require("../../common/utils/date");
+var _dateUtils = require("../../common/utils/dateUtils");
+var _isYesterday = _interopRequireDefault(require("date-fns/isYesterday"));
+var formatTime = function formatTime(timeStamp, intl) {
+  var isAbsolute = (0, _date.isMoreThanOneWeekAgo)(timeStamp);
+  if (isAbsolute) {
+    return intl.formatDate(timeStamp, {
+      month: 'long',
+      day: 'numeric',
+      year: 'numeric'
+    });
   }
-  if ((0, _differenceInCalendarDays.default)(timeStamp, Date.now()) < -7) {
-    return {
-      pageAction: pageActionText,
-      dateString: (0, _format.default)(timeStamp, 'MMMM dd, yyyy')
-    };
+  var _selectUnit = (0, _dateUtils.selectUnit)(timeStamp, new Date(), {
+      day: 7 // treat a week as 7 days (default is 5)
+    }),
+    value = _selectUnit.value,
+    unit = _selectUnit.unit;
+  //formats as 'yesterday' instead of '1 day ago'
+  if ((0, _isYesterday.default)(timeStamp)) {
+    return intl.formatRelativeTime(value, unit, {
+      numeric: 'auto'
+    });
   }
-  return {
-    pageAction: pageActionText,
-    dateString: (0, _formatDistance.default)(timeStamp, Date.now()),
-    timeSince: intl.formatMessage(_messages.messages.timeAgo)
-  };
+  return intl.formatRelativeTime(value, unit);
+};
+var renderAbsoluteOrRelativeDate = function renderAbsoluteOrRelativeDate(timeStamp, pageAction, intl) {
+  return intl.formatMessage(_messages.timeMessages[pageAction], {
+    time: formatTime(timeStamp, intl)
+  });
 };
 var transformTimeStamp = function transformTimeStamp(intl, lastViewedDate, lastUpdatedDate) {
   if (lastViewedDate) {

package/dist/cjs/ui/link-picker/utils.js

@@ -46,8 +46,7 @@ function getScreenReaderText(items, selectedIndex, intl) {
       lastUpdatedDate = _items$selectedIndex.lastUpdatedDate,
       lastViewedDate = _items$selectedIndex.lastViewedDate;
     var date = (0, _transformTimeStamp.transformTimeStamp)(intl, lastViewedDate, lastUpdatedDate);
-    var formattedDate = [date === null || date === void 0 ? void 0 : date.pageAction, date === null || date === void 0 ? void 0 : date.dateString, date === null || date === void 0 ? void 0 : date.timeSince].filter(Boolean).join(' ');
-    return [name, container, formattedDate].filter(Boolean).join(', ');
+    return [name, container, date].filter(Boolean).join(', ');
   }
 }
 var handleNavKeyDown = function handleNavKeyDown(event, itemsLength, activeIndex) {

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-picker",
-	"version": "1.23.0",
+	"version": "1.23.2",
 	"sideEffects": false
 }

package/dist/es2019/common/utils/date.js

@@ -0,0 +1,9 @@
+import isBefore from 'date-fns/isBefore';
+import startOfDay from 'date-fns/startOfDay';
+import subWeeks from 'date-fns/subWeeks';
+export function isMoreThanOneWeekAgo(date) {
+  return isBefore(new Date(date), startOfOneWeekAgo());
+}
+function startOfOneWeekAgo() {
+  return startOfDay(subWeeks(new Date(), 1));
+}

package/dist/es2019/common/utils/dateUtils.js

@@ -0,0 +1,61 @@
+//copied from packages/activity-platform/recent-work-ui/src/common/ui/activity-event-type-message/utils.ts
+
+const MS_PER_SECOND = 1e3;
+const SECS_PER_MIN = 60;
+const SECS_PER_HOUR = SECS_PER_MIN * 60;
+const SECS_PER_DAY = SECS_PER_HOUR * 24;
+const SECS_PER_WEEK = SECS_PER_DAY * 7;
+
+// This function is a direct copy from https://github.com/formatjs/formatjs-old/blob/master/packages/intl-utils/src/diff.ts
+// If the year between 'from' and 'to' is different and there is more than a week between them, the function returns
+// 'year' as the unit. This means some activities display a '1 year ago' even though its 10 days old.
+//
+// In the below, we have removed the check for 'year' and 'month' as we display absolute dates for those periods.
+export function selectUnit(from, to = Date.now(), thresholds = {}) {
+  const resolvedThresholds = {
+    ...DEFAULT_THRESHOLDS,
+    ...(thresholds || {})
+  };
+  const secs = (+from - +to) / MS_PER_SECOND;
+  if (Math.abs(secs) < resolvedThresholds.second) {
+    return {
+      value: Math.round(secs),
+      unit: 'second'
+    };
+  }
+  const mins = secs / SECS_PER_MIN;
+  if (Math.abs(mins) < resolvedThresholds.minute) {
+    return {
+      value: Math.round(mins),
+      unit: 'minute'
+    };
+  }
+  const hours = secs / SECS_PER_HOUR;
+  if (Math.abs(hours) < resolvedThresholds.hour) {
+    return {
+      value: Math.round(hours),
+      unit: 'hour'
+    };
+  }
+  const days = secs / SECS_PER_DAY;
+  if (Math.abs(days) < resolvedThresholds.day) {
+    return {
+      value: Math.round(days),
+      unit: 'day'
+    };
+  }
+  const weeks = secs / SECS_PER_WEEK;
+  return {
+    value: Math.round(weeks),
+    unit: 'week'
+  };
+}
+export const DEFAULT_THRESHOLDS = {
+  second: 45,
+  // seconds to minute
+  minute: 45,
+  // minutes to hour
+  hour: 22,
+  // hour to day
+  day: 5 // day to week
+};

package/dist/es2019/i18n/languages.js

@@ -0,0 +1,31 @@
+export default {
+  zh: 'Chinese',
+  zh_TW: 'Chinese (Traditional)',
+  cs: 'Czech',
+  nl: 'Dutch',
+  da: 'Danish',
+  en: 'English',
+  en_GB: 'English (United Kingdom)',
+  et: 'Estonian',
+  fi: 'Finnish',
+  fr: 'French',
+  de: 'German',
+  hu: 'Hungarian',
+  is: 'Icelandic',
+  it: 'Italian',
+  ja: 'Japanese',
+  ko: 'Korean',
+  nb: 'Norwegian Bokmål',
+  pl: 'Polish',
+  pt_BR: 'Portuguese (Brazil)',
+  pt_PT: 'Portuguese (Portugal)',
+  ro: 'Romanian',
+  ru: 'Russian',
+  sk: 'Slovak',
+  es: 'Spanish',
+  sv: 'Swedish',
+  th: 'Thai',
+  tr: 'Turkish',
+  uk: 'Ukrainian',
+  vi: 'Vietnamese'
+};

package/dist/es2019/ui/link-picker/list-item/index.js

@@ -48,12 +48,9 @@ const LinkSearchListItem = /*#__PURE__*/forwardRef(({
     css: listItemContainerInnerStyles
   }, container)), date && jsx("div", {
     css: listItemContainerInnerStyles
-  }, container && jsx(Fragment, null, "\xA0 \u2022\xA0 "), jsx(Fragment, null, formatDate(date))))));
+  }, container && jsx(Fragment, null, "\xA0 \u2022\xA0 "), jsx(Fragment, null, date)))));
 });
 export default LinkSearchListItem;
-const formatDate = date => {
-  return [date.pageAction, date.dateString, date.timeSince].filter(Boolean).join(' ');
-};
 const isSVG = icon => icon.startsWith('<svg') && icon.endsWith('</svg>');
 const base64SVG = icon => `data:image/svg+xml;base64,${Buffer.from(icon).toString('base64')}`;
 const testId = 'link-search-list-item-icon';

package/dist/es2019/ui/link-picker/messages.js

@@ -67,20 +67,15 @@ export const linkTextMessages = defineMessages({
     description: 'Tooltip message for link input clear button'
   }
 });
-export const messages = defineMessages({
-  timeUpdated: {
-    id: 'fabric.linkPicker.time.updated',
-    defaultMessage: 'Updated',
-    description: 'Time last updated'
+export const timeMessages = defineMessages({
+  updated: {
+    id: 'fabric.linkPicker.time.message.updated',
+    defaultMessage: 'Updated {time}',
+    description: 'Time last updated where {time} can be an absolute value e.g. June 5, 2023 or a relative value e.g. 3 hours ago'
   },
-  timeViewed: {
-    id: 'fabric.linkPicker.time.viewed',
-    defaultMessage: 'Viewed',
-    description: 'Time last viewed'
-  },
-  timeAgo: {
-    id: 'fabric.linkPicker.time.ago',
-    defaultMessage: 'ago',
-    description: 'Some time ago'
+  viewed: {
+    id: 'fabric.linkPicker.time.message.viewed',
+    defaultMessage: 'Viewed {time}',
+    description: 'Time last viewed where {time} can be an absolute value e.g. June 5, 2023 or a relative value e.g. 3 hours ago'
   }
 });

package/dist/es2019/ui/link-picker/transformTimeStamp.js

@@ -1,28 +1,34 @@
-import formatDistance from 'date-fns/formatDistance';
-import differenceInCalendarDays from 'date-fns/differenceInCalendarDays';
-import format from 'date-fns/format';
-import { messages } from './messages';
-const renderAbsoluteOrRelativeDate = (timeStamp, pageAction, intl) => {
-  let pageActionText = '';
-  switch (pageAction) {
-    case 'updated':
-      pageActionText = intl.formatMessage(messages.timeUpdated);
-      break;
-    case 'viewed':
-      pageActionText = intl.formatMessage(messages.timeViewed);
-      break;
+import { timeMessages } from './messages';
+import { isMoreThanOneWeekAgo } from '../../common/utils/date';
+import { selectUnit } from '../../common/utils/dateUtils';
+import isYesterday from 'date-fns/isYesterday';
+const formatTime = (timeStamp, intl) => {
+  const isAbsolute = isMoreThanOneWeekAgo(timeStamp);
+  if (isAbsolute) {
+    return intl.formatDate(timeStamp, {
+      month: 'long',
+      day: 'numeric',
+      year: 'numeric'
+    });
   }
-  if (differenceInCalendarDays(timeStamp, Date.now()) < -7) {
-    return {
-      pageAction: pageActionText,
-      dateString: format(timeStamp, 'MMMM dd, yyyy')
-    };
+  const {
+    value,
+    unit
+  } = selectUnit(timeStamp, new Date(), {
+    day: 7 // treat a week as 7 days (default is 5)
+  });
+  //formats as 'yesterday' instead of '1 day ago'
+  if (isYesterday(timeStamp)) {
+    return intl.formatRelativeTime(value, unit, {
+      numeric: 'auto'
+    });
   }
-  return {
-    pageAction: pageActionText,
-    dateString: formatDistance(timeStamp, Date.now()),
-    timeSince: intl.formatMessage(messages.timeAgo)
-  };
+  return intl.formatRelativeTime(value, unit);
+};
+const renderAbsoluteOrRelativeDate = (timeStamp, pageAction, intl) => {
+  return intl.formatMessage(timeMessages[pageAction], {
+    time: formatTime(timeStamp, intl)
+  });
 };
 export const transformTimeStamp = (intl, lastViewedDate, lastUpdatedDate) => {
   if (lastViewedDate) {

package/dist/es2019/ui/link-picker/utils.js

@@ -38,8 +38,7 @@ export function getScreenReaderText(items, selectedIndex, intl) {
       lastViewedDate
     } = items[selectedIndex];
     const date = transformTimeStamp(intl, lastViewedDate, lastUpdatedDate);
-    const formattedDate = [date === null || date === void 0 ? void 0 : date.pageAction, date === null || date === void 0 ? void 0 : date.dateString, date === null || date === void 0 ? void 0 : date.timeSince].filter(Boolean).join(' ');
-    return [name, container, formattedDate].filter(Boolean).join(', ');
+    return [name, container, date].filter(Boolean).join(', ');
   }
 }
 export const handleNavKeyDown = (event, itemsLength, activeIndex) => {

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-picker",
-	"version": "1.23.0",
+	"version": "1.23.2",
 	"sideEffects": false
 }

package/dist/esm/common/utils/date.js

@@ -0,0 +1,9 @@
+import isBefore from 'date-fns/isBefore';
+import startOfDay from 'date-fns/startOfDay';
+import subWeeks from 'date-fns/subWeeks';
+export function isMoreThanOneWeekAgo(date) {
+  return isBefore(new Date(date), startOfOneWeekAgo());
+}
+function startOfOneWeekAgo() {
+  return startOfDay(subWeeks(new Date(), 1));
+}

package/dist/esm/common/utils/dateUtils.js

@@ -0,0 +1,63 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+//copied from packages/activity-platform/recent-work-ui/src/common/ui/activity-event-type-message/utils.ts
+
+var MS_PER_SECOND = 1e3;
+var SECS_PER_MIN = 60;
+var SECS_PER_HOUR = SECS_PER_MIN * 60;
+var SECS_PER_DAY = SECS_PER_HOUR * 24;
+var SECS_PER_WEEK = SECS_PER_DAY * 7;
+
+// This function is a direct copy from https://github.com/formatjs/formatjs-old/blob/master/packages/intl-utils/src/diff.ts
+// If the year between 'from' and 'to' is different and there is more than a week between them, the function returns
+// 'year' as the unit. This means some activities display a '1 year ago' even though its 10 days old.
+//
+// In the below, we have removed the check for 'year' and 'month' as we display absolute dates for those periods.
+export function selectUnit(from) {
+  var to = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : Date.now();
+  var thresholds = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  var resolvedThresholds = _objectSpread(_objectSpread({}, DEFAULT_THRESHOLDS), thresholds || {});
+  var secs = (+from - +to) / MS_PER_SECOND;
+  if (Math.abs(secs) < resolvedThresholds.second) {
+    return {
+      value: Math.round(secs),
+      unit: 'second'
+    };
+  }
+  var mins = secs / SECS_PER_MIN;
+  if (Math.abs(mins) < resolvedThresholds.minute) {
+    return {
+      value: Math.round(mins),
+      unit: 'minute'
+    };
+  }
+  var hours = secs / SECS_PER_HOUR;
+  if (Math.abs(hours) < resolvedThresholds.hour) {
+    return {
+      value: Math.round(hours),
+      unit: 'hour'
+    };
+  }
+  var days = secs / SECS_PER_DAY;
+  if (Math.abs(days) < resolvedThresholds.day) {
+    return {
+      value: Math.round(days),
+      unit: 'day'
+    };
+  }
+  var weeks = secs / SECS_PER_WEEK;
+  return {
+    value: Math.round(weeks),
+    unit: 'week'
+  };
+}
+export var DEFAULT_THRESHOLDS = {
+  second: 45,
+  // seconds to minute
+  minute: 45,
+  // minutes to hour
+  hour: 22,
+  // hour to day
+  day: 5 // day to week
+};

package/dist/esm/i18n/languages.js

@@ -0,0 +1,31 @@
+export default {
+  zh: 'Chinese',
+  zh_TW: 'Chinese (Traditional)',
+  cs: 'Czech',
+  nl: 'Dutch',
+  da: 'Danish',
+  en: 'English',
+  en_GB: 'English (United Kingdom)',
+  et: 'Estonian',
+  fi: 'Finnish',
+  fr: 'French',
+  de: 'German',
+  hu: 'Hungarian',
+  is: 'Icelandic',
+  it: 'Italian',
+  ja: 'Japanese',
+  ko: 'Korean',
+  nb: 'Norwegian Bokmål',
+  pl: 'Polish',
+  pt_BR: 'Portuguese (Brazil)',
+  pt_PT: 'Portuguese (Portugal)',
+  ro: 'Romanian',
+  ru: 'Russian',
+  sk: 'Slovak',
+  es: 'Spanish',
+  sv: 'Swedish',
+  th: 'Thai',
+  tr: 'Turkish',
+  uk: 'Ukrainian',
+  vi: 'Vietnamese'
+};

package/dist/esm/ui/link-picker/list-item/index.js

@@ -49,12 +49,9 @@ var LinkSearchListItem = /*#__PURE__*/forwardRef(function (_ref, ref) {
     css: listItemContainerInnerStyles
   }, container)), date && jsx("div", {
     css: listItemContainerInnerStyles
-  }, container && jsx(Fragment, null, "\xA0 \u2022\xA0 "), jsx(Fragment, null, formatDate(date))))));
+  }, container && jsx(Fragment, null, "\xA0 \u2022\xA0 "), jsx(Fragment, null, date)))));
 });
 export default LinkSearchListItem;
-var formatDate = function formatDate(date) {
-  return [date.pageAction, date.dateString, date.timeSince].filter(Boolean).join(' ');
-};
 var isSVG = function isSVG(icon) {
   return icon.startsWith('<svg') && icon.endsWith('</svg>');
 };

package/dist/esm/ui/link-picker/messages.js

@@ -67,20 +67,15 @@ export var linkTextMessages = defineMessages({
     description: 'Tooltip message for link input clear button'
   }
 });
-export var messages = defineMessages({
-  timeUpdated: {
-    id: 'fabric.linkPicker.time.updated',
-    defaultMessage: 'Updated',
-    description: 'Time last updated'
+export var timeMessages = defineMessages({
+  updated: {
+    id: 'fabric.linkPicker.time.message.updated',
+    defaultMessage: 'Updated {time}',
+    description: 'Time last updated where {time} can be an absolute value e.g. June 5, 2023 or a relative value e.g. 3 hours ago'
   },
-  timeViewed: {
-    id: 'fabric.linkPicker.time.viewed',
-    defaultMessage: 'Viewed',
-    description: 'Time last viewed'
-  },
-  timeAgo: {
-    id: 'fabric.linkPicker.time.ago',
-    defaultMessage: 'ago',
-    description: 'Some time ago'
+  viewed: {
+    id: 'fabric.linkPicker.time.message.viewed',
+    defaultMessage: 'Viewed {time}',
+    description: 'Time last viewed where {time} can be an absolute value e.g. June 5, 2023 or a relative value e.g. 3 hours ago'
   }
 });

package/dist/esm/ui/link-picker/transformTimeStamp.js

@@ -1,28 +1,33 @@
-import formatDistance from 'date-fns/formatDistance';
-import differenceInCalendarDays from 'date-fns/differenceInCalendarDays';
-import format from 'date-fns/format';
-import { messages } from './messages';
-var renderAbsoluteOrRelativeDate = function renderAbsoluteOrRelativeDate(timeStamp, pageAction, intl) {
-  var pageActionText = '';
-  switch (pageAction) {
-    case 'updated':
-      pageActionText = intl.formatMessage(messages.timeUpdated);
-      break;
-    case 'viewed':
-      pageActionText = intl.formatMessage(messages.timeViewed);
-      break;
+import { timeMessages } from './messages';
+import { isMoreThanOneWeekAgo } from '../../common/utils/date';
+import { selectUnit } from '../../common/utils/dateUtils';
+import isYesterday from 'date-fns/isYesterday';
+var formatTime = function formatTime(timeStamp, intl) {
+  var isAbsolute = isMoreThanOneWeekAgo(timeStamp);
+  if (isAbsolute) {
+    return intl.formatDate(timeStamp, {
+      month: 'long',
+      day: 'numeric',
+      year: 'numeric'
+    });
   }
-  if (differenceInCalendarDays(timeStamp, Date.now()) < -7) {
-    return {
-      pageAction: pageActionText,
-      dateString: format(timeStamp, 'MMMM dd, yyyy')
-    };
+  var _selectUnit = selectUnit(timeStamp, new Date(), {
+      day: 7 // treat a week as 7 days (default is 5)
+    }),
+    value = _selectUnit.value,
+    unit = _selectUnit.unit;
+  //formats as 'yesterday' instead of '1 day ago'
+  if (isYesterday(timeStamp)) {
+    return intl.formatRelativeTime(value, unit, {
+      numeric: 'auto'
+    });
   }
-  return {
-    pageAction: pageActionText,
-    dateString: formatDistance(timeStamp, Date.now()),
-    timeSince: intl.formatMessage(messages.timeAgo)
-  };
+  return intl.formatRelativeTime(value, unit);
+};
+var renderAbsoluteOrRelativeDate = function renderAbsoluteOrRelativeDate(timeStamp, pageAction, intl) {
+  return intl.formatMessage(timeMessages[pageAction], {
+    time: formatTime(timeStamp, intl)
+  });
 };
 export var transformTimeStamp = function transformTimeStamp(intl, lastViewedDate, lastUpdatedDate) {
   if (lastViewedDate) {

package/dist/esm/ui/link-picker/utils.js

@@ -35,8 +35,7 @@ export function getScreenReaderText(items, selectedIndex, intl) {
       lastUpdatedDate = _items$selectedIndex.lastUpdatedDate,
       lastViewedDate = _items$selectedIndex.lastViewedDate;
     var date = transformTimeStamp(intl, lastViewedDate, lastUpdatedDate);
-    var formattedDate = [date === null || date === void 0 ? void 0 : date.pageAction, date === null || date === void 0 ? void 0 : date.dateString, date === null || date === void 0 ? void 0 : date.timeSince].filter(Boolean).join(' ');
-    return [name, container, formattedDate].filter(Boolean).join(', ');
+    return [name, container, date].filter(Boolean).join(', ');
   }
 }
 export var handleNavKeyDown = function handleNavKeyDown(event, itemsLength, activeIndex) {

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-picker",
-	"version": "1.23.0",
+	"version": "1.23.2",
 	"sideEffects": false
 }

package/dist/types/common/utils/date.d.ts

@@ -0,0 +1 @@
+export declare function isMoreThanOneWeekAgo(date: string | Date): boolean;

package/dist/types/common/utils/dateUtils.d.ts

@@ -0,0 +1,8 @@
+export type Unit = 'second' | 'minute' | 'hour' | 'day' | 'week';
+export declare function selectUnit(from: Date | number, to?: Date | number, thresholds?: Partial<Thresholds>): {
+    value: number;
+    unit: Unit;
+};
+type Thresholds = Record<'second' | 'minute' | 'hour' | 'day', number>;
+export declare const DEFAULT_THRESHOLDS: Thresholds;
+export {};

package/dist/types/i18n/languages.d.ts

@@ -0,0 +1,32 @@
+declare const _default: {
+    zh: string;
+    zh_TW: string;
+    cs: string;
+    nl: string;
+    da: string;
+    en: string;
+    en_GB: string;
+    et: string;
+    fi: string;
+    fr: string;
+    de: string;
+    hu: string;
+    is: string;
+    it: string;
+    ja: string;
+    ko: string;
+    nb: string;
+    pl: string;
+    pt_BR: string;
+    pt_PT: string;
+    ro: string;
+    ru: string;
+    sk: string;
+    es: string;
+    sv: string;
+    th: string;
+    tr: string;
+    uk: string;
+    vi: string;
+};
+export default _default;

package/dist/types/ui/link-picker/messages.d.ts

@@ -66,18 +66,13 @@ export declare const linkTextMessages: {
         description: string;
     };
 };
-export declare const messages: {
-    timeUpdated: {
+export declare const timeMessages: {
+    updated: {
         id: string;
         defaultMessage: string;
         description: string;
     };
-    timeViewed: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
-    timeAgo: {
+    viewed: {
         id: string;
         defaultMessage: string;
         description: string;

package/dist/types/ui/link-picker/transformTimeStamp.d.ts

@@ -1,3 +1,2 @@
 import { IntlShape } from 'react-intl-next';
-import { ListItemTimeStamp } from '../types';
-export declare const transformTimeStamp: (intl: IntlShape, lastViewedDate?: Date, lastUpdatedDate?: Date) => ListItemTimeStamp | undefined;
+export declare const transformTimeStamp: (intl: IntlShape, lastViewedDate?: Date, lastUpdatedDate?: Date) => string | undefined;

package/dist/types/ui/types.d.ts

@@ -28,11 +28,6 @@ export interface LinkSearchListItemData {
         source?: string;
     };
 }
-export type ListItemTimeStamp = {
-    pageAction: string;
-    dateString: string;
-    timeSince?: string | undefined;
-};
 export interface LinkPickerState {
     /** Current query string / URL input field value */
     query: string;

package/dist/types-ts4.5/common/utils/date.d.ts

@@ -0,0 +1 @@
+export declare function isMoreThanOneWeekAgo(date: string | Date): boolean;

package/dist/types-ts4.5/common/utils/dateUtils.d.ts

@@ -0,0 +1,8 @@
+export type Unit = 'second' | 'minute' | 'hour' | 'day' | 'week';
+export declare function selectUnit(from: Date | number, to?: Date | number, thresholds?: Partial<Thresholds>): {
+    value: number;
+    unit: Unit;
+};
+type Thresholds = Record<'second' | 'minute' | 'hour' | 'day', number>;
+export declare const DEFAULT_THRESHOLDS: Thresholds;
+export {};

package/dist/types-ts4.5/i18n/languages.d.ts

@@ -0,0 +1,32 @@
+declare const _default: {
+    zh: string;
+    zh_TW: string;
+    cs: string;
+    nl: string;
+    da: string;
+    en: string;
+    en_GB: string;
+    et: string;
+    fi: string;
+    fr: string;
+    de: string;
+    hu: string;
+    is: string;
+    it: string;
+    ja: string;
+    ko: string;
+    nb: string;
+    pl: string;
+    pt_BR: string;
+    pt_PT: string;
+    ro: string;
+    ru: string;
+    sk: string;
+    es: string;
+    sv: string;
+    th: string;
+    tr: string;
+    uk: string;
+    vi: string;
+};
+export default _default;

package/dist/types-ts4.5/ui/link-picker/messages.d.ts

@@ -66,18 +66,13 @@ export declare const linkTextMessages: {
         description: string;
     };
 };
-export declare const messages: {
-    timeUpdated: {
+export declare const timeMessages: {
+    updated: {
         id: string;
         defaultMessage: string;
         description: string;
     };
-    timeViewed: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
-    timeAgo: {
+    viewed: {
         id: string;
         defaultMessage: string;
         description: string;

package/dist/types-ts4.5/ui/link-picker/transformTimeStamp.d.ts

@@ -1,3 +1,2 @@
 import { IntlShape } from 'react-intl-next';
-import { ListItemTimeStamp } from '../types';
-export declare const transformTimeStamp: (intl: IntlShape, lastViewedDate?: Date, lastUpdatedDate?: Date) => ListItemTimeStamp | undefined;
+export declare const transformTimeStamp: (intl: IntlShape, lastViewedDate?: Date, lastUpdatedDate?: Date) => string | undefined;

package/dist/types-ts4.5/ui/types.d.ts

@@ -28,11 +28,6 @@ export interface LinkSearchListItemData {
         source?: string;
     };
 }
-export type ListItemTimeStamp = {
-    pageAction: string;
-    dateString: string;
-    timeSince?: string | undefined;
-};
 export interface LinkPickerState {
     /** Current query string / URL input field value */
     query: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-picker",
-  "version": "1.23.0",
+  "version": "1.23.2",
   "description": "Standalone link picker",
   "author": "Atlassian Pty Ltd",
   "publishConfig": {
@@ -75,6 +75,7 @@
   "devDependencies": {
     "@af/analytics-codegen": "^0.1.0",
     "@atlaskit/docs": "*",
+    "@atlaskit/dropdown-menu": "^11.9.0",
     "@atlaskit/link-analytics": "^8.0.0",
     "@atlaskit/link-provider": "^1.6.0",
     "@atlaskit/link-test-helpers": "^4.0.0",
@@ -85,7 +86,7 @@
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
     "@atlassian/feature-flags-test-utils": "*",
-    "@atlassian/link-picker-atlassian-plugin": "^33.2.0",
+    "@atlassian/link-picker-atlassian-plugin": "^33.3.0",
     "@atlassian/link-picker-plugins": "^22.2.0",
     "@atlassian/recent-work-client": "^1.8.0",
     "@testing-library/dom": "^8.17.1",