@atlaskit/link-picker 1.22.2 → 1.23.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/link-picker
 
+## 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
+
+- [`5b744a84924`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5b744a84924) - [ux] Support for an empty state in LinkPicker, and implementation of empty state for the link-picker-atlassian-plugin
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 1.22.2
 
 ### Patch 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/index.js

@@ -88,7 +88,7 @@ var LinkInputField = (0, _analytics2.withInputFieldTracking)(_textInput.default,
 });
 var DisplayTextInputField = (0, _analytics2.withInputFieldTracking)(_textInput.default, 'displayText');
 function LinkPicker(_ref) {
-  var _errorFallback;
+  var _activePlugin$errorFa, _activePlugin$errorFa2;
   var onSubmit = _ref.onSubmit,
     onCancel = _ref.onCancel,
     onContentResize = _ref.onContentResize,
@@ -122,7 +122,6 @@ function LinkPicker(_ref) {
     tabs = _usePlugins.tabs,
     error = _usePlugins.error,
     retry = _usePlugins.retry,
-    errorFallback = _usePlugins.errorFallback,
     pluginAction = _usePlugins.pluginAction;
   var fixListHeightProps = (0, _useFixHeight.default)(isLoading);
   var isEditing = !!initUrl;
@@ -368,8 +367,9 @@ function LinkPicker(_ref) {
     onSelect: handleSelected,
     onChange: handleSearchListOnChange,
     onKeyDown: handleKeyDown,
-    hasSearchTerm: !!(queryState !== null && queryState !== void 0 && queryState.query.length)
-  }), error && ((_errorFallback = errorFallback === null || errorFallback === void 0 ? void 0 : errorFallback(error, retry)) !== null && _errorFallback !== void 0 ? _errorFallback : (0, _react2.jsx)(_linkSearchError.default, null)))), (0, _react2.jsx)(_formFooter.default, {
+    hasSearchTerm: !!(queryState !== null && queryState !== void 0 && queryState.query.length),
+    activePlugin: activePlugin
+  }), error && ((_activePlugin$errorFa = activePlugin === null || activePlugin === void 0 ? void 0 : (_activePlugin$errorFa2 = activePlugin.errorFallback) === null || _activePlugin$errorFa2 === void 0 ? void 0 : _activePlugin$errorFa2.call(activePlugin, error, retry)) !== null && _activePlugin$errorFa !== void 0 ? _activePlugin$errorFa : (0, _react2.jsx)(_linkSearchError.default, null)))), (0, _react2.jsx)(_formFooter.default, {
     error: error,
     items: items,
     state: queryState,

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

@@ -11,6 +11,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _reactIntlNext = require("react-intl-next");
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
@@ -19,7 +20,8 @@ var _styled = require("./styled");
 var _linkSearchNoResults = _interopRequireWildcard(require("./link-search-no-results"));
 var _useTrackResultsShown = require("./use-track-results-shown");
 var _utils = require("../utils");
-var _excluded = ["onChange", "onSelect", "onKeyDown", "items", "activeIndex", "selectedIndex", "isLoading", "ariaControls", "ariaLabelledBy", "role", "id", "hasSearchTerm"];
+var _styled2 = require("./link-search-no-results/styled");
+var _excluded = ["onChange", "onSelect", "onKeyDown", "items", "activeIndex", "selectedIndex", "isLoading", "ariaControls", "ariaLabelledBy", "role", "id", "hasSearchTerm", "activePlugin"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 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; }
@@ -62,6 +64,7 @@ var LinkSearchList = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     role = _ref.role,
     id = _ref.id,
     hasSearchTerm = _ref.hasSearchTerm,
+    activePlugin = _ref.activePlugin,
     restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var itemsContent;
   var loadingContent;
@@ -109,7 +112,17 @@ var LinkSearchList = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     }
   }, [activeIndex, items, onChange, onKeyDown]);
   if ((items === null || items === void 0 ? void 0 : items.length) === 0) {
-    return (0, _react2.jsx)(_linkSearchNoResults.default, null);
+    if ((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.link-picker.enable-empty-state')) {
+      if (hasSearchTerm) {
+        return (0, _react2.jsx)(_linkSearchNoResults.default, null);
+      } else {
+        return (0, _react2.jsx)("div", {
+          css: _styled2.emptyStateNoResultsWrapper
+        }, activePlugin !== null && activePlugin !== void 0 && activePlugin.emptyStateNoResults ? activePlugin.emptyStateNoResults() : null);
+      }
+    } else {
+      return (0, _react2.jsx)(_linkSearchNoResults.default, null);
+    }
   }
   if (items && items.length > 0) {
     itemsContent = (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)("div", {

package/dist/cjs/ui/link-picker/link-search-list/link-search-no-results/styled.js

@@ -4,9 +4,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.emptyStateWrapperStyles = void 0;
+exports.emptyStateWrapperStyles = exports.emptyStateNoResultsWrapper = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
-var _templateObject;
+var _templateObject, _templateObject2;
 var emptyStateWrapperStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  & p {\n    margin: 0;\n  }\n"])));
-exports.emptyStateWrapperStyles = emptyStateWrapperStyles;
+exports.emptyStateWrapperStyles = emptyStateWrapperStyles;
+var emptyStateNoResultsWrapper = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  min-height: ", ";\n"])), "var(--ds-space-200, 16px)");
+exports.emptyStateNoResultsWrapper = emptyStateNoResultsWrapper;

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.22.2",
+	"version": "1.23.1",
 	"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/index.js

@@ -89,7 +89,7 @@ function LinkPicker({
   hideDisplayText,
   featureFlags
 }) {
-  var _errorFallback;
+  var _activePlugin$errorFa, _activePlugin$errorFa2;
   const {
     createAnalyticsEvent
   } = useAnalyticsEvents();
@@ -116,7 +116,6 @@ function LinkPicker({
     tabs,
     error,
     retry,
-    errorFallback,
     pluginAction
   } = usePlugins(queryState, activeTab, plugins);
   const fixListHeightProps = useFixHeight(isLoading);
@@ -362,8 +361,9 @@ function LinkPicker({
     onSelect: handleSelected,
     onChange: handleSearchListOnChange,
     onKeyDown: handleKeyDown,
-    hasSearchTerm: !!(queryState !== null && queryState !== void 0 && queryState.query.length)
-  }), error && ((_errorFallback = errorFallback === null || errorFallback === void 0 ? void 0 : errorFallback(error, retry)) !== null && _errorFallback !== void 0 ? _errorFallback : jsx(LinkSearchError, null)))), jsx(FormFooter, {
+    hasSearchTerm: !!(queryState !== null && queryState !== void 0 && queryState.query.length),
+    activePlugin: activePlugin
+  }), error && ((_activePlugin$errorFa = activePlugin === null || activePlugin === void 0 ? void 0 : (_activePlugin$errorFa2 = activePlugin.errorFallback) === null || _activePlugin$errorFa2 === void 0 ? void 0 : _activePlugin$errorFa2.call(activePlugin, error, retry)) !== null && _activePlugin$errorFa !== void 0 ? _activePlugin$errorFa : jsx(LinkSearchError, null)))), jsx(FormFooter, {
     error: error,
     items: items,
     state: queryState,

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

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { forwardRef, Fragment, useCallback, useRef } from 'react';
 import { jsx } from '@emotion/react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { defineMessages, FormattedMessage } from 'react-intl-next';
 import Spinner from '@atlaskit/spinner';
 import VisuallyHidden from '@atlaskit/visually-hidden';
@@ -10,6 +11,7 @@ import { listContainerStyles, spinnerContainerStyles, listStyles, listTitleStyle
 import LinkSearchNoResults, { testIds as noResultsTestIds } from './link-search-no-results';
 import { useTrackResultsShown } from './use-track-results-shown';
 import { handleNavKeyDown } from '../utils';
+import { emptyStateNoResultsWrapper } from './link-search-no-results/styled';
 export const messages = defineMessages({
   titleRecentlyViewed: {
     id: 'fabric.linkPicker.listTitle.recentlyViewed',
@@ -47,6 +49,7 @@ const LinkSearchList = /*#__PURE__*/forwardRef(({
   role,
   id,
   hasSearchTerm,
+  activePlugin,
   ...restProps
 }, ref) => {
   let itemsContent;
@@ -95,7 +98,17 @@ const LinkSearchList = /*#__PURE__*/forwardRef(({
     }
   }, [activeIndex, items, onChange, onKeyDown]);
   if ((items === null || items === void 0 ? void 0 : items.length) === 0) {
-    return jsx(LinkSearchNoResults, null);
+    if (getBooleanFF('platform.linking-platform.link-picker.enable-empty-state')) {
+      if (hasSearchTerm) {
+        return jsx(LinkSearchNoResults, null);
+      } else {
+        return jsx("div", {
+          css: emptyStateNoResultsWrapper
+        }, activePlugin !== null && activePlugin !== void 0 && activePlugin.emptyStateNoResults ? activePlugin.emptyStateNoResults() : null);
+      }
+    } else {
+      return jsx(LinkSearchNoResults, null);
+    }
   }
   if (items && items.length > 0) {
     itemsContent = jsx(Fragment, null, jsx("div", {

package/dist/es2019/ui/link-picker/link-search-list/link-search-no-results/styled.js

@@ -3,4 +3,7 @@ export const emptyStateWrapperStyles = css`
   & p {
     margin: 0;
   }
+`;
+export const emptyStateNoResultsWrapper = css`
+  min-height: ${"var(--ds-space-200, 16px)"};
 `;

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'
   }
 });