@atlaskit/smart-card 19.0.1 → 19.0.4

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/smart-card
 
+## 19.0.4
+
+### Patch Changes
+
+- [`3eea7c153d6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3eea7c153d6) - Handle onResolve prop from smart-card in flexible-card and use the prop inside hover-card to dynamically update popup positioning
+
+## 19.0.3
+
+### Patch Changes
+
+- [`cae40e59c49`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cae40e59c49) - Show relative date for dates less then 7 days away (flexible ui)
+
+## 19.0.2
+
+### Patch Changes
+
+- [`f3026520fc6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f3026520fc6) - Fix long tti times for UFO smart-link-rendered experience
+
 ## 19.0.1
 
 ### Patch Changes

package/dist/cjs/messages.js

@@ -33,10 +33,15 @@ var messages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: 'Created by {context}',
     description: 'Indicates the person or entity that created the resource.'
   },
-  created_on: {
-    id: 'fabric.linking.create_on',
+  created_on_relative: {
+    id: 'fabric.linking.create_on_relative',
     defaultMessage: 'Created {context}',
-    description: 'Indicated when entity was created'
+    description: 'Indicated when entity was created (relative form)'
+  },
+  created_on_absolute: {
+    id: 'fabric.linking.create_on_absolute',
+    defaultMessage: 'Created on {context}',
+    description: 'Indicated when entity was created (absolute form)'
   },
   delete: {
     id: 'fabric.linking.delete',
@@ -53,10 +58,15 @@ var messages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: 'Modified by {context}',
     description: 'Indicates the person or entity that modified the resource.'
   },
-  modified_on: {
-    id: 'fabric.linking.modified_on',
+  modified_on_relative: {
+    id: 'fabric.linking.modified_on_relative',
     defaultMessage: 'Updated {context}',
-    description: 'Indicated when entity was modified'
+    description: 'Indicated when entity was modified (relative form)'
+  },
+  modified_on_absolute: {
+    id: 'fabric.linking.modified_on_absolute',
+    defaultMessage: 'Updated on {context}',
+    description: 'Indicated when entity was modified (absolute form)'
   },
   priority_blocker: {
     id: 'fabric.linking.priority_blocker',

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "19.0.1",
+	"version": "19.0.4",
 	"sideEffects": false
 }

package/dist/cjs/view/CardWithUrl/component-lazy/LazyIntersectionObserverCard.js

@@ -21,6 +21,8 @@ var _component = require("../component");
 
 var _LazyFallback = require("./LazyFallback");
 
+var _ufoExperiences = require("../../../state/analytics/ufoExperiences");
+
 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; }
@@ -39,7 +41,8 @@ function LazyIntersectionObserverCard(props) {
 
   var showActions = props.showActions,
       appearance = props.appearance,
-      url = props.url;
+      url = props.url,
+      id = props.id;
   var prefetch = (0, _state.usePrefetch)(url);
   var Component = appearance === 'inline' ? 'span' : 'div';
   var ComponentObserver = Component;
@@ -49,12 +52,13 @@ function LazyIntersectionObserverCard(props) {
     });
 
     if (isVisible) {
+      (0, _ufoExperiences.startUfoExperience)('smart-link-rendered', id);
       setIsIntersecting(true);
       observer.disconnect();
     } else {
       prefetch();
     }
-  }, [prefetch]);
+  }, [prefetch, id]);
   var onRef = (0, _react.useCallback)(function (element) {
     if (!element) {
       return;

package/dist/cjs/view/CardWithUrl/component-lazy/LazyLazilyRenderCard.js

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,7 +11,7 @@ exports.LazyLazilyRenderCard = LazyLazilyRenderCard;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _reactLazilyRender = _interopRequireDefault(require("react-lazily-render"));
 
@@ -17,11 +19,22 @@ var _component = require("../component");
 
 var _LazyFallback = require("./LazyFallback");
 
+var _ufoExperiences = require("../../../state/analytics/ufoExperiences");
+
+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 LazyLazilyRenderCard(props) {
   var appearance = props.appearance,
       container = props.container,
-      showActions = props.showActions;
+      showActions = props.showActions,
+      id = props.id;
   var offset = Math.ceil(window.innerHeight / 4);
+  (0, _react.useState)(function () {
+    // Start of experience when intersectionObserver is not supported.
+    (0, _ufoExperiences.startUfoExperience)('smart-link-rendered', id);
+  });
   return /*#__PURE__*/_react.default.createElement(_reactLazilyRender.default, {
     offset: offset,
     component: appearance === 'inline' ? 'span' : 'div',

package/dist/cjs/view/CardWithUrl/component.js

@@ -136,7 +136,8 @@ function CardWithUrlContent(_ref) {
       renderers: renderers,
       ui: ui,
       url: url,
-      testId: testId
+      testId: testId,
+      onResolve: onResolve
     }, children);
   } // We have to keep this last to prevent hook order from being violated
 

package/dist/cjs/view/CardWithUrl/loader.js

@@ -40,13 +40,8 @@ function CardWithURLRenderer(props) {
     return (0, _uuid.default)();
   }),
       _useState2 = (0, _slicedToArray2.default)(_useState, 1),
-      id = _useState2[0]; // Equivalent to ComponentWillMount
+      id = _useState2[0];
 
-
-  (0, _react.useState)(function () {
-    // We want to start timing of render event only once and right at the start
-    (0, _ufoExperiences.startUfoExperience)('smart-link-rendered', id);
-  });
   (0, _react.useEffect)(function () {
     // ComponentWillUnmount
     return function () {
@@ -96,7 +91,10 @@ function CardWithURLRenderer(props) {
     else {
       var errorInfo = {
         componentStack: componentStack
-      };
+      }; // Start and fail the smart-link-rendered experience. If it has already
+      // been started nothing happens.
+
+      (0, _ufoExperiences.startUfoExperience)('smart-link-rendered', id);
       (0, _ufoExperiences.failUfoExperience)('smart-link-rendered', id);
       (0, _ufoExperiences.failUfoExperience)('smart-link-authenticated', id);
       dispatchAnalytics((0, _analytics.uiRenderFailedEvent)(appearance, error, errorInfo));

package/dist/cjs/view/FlexibleCard/components/elements/date-time/index.js

@@ -29,8 +29,14 @@ var _templateObject;
 
 var styles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: 0.75rem;\n  line-height: 1rem;\n  ", "\n"])), _token.tokens.text, (0, _utils.getTruncateStyles)(1));
 var typeToDescriptorMap = {
-  created: _messages.messages.created_on,
-  modified: _messages.messages.modified_on
+  created: {
+    relative: _messages.messages.created_on_relative,
+    absolute: _messages.messages.created_on_absolute
+  },
+  modified: {
+    relative: _messages.messages.modified_on_relative,
+    absolute: _messages.messages.modified_on_absolute
+  }
 };
 /**
  * A base element that displays an ISO Timestamp in text.
@@ -48,25 +54,41 @@ var DateTime = function DateTime(_ref) {
       testId = _ref$testId === void 0 ? 'smart-element-date-time' : _ref$testId;
 
   var _useIntl = (0, _reactIntlNext.useIntl)(),
-      formatRelativeTime = _useIntl.formatRelativeTime;
+      formatRelativeTime = _useIntl.formatRelativeTime,
+      formatDate = _useIntl.formatDate;
 
   if (!type || !date) {
     return null;
   }
 
-  var _selectUnit = (0, _intlUtils.selectUnit)(date, Date.now()),
-      value = _selectUnit.value,
-      unit = _selectUnit.unit;
+  var isLongerThenWeek = Math.abs(date.getTime() - Date.now()) > 1000 * 60 * 60 * 24 * 7;
+  var context;
+  var typeVariant;
+
+  if (isLongerThenWeek) {
+    typeVariant = 'absolute';
+    context = formatDate(date, {
+      month: 'long',
+      day: 'numeric',
+      year: 'numeric'
+    });
+  } else {
+    var _selectUnit = (0, _intlUtils.selectUnit)(date, Date.now()),
+        value = _selectUnit.value,
+        unit = _selectUnit.unit;
+
+    typeVariant = 'relative';
+    context = formatRelativeTime(value, unit, {
+      numeric: 'auto'
+    });
+  }
 
-  var context = formatRelativeTime(value, unit, {
-    numeric: 'auto'
-  });
   return (0, _core.jsx)("span", {
     css: [styles, overrideCss],
     "data-separator": true,
     "data-smart-element-date-time": true,
     "data-testid": testId
-  }, (0, _core.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, typeToDescriptorMap[type], {
+  }, (0, _core.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, typeToDescriptorMap[type][typeVariant], {
     values: {
       context: context
     }

package/dist/cjs/view/FlexibleCard/index.js

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,7 +11,7 @@ exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _container = _interopRequireDefault(require("./components/container"));
 
@@ -17,6 +19,10 @@ var _flexibleUiContext = require("../../state/flexible-ui-context");
 
 var _utils = require("./utils");
 
+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; }
+
 /**
  * This represents a Flexible Card: a link represented by a card with metadata.
  * This is the container in which all Flexible UI Blocks and Elements exist.
@@ -31,12 +37,20 @@ var FlexibleCard = function FlexibleCard(_ref) {
       ui = _ref.ui,
       url = _ref.url,
       onClick = _ref.onClick,
-      testId = _ref.testId;
+      testId = _ref.testId,
+      onResolve = _ref.onResolve;
   var cardType = cardState.status,
       details = cardState.details;
   var status = cardType;
   var context = (0, _utils.getContextByStatus)(url, status, details, renderers);
   var retry = (0, _utils.getRetryOptions)(url, status, details, onAuthorize);
+  (0, _react.useEffect)(function () {
+    if (status === 'resolved' && onResolve) {
+      onResolve({
+        url: url
+      });
+    }
+  }, [onResolve, status, url]);
   return /*#__PURE__*/_react.default.createElement(_flexibleUiContext.FlexibleUiContext.Provider, {
     value: context
   }, /*#__PURE__*/_react.default.createElement(_container.default, (0, _extends2.default)({

package/dist/cjs/view/HoverCard/index.js

@@ -138,7 +138,8 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
     };
   }, [url, definitionId, extensionKey, analytics]);
 
-  var CardComponent = function CardComponent() {
+  var CardComponent = function CardComponent(_ref2) {
+    var update = _ref2.update;
     //TODO: EDM-3224 deleted simulated and use real JsonLd
     var metadataElements = (0, _extractMetadata.extractMetadata)((0, _utils.getSimulatedMetadata)(extensionKey));
     return (0, _core.jsx)("div", {
@@ -151,7 +152,8 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
       ui: {
         hideElevation: true,
         size: _constants.SmartLinkSize.Large
-      }
+      },
+      onResolve: update
     }, (0, _core.jsx)(_blocks.TitleBlock, {
       actions: [openAction]
     }), (0, _core.jsx)(_blocks.MetadataBlock, {
@@ -170,7 +172,12 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
     isOpen: isOpen,
     onClose: onClose,
     placement: "bottom-start",
-    content: CardComponent,
+    content: function content(_ref3) {
+      var update = _ref3.update;
+      return (0, _core.jsx)(CardComponent, {
+        update: update
+      });
+    },
     trigger: function trigger(triggerProps) {
       return (0, _core.jsx)("span", (0, _extends2.default)({}, triggerProps, {
         onMouseEnter: initShowCard,

package/dist/es2019/messages.js

@@ -25,10 +25,15 @@ export const messages = defineMessages({
     defaultMessage: 'Created by {context}',
     description: 'Indicates the person or entity that created the resource.'
   },
-  created_on: {
-    id: 'fabric.linking.create_on',
+  created_on_relative: {
+    id: 'fabric.linking.create_on_relative',
     defaultMessage: 'Created {context}',
-    description: 'Indicated when entity was created'
+    description: 'Indicated when entity was created (relative form)'
+  },
+  created_on_absolute: {
+    id: 'fabric.linking.create_on_absolute',
+    defaultMessage: 'Created on {context}',
+    description: 'Indicated when entity was created (absolute form)'
   },
   delete: {
     id: 'fabric.linking.delete',
@@ -45,10 +50,15 @@ export const messages = defineMessages({
     defaultMessage: 'Modified by {context}',
     description: 'Indicates the person or entity that modified the resource.'
   },
-  modified_on: {
-    id: 'fabric.linking.modified_on',
+  modified_on_relative: {
+    id: 'fabric.linking.modified_on_relative',
     defaultMessage: 'Updated {context}',
-    description: 'Indicated when entity was modified'
+    description: 'Indicated when entity was modified (relative form)'
+  },
+  modified_on_absolute: {
+    id: 'fabric.linking.modified_on_absolute',
+    defaultMessage: 'Updated on {context}',
+    description: 'Indicated when entity was modified (absolute form)'
   },
   priority_blocker: {
     id: 'fabric.linking.priority_blocker',

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "19.0.1",
+	"version": "19.0.4",
 	"sideEffects": false
 }

package/dist/es2019/view/CardWithUrl/component-lazy/LazyIntersectionObserverCard.js

@@ -2,7 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback, useState } from 'react';
 import { usePrefetch } from '../../../state';
 import { CardWithUrlContent } from '../component';
-import { LoadingCardLink } from './LazyFallback'; // This property enables the intersection observer to be run once the
+import { LoadingCardLink } from './LazyFallback';
+import { startUfoExperience } from '../../../state/analytics/ufoExperiences'; // This property enables the intersection observer to be run once the
 // HTML element being observed is within `X` px of the target container it is
 // being compared to. Since the default container is the `document`, we set this
 // up to check once a Smart Link is within `X` px from the bottom of the viewport.
@@ -13,7 +14,8 @@ export function LazyIntersectionObserverCard(props) {
   const {
     showActions,
     appearance,
-    url
+    url,
+    id
   } = props;
   const prefetch = usePrefetch(url);
   const Component = appearance === 'inline' ? 'span' : 'div';
@@ -22,12 +24,13 @@ export function LazyIntersectionObserverCard(props) {
     const isVisible = entries.some(entry => entry.isIntersecting);
 
     if (isVisible) {
+      startUfoExperience('smart-link-rendered', id);
       setIsIntersecting(true);
       observer.disconnect();
     } else {
       prefetch();
     }
-  }, [prefetch]);
+  }, [prefetch, id]);
   const onRef = useCallback(element => {
     if (!element) {
       return;

package/dist/es2019/view/CardWithUrl/component-lazy/LazyLazilyRenderCard.js

@@ -1,15 +1,21 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
+import React, { useState } from 'react';
 import LazilyRender from 'react-lazily-render';
 import { CardWithUrlContent } from '../component';
 import { LoadingCardLink } from './LazyFallback';
+import { startUfoExperience } from '../../../state/analytics/ufoExperiences';
 export function LazyLazilyRenderCard(props) {
   const {
     appearance,
     container,
-    showActions
+    showActions,
+    id
   } = props;
   const offset = Math.ceil(window.innerHeight / 4);
+  useState(() => {
+    // Start of experience when intersectionObserver is not supported.
+    startUfoExperience('smart-link-rendered', id);
+  });
   return /*#__PURE__*/React.createElement(LazilyRender, {
     offset: offset,
     component: appearance === 'inline' ? 'span' : 'div',

package/dist/es2019/view/CardWithUrl/component.js

@@ -104,7 +104,8 @@ export function CardWithUrlContent({
       renderers: renderers,
       ui: ui,
       url: url,
-      testId: testId
+      testId: testId,
+      onResolve: onResolve
     }, children);
   } // We have to keep this last to prevent hook order from being violated
 

package/dist/es2019/view/CardWithUrl/loader.js

@@ -9,12 +9,7 @@ const LazyCardWithUrlContent = /*#__PURE__*/lazy(() => import(
 /* webpackChunkName: "@atlaskit-internal_smartcard-urlcardcontent" */
 './component-lazy/index'));
 export function CardWithURLRenderer(props) {
-  const [id] = useState(() => uuid()); // Equivalent to ComponentWillMount
-
-  useState(() => {
-    // We want to start timing of render event only once and right at the start
-    startUfoExperience('smart-link-rendered', id);
-  });
+  const [id] = useState(() => uuid());
   useEffect(() => {
     // ComponentWillUnmount
     return () => {
@@ -68,7 +63,10 @@ export function CardWithURLRenderer(props) {
     else {
       const errorInfo = {
         componentStack
-      };
+      }; // Start and fail the smart-link-rendered experience. If it has already
+      // been started nothing happens.
+
+      startUfoExperience('smart-link-rendered', id);
       failUfoExperience('smart-link-rendered', id);
       failUfoExperience('smart-link-authenticated', id);
       dispatchAnalytics(uiRenderFailedEvent(appearance, error, errorInfo));

package/dist/es2019/view/FlexibleCard/components/elements/date-time/index.js

@@ -15,8 +15,14 @@ const styles = css`
   ${getTruncateStyles(1)}
 `;
 const typeToDescriptorMap = {
-  created: messages.created_on,
-  modified: messages.modified_on
+  created: {
+    relative: messages.created_on_relative,
+    absolute: messages.created_on_absolute
+  },
+  modified: {
+    relative: messages.modified_on_relative,
+    absolute: messages.modified_on_absolute
+  }
 };
 /**
  * A base element that displays an ISO Timestamp in text.
@@ -33,26 +39,42 @@ const DateTime = ({
   testId = 'smart-element-date-time'
 }) => {
   const {
-    formatRelativeTime
+    formatRelativeTime,
+    formatDate
   } = useIntl();
 
   if (!type || !date) {
     return null;
   }
 
-  const {
-    value,
-    unit
-  } = selectUnit(date, Date.now());
-  const context = formatRelativeTime(value, unit, {
-    numeric: 'auto'
-  });
+  const isLongerThenWeek = Math.abs(date.getTime() - Date.now()) > 1000 * 60 * 60 * 24 * 7;
+  let context;
+  let typeVariant;
+
+  if (isLongerThenWeek) {
+    typeVariant = 'absolute';
+    context = formatDate(date, {
+      month: 'long',
+      day: 'numeric',
+      year: 'numeric'
+    });
+  } else {
+    const {
+      value,
+      unit
+    } = selectUnit(date, Date.now());
+    typeVariant = 'relative';
+    context = formatRelativeTime(value, unit, {
+      numeric: 'auto'
+    });
+  }
+
   return jsx("span", {
     css: [styles, overrideCss],
     "data-separator": true,
     "data-smart-element-date-time": true,
     "data-testid": testId
-  }, jsx(FormattedMessage, _extends({}, typeToDescriptorMap[type], {
+  }, jsx(FormattedMessage, _extends({}, typeToDescriptorMap[type][typeVariant], {
     values: {
       context
     }

package/dist/es2019/view/FlexibleCard/index.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
+import React, { useEffect } from 'react';
 import Container from './components/container';
 import { FlexibleUiContext } from '../../state/flexible-ui-context';
 import { getContextByStatus, getRetryOptions } from './utils';
@@ -18,7 +18,8 @@ const FlexibleCard = ({
   ui,
   url,
   onClick,
-  testId
+  testId,
+  onResolve
 }) => {
   const {
     status: cardType,
@@ -27,6 +28,13 @@ const FlexibleCard = ({
   const status = cardType;
   const context = getContextByStatus(url, status, details, renderers);
   const retry = getRetryOptions(url, status, details, onAuthorize);
+  useEffect(() => {
+    if (status === 'resolved' && onResolve) {
+      onResolve({
+        url
+      });
+    }
+  }, [onResolve, status, url]);
   return /*#__PURE__*/React.createElement(FlexibleUiContext.Provider, {
     value: context
   }, /*#__PURE__*/React.createElement(Container, _extends({

package/dist/es2019/view/HoverCard/index.js

@@ -91,7 +91,9 @@ export const HoverCardComponent = ({
     };
   }, [url, definitionId, extensionKey, analytics]);
 
-  const CardComponent = () => {
+  const CardComponent = ({
+    update
+  }) => {
     //TODO: EDM-3224 deleted simulated and use real JsonLd
     const metadataElements = extractMetadata(getSimulatedMetadata(extensionKey));
     return jsx("div", {
@@ -104,7 +106,8 @@ export const HoverCardComponent = ({
       ui: {
         hideElevation: true,
         size: SmartLinkSize.Large
-      }
+      },
+      onResolve: update
     }, jsx(TitleBlock, {
       actions: [openAction]
     }), jsx(MetadataBlock, {
@@ -121,7 +124,13 @@ export const HoverCardComponent = ({
     isOpen: isOpen,
     onClose: onClose,
     placement: "bottom-start",
-    content: CardComponent,
+    content: ({
+      update
+    }) => {
+      return jsx(CardComponent, {
+        update: update
+      });
+    },
     trigger: triggerProps => jsx("span", _extends({}, triggerProps, {
       onMouseEnter: initShowCard,
       onMouseLeave: initHideCard

package/dist/esm/messages.js

@@ -25,10 +25,15 @@ export var messages = defineMessages({
     defaultMessage: 'Created by {context}',
     description: 'Indicates the person or entity that created the resource.'
   },
-  created_on: {
-    id: 'fabric.linking.create_on',
+  created_on_relative: {
+    id: 'fabric.linking.create_on_relative',
     defaultMessage: 'Created {context}',
-    description: 'Indicated when entity was created'
+    description: 'Indicated when entity was created (relative form)'
+  },
+  created_on_absolute: {
+    id: 'fabric.linking.create_on_absolute',
+    defaultMessage: 'Created on {context}',
+    description: 'Indicated when entity was created (absolute form)'
   },
   delete: {
     id: 'fabric.linking.delete',
@@ -45,10 +50,15 @@ export var messages = defineMessages({
     defaultMessage: 'Modified by {context}',
     description: 'Indicates the person or entity that modified the resource.'
   },
-  modified_on: {
-    id: 'fabric.linking.modified_on',
+  modified_on_relative: {
+    id: 'fabric.linking.modified_on_relative',
     defaultMessage: 'Updated {context}',
-    description: 'Indicated when entity was modified'
+    description: 'Indicated when entity was modified (relative form)'
+  },
+  modified_on_absolute: {
+    id: 'fabric.linking.modified_on_absolute',
+    defaultMessage: 'Updated on {context}',
+    description: 'Indicated when entity was modified (absolute form)'
   },
   priority_blocker: {
     id: 'fabric.linking.priority_blocker',

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "19.0.1",
+	"version": "19.0.4",
 	"sideEffects": false
 }

package/dist/esm/view/CardWithUrl/component-lazy/LazyIntersectionObserverCard.js

@@ -3,7 +3,8 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useCallback, useState } from 'react';
 import { usePrefetch } from '../../../state';
 import { CardWithUrlContent } from '../component';
-import { LoadingCardLink } from './LazyFallback'; // This property enables the intersection observer to be run once the
+import { LoadingCardLink } from './LazyFallback';
+import { startUfoExperience } from '../../../state/analytics/ufoExperiences'; // This property enables the intersection observer to be run once the
 // HTML element being observed is within `X` px of the target container it is
 // being compared to. Since the default container is the `document`, we set this
 // up to check once a Smart Link is within `X` px from the bottom of the viewport.
@@ -17,7 +18,8 @@ export function LazyIntersectionObserverCard(props) {
 
   var showActions = props.showActions,
       appearance = props.appearance,
-      url = props.url;
+      url = props.url,
+      id = props.id;
   var prefetch = usePrefetch(url);
   var Component = appearance === 'inline' ? 'span' : 'div';
   var ComponentObserver = Component;
@@ -27,12 +29,13 @@ export function LazyIntersectionObserverCard(props) {
     });
 
     if (isVisible) {
+      startUfoExperience('smart-link-rendered', id);
       setIsIntersecting(true);
       observer.disconnect();
     } else {
       prefetch();
     }
-  }, [prefetch]);
+  }, [prefetch, id]);
   var onRef = useCallback(function (element) {
     if (!element) {
       return;

package/dist/esm/view/CardWithUrl/component-lazy/LazyLazilyRenderCard.js

@@ -1,13 +1,19 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
+import React, { useState } from 'react';
 import LazilyRender from 'react-lazily-render';
 import { CardWithUrlContent } from '../component';
 import { LoadingCardLink } from './LazyFallback';
+import { startUfoExperience } from '../../../state/analytics/ufoExperiences';
 export function LazyLazilyRenderCard(props) {
   var appearance = props.appearance,
       container = props.container,
-      showActions = props.showActions;
+      showActions = props.showActions,
+      id = props.id;
   var offset = Math.ceil(window.innerHeight / 4);
+  useState(function () {
+    // Start of experience when intersectionObserver is not supported.
+    startUfoExperience('smart-link-rendered', id);
+  });
   return /*#__PURE__*/React.createElement(LazilyRender, {
     offset: offset,
     component: appearance === 'inline' ? 'span' : 'div',

package/dist/esm/view/CardWithUrl/component.js

@@ -110,7 +110,8 @@ export function CardWithUrlContent(_ref) {
       renderers: renderers,
       ui: ui,
       url: url,
-      testId: testId
+      testId: testId,
+      onResolve: onResolve
     }, children);
   } // We have to keep this last to prevent hook order from being violated
 

package/dist/esm/view/CardWithUrl/loader.js

@@ -16,13 +16,8 @@ export function CardWithURLRenderer(props) {
     return uuid();
   }),
       _useState2 = _slicedToArray(_useState, 1),
-      id = _useState2[0]; // Equivalent to ComponentWillMount
+      id = _useState2[0];
 
-
-  useState(function () {
-    // We want to start timing of render event only once and right at the start
-    startUfoExperience('smart-link-rendered', id);
-  });
   useEffect(function () {
     // ComponentWillUnmount
     return function () {
@@ -72,7 +67,10 @@ export function CardWithURLRenderer(props) {
     else {
       var errorInfo = {
         componentStack: componentStack
-      };
+      }; // Start and fail the smart-link-rendered experience. If it has already
+      // been started nothing happens.
+
+      startUfoExperience('smart-link-rendered', id);
       failUfoExperience('smart-link-rendered', id);
       failUfoExperience('smart-link-authenticated', id);
       dispatchAnalytics(uiRenderFailedEvent(appearance, error, errorInfo));

package/dist/esm/view/FlexibleCard/components/elements/date-time/index.js

@@ -13,8 +13,14 @@ import { selectUnit } from '@formatjs/intl-utils';
 import { messages } from '../../../../../messages';
 var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: ", ";\n  font-size: 0.75rem;\n  line-height: 1rem;\n  ", "\n"])), tokens.text, getTruncateStyles(1));
 var typeToDescriptorMap = {
-  created: messages.created_on,
-  modified: messages.modified_on
+  created: {
+    relative: messages.created_on_relative,
+    absolute: messages.created_on_absolute
+  },
+  modified: {
+    relative: messages.modified_on_relative,
+    absolute: messages.modified_on_absolute
+  }
 };
 /**
  * A base element that displays an ISO Timestamp in text.
@@ -32,25 +38,41 @@ var DateTime = function DateTime(_ref) {
       testId = _ref$testId === void 0 ? 'smart-element-date-time' : _ref$testId;
 
   var _useIntl = useIntl(),
-      formatRelativeTime = _useIntl.formatRelativeTime;
+      formatRelativeTime = _useIntl.formatRelativeTime,
+      formatDate = _useIntl.formatDate;
 
   if (!type || !date) {
     return null;
   }
 
-  var _selectUnit = selectUnit(date, Date.now()),
-      value = _selectUnit.value,
-      unit = _selectUnit.unit;
+  var isLongerThenWeek = Math.abs(date.getTime() - Date.now()) > 1000 * 60 * 60 * 24 * 7;
+  var context;
+  var typeVariant;
+
+  if (isLongerThenWeek) {
+    typeVariant = 'absolute';
+    context = formatDate(date, {
+      month: 'long',
+      day: 'numeric',
+      year: 'numeric'
+    });
+  } else {
+    var _selectUnit = selectUnit(date, Date.now()),
+        value = _selectUnit.value,
+        unit = _selectUnit.unit;
+
+    typeVariant = 'relative';
+    context = formatRelativeTime(value, unit, {
+      numeric: 'auto'
+    });
+  }
 
-  var context = formatRelativeTime(value, unit, {
-    numeric: 'auto'
-  });
   return jsx("span", {
     css: [styles, overrideCss],
     "data-separator": true,
     "data-smart-element-date-time": true,
     "data-testid": testId
-  }, jsx(FormattedMessage, _extends({}, typeToDescriptorMap[type], {
+  }, jsx(FormattedMessage, _extends({}, typeToDescriptorMap[type][typeVariant], {
     values: {
       context: context
     }

package/dist/esm/view/FlexibleCard/index.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
+import React, { useEffect } from 'react';
 import Container from './components/container';
 import { FlexibleUiContext } from '../../state/flexible-ui-context';
 import { getContextByStatus, getRetryOptions } from './utils';
@@ -18,12 +18,20 @@ var FlexibleCard = function FlexibleCard(_ref) {
       ui = _ref.ui,
       url = _ref.url,
       onClick = _ref.onClick,
-      testId = _ref.testId;
+      testId = _ref.testId,
+      onResolve = _ref.onResolve;
   var cardType = cardState.status,
       details = cardState.details;
   var status = cardType;
   var context = getContextByStatus(url, status, details, renderers);
   var retry = getRetryOptions(url, status, details, onAuthorize);
+  useEffect(function () {
+    if (status === 'resolved' && onResolve) {
+      onResolve({
+        url: url
+      });
+    }
+  }, [onResolve, status, url]);
   return /*#__PURE__*/React.createElement(FlexibleUiContext.Provider, {
     value: context
   }, /*#__PURE__*/React.createElement(Container, _extends({

package/dist/esm/view/HoverCard/index.js

@@ -106,7 +106,8 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
     };
   }, [url, definitionId, extensionKey, analytics]);
 
-  var CardComponent = function CardComponent() {
+  var CardComponent = function CardComponent(_ref2) {
+    var update = _ref2.update;
     //TODO: EDM-3224 deleted simulated and use real JsonLd
     var metadataElements = extractMetadata(getSimulatedMetadata(extensionKey));
     return jsx("div", {
@@ -119,7 +120,8 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
       ui: {
         hideElevation: true,
         size: SmartLinkSize.Large
-      }
+      },
+      onResolve: update
     }, jsx(TitleBlock, {
       actions: [openAction]
     }), jsx(MetadataBlock, {
@@ -138,7 +140,12 @@ export var HoverCardComponent = function HoverCardComponent(_ref) {
     isOpen: isOpen,
     onClose: onClose,
     placement: "bottom-start",
-    content: CardComponent,
+    content: function content(_ref3) {
+      var update = _ref3.update;
+      return jsx(CardComponent, {
+        update: update
+      });
+    },
     trigger: function trigger(triggerProps) {
       return jsx("span", _extends({}, triggerProps, {
         onMouseEnter: initShowCard,

package/dist/types/messages.d.ts

@@ -1,5 +1,5 @@
 import { MessageDescriptor } from 'react-intl-next';
-export declare type MessageKey = 'cannot_find_link' | 'click_to_join' | 'connect_link_account' | 'created_by' | 'created_on' | 'delete' | 'edit' | 'modified_by' | 'modified_on' | 'priority_blocker' | 'priority_critical' | 'priority_high' | 'priority_highest' | 'priority_low' | 'priority_lowest' | 'priority_major' | 'priority_medium' | 'priority_minor' | 'priority_trivial' | 'priority_undefined' | 'forbidden_access' | 'pending_request' | 'restricted_link' | 'request_access' | 'request_denied';
+export declare type MessageKey = 'cannot_find_link' | 'click_to_join' | 'connect_link_account' | 'created_by' | 'created_on_relative' | 'created_on_absolute' | 'delete' | 'edit' | 'modified_by' | 'modified_on_relative' | 'modified_on_absolute' | 'priority_blocker' | 'priority_critical' | 'priority_high' | 'priority_highest' | 'priority_low' | 'priority_lowest' | 'priority_major' | 'priority_medium' | 'priority_minor' | 'priority_trivial' | 'priority_undefined' | 'forbidden_access' | 'pending_request' | 'restricted_link' | 'request_access' | 'request_denied';
 declare type Messages = {
     [K in MessageKey]: MessageDescriptor;
 };

package/dist/types/view/FlexibleCard/types.d.ts

@@ -4,6 +4,7 @@ import { CardState } from '@atlaskit/linking-common';
 import { CardProviderRenderers } from '@atlaskit/link-provider';
 import { SmartLinkSize, SmartLinkTheme } from '../../constants';
 import { CardAppearance } from '../../view/Card';
+import { OnResolveCallback } from '../Card/types';
 export declare type FlexibleCardProps = {
     /**
      * Determines the appearance of the Smart Link.
@@ -51,6 +52,10 @@ export declare type FlexibleCardProps = {
      * Determines the URL of the Smart Link.
      */
     url: string;
+    /**
+     * function to be called after a flexible card has rendered its resolved state
+     */
+    onResolve?: OnResolveCallback;
 };
 export declare type FlexibleUiOptions = {
     /**

package/dist/types/view/__mocks__/intersection-observer.d.ts

@@ -13,8 +13,11 @@ export declare const MockIntersectionObserverFactory: (mockIntersectionObserverO
         readonly root: Element | null;
         readonly rootMargin: string;
         readonly thresholds: ReadonlyArray<number>;
+        previousMockEntries: MockEntry[];
         callback: IntersectionObserverCallback;
         observe(_element: HTMLElement): void;
+        callIntersectionObserverCallback: () => void;
+        checkIntersection: () => void;
         disconnect: jest.Mock<any, any>;
         takeRecords: jest.Mock<any, any>;
         unobserve: jest.Mock<any, any>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "19.0.1",
+  "version": "19.0.4",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"