@atlaskit/smart-card 19.1.7 → 19.1.10

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/smart-card
 
+## 19.1.10
+
+### Patch Changes
+
+- [`009e3475b29`](https://bitbucket.org/atlassian/atlassian-frontend/commits/009e3475b29) - Duplicate isIntersectionObserverSupported from media-ui to smart-card
+
+## 19.1.9
+
+### Patch Changes
+
+- [`003ac36263e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/003ac36263e) - Flexible UI: Fix preview block showing white space below image in Safari
+
+## 19.1.8
+
+### Patch Changes
+
+- [`81968c216ce`](https://bitbucket.org/atlassian/atlassian-frontend/commits/81968c216ce) - Flexible UI: Fix clickableContainer not triggering analytics event
+
 ## 19.1.7
 
 ### Patch Changes

package/dist/cjs/utils/index.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isSpecialKey = exports.isSpecialEvent = exports.isSpecialClick = exports.isIframe = exports.isCardWithData = exports.handleOnClick = exports.getLabelForFileType = exports.getIframeSandboxAttribute = exports.getIconForFileType = void 0;
+exports.isSpecialKey = exports.isSpecialEvent = exports.isSpecialClick = exports.isIntersectionObserverSupported = exports.isIframe = exports.isCardWithData = exports.handleOnClick = exports.getLabelForFileType = exports.getIframeSandboxAttribute = exports.getIconForFileType = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
@@ -368,4 +368,10 @@ var handleOnClick = function handleOnClick(handler) {
   };
 };
 
-exports.handleOnClick = handleOnClick;
+exports.handleOnClick = handleOnClick;
+
+var isIntersectionObserverSupported = function isIntersectionObserverSupported() {
+  return typeof IntersectionObserver !== 'undefined';
+};
+
+exports.isIntersectionObserverSupported = isIntersectionObserverSupported;

package/dist/cjs/version.json

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

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

@@ -9,14 +9,14 @@ exports.default = LazyCardWithUrlContent;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _mediaUi = require("@atlaskit/media-ui");
-
 var _LazyLazilyRenderCard = require("./LazyLazilyRenderCard");
 
 var _LazyIntersectionObserverCard = require("./LazyIntersectionObserverCard");
 
+var _utils = require("../../../utils");
+
 function LazyCardWithUrlContent(props) {
-  if ((0, _mediaUi.isIntersectionObserverSupported)()) {
+  if ((0, _utils.isIntersectionObserverSupported)()) {
     return /*#__PURE__*/_react.default.createElement(_LazyIntersectionObserverCard.LazyIntersectionObserverCard, props);
   } else {
     return /*#__PURE__*/_react.default.createElement(_LazyLazilyRenderCard.LazyLazilyRenderCard, props);

package/dist/cjs/view/EmbedCard/components/styled.js

@@ -7,14 +7,12 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.maxAvatarCount = exports.embedHeaderHeight = exports.className = exports.cardShadow = exports.Wrapper = exports.UsersWrapper = exports.Title = exports.Thumbnail = exports.TextWrapper = exports.ResolvedViewIconWrapper = exports.LinkWrapper = exports.Image = exports.IconWrapper = exports.Header = exports.Description = exports.ContentWrapper = exports.Content = exports.Byline = exports.AlertWrapper = exports.ActionsWrapper = void 0;
+exports.maxAvatarCount = exports.embedHeaderHeight = exports.ellipsis = exports.csssize = exports.className = exports.cardShadow = exports.borderRadius = exports.Wrapper = exports.UsersWrapper = exports.Title = exports.Thumbnail = exports.TextWrapper = exports.ResolvedViewIconWrapper = exports.LinkWrapper = exports.Image = exports.IconWrapper = exports.Header = exports.Description = exports.ContentWrapper = exports.Content = exports.Byline = exports.AlertWrapper = exports.ActionsWrapper = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 
-var _mediaUi = require("@atlaskit/media-ui");
-
 var _constants = require("@atlaskit/theme/constants");
 
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
@@ -33,6 +31,24 @@ var className = 'media-card-frame';
 exports.className = className;
 var cardShadow = "";
 exports.cardShadow = cardShadow;
+var borderRadius = "\n  border-radius: ".concat((0, _constants.borderRadius)(), "px;\n");
+exports.borderRadius = borderRadius;
+
+var ellipsis = function ellipsis() {
+  var maxWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '100%';
+  var unit = typeof maxWidth === 'number' ? 'px' : '';
+  return "\n    max-width: ".concat(maxWidth).concat(unit, ";\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  ");
+};
+
+exports.ellipsis = ellipsis;
+
+var csssize = function csssize() {
+  var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '100%';
+  var unit = typeof value === 'number' ? 'px' : '';
+  return "\n    width: ".concat(value).concat(unit, ";\n    height: ").concat(value).concat(unit, ";\n  ");
+};
+
+exports.csssize = csssize;
 
 function minWidth(_ref) {
   var minWidth = _ref.minWidth;
@@ -64,7 +80,7 @@ function getinteractiveStyles(_ref3) {
 
 function selected(_ref4) {
   var isSelected = _ref4.isSelected;
-  return isSelected ? "\n    ".concat(visibleStyles, "\n    &::after {\n      cursor: pointer;\n      box-shadow: 0 0 0 3px ").concat((0, _tokens.token)('color.border.selected', colors.B100), ";\n      content: '';\n      outline: none;\n      position: absolute;\n      height: 100%;\n      width: 100%;\n      left: 0;\n      ").concat(_mediaUi.borderRadius, "\n    }\n    ") : '';
+  return isSelected ? "\n    ".concat(visibleStyles, "\n    &::after {\n      cursor: pointer;\n      box-shadow: 0 0 0 3px ").concat((0, _tokens.token)('color.border.selected', colors.B100), ";\n      content: '';\n      outline: none;\n      position: absolute;\n      height: 100%;\n      width: 100%;\n      left: 0;\n      ").concat(borderRadius, "\n    }\n    ") : '';
 }
 
 var height = function height(_ref5) {
@@ -73,7 +89,7 @@ var height = function height(_ref5) {
 };
 
 var wrapperStyles = function wrapperStyles(props) {
-  return "\n  ".concat(_mediaUi.borderRadius, "\n  ").concat(minWidth(props), "\n  ").concat(maxWidth(props), "\n  ").concat(getinteractiveStyles(props), "\n  ").concat(visible(props), "\n  display: inline-flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  font-family: ").concat((0, _constants.fontFamily)(), ";\n  width: 100%;\n  user-select: none;\n  line-height: initial;\n  transition: background 0.3s;\n  position: relative;\n  ").concat(height(props), ";\n  ").concat(selected(props), "\n\n  &:after {\n    content: '';\n    background: transparent;\n    transition: background 0.3s, box-shadow 0.3s;\n    position: absolute;\n    width: calc(100% + ").concat((0, _utils.gs)(2), ");\n    height: calc(100% + ").concat((0, _utils.gs)(1), ");\n    left: -").concat((0, _utils.gs)(1), ";\n    ").concat(_mediaUi.borderRadius, "\n  }\n");
+  return "\n  ".concat(borderRadius, "\n  ").concat(minWidth(props), "\n  ").concat(maxWidth(props), "\n  ").concat(getinteractiveStyles(props), "\n  ").concat(visible(props), "\n  display: inline-flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  font-family: ").concat((0, _constants.fontFamily)(), ";\n  width: 100%;\n  user-select: none;\n  line-height: initial;\n  transition: background 0.3s;\n  position: relative;\n  ").concat(height(props), ";\n  ").concat(selected(props), "\n\n  &:after {\n    content: '';\n    background: transparent;\n    transition: background 0.3s, box-shadow 0.3s;\n    position: absolute;\n    width: calc(100% + ").concat((0, _utils.gs)(2), ");\n    height: calc(100% + ").concat((0, _utils.gs)(1), ");\n    left: -").concat((0, _utils.gs)(1), ";\n    ").concat(borderRadius, "\n  }\n");
 };
 
 var visibleStyles = "\n  background-color: ".concat((0, _tokens.token)('color.background.neutral.subtle', colors.N30), ";\n\n  &:after {\n    background: ").concat((0, _tokens.token)('color.background.neutral', colors.N30), " !important;\n  }\n  .embed-header {\n    opacity: 1;\n  }");
@@ -101,7 +117,7 @@ var Header = _styled.default.div(_templateObject3 || (_templateObject3 = (0, _ta
 
 exports.Header = Header;
 
-var IconWrapper = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  ", " margin-right: 4px;\n"])), _mediaUi.borderRadius, (0, _mediaUi.size)(16), function (_ref7) {
+var IconWrapper = _styled.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  ", " margin-right: 4px;\n"])), borderRadius, csssize(16), function (_ref7) {
   var isPlaceholder = _ref7.isPlaceholder;
 
   if (isPlaceholder) {
@@ -117,18 +133,18 @@ var TextWrapper = _styled.default.div(_templateObject5 || (_templateObject5 = (0
   var isPlaceholder = _ref8.isPlaceholder;
 
   if (isPlaceholder) {
-    return "\n        ".concat(_mediaUi.borderRadius, "\n        width: 125px;\n        height: 12px;\n        background-color: ").concat((0, _tokens.token)('color.skeleton', colors.N30), ";\n      ");
+    return "\n        ".concat(borderRadius, "\n        width: 125px;\n        height: 12px;\n        background-color: ").concat((0, _tokens.token)('color.skeleton', colors.N30), ";\n      ");
   } else {
     return '';
   }
-}, (0, _tokens.token)('color.text.subtlest', colors.N300), (0, _mediaUi.ellipsis)('none'));
+}, (0, _tokens.token)('color.text.subtlest', colors.N300), ellipsis('none'));
 
 exports.TextWrapper = TextWrapper;
 
 // NB: `overflow` is kept as `hidden` since
 // the internal contents of the `iframe` should
 // manage scrolling behaviour.
-var Content = _styled.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  background-color: ", ";\n  position: absolute;\n  z-index: 1;\n  width: 100%;\n  top: ", ";\n  overflow: hidden;\n  height: calc(100% - ", ");\n  transition: box-shadow 0.3s;\n\n  > .calc-height > div > div {\n    left: unset !important;\n    width: unset !important;\n    height: unset !important;\n    position: initial !important;\n    padding-bottom: unset !important;\n  }\n  > .embed-preview > div {\n    margin: 0 auto;\n  }\n\n  ", ";\n"])), _mediaUi.borderRadius, cardShadow, (0, _tokens.token)('elevation.surface', 'white'), (0, _utils.gs)(4), (0, _utils.gs)(4), function (_ref9) {
+var Content = _styled.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  background-color: ", ";\n  position: absolute;\n  z-index: 1;\n  width: 100%;\n  top: ", ";\n  overflow: hidden;\n  height: calc(100% - ", ");\n  transition: box-shadow 0.3s;\n\n  > .calc-height > div > div {\n    left: unset !important;\n    width: unset !important;\n    height: unset !important;\n    position: initial !important;\n    padding-bottom: unset !important;\n  }\n  > .embed-preview > div {\n    margin: 0 auto;\n  }\n\n  ", ";\n"])), borderRadius, cardShadow, (0, _tokens.token)('elevation.surface', 'white'), (0, _utils.gs)(4), (0, _utils.gs)(4), function (_ref9) {
   var isInteractive = _ref9.isInteractive;
 
   if (isInteractive) {
@@ -142,8 +158,8 @@ exports.Content = Content;
 
 var Image = _styled.default.img(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n\n  /* hide the alt text when the image cannot be found */\n  overflow: hidden;\n"])), function (_ref10) {
   var size = _ref10.size;
-  return (0, _mediaUi.size)(size);
-}, _mediaUi.borderRadius);
+  return csssize(size);
+}, borderRadius);
 
 exports.Image = Image;
 var maxAvatarCount = 6;
@@ -157,7 +173,7 @@ var Title = _styled.default.div(_templateObject9 || (_templateObject9 = (0, _tag
 
 exports.Title = Title;
 
-var Byline = _styled.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 4px;\n  color: ", ";\n  font-size: 12px;\n  font-weight: normal;\n  line-height: ", ";\n  ", ";\n"])), (0, _tokens.token)('color.text.subtlest', colors.N300), 16 / 12, (0, _mediaUi.ellipsis)('100%'));
+var Byline = _styled.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: 4px;\n  color: ", ";\n  font-size: 12px;\n  font-weight: normal;\n  line-height: ", ";\n  ", ";\n"])), (0, _tokens.token)('color.text.subtlest', colors.N300), 16 / 12, ellipsis('100%'));
 
 exports.Byline = Byline;
 
@@ -169,7 +185,7 @@ var ResolvedViewIconWrapper = _styled.default.div(_templateObject12 || (_templat
 
 exports.ResolvedViewIconWrapper = ResolvedViewIconWrapper;
 
-var Thumbnail = _styled.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  float: right;\n  margin: 4px 0 12px 12px;\n  background-color: ", ";\n  background-image: url(", ");\n  background-size: cover;\n"])), _mediaUi.borderRadius, (0, _mediaUi.size)(48), (0, _tokens.token)('color.skeleton', colors.N30), function (_ref11) {
+var Thumbnail = _styled.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  float: right;\n  margin: 4px 0 12px 12px;\n  background-color: ", ";\n  background-image: url(", ");\n  background-size: cover;\n"])), borderRadius, csssize(48), (0, _tokens.token)('color.skeleton', colors.N30), function (_ref11) {
   var src = _ref11.src;
   return src;
 });

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

@@ -109,7 +109,7 @@ var getTitleBlockProps = function getTitleBlockProps(children) {
   }
 };
 
-var getLayeredLink = function getLayeredLink(testId, context, children) {
+var getLayeredLink = function getLayeredLink(testId, context, children, onClick) {
   var _ref = context || {},
       title = _ref.title,
       _ref$url = _ref.url,
@@ -120,6 +120,7 @@ var getLayeredLink = function getLayeredLink(testId, context, children) {
       text = _ref2.text;
 
   return (0, _core.jsx)(_layeredLink.default, {
+    onClick: onClick,
     target: target,
     testId: testId,
     text: text || title,
@@ -160,7 +161,7 @@ var Container = function Container(_ref3) {
     css: getContainerStyles(size, hideBackground, hideElevation, hidePadding, clickableContainer),
     "data-smart-link-container": true,
     "data-testid": testId
-  }, clickableContainer ? getLayeredLink(testId, context, children) : null, renderChildren(children, size, theme, status, retry, onClick));
+  }, clickableContainer ? getLayeredLink(testId, context, children, onClick) : null, renderChildren(children, size, theme, status, retry, onClick));
 };
 
 var _default = Container;

package/dist/cjs/view/FlexibleCard/components/container/layered-link/index.js

@@ -23,7 +23,8 @@ var styles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTem
  */
 
 var LayeredLink = function LayeredLink(_ref) {
-  var target = _ref.target,
+  var onClick = _ref.onClick,
+      target = _ref.target,
       testId = _ref.testId,
       text = _ref.text,
       url = _ref.url;
@@ -32,6 +33,7 @@ var LayeredLink = function LayeredLink(_ref) {
     css: styles,
     "data-testid": "".concat(testId, "-layered-link"),
     href: url,
+    onClick: onClick,
     target: target,
     tabIndex: -1 // Hide tab index and let the title link be the link.
 

package/dist/cjs/view/FlexibleCard/components/elements/media/index.js

@@ -27,7 +27,7 @@ var _templateObject;
  * [object-position] Center alignment of the selected replaced element's
  * contents within the element's box.
  */
-var styles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  aspect-ratio: 16 / 9;\n  display: flex;\n  width: 100%;\n\n  // fallback\n  @supports not (aspect-ratio: auto) {\n    padding-top: 56.25%; // 16:9 ratio (9 / 16 = 0.5625)\n    height: 0;\n    position: relative;\n    overflow: hidden;\n  }\n\n  > img {\n    min-height: 100%;\n    min-width: 100%;\n    max-height: 100%;\n    max-width: 100%;\n    object-fit: cover;\n    object-position: center center;\n\n    // fallback\n    @supports not (aspect-ratio: auto) {\n      position: absolute;\n      transform: translate(-50%, -50%);\n      left: 50%;\n      top: 50%;\n      width: auto;\n      height: auto;\n    }\n  }\n"])));
+var styles = (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  aspect-ratio: 16 / 9;\n  display: flex;\n  width: 100%;\n  height: fit-content; // Fix Safari height not respecting aspect-ratio\n\n  // fallback\n  @supports not (aspect-ratio: auto) {\n    padding-top: 56.25%; // 16:9 ratio (9 / 16 = 0.5625)\n    height: 0;\n    position: relative;\n    overflow: hidden;\n  }\n\n  > img {\n    min-height: 100%;\n    min-width: 100%;\n    max-height: 100%;\n    max-width: 100%;\n    object-fit: cover;\n    object-position: center center;\n\n    // fallback\n    @supports not (aspect-ratio: auto) {\n      position: absolute;\n      transform: translate(-50%, -50%);\n      left: 50%;\n      top: 50%;\n      width: auto;\n      height: auto;\n    }\n  }\n"])));
 /**
  * A base element that displays a Media.
  * @internal

package/dist/es2019/utils/index.js

@@ -99,4 +99,5 @@ export const handleOnClick = handler => e => {
   e.preventDefault();
   e.stopPropagation();
   handler();
-};
+};
+export const isIntersectionObserverSupported = () => typeof IntersectionObserver !== 'undefined';

package/dist/es2019/version.json

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

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

@@ -1,7 +1,7 @@
 import React from 'react';
-import { isIntersectionObserverSupported } from '@atlaskit/media-ui';
 import { LazyLazilyRenderCard } from './LazyLazilyRenderCard';
 import { LazyIntersectionObserverCard } from './LazyIntersectionObserverCard';
+import { isIntersectionObserverSupported } from '../../../utils';
 export default function LazyCardWithUrlContent(props) {
   if (isIntersectionObserverSupported()) {
     return /*#__PURE__*/React.createElement(LazyIntersectionObserverCard, props);

package/dist/es2019/view/EmbedCard/components/styled.js

@@ -1,11 +1,29 @@
 import styled from '@emotion/styled';
-import { size as csssize, borderRadius, size, ellipsis } from '@atlaskit/media-ui';
-import { fontFamily } from '@atlaskit/theme/constants';
+import { borderRadius as akBorderRadius, fontFamily } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 import { gs as gridSize } from '../../common/utils';
 export const className = 'media-card-frame';
 export const cardShadow = ``;
+export const borderRadius = `
+  border-radius: ${akBorderRadius()}px;
+`;
+export const ellipsis = (maxWidth = '100%') => {
+  const unit = typeof maxWidth === 'number' ? 'px' : '';
+  return `
+    max-width: ${maxWidth}${unit};
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  `;
+};
+export const csssize = (value = '100%') => {
+  const unit = typeof value === 'number' ? 'px' : '';
+  return `
+    width: ${value}${unit};
+    height: ${value}${unit};
+  `;
+};
 
 function minWidth({
   minWidth
@@ -135,7 +153,7 @@ export const Header = styled.div`
 `;
 export const IconWrapper = styled.div`
   ${borderRadius}
-  ${size(16)}
+  ${csssize(16)}
   ${({
   isPlaceholder
 }) => {
@@ -253,7 +271,7 @@ export const ResolvedViewIconWrapper = styled.div`
 `;
 export const Thumbnail = styled.div`
   ${borderRadius}
-  ${size(48)}
+  ${csssize(48)}
   float: right;
   margin: 4px 0 12px 12px;
   background-color: ${token('color.skeleton', colors.N30)};

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

@@ -108,7 +108,7 @@ const getTitleBlockProps = children => {
   }
 };
 
-const getLayeredLink = (testId, context, children) => {
+const getLayeredLink = (testId, context, children, onClick) => {
   const {
     title,
     url = ''
@@ -118,6 +118,7 @@ const getLayeredLink = (testId, context, children) => {
     text
   } = getTitleBlockProps(children) || {};
   return jsx(LayeredLink, {
+    onClick: onClick,
     target: target,
     testId: testId,
     text: text || title,
@@ -152,7 +153,7 @@ const Container = ({
     css: getContainerStyles(size, hideBackground, hideElevation, hidePadding, clickableContainer),
     "data-smart-link-container": true,
     "data-testid": testId
-  }, clickableContainer ? getLayeredLink(testId, context, children) : null, renderChildren(children, size, theme, status, retry, onClick));
+  }, clickableContainer ? getLayeredLink(testId, context, children, onClick) : null, renderChildren(children, size, theme, status, retry, onClick));
 };
 
 export default Container;

package/dist/es2019/view/FlexibleCard/components/container/layered-link/index.js

@@ -42,6 +42,7 @@ const styles = css`
  */
 
 const LayeredLink = ({
+  onClick,
   target,
   testId,
   text,
@@ -51,6 +52,7 @@ const LayeredLink = ({
   css: styles,
   "data-testid": `${testId}-layered-link`,
   href: url,
+  onClick: onClick,
   target: target,
   tabIndex: -1 // Hide tab index and let the title link be the link.
 

package/dist/es2019/view/FlexibleCard/components/elements/media/index.js

@@ -17,6 +17,7 @@ const styles = css`
   aspect-ratio: 16 / 9;
   display: flex;
   width: 100%;
+  height: fit-content; // Fix Safari height not respecting aspect-ratio
 
   // fallback
   @supports not (aspect-ratio: auto) {

package/dist/esm/state/actions/index.js

@@ -1,5 +1,5 @@
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import { useMemo, useCallback } from 'react';
 import { auth } from '@atlaskit/outbound-auth-flow-client';
 import { APIError } from '@atlaskit/linking-common';

package/dist/esm/state/hooks/usePrefetch.js

@@ -1,5 +1,5 @@
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import { useCallback } from 'react';
 import { useSmartLinkContext } from '@atlaskit/link-provider';
 export function usePrefetch(url) {

package/dist/esm/utils/index.js

@@ -224,4 +224,7 @@ export var handleOnClick = function handleOnClick(handler) {
     e.stopPropagation();
     handler();
   };
+};
+export var isIntersectionObserverSupported = function isIntersectionObserverSupported() {
+  return typeof IntersectionObserver !== 'undefined';
 };

package/dist/esm/utils/mocks.js

@@ -1,10 +1,10 @@
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 

package/dist/esm/version.json

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

package/dist/esm/view/BlockCard/actions/DownloadAction.js

@@ -1,5 +1,5 @@
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { downloadUrl } from '@atlaskit/media-common';

package/dist/esm/view/BlockCard/actions/PreviewAction.js

@@ -1,10 +1,10 @@
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 var _excluded = ["popupMountPointId", "onClose"],
     _excluded2 = ["details"];
-import _regeneratorRuntime from "@babel/runtime/regenerator";
 
 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; }
 

package/dist/esm/view/BlockCard/actions/RetryAction.js

@@ -1,5 +1,5 @@
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { messages } from '@atlaskit/media-ui/messages';

package/dist/esm/view/BlockCard/actions/ViewAction.js

@@ -1,5 +1,5 @@
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { messages } from '@atlaskit/media-ui/messages';

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

@@ -1,7 +1,7 @@
 import React from 'react';
-import { isIntersectionObserverSupported } from '@atlaskit/media-ui';
 import { LazyLazilyRenderCard } from './LazyLazilyRenderCard';
 import { LazyIntersectionObserverCard } from './LazyIntersectionObserverCard';
+import { isIntersectionObserverSupported } from '../../../utils';
 export default function LazyCardWithUrlContent(props) {
   if (isIntersectionObserverSupported()) {
     return /*#__PURE__*/React.createElement(LazyIntersectionObserverCard, props);

package/dist/esm/view/EmbedCard/components/styled.js

@@ -3,13 +3,23 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
 
 import styled from '@emotion/styled';
-import { size as csssize, borderRadius, size, ellipsis } from '@atlaskit/media-ui';
-import { fontFamily } from '@atlaskit/theme/constants';
+import { borderRadius as akBorderRadius, fontFamily } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 import { gs as gridSize } from '../../common/utils';
 export var className = 'media-card-frame';
 export var cardShadow = "";
+export var borderRadius = "\n  border-radius: ".concat(akBorderRadius(), "px;\n");
+export var ellipsis = function ellipsis() {
+  var maxWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '100%';
+  var unit = typeof maxWidth === 'number' ? 'px' : '';
+  return "\n    max-width: ".concat(maxWidth).concat(unit, ";\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  ");
+};
+export var csssize = function csssize() {
+  var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '100%';
+  var unit = typeof value === 'number' ? 'px' : '';
+  return "\n    width: ".concat(value).concat(unit, ";\n    height: ").concat(value).concat(unit, ";\n  ");
+};
 
 function minWidth(_ref) {
   var minWidth = _ref.minWidth;
@@ -68,7 +78,7 @@ export var Wrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedT
 });
 export var embedHeaderHeight = 32;
 export var Header = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  height: ", "px;\n  position: absolute;\n  z-index: 1;\n  width: 100%;\n  display: flex;\n  align-items: center;\n  color: ", ";\n  opacity: 0;\n  transition: 300ms opacity cubic-bezier(0.15, 1, 0.3, 1);\n"])), embedHeaderHeight, token('color.icon', colors.N300));
-export var IconWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  ", " margin-right: 4px;\n"])), borderRadius, size(16), function (_ref7) {
+export var IconWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  ", " margin-right: 4px;\n"])), borderRadius, csssize(16), function (_ref7) {
   var isPlaceholder = _ref7.isPlaceholder;
 
   if (isPlaceholder) {
@@ -108,7 +118,7 @@ export var Title = styled.div(_templateObject9 || (_templateObject9 = _taggedTem
 export var Byline = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n  margin-top: 4px;\n  color: ", ";\n  font-size: 12px;\n  font-weight: normal;\n  line-height: ", ";\n  ", ";\n"])), token('color.text.subtlest', colors.N300), 16 / 12, ellipsis('100%'));
 export var Description = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  margin-top: 7px;\n  color: ", ";\n  font-size: 12px;\n  font-weight: normal;\n  line-height: ", ";\n  max-height: ", "px;\n  overflow: hidden;\n"])), token('color.text', colors.N800), 18 / 12, 18 * 3);
 export var ResolvedViewIconWrapper = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  margin-top: 4px;\n"])));
-export var Thumbnail = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  float: right;\n  margin: 4px 0 12px 12px;\n  background-color: ", ";\n  background-image: url(", ");\n  background-size: cover;\n"])), borderRadius, size(48), token('color.skeleton', colors.N30), function (_ref11) {
+export var Thumbnail = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  float: right;\n  margin: 4px 0 12px 12px;\n  background-color: ", ";\n  background-image: url(", ");\n  background-size: cover;\n"])), borderRadius, csssize(48), token('color.skeleton', colors.N30), function (_ref11) {
   var src = _ref11.src;
   return src;
 });

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

@@ -85,7 +85,7 @@ var getTitleBlockProps = function getTitleBlockProps(children) {
   }
 };
 
-var getLayeredLink = function getLayeredLink(testId, context, children) {
+var getLayeredLink = function getLayeredLink(testId, context, children, onClick) {
   var _ref = context || {},
       title = _ref.title,
       _ref$url = _ref.url,
@@ -96,6 +96,7 @@ var getLayeredLink = function getLayeredLink(testId, context, children) {
       text = _ref2.text;
 
   return jsx(LayeredLink, {
+    onClick: onClick,
     target: target,
     testId: testId,
     text: text || title,
@@ -136,7 +137,7 @@ var Container = function Container(_ref3) {
     css: getContainerStyles(size, hideBackground, hideElevation, hidePadding, clickableContainer),
     "data-smart-link-container": true,
     "data-testid": testId
-  }, clickableContainer ? getLayeredLink(testId, context, children) : null, renderChildren(children, size, theme, status, retry, onClick));
+  }, clickableContainer ? getLayeredLink(testId, context, children, onClick) : null, renderChildren(children, size, theme, status, retry, onClick));
 };
 
 export default Container;

package/dist/esm/view/FlexibleCard/components/container/layered-link/index.js

@@ -13,7 +13,8 @@ var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["
  */
 
 var LayeredLink = function LayeredLink(_ref) {
-  var target = _ref.target,
+  var onClick = _ref.onClick,
+      target = _ref.target,
       testId = _ref.testId,
       text = _ref.text,
       url = _ref.url;
@@ -22,6 +23,7 @@ var LayeredLink = function LayeredLink(_ref) {
     css: styles,
     "data-testid": "".concat(testId, "-layered-link"),
     href: url,
+    onClick: onClick,
     target: target,
     tabIndex: -1 // Hide tab index and let the title link be the link.
 

package/dist/esm/view/FlexibleCard/components/elements/media/index.js

@@ -17,7 +17,7 @@ import ImageIcon from '../../common/image-icon';
  * [object-position] Center alignment of the selected replaced element's
  * contents within the element's box.
  */
-var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  aspect-ratio: 16 / 9;\n  display: flex;\n  width: 100%;\n\n  // fallback\n  @supports not (aspect-ratio: auto) {\n    padding-top: 56.25%; // 16:9 ratio (9 / 16 = 0.5625)\n    height: 0;\n    position: relative;\n    overflow: hidden;\n  }\n\n  > img {\n    min-height: 100%;\n    min-width: 100%;\n    max-height: 100%;\n    max-width: 100%;\n    object-fit: cover;\n    object-position: center center;\n\n    // fallback\n    @supports not (aspect-ratio: auto) {\n      position: absolute;\n      transform: translate(-50%, -50%);\n      left: 50%;\n      top: 50%;\n      width: auto;\n      height: auto;\n    }\n  }\n"])));
+var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  aspect-ratio: 16 / 9;\n  display: flex;\n  width: 100%;\n  height: fit-content; // Fix Safari height not respecting aspect-ratio\n\n  // fallback\n  @supports not (aspect-ratio: auto) {\n    padding-top: 56.25%; // 16:9 ratio (9 / 16 = 0.5625)\n    height: 0;\n    position: relative;\n    overflow: hidden;\n  }\n\n  > img {\n    min-height: 100%;\n    min-width: 100%;\n    max-height: 100%;\n    max-width: 100%;\n    object-fit: cover;\n    object-position: center center;\n\n    // fallback\n    @supports not (aspect-ratio: auto) {\n      position: absolute;\n      transform: translate(-50%, -50%);\n      left: 50%;\n      top: 50%;\n      width: auto;\n      height: auto;\n    }\n  }\n"])));
 /**
  * A base element that displays a Media.
  * @internal

package/dist/types/utils/index.d.ts

@@ -9,3 +9,4 @@ export declare const getIconForFileType: (fileMimeType: string) => React.ReactNo
 export declare const getLabelForFileType: (fileMimeType: string) => React.ReactNode | undefined;
 export declare const getIframeSandboxAttribute: (isTrusted: boolean) => "allow-downloads allow-forms allow-popups allow-popups-to-escape-sandbox allow-presentation allow-same-origin allow-scripts" | undefined;
 export declare const handleOnClick: (handler: Function) => (e: React.BaseSyntheticEvent) => void;
+export declare const isIntersectionObserverSupported: () => boolean;

package/dist/types/view/EmbedCard/components/styled.d.ts

@@ -10,6 +10,9 @@ export interface WrapperProps {
     isVisible?: boolean;
     inheritDimensions?: boolean;
 }
+export declare const borderRadius: string;
+export declare const ellipsis: (maxWidth?: string | number) => string;
+export declare const csssize: (value?: string | number) => string;
 export declare const LinkWrapper: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, WrapperProps, any>;
 export declare const Wrapper: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, WrapperProps, any>;
 export declare const embedHeaderHeight = 32;

package/dist/types/view/FlexibleCard/components/container/layered-link/types.d.ts

@@ -1,4 +1,10 @@
+/// <reference types="react" />
 export declare type LayeredLinkProps = {
+    /**
+     * Determines the onClick behaviour of the Link. By default used for analytics.
+     * @internal
+     */
+    onClick?: React.EventHandler<React.MouseEvent | React.KeyboardEvent>;
     target?: '_blank' | '_self' | '_top' | '_parent';
     testId?: string;
     text?: string;

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

@@ -0,0 +1,12 @@
+/// <reference types="jest" />
+export declare class MockIntersectionObserver implements IntersectionObserver {
+    callback: IntersectionObserverCallback;
+    readonly root: Element | null;
+    readonly rootMargin: string;
+    readonly thresholds: ReadonlyArray<number>;
+    constructor(callback: IntersectionObserverCallback);
+    observe(_element: HTMLElement): 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.1.7",
+  "version": "19.1.10",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"