@atlaskit/smart-card 36.15.1 → 37.0.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/smart-card
 
+## 37.0.0
+
+### Major Changes
+
+- [#150608](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/150608)
+  [`c920f5dbaa727`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c920f5dbaa727) -
+  rename prop hidePrefix to hideFormat for OwnedByElement
+
+## 36.15.2
+
+### Patch Changes
+
+- [#150610](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/150610)
+  [`b33efda8cfa3f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b33efda8cfa3f) -
+  [ux] Fix BlockCard button get cutoff in safari (behind fg platform-linking-visual-refresh-v2)
+
 ## 36.15.1
 
 ### Patch Changes

package/dist/cjs/utils/analytics/analytics.js

@@ -11,7 +11,7 @@ var ANALYTICS_CHANNEL = exports.ANALYTICS_CHANNEL = 'media';
 var context = exports.context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "36.15.1"
+  packageVersion: "37.0.0"
 };
 var TrackQuickActionType = exports.TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/cjs/view/BlockCard/views/ResolvedView.compiled.css

@@ -8,6 +8,7 @@
 ._2yhz14q2 [data-smart-element=Title]{color:var(--ds-link,#0c66e4)}
 ._4cvresu3{align-items:flex-end}
 ._4t3i1k8s{height:1.5rem}
+._4t3i1osq{height:100%}
 ._g0eioxwj .actions-button-group button, ._1qryoxwj .actions-button-group button:active, ._sxbroxwj .actions-button-group button:focus, ._1gyioxwj .actions-button-group button:hover{font-size:.875rem}
 ._i8d01j6v [data-smart-element-group]{line-height:1rem}
 ._wwyvidpf span[data-smart-element-avatar-group]>ul{padding-left:0}

package/dist/cjs/view/BlockCard/views/ResolvedView.js

@@ -13,6 +13,7 @@ var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _userAgent = require("@atlaskit/linking-common/user-agent");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _constants = require("../../../constants");
 var _FlexibleCard = _interopRequireDefault(require("../../FlexibleCard"));
@@ -25,6 +26,7 @@ var titleBlockCssOld = null;
 var titleBlockCss = null;
 var footerBlockCssOld = null;
 var footerBlockCss = null;
+var footerBlockSafariStyles = null;
 var metadataBlockCssOld = null;
 
 /**
@@ -45,6 +47,13 @@ var ResolvedView = function ResolvedView(_ref) {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isPreviewBlockErrored = _useState2[0],
     setIsPreviewBlockErrored = _useState2[1];
+  var _ref2 = (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v2') ?
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    (0, _react.useMemo)(function () {
+      return (0, _userAgent.browser)();
+    }, []) : {},
+    _ref2$safari = _ref2.safari,
+    safari = _ref2$safari === void 0 ? false : _ref2$safari;
   (0, _react.useEffect)(function () {
     setIsPreviewBlockErrored(false);
   }, [url, cardState]);
@@ -102,7 +111,7 @@ var ResolvedView = function ResolvedView(_ref) {
   })) : null, /*#__PURE__*/React.createElement(_blocks.FooterBlock, {
     actions: footerActions,
     status: _constants.SmartLinkStatus.Resolved,
-    className: (0, _runtime.ax)([(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? "_4t3i1k8s _1e0c1txw _1bah1yb4 _4cvresu3 _1wpz1fhb" : "_4t3i1k8s _g0eioxwj _1qryoxwj _sxbroxwj _1gyioxwj"])
+    className: (0, _runtime.ax)([(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? "_4t3i1k8s _1e0c1txw _1bah1yb4 _4cvresu3 _1wpz1fhb" : "_4t3i1k8s _g0eioxwj _1qryoxwj _sxbroxwj _1gyioxwj", safari && (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v2') && "_4t3i1osq"])
   }));
 };
 var _default = exports.default = (0, _withFlexibleUIBlockCardStyle.withFlexibleUIBlockCardStyle)(ResolvedView);

package/dist/cjs/view/BlockCard/views/unresolved-view/index.compiled.css

@@ -9,6 +9,7 @@
 ._4cvr1y6m{align-items:flex-start}
 ._4cvresu3{align-items:flex-end}
 ._4t3i1k8s{height:1.5rem}
+._4t3i1osq{height:100%}
 ._7yjtidpf >div{margin-top:0}
 ._g0eioxwj .actions-button-group button, ._1qryoxwj .actions-button-group button:active, ._sxbroxwj .actions-button-group button:focus, ._1gyioxwj .actions-button-group button:hover{font-size:.875rem}
 ._ngc01fxt >div{color:var(--ds-text,#172b4d)}

package/dist/cjs/view/BlockCard/views/unresolved-view/index.js

@@ -8,9 +8,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 require("./index.compiled.css");
-var React = _interopRequireWildcard(require("react"));
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _userAgent = require("@atlaskit/linking-common/user-agent");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _FlexibleCard = _interopRequireDefault(require("../../../FlexibleCard"));
 var _blocks = require("../../../FlexibleCard/components/blocks");
@@ -23,6 +25,7 @@ var titleBlockCssOld = null;
 var titleBlockCss = null;
 var footerBlockCssOld = null;
 var footerBlockCss = null;
+var footerBlockSafariStyles = null;
 var UnresolvedView = function UnresolvedView(_ref) {
   var actions = _ref.actions,
     cardState = _ref.cardState,
@@ -35,6 +38,13 @@ var UnresolvedView = function UnresolvedView(_ref) {
     testId = _ref.testId,
     title = _ref.title,
     url = _ref.url;
+  var _ref2 = (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v2') ?
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    (0, _react.useMemo)(function () {
+      return (0, _userAgent.browser)();
+    }, []) : {},
+    _ref2$safari = _ref2.safari,
+    safari = _ref2$safari === void 0 ? false : _ref2$safari;
   return /*#__PURE__*/React.createElement(_FlexibleCard.default, {
     appearance: "block",
     cardState: cardState,
@@ -59,7 +69,7 @@ var UnresolvedView = function UnresolvedView(_ref) {
     actions: actions,
     testId: "smart-block-card-footer",
     status: cardState.status,
-    className: (0, _runtime.ax)([(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? "_4t3i1k8s _1e0c1txw _1bah1yb4 _4cvresu3 _1wpz1fhb" : "_4t3i1k8s _g0eioxwj _1qryoxwj _sxbroxwj _1gyioxwj"])
+    className: (0, _runtime.ax)([(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? "_4t3i1k8s _1e0c1txw _1bah1yb4 _4cvresu3 _1wpz1fhb" : "_4t3i1k8s _g0eioxwj _1qryoxwj _sxbroxwj _1gyioxwj", safari && (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v2') && "_4t3i1osq"])
   }));
 };
 var _default = exports.default = UnresolvedView;

package/dist/cjs/view/FlexibleCard/components/blocks/footer-block/resolved/index.compiled.css

@@ -0,0 +1,3 @@
+._4t3i1osq{height:100%}
+._c71lviql{max-height:2rem}
+._c71lxy5q{max-height:var(--ds-space-400,2pc)}

package/dist/cjs/view/FlexibleCard/components/blocks/footer-block/resolved/index.js

@@ -7,10 +7,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+require("./index.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _userAgent = require("@atlaskit/linking-common/user-agent");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _constants = require("../../../../../../constants");
 var _flexibleUiContext = require("../../../../../../state/flexible-ui-context");
@@ -23,6 +25,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var actionGroupStylesOld = null;
 var actionGroupStyles = null;
+var safariStyles = null;
 var FooterBlockResolvedView = function FooterBlockResolvedView(props) {
   var actions = props.actions,
     testId = props.testId,
@@ -35,6 +38,13 @@ var FooterBlockResolvedView = function FooterBlockResolvedView(props) {
     var _filterActionItems;
     return ((_filterActionItems = (0, _utils.filterActionItems)(actions, context)) === null || _filterActionItems === void 0 ? void 0 : _filterActionItems.length) > 0;
   }, [actions, context]);
+  var _ref = (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v2') ?
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    (0, _react.useMemo)(function () {
+      return (0, _userAgent.browser)();
+    }, []) : {},
+    _ref$safari = _ref.safari,
+    safari = _ref$safari === void 0 ? false : _ref$safari;
   var onDropdownOpenChange = (0, _react.useCallback)(function (isOpen) {
     if (onActionMenuOpenChange) {
       onActionMenuOpenChange({
@@ -48,17 +58,13 @@ var FooterBlockResolvedView = function FooterBlockResolvedView(props) {
     appearance: 'subtle'
   } : {}, {
     testId: "".concat(testId, "-provider")
-  })), actions && hasActions ? /*#__PURE__*/React.createElement(_elementGroup.default, (0, _extends2.default)({
+  })), actions && hasActions ? /*#__PURE__*/React.createElement(_elementGroup.default, {
     testId: "smart-element-group-actions",
     align: _constants.SmartLinkAlignment.Right,
-    direction: _constants.SmartLinkDirection.Horizontal
-  }, (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? {
-    css: size === _constants.SmartLinkSize.XLarge && actionGroupStyles
-  } : {
-    css: size === _constants.SmartLinkSize.XLarge && actionGroupStylesOld
-  }, {
-    width: _constants.SmartLinkWidth.Flexible
-  }), /*#__PURE__*/React.createElement(_actionGroup.default, {
+    direction: _constants.SmartLinkDirection.Horizontal,
+    width: _constants.SmartLinkWidth.Flexible,
+    className: (0, _runtime.ax)([size === _constants.SmartLinkSize.XLarge && (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') && "_c71lxy5q", size === _constants.SmartLinkSize.XLarge && !(0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') && "_c71lviql", safari && "_4t3i1osq"])
+  }, /*#__PURE__*/React.createElement(_actionGroup.default, {
     onDropdownOpenChange: onDropdownOpenChange,
     items: actions,
     appearance: "default",

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

@@ -80,7 +80,7 @@ var ModifiedOnElement = exports.ModifiedOnElement = function ModifiedOnElement(p
 var OwnedByElement = exports.OwnedByElement = function OwnedByElement(props) {
   if ((0, _platformFeatureFlags.fg)('platform-linking-additional-flexible-element-props')) {
     return /*#__PURE__*/_react.default.createElement(_elements.OwnedBy, {
-      hideFormat: props === null || props === void 0 ? void 0 : props.hidePrefix
+      hideFormat: props === null || props === void 0 ? void 0 : props.hideFormat
     });
   }
   return /*#__PURE__*/_react.default.createElement(_elements.OwnedBy, null);
@@ -88,7 +88,12 @@ var OwnedByElement = exports.OwnedByElement = function OwnedByElement(props) {
 var OwnedByGroupElement = exports.OwnedByGroupElement = function OwnedByGroupElement() {
   return /*#__PURE__*/_react.default.createElement(_elements.OwnedByGroup, null);
 };
-var PreviewElement = exports.PreviewElement = function PreviewElement() {
+var PreviewElement = exports.PreviewElement = function PreviewElement(props) {
+  if ((0, _platformFeatureFlags.fg)('platform-linking-additional-flexible-element-props')) {
+    return /*#__PURE__*/_react.default.createElement(_elements.Preview, {
+      overrideUrl: props === null || props === void 0 ? void 0 : props.url
+    });
+  }
   return /*#__PURE__*/_react.default.createElement(_elements.Preview, null);
 };
 var PriorityElement = exports.PriorityElement = function PriorityElement() {

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

@@ -20,7 +20,7 @@ var _excluded = ["href", "children", "checkSafety", "onClick", "testId", "isLink
   _excluded2 = ["isLinkSafe", "showSafetyWarningModal"];
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "36.15.1",
+  packageVersion: "37.0.0",
   componentName: 'linkUrl'
 };
 var Anchor = (0, _click.withLinkClickedEvent)('a');

package/dist/es2019/utils/analytics/analytics.js

@@ -2,7 +2,7 @@ export const ANALYTICS_CHANNEL = 'media';
 export const context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "36.15.1"
+  packageVersion: "37.0.0"
 };
 export let TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/es2019/view/BlockCard/views/ResolvedView.compiled.css

@@ -8,6 +8,7 @@
 ._2yhz14q2 [data-smart-element=Title]{color:var(--ds-link,#0c66e4)}
 ._4cvresu3{align-items:flex-end}
 ._4t3i1k8s{height:1.5rem}
+._4t3i1osq{height:100%}
 ._g0eioxwj .actions-button-group button, ._1qryoxwj .actions-button-group button:active, ._sxbroxwj .actions-button-group button:focus, ._1gyioxwj .actions-button-group button:hover{font-size:.875rem}
 ._i8d01j6v [data-smart-element-group]{line-height:1rem}
 ._wwyvidpf span[data-smart-element-avatar-group]>ul{padding-left:0}

package/dist/es2019/view/BlockCard/views/ResolvedView.js

@@ -4,6 +4,7 @@ import "./ResolvedView.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useEffect, useMemo, useState } from 'react';
+import { browser } from '@atlaskit/linking-common/user-agent';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { ActionName, ElementName, SmartLinkPosition, SmartLinkStatus } from '../../../constants';
 import FlexibleCard from '../../FlexibleCard';
@@ -14,6 +15,7 @@ const titleBlockCssOld = null;
 const titleBlockCss = null;
 const footerBlockCssOld = null;
 const footerBlockCss = null;
+const footerBlockSafariStyles = null;
 const metadataBlockCssOld = null;
 
 /**
@@ -31,6 +33,11 @@ const ResolvedView = ({
   url
 }) => {
   const [isPreviewBlockErrored, setIsPreviewBlockErrored] = useState(false);
+  const {
+    safari = false
+  } = fg('platform-linking-visual-refresh-v2') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useMemo(() => browser(), []) : {};
   useEffect(() => {
     setIsPreviewBlockErrored(false);
   }, [url, cardState]);
@@ -87,7 +94,7 @@ const ResolvedView = ({
   })) : null, /*#__PURE__*/React.createElement(FooterBlock, {
     actions: footerActions,
     status: SmartLinkStatus.Resolved,
-    className: ax([fg('platform-linking-visual-refresh-v1') ? "_4t3i1k8s _1e0c1txw _1bah1yb4 _4cvresu3 _1wpz1fhb" : "_4t3i1k8s _g0eioxwj _1qryoxwj _sxbroxwj _1gyioxwj"])
+    className: ax([fg('platform-linking-visual-refresh-v1') ? "_4t3i1k8s _1e0c1txw _1bah1yb4 _4cvresu3 _1wpz1fhb" : "_4t3i1k8s _g0eioxwj _1qryoxwj _sxbroxwj _1gyioxwj", safari && fg('platform-linking-visual-refresh-v2') && "_4t3i1osq"])
   }));
 };
 export default withFlexibleUIBlockCardStyle(ResolvedView);

package/dist/es2019/view/BlockCard/views/unresolved-view/index.compiled.css

@@ -9,6 +9,7 @@
 ._4cvr1y6m{align-items:flex-start}
 ._4cvresu3{align-items:flex-end}
 ._4t3i1k8s{height:1.5rem}
+._4t3i1osq{height:100%}
 ._7yjtidpf >div{margin-top:0}
 ._g0eioxwj .actions-button-group button, ._1qryoxwj .actions-button-group button:active, ._sxbroxwj .actions-button-group button:focus, ._1gyioxwj .actions-button-group button:hover{font-size:.875rem}
 ._ngc01fxt >div{color:var(--ds-text,#172b4d)}

package/dist/es2019/view/BlockCard/views/unresolved-view/index.js

@@ -3,6 +3,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
+import { useMemo } from 'react';
+import { browser } from '@atlaskit/linking-common/user-agent';
 import { fg } from '@atlaskit/platform-feature-flags';
 import FlexibleCard from '../../../FlexibleCard';
 import { CustomBlock, InternalFooterBlock, PreviewBlock, TitleBlock } from '../../../FlexibleCard/components/blocks';
@@ -13,6 +15,7 @@ const titleBlockCssOld = null;
 const titleBlockCss = null;
 const footerBlockCssOld = null;
 const footerBlockCss = null;
+const footerBlockSafariStyles = null;
 const UnresolvedView = ({
   actions,
   cardState,
@@ -24,30 +27,37 @@ const UnresolvedView = ({
   testId,
   title,
   url
-}) => /*#__PURE__*/React.createElement(FlexibleCard, {
-  appearance: "block",
-  cardState: cardState,
-  onAuthorize: onAuthorize,
-  onClick: onClick,
-  onError: onError,
-  origin: "smartLinkCard",
-  testId: testId,
-  ui: FlexibleCardUiOptions,
-  url: url
-}, /*#__PURE__*/React.createElement(TitleBlock, _extends({}, titleBlockOptions, {
-  hideIcon: !!title,
-  text: title,
-  status: cardState.status,
-  className: ax([fg('platform-linking-visual-refresh-v1') ? "_zulpu2gc _13mh1pd9 _2yhz14q2" : "_zulp1f3t _13mh1pd9"])
-})), /*#__PURE__*/React.createElement(CustomBlock, {
-  status: cardState.status,
-  className: ax([fg('platform-linking-visual-refresh-v1') ? "_zulp1b66 _1e0c1txw _4cvr1y6m _1wpz1fhb _7yjtidpf _ngc01fxt" : "_4cvr1y6m"])
-}, children), showPreview && /*#__PURE__*/React.createElement(PreviewBlock, _extends({}, PreviewBlockOptions, {
-  status: cardState.status
-})), /*#__PURE__*/React.createElement(InternalFooterBlock, {
-  actions: actions,
-  testId: "smart-block-card-footer",
-  status: cardState.status,
-  className: ax([fg('platform-linking-visual-refresh-v1') ? "_4t3i1k8s _1e0c1txw _1bah1yb4 _4cvresu3 _1wpz1fhb" : "_4t3i1k8s _g0eioxwj _1qryoxwj _sxbroxwj _1gyioxwj"])
-}));
+}) => {
+  const {
+    safari = false
+  } = fg('platform-linking-visual-refresh-v2') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useMemo(() => browser(), []) : {};
+  return /*#__PURE__*/React.createElement(FlexibleCard, {
+    appearance: "block",
+    cardState: cardState,
+    onAuthorize: onAuthorize,
+    onClick: onClick,
+    onError: onError,
+    origin: "smartLinkCard",
+    testId: testId,
+    ui: FlexibleCardUiOptions,
+    url: url
+  }, /*#__PURE__*/React.createElement(TitleBlock, _extends({}, titleBlockOptions, {
+    hideIcon: !!title,
+    text: title,
+    status: cardState.status,
+    className: ax([fg('platform-linking-visual-refresh-v1') ? "_zulpu2gc _13mh1pd9 _2yhz14q2" : "_zulp1f3t _13mh1pd9"])
+  })), /*#__PURE__*/React.createElement(CustomBlock, {
+    status: cardState.status,
+    className: ax([fg('platform-linking-visual-refresh-v1') ? "_zulp1b66 _1e0c1txw _4cvr1y6m _1wpz1fhb _7yjtidpf _ngc01fxt" : "_4cvr1y6m"])
+  }, children), showPreview && /*#__PURE__*/React.createElement(PreviewBlock, _extends({}, PreviewBlockOptions, {
+    status: cardState.status
+  })), /*#__PURE__*/React.createElement(InternalFooterBlock, {
+    actions: actions,
+    testId: "smart-block-card-footer",
+    status: cardState.status,
+    className: ax([fg('platform-linking-visual-refresh-v1') ? "_4t3i1k8s _1e0c1txw _1bah1yb4 _4cvresu3 _1wpz1fhb" : "_4t3i1k8s _g0eioxwj _1qryoxwj _sxbroxwj _1gyioxwj", safari && fg('platform-linking-visual-refresh-v2') && "_4t3i1osq"])
+  }));
+};
 export default UnresolvedView;

package/dist/es2019/view/FlexibleCard/components/blocks/footer-block/resolved/index.compiled.css

@@ -0,0 +1,3 @@
+._4t3i1osq{height:100%}
+._c71lviql{max-height:2rem}
+._c71lxy5q{max-height:var(--ds-space-400,2pc)}

package/dist/es2019/view/FlexibleCard/components/blocks/footer-block/resolved/index.js

@@ -1,8 +1,10 @@
 /* index.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
+import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useCallback, useMemo } from 'react';
+import { browser } from '@atlaskit/linking-common/user-agent';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize, SmartLinkWidth } from '../../../../../../constants';
 import { useFlexibleUiContext } from '../../../../../../state/flexible-ui-context';
@@ -13,6 +15,7 @@ import ElementGroup from '../../element-group';
 import { filterActionItems } from '../../utils';
 const actionGroupStylesOld = null;
 const actionGroupStyles = null;
+const safariStyles = null;
 const FooterBlockResolvedView = props => {
   const {
     actions,
@@ -26,6 +29,11 @@ const FooterBlockResolvedView = props => {
     var _filterActionItems;
     return ((_filterActionItems = filterActionItems(actions, context)) === null || _filterActionItems === void 0 ? void 0 : _filterActionItems.length) > 0;
   }, [actions, context]);
+  const {
+    safari = false
+  } = fg('platform-linking-visual-refresh-v2') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useMemo(() => browser(), []) : {};
   const onDropdownOpenChange = useCallback(isOpen => {
     if (onActionMenuOpenChange) {
       onActionMenuOpenChange({
@@ -39,17 +47,13 @@ const FooterBlockResolvedView = props => {
     appearance: 'subtle'
   } : {}, {
     testId: `${testId}-provider`
-  })), actions && hasActions ? /*#__PURE__*/React.createElement(ElementGroup, _extends({
+  })), actions && hasActions ? /*#__PURE__*/React.createElement(ElementGroup, {
     testId: "smart-element-group-actions",
     align: SmartLinkAlignment.Right,
-    direction: SmartLinkDirection.Horizontal
-  }, fg('platform-linking-visual-refresh-v1') ? {
-    css: size === SmartLinkSize.XLarge && actionGroupStyles
-  } : {
-    css: size === SmartLinkSize.XLarge && actionGroupStylesOld
-  }, {
-    width: SmartLinkWidth.Flexible
-  }), /*#__PURE__*/React.createElement(ActionGroup, {
+    direction: SmartLinkDirection.Horizontal,
+    width: SmartLinkWidth.Flexible,
+    className: ax([size === SmartLinkSize.XLarge && fg('platform-linking-visual-refresh-v1') && "_c71lxy5q", size === SmartLinkSize.XLarge && !fg('platform-linking-visual-refresh-v1') && "_c71lviql", safari && "_4t3i1osq"])
+  }, /*#__PURE__*/React.createElement(ActionGroup, {
     onDropdownOpenChange: onDropdownOpenChange,
     items: actions,
     appearance: "default",

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

@@ -46,13 +46,20 @@ export const ModifiedOnElement = props => {
 export const OwnedByElement = props => {
   if (fg('platform-linking-additional-flexible-element-props')) {
     return /*#__PURE__*/React.createElement(OwnedBy, {
-      hideFormat: props === null || props === void 0 ? void 0 : props.hidePrefix
+      hideFormat: props === null || props === void 0 ? void 0 : props.hideFormat
     });
   }
   return /*#__PURE__*/React.createElement(OwnedBy, null);
 };
 export const OwnedByGroupElement = () => /*#__PURE__*/React.createElement(OwnedByGroup, null);
-export const PreviewElement = () => /*#__PURE__*/React.createElement(Preview, null);
+export const PreviewElement = props => {
+  if (fg('platform-linking-additional-flexible-element-props')) {
+    return /*#__PURE__*/React.createElement(Preview, {
+      overrideUrl: props === null || props === void 0 ? void 0 : props.url
+    });
+  }
+  return /*#__PURE__*/React.createElement(Preview, null);
+};
 export const PriorityElement = () => /*#__PURE__*/React.createElement(Priority, null);
 export const ProgrammingLanguageElement = () => /*#__PURE__*/React.createElement(ProgrammingLanguage, null);
 export const ProviderElement = () => /*#__PURE__*/React.createElement(Provider, null);

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

@@ -10,7 +10,7 @@ import LinkWarningModal from './LinkWarningModal';
 import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-modal';
 const PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "36.15.1",
+  packageVersion: "37.0.0",
   componentName: 'linkUrl'
 };
 const Anchor = withLinkClickedEvent('a');

package/dist/esm/utils/analytics/analytics.js

@@ -4,7 +4,7 @@ export var ANALYTICS_CHANNEL = 'media';
 export var context = {
   componentName: 'smart-cards',
   packageName: "@atlaskit/smart-card",
-  packageVersion: "36.15.1"
+  packageVersion: "37.0.0"
 };
 export var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/esm/view/BlockCard/views/ResolvedView.compiled.css

@@ -8,6 +8,7 @@
 ._2yhz14q2 [data-smart-element=Title]{color:var(--ds-link,#0c66e4)}
 ._4cvresu3{align-items:flex-end}
 ._4t3i1k8s{height:1.5rem}
+._4t3i1osq{height:100%}
 ._g0eioxwj .actions-button-group button, ._1qryoxwj .actions-button-group button:active, ._sxbroxwj .actions-button-group button:focus, ._1gyioxwj .actions-button-group button:hover{font-size:.875rem}
 ._i8d01j6v [data-smart-element-group]{line-height:1rem}
 ._wwyvidpf span[data-smart-element-avatar-group]>ul{padding-left:0}

package/dist/esm/view/BlockCard/views/ResolvedView.js

@@ -5,6 +5,7 @@ import "./ResolvedView.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useEffect, useMemo, useState } from 'react';
+import { browser } from '@atlaskit/linking-common/user-agent';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { ActionName, ElementName, SmartLinkPosition, SmartLinkStatus } from '../../../constants';
 import FlexibleCard from '../../FlexibleCard';
@@ -15,6 +16,7 @@ var titleBlockCssOld = null;
 var titleBlockCss = null;
 var footerBlockCssOld = null;
 var footerBlockCss = null;
+var footerBlockSafariStyles = null;
 var metadataBlockCssOld = null;
 
 /**
@@ -35,6 +37,13 @@ var ResolvedView = function ResolvedView(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     isPreviewBlockErrored = _useState2[0],
     setIsPreviewBlockErrored = _useState2[1];
+  var _ref2 = fg('platform-linking-visual-refresh-v2') ?
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useMemo(function () {
+      return browser();
+    }, []) : {},
+    _ref2$safari = _ref2.safari,
+    safari = _ref2$safari === void 0 ? false : _ref2$safari;
   useEffect(function () {
     setIsPreviewBlockErrored(false);
   }, [url, cardState]);
@@ -92,7 +101,7 @@ var ResolvedView = function ResolvedView(_ref) {
   })) : null, /*#__PURE__*/React.createElement(FooterBlock, {
     actions: footerActions,
     status: SmartLinkStatus.Resolved,
-    className: ax([fg('platform-linking-visual-refresh-v1') ? "_4t3i1k8s _1e0c1txw _1bah1yb4 _4cvresu3 _1wpz1fhb" : "_4t3i1k8s _g0eioxwj _1qryoxwj _sxbroxwj _1gyioxwj"])
+    className: ax([fg('platform-linking-visual-refresh-v1') ? "_4t3i1k8s _1e0c1txw _1bah1yb4 _4cvresu3 _1wpz1fhb" : "_4t3i1k8s _g0eioxwj _1qryoxwj _sxbroxwj _1gyioxwj", safari && fg('platform-linking-visual-refresh-v2') && "_4t3i1osq"])
   }));
 };
 export default withFlexibleUIBlockCardStyle(ResolvedView);

package/dist/esm/view/BlockCard/views/unresolved-view/index.compiled.css

@@ -9,6 +9,7 @@
 ._4cvr1y6m{align-items:flex-start}
 ._4cvresu3{align-items:flex-end}
 ._4t3i1k8s{height:1.5rem}
+._4t3i1osq{height:100%}
 ._7yjtidpf >div{margin-top:0}
 ._g0eioxwj .actions-button-group button, ._1qryoxwj .actions-button-group button:active, ._sxbroxwj .actions-button-group button:focus, ._1gyioxwj .actions-button-group button:hover{font-size:.875rem}
 ._ngc01fxt >div{color:var(--ds-text,#172b4d)}

package/dist/esm/view/BlockCard/views/unresolved-view/index.js

@@ -3,6 +3,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
+import { useMemo } from 'react';
+import { browser } from '@atlaskit/linking-common/user-agent';
 import { fg } from '@atlaskit/platform-feature-flags';
 import FlexibleCard from '../../../FlexibleCard';
 import { CustomBlock, InternalFooterBlock, PreviewBlock, TitleBlock } from '../../../FlexibleCard/components/blocks';
@@ -13,6 +15,7 @@ var titleBlockCssOld = null;
 var titleBlockCss = null;
 var footerBlockCssOld = null;
 var footerBlockCss = null;
+var footerBlockSafariStyles = null;
 var UnresolvedView = function UnresolvedView(_ref) {
   var actions = _ref.actions,
     cardState = _ref.cardState,
@@ -25,6 +28,13 @@ var UnresolvedView = function UnresolvedView(_ref) {
     testId = _ref.testId,
     title = _ref.title,
     url = _ref.url;
+  var _ref2 = fg('platform-linking-visual-refresh-v2') ?
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useMemo(function () {
+      return browser();
+    }, []) : {},
+    _ref2$safari = _ref2.safari,
+    safari = _ref2$safari === void 0 ? false : _ref2$safari;
   return /*#__PURE__*/React.createElement(FlexibleCard, {
     appearance: "block",
     cardState: cardState,
@@ -49,7 +59,7 @@ var UnresolvedView = function UnresolvedView(_ref) {
     actions: actions,
     testId: "smart-block-card-footer",
     status: cardState.status,
-    className: ax([fg('platform-linking-visual-refresh-v1') ? "_4t3i1k8s _1e0c1txw _1bah1yb4 _4cvresu3 _1wpz1fhb" : "_4t3i1k8s _g0eioxwj _1qryoxwj _sxbroxwj _1gyioxwj"])
+    className: ax([fg('platform-linking-visual-refresh-v1') ? "_4t3i1k8s _1e0c1txw _1bah1yb4 _4cvresu3 _1wpz1fhb" : "_4t3i1k8s _g0eioxwj _1qryoxwj _sxbroxwj _1gyioxwj", safari && fg('platform-linking-visual-refresh-v2') && "_4t3i1osq"])
   }));
 };
 export default UnresolvedView;

package/dist/esm/view/FlexibleCard/components/blocks/footer-block/resolved/index.compiled.css

@@ -0,0 +1,3 @@
+._4t3i1osq{height:100%}
+._c71lviql{max-height:2rem}
+._c71lxy5q{max-height:var(--ds-space-400,2pc)}

package/dist/esm/view/FlexibleCard/components/blocks/footer-block/resolved/index.js

@@ -1,8 +1,10 @@
 /* index.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
+import "./index.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { useCallback, useMemo } from 'react';
+import { browser } from '@atlaskit/linking-common/user-agent';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize, SmartLinkWidth } from '../../../../../../constants';
 import { useFlexibleUiContext } from '../../../../../../state/flexible-ui-context';
@@ -13,6 +15,7 @@ import ElementGroup from '../../element-group';
 import { filterActionItems } from '../../utils';
 var actionGroupStylesOld = null;
 var actionGroupStyles = null;
+var safariStyles = null;
 var FooterBlockResolvedView = function FooterBlockResolvedView(props) {
   var actions = props.actions,
     testId = props.testId,
@@ -25,6 +28,13 @@ var FooterBlockResolvedView = function FooterBlockResolvedView(props) {
     var _filterActionItems;
     return ((_filterActionItems = filterActionItems(actions, context)) === null || _filterActionItems === void 0 ? void 0 : _filterActionItems.length) > 0;
   }, [actions, context]);
+  var _ref = fg('platform-linking-visual-refresh-v2') ?
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useMemo(function () {
+      return browser();
+    }, []) : {},
+    _ref$safari = _ref.safari,
+    safari = _ref$safari === void 0 ? false : _ref$safari;
   var onDropdownOpenChange = useCallback(function (isOpen) {
     if (onActionMenuOpenChange) {
       onActionMenuOpenChange({
@@ -38,17 +48,13 @@ var FooterBlockResolvedView = function FooterBlockResolvedView(props) {
     appearance: 'subtle'
   } : {}, {
     testId: "".concat(testId, "-provider")
-  })), actions && hasActions ? /*#__PURE__*/React.createElement(ElementGroup, _extends({
+  })), actions && hasActions ? /*#__PURE__*/React.createElement(ElementGroup, {
     testId: "smart-element-group-actions",
     align: SmartLinkAlignment.Right,
-    direction: SmartLinkDirection.Horizontal
-  }, fg('platform-linking-visual-refresh-v1') ? {
-    css: size === SmartLinkSize.XLarge && actionGroupStyles
-  } : {
-    css: size === SmartLinkSize.XLarge && actionGroupStylesOld
-  }, {
-    width: SmartLinkWidth.Flexible
-  }), /*#__PURE__*/React.createElement(ActionGroup, {
+    direction: SmartLinkDirection.Horizontal,
+    width: SmartLinkWidth.Flexible,
+    className: ax([size === SmartLinkSize.XLarge && fg('platform-linking-visual-refresh-v1') && "_c71lxy5q", size === SmartLinkSize.XLarge && !fg('platform-linking-visual-refresh-v1') && "_c71lviql", safari && "_4t3i1osq"])
+  }, /*#__PURE__*/React.createElement(ActionGroup, {
     onDropdownOpenChange: onDropdownOpenChange,
     items: actions,
     appearance: "default",

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

@@ -72,7 +72,7 @@ export var ModifiedOnElement = function ModifiedOnElement(props) {
 export var OwnedByElement = function OwnedByElement(props) {
   if (fg('platform-linking-additional-flexible-element-props')) {
     return /*#__PURE__*/React.createElement(OwnedBy, {
-      hideFormat: props === null || props === void 0 ? void 0 : props.hidePrefix
+      hideFormat: props === null || props === void 0 ? void 0 : props.hideFormat
     });
   }
   return /*#__PURE__*/React.createElement(OwnedBy, null);
@@ -80,7 +80,12 @@ export var OwnedByElement = function OwnedByElement(props) {
 export var OwnedByGroupElement = function OwnedByGroupElement() {
   return /*#__PURE__*/React.createElement(OwnedByGroup, null);
 };
-export var PreviewElement = function PreviewElement() {
+export var PreviewElement = function PreviewElement(props) {
+  if (fg('platform-linking-additional-flexible-element-props')) {
+    return /*#__PURE__*/React.createElement(Preview, {
+      overrideUrl: props === null || props === void 0 ? void 0 : props.url
+    });
+  }
   return /*#__PURE__*/React.createElement(Preview, null);
 };
 export var PriorityElement = function PriorityElement() {

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

@@ -13,7 +13,7 @@ import LinkWarningModal from './LinkWarningModal';
 import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-modal';
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "36.15.1",
+  packageVersion: "37.0.0",
   componentName: 'linkUrl'
 };
 var Anchor = withLinkClickedEvent('a');

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

@@ -10,6 +10,7 @@ import React from 'react';
 import { type DateTimeProps } from './components/elements/date-time/types';
 import { type IconProps } from './components/elements/icon/types';
 import { type LinkProps } from './components/elements/link/types';
+import { type PreviewProps } from './components/elements/preview/types';
 import { type TextProps } from './components/elements/text/types';
 export declare const AssignedToElement: () => React.JSX.Element;
 export declare const AssignedToGroupElement: () => React.JSX.Element;
@@ -30,12 +31,13 @@ export declare const LocationElement: () => React.JSX.Element;
 export declare const ModifiedByElement: () => React.JSX.Element;
 type ModifiedOnElementProps = Pick<DateTimeProps, 'hideDatePrefix'>;
 export declare const ModifiedOnElement: (props?: ModifiedOnElementProps) => React.JSX.Element;
-type OwnedByElementProps = {
-    hidePrefix?: boolean;
-};
+type OwnedByElementProps = Pick<TextProps, 'hideFormat'>;
 export declare const OwnedByElement: (props?: OwnedByElementProps) => React.JSX.Element;
 export declare const OwnedByGroupElement: () => React.JSX.Element;
-export declare const PreviewElement: () => React.JSX.Element;
+type PreviewElementProps = {
+    url?: PreviewProps['overrideUrl'];
+};
+export declare const PreviewElement: (props?: PreviewElementProps) => React.JSX.Element;
 export declare const PriorityElement: () => React.JSX.Element;
 export declare const ProgrammingLanguageElement: () => React.JSX.Element;
 export declare const ProviderElement: () => React.JSX.Element;

package/dist/types-ts4.5/view/FlexibleCard/external.d.ts

@@ -10,6 +10,7 @@ import React from 'react';
 import { type DateTimeProps } from './components/elements/date-time/types';
 import { type IconProps } from './components/elements/icon/types';
 import { type LinkProps } from './components/elements/link/types';
+import { type PreviewProps } from './components/elements/preview/types';
 import { type TextProps } from './components/elements/text/types';
 export declare const AssignedToElement: () => React.JSX.Element;
 export declare const AssignedToGroupElement: () => React.JSX.Element;
@@ -30,12 +31,13 @@ export declare const LocationElement: () => React.JSX.Element;
 export declare const ModifiedByElement: () => React.JSX.Element;
 type ModifiedOnElementProps = Pick<DateTimeProps, 'hideDatePrefix'>;
 export declare const ModifiedOnElement: (props?: ModifiedOnElementProps) => React.JSX.Element;
-type OwnedByElementProps = {
-    hidePrefix?: boolean;
-};
+type OwnedByElementProps = Pick<TextProps, 'hideFormat'>;
 export declare const OwnedByElement: (props?: OwnedByElementProps) => React.JSX.Element;
 export declare const OwnedByGroupElement: () => React.JSX.Element;
-export declare const PreviewElement: () => React.JSX.Element;
+type PreviewElementProps = {
+    url?: PreviewProps['overrideUrl'];
+};
+export declare const PreviewElement: (props?: PreviewElementProps) => React.JSX.Element;
 export declare const PriorityElement: () => React.JSX.Element;
 export declare const ProgrammingLanguageElement: () => React.JSX.Element;
 export declare const ProviderElement: () => React.JSX.Element;

package/package.json

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