@atlaskit/smart-card 34.10.3 → 34.10.5

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/smart-card
 
+## 34.10.5
+
+### Patch Changes
+
+- [#109069](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/109069)
+  [`94a79aaaf7581`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/94a79aaaf7581) -
+  Fix an issue where the ui props in FlexibleCard container was not passed down to its children when
+  compiled styles is used.
+
+## 34.10.4
+
+### Patch Changes
+
+- [#110251](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/110251)
+  [`b6adb9244b072`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b6adb9244b072) -
+  [ux] Visual refresh of the EmbedCard component
+
 ## 34.10.3
 
 ### 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: "34.10.3"
+  packageVersion: "34.10.5"
 };
 var TrackQuickActionType = exports.TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/cjs/utils/flexible.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isFlexibleUiTitleBlock = exports.isFlexibleUiPreviewBlock = exports.isFlexibleUiFooterBlock = exports.isFlexibleUiElement = exports.isFlexibleUiCard = exports.isFlexibleUiBlock = void 0;
+exports.isStyleCacheProvider = exports.isFlexibleUiTitleBlock = exports.isFlexibleUiPreviewBlock = exports.isFlexibleUiFooterBlock = exports.isFlexibleUiElement = exports.isFlexibleUiCard = exports.isFlexibleUiBlock = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _blocks = _interopRequireWildcard(require("../view/FlexibleCard/components/blocks"));
@@ -92,7 +92,6 @@ var _isFlexibleUiElement = exports.isFlexibleUiElement = function isFlexibleUiEl
   return false;
 };
 var _isFlexibleUiTitleBlock = exports.isFlexibleUiTitleBlock = function isFlexibleUiTitleBlock(node) {
-  var _node$type3;
   if (!(0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {
     return /*#__PURE__*/_react.default.isValidElement(node) && node.type === _blocks.TitleBlock;
   }
@@ -102,7 +101,7 @@ var _isFlexibleUiTitleBlock = exports.isFlexibleUiTitleBlock = function isFlexib
   if (node.type === _blocks.TitleBlock) {
     return true;
   }
-  if (typeof node.type !== 'string' && ((_node$type3 = node.type) === null || _node$type3 === void 0 ? void 0 : _node$type3.name) === 'StyleCacheProvider' && node.props.children) {
+  if (isStyleCacheProvider(node)) {
     // Component wrapped with compiled at runtime, check for children
     var isChildrenValid = true;
     _react.default.Children.map(node.props.children, function (child) {
@@ -122,6 +121,10 @@ var _isFlexibleUiTitleBlock = exports.isFlexibleUiTitleBlock = function isFlexib
   }
   return false;
 };
+var isStyleCacheProvider = exports.isStyleCacheProvider = function isStyleCacheProvider(node) {
+  var _node$type3;
+  return typeof node.type !== 'string' && ((_node$type3 = node.type) === null || _node$type3 === void 0 ? void 0 : _node$type3.name) === 'StyleCacheProvider' && node.props.children;
+};
 var _isFlexibleUiPreviewBlock = exports.isFlexibleUiPreviewBlock = function isFlexibleUiPreviewBlock(node) {
   var _node$type4;
   if (!(0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-smartcard')) {

package/dist/cjs/view/EmbedCard/components/ExpandedFrame.compiled.css

@@ -0,0 +1,50 @@
+._11c81il0{font:var(--ds-font-heading-xsmall,normal 600 14px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._14mj1crf:after{border-radius:9pt}
+._19it1pvm{border:solid 1px var(--ds-border,#091e4224)}
+._1tqzzgxb:after{outline:1px solid var(--ds-border,#091e4224)}
+._2rko1y44{border-radius:4px}
+._hcgvzgxb:hover:after{outline:1px solid var(--ds-border,#091e4224)}
+._qc5o94zs:after{transition:background .3s,box-shadow .3s}
+._v56414au{transition:outline .3s}
+._zulp1b66{gap:var(--ds-space-050,4px)}
+._zulpu2gc{gap:var(--ds-space-100,8px)}
+._15l2idpf:after{top:0}
+._16jlkb7n{flex-grow:1}
+._18m915vq{overflow-y:hidden}
+._18m91wug{overflow-y:auto}
+._18postnw:after{position:absolute}
+._19bvu2gc{padding-left:var(--ds-space-100,8px)}
+._19doidpf:after{left:0}
+._1bqqidpf:after{z-index:0}
+._1bsb7vkz{width:1pc}
+._1e0c1txw{display:flex}
+._1hfk18uv:after{background-color:initial}
+._1hfkhp5a:after{background-color:var(--ds-surface-raised,#fff)}
+._1ifiidpf .embed-header{opacity:0}
+._1ifikb7n .embed-header{opacity:1}
+._1pbykb7n{z-index:1}
+._1reo15vq{overflow-x:hidden}
+._1reo1wug{overflow-x:auto}
+._1x88idpf:after{bottom:0}
+._2lx21bp4{flex-direction:column}
+._32rxidpf:after{right:0}
+._4cvr1h6o{align-items:center}
+._4t3i1osq{height:100%}
+._4t3i7vkz{height:1pc}
+._4t3igktf{height:20px}
+._4t3ik5xz{height:27pc}
+._4tpuhp5a:hover:after{background-color:var(--ds-surface-raised,#fff)}
+._8x3u92p9:after{box-shadow:0 0 0 3px var(--ds-border-selected,#0c66e4)}
+._aetrb3bt:after{content:""}
+._bfhkhp5a{background-color:var(--ds-surface-raised,#fff)}
+._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
+._kqswh2mm{position:relative}
+._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
+._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
+._u94kidpf:after{flex-grow:0}
+._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}
+._x148kb7n:hover .embed-header{opacity:1}
+._1bnxglyw:hover{text-decoration-line:none}
+._9oik18uv:hover{text-decoration-color:initial}
+._jf4cnqa1:hover{text-decoration-style:solid}
+._1jhm1ips:active{outline:8px solid var(--ds-background-selected,#e9f2ff)}

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

@@ -7,8 +7,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ExpandedFrame = void 0;
+require("./ExpandedFrame.compiled.css");
 var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _useLinkClicked = require("../../../state/analytics/useLinkClicked");
@@ -45,18 +47,35 @@ var ExpandedFrameNew = function ExpandedFrameNew(_ref) {
   };
   var handleMouseDown = (0, _useLinkClicked.useMouseDownEvent)();
   var renderHeader = function renderHeader() {
+    if ((0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1')) {
+      return frameStyle !== 'hide' && /*#__PURE__*/React.createElement("div", {
+        className: (0, _runtime.ax)([styles.header, "embed-header"])
+      }, /*#__PURE__*/React.createElement("div", {
+        className: (0, _runtime.ax)([styles.headerIcon])
+      }, icon), /*#__PURE__*/React.createElement("div", {
+        className: (0, _runtime.ax)([styles.tooltipWrapper])
+      }, !isPlaceholder && /*#__PURE__*/React.createElement(_tooltip.default, {
+        content: text,
+        hideTooltipOnMouseDown: true
+      }, /*#__PURE__*/React.createElement("a", {
+        href: href,
+        onClick: handleClick,
+        onMouseDown: handleMouseDown,
+        className: (0, _runtime.ax)([styles.headerAnchor])
+      }, text))));
+    }
     return (
       /*#__PURE__*/
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      React.createElement(_styled.Header, {
+      React.createElement(_styled.HeaderOldVisualRefresh, {
         className: "embed-header",
         frameStyle: frameStyle
-      }, /*#__PURE__*/React.createElement(_styled.IconWrapper, {
+      }, /*#__PURE__*/React.createElement(_styled.IconWrapperOldVisualRefresh, {
         isPlaceholder: isPlaceholder
-      }, !isPlaceholder && icon), /*#__PURE__*/React.createElement(_styled.TooltipWrapper, null, /*#__PURE__*/React.createElement(_tooltip.default, {
+      }, !isPlaceholder && icon), /*#__PURE__*/React.createElement(_styled.TooltipWrapperOldVisualRefresh, null, /*#__PURE__*/React.createElement(_tooltip.default, {
         content: text,
         hideTooltipOnMouseDown: true
-      }, /*#__PURE__*/React.createElement(_styled.TextWrapper, {
+      }, /*#__PURE__*/React.createElement(_styled.TextWrapperOldVisualRefresh, {
         isPlaceholder: isPlaceholder
       }, !isPlaceholder && /*#__PURE__*/React.createElement("a", {
         href: href,
@@ -65,8 +84,20 @@ var ExpandedFrameNew = function ExpandedFrameNew(_ref) {
       }, text)))))
     );
   };
+  var interactive = isInteractive();
+  var showBackgroundAlways = frameStyle === 'show' || isSelected && frameStyle !== 'hide';
+  var showBackgroundOnHover = interactive && frameStyle !== 'hide';
   var renderContent = function renderContent() {
-    return /*#__PURE__*/React.createElement(_styled.Content, {
+    if ((0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1')) {
+      return /*#__PURE__*/React.createElement("div", {
+        "data-testid": "embed-content-wrapper",
+        // This fixes an issue with input fields in cross domain iframes (ie. databases and jira fields from different domains)
+        // See: HOT-107830
+        contentEditable: false,
+        className: (0, _runtime.ax)([styles.contentStyle, setOverflow && allowScrollBar && styles.contentOverflowAuto, interactive && !showBackgroundAlways && !showBackgroundOnHover && styles.contentInteractiveActiveBorder])
+      }, children);
+    }
+    return /*#__PURE__*/React.createElement(_styled.ContentOldVisualRefresh, {
       "data-testid": "embed-content-wrapper",
       allowScrollBar: allowScrollBar,
       removeOverflow: !setOverflow,
@@ -79,8 +110,26 @@ var ExpandedFrameNew = function ExpandedFrameNew(_ref) {
       suppressContentEditableWarning: true
     }, children);
   };
+  if ((0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1')) {
+    return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      className: (0, _runtime.ax)([styles.linkWrapper, inheritDimensions && styles.linkWrapperInheritDimensions, isSelected && frameStyle !== 'hide' && styles.linkWrapperSelected, showBackgroundAlways && styles.linkWrapperBorderAndBackground, showBackgroundOnHover && !showBackgroundAlways && styles.linkWrapperInteractiveNotHidden, _styled.className]),
+      style: {
+        minWidth: minWidth ? "".concat(minWidth, "px") : '',
+        maxWidth: maxWidth ? "".concat(maxWidth, "px") : ''
+      },
+      "data-testid": testId,
+      "data-trello-do-not-use-override": testId
+      // Due to limitations of testing library, we can't assert ::after
+      ,
+      "data-is-selected": isSelected
+    }, (isPlaceholder || !href) && {
+      'data-wrapper-type': 'default',
+      'data-is-interactive': isInteractive()
+    }), renderHeader(), renderContent());
+  }
   if (!isPlaceholder && href) {
-    return /*#__PURE__*/React.createElement(_styled.LinkWrapper
+    return /*#__PURE__*/React.createElement(_styled.LinkWrapperOldVisualRefresh
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     , {
       className: _styled.className,
@@ -97,7 +146,7 @@ var ExpandedFrameNew = function ExpandedFrameNew(_ref) {
       inheritDimensions: inheritDimensions
     }, renderHeader(), renderContent());
   } else {
-    return /*#__PURE__*/React.createElement(_styled.Wrapper
+    return /*#__PURE__*/React.createElement(_styled.WrapperOldVisualRefresh
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     , {
       className: _styled.className,
@@ -120,4 +169,18 @@ var ExpandedFrame = exports.ExpandedFrame = function ExpandedFrame(props) {
   } else {
     return /*#__PURE__*/React.createElement(_ExpandedFrameOld.ExpandedFrameOld, props);
   }
+};
+var styles = {
+  linkWrapper: "_zulpu2gc _kqswh2mm _1e0c1txw _2lx21bp4 _4t3ik5xz _ca0qu2gc _u5f3u2gc _n3tdu2gc _19bvu2gc _uiztglyw _qc5o94zs _14mj1crf _aetrb3bt _18postnw _15l2idpf _32rxidpf _1x88idpf _19doidpf _1hfk18uv _1bqqidpf _u94kidpf _1ifiidpf",
+  linkWrapperInheritDimensions: "_4t3i1osq",
+  linkWrapperSelected: "_8x3u92p9",
+  linkWrapperBorderAndBackground: "_1tqzzgxb _1hfkhp5a _1ifikb7n",
+  linkWrapperInteractiveNotHidden: "_hcgvzgxb _4tpuhp5a _x148kb7n",
+  header: "_zulp1b66 _1e0c1txw _4cvr1h6o _4t3igktf _1pbykb7n",
+  tooltipWrapper: "_1reo15vq _18m915vq",
+  headerAnchor: "_11c81il0 _9oik18uv _1bnxglyw _jf4cnqa1",
+  headerIcon: "_1bsb7vkz _4t3i7vkz",
+  contentStyle: "_19it1pvm _2rko1y44 _1reo15vq _18m915vq _v56414au _bfhkhp5a _16jlkb7n _4t3i1osq _1pbykb7n",
+  contentInteractiveActiveBorder: "_1jhm1ips",
+  contentOverflowAuto: "_1reo1wug _18m91wug"
 };

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

@@ -6,7 +6,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.embedHeaderHeight = exports.className = exports.Wrapper = exports.TooltipWrapper = exports.Thumbnail = exports.TextWrapper = exports.LinkWrapper = exports.Image = exports.IconWrapper = exports.Header = exports.Content = void 0;
+exports.embedHeaderHeight = exports.className = exports.WrapperOldVisualRefresh = exports.TooltipWrapperOldVisualRefresh = exports.Thumbnail = exports.TextWrapperOldVisualRefresh = exports.LinkWrapperOldVisualRefresh = exports.Image = exports.IconWrapperOldVisualRefresh = exports.HeaderOldVisualRefresh = exports.ContentOldVisualRefresh = void 0;
 require("./styled.compiled.css");
 var _react = _interopRequireWildcard(require("react"));
 var React = _react;
@@ -37,8 +37,9 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var className = exports.className = 'media-card-frame';
 var embedHeaderHeight = exports.embedHeaderHeight = 32;
+// TODO Delete when cleaning platform-linking-visual-refresh-v1
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled,@atlaskit/ui-styling-standard/no-exported-styles
-var LinkWrapper = exports.LinkWrapper = (0, _react.forwardRef)(function (_ref, __cmplr) {
+var LinkWrapperOldVisualRefresh = exports.LinkWrapperOldVisualRefresh = (0, _react.forwardRef)(function (_ref, __cmplr) {
   var _ref$as = _ref.as,
     C = _ref$as === void 0 ? "div" : _ref$as,
     __cmpls = _ref.style,
@@ -60,11 +61,12 @@ var LinkWrapper = exports.LinkWrapper = (0, _react.forwardRef)(function (_ref, _
   }));
 });
 
+// TODO Delete when cleaning platform-linking-visual-refresh-v1
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled,@atlaskit/ui-styling-standard/no-exported-styles
 if (process.env.NODE_ENV !== 'production') {
-  LinkWrapper.displayName = 'LinkWrapper';
+  LinkWrapperOldVisualRefresh.displayName = 'LinkWrapperOldVisualRefresh';
 }
-var Wrapper = exports.Wrapper = (0, _react.forwardRef)(function (_ref2, __cmplr) {
+var WrapperOldVisualRefresh = exports.WrapperOldVisualRefresh = (0, _react.forwardRef)(function (_ref2, __cmplr) {
   var _ref2$as = _ref2.as,
     C = _ref2$as === void 0 ? "div" : _ref2$as,
     __cmpls = _ref2.style,
@@ -86,11 +88,12 @@ var Wrapper = exports.Wrapper = (0, _react.forwardRef)(function (_ref2, __cmplr)
   }));
 });
 
+// TODO Delete when cleaning platform-linking-visual-refresh-v1
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled,@atlaskit/ui-styling-standard/no-exported-styles
 if (process.env.NODE_ENV !== 'production') {
-  Wrapper.displayName = 'Wrapper';
+  WrapperOldVisualRefresh.displayName = 'WrapperOldVisualRefresh';
 }
-var Header = exports.Header = (0, _react.forwardRef)(function (_ref3, __cmplr) {
+var HeaderOldVisualRefresh = exports.HeaderOldVisualRefresh = (0, _react.forwardRef)(function (_ref3, __cmplr) {
   var _ref3$as = _ref3.as,
     C = _ref3$as === void 0 ? "div" : _ref3$as,
     __cmpls = _ref3.style,
@@ -104,11 +107,12 @@ var Header = exports.Header = (0, _react.forwardRef)(function (_ref3, __cmplr) {
   }));
 });
 
+// TODO Delete when cleaning platform-linking-visual-refresh-v1
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled,@atlaskit/ui-styling-standard/no-exported-styles
 if (process.env.NODE_ENV !== 'production') {
-  Header.displayName = 'Header';
+  HeaderOldVisualRefresh.displayName = 'HeaderOldVisualRefresh';
 }
-var IconWrapper = exports.IconWrapper = (0, _react.forwardRef)(function (_ref4, __cmplr) {
+var IconWrapperOldVisualRefresh = exports.IconWrapperOldVisualRefresh = (0, _react.forwardRef)(function (_ref4, __cmplr) {
   var _ref4$as = _ref4.as,
     C = _ref4$as === void 0 ? "div" : _ref4$as,
     __cmpls = _ref4.style,
@@ -122,11 +126,12 @@ var IconWrapper = exports.IconWrapper = (0, _react.forwardRef)(function (_ref4,
   }));
 });
 
+// TODO Delete when cleaning platform-linking-visual-refresh-v1
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled,@atlaskit/ui-styling-standard/no-exported-styles
 if (process.env.NODE_ENV !== 'production') {
-  IconWrapper.displayName = 'IconWrapper';
+  IconWrapperOldVisualRefresh.displayName = 'IconWrapperOldVisualRefresh';
 }
-var TextWrapper = exports.TextWrapper = (0, _react.forwardRef)(function (_ref5, __cmplr) {
+var TextWrapperOldVisualRefresh = exports.TextWrapperOldVisualRefresh = (0, _react.forwardRef)(function (_ref5, __cmplr) {
   var _ref5$as = _ref5.as,
     C = _ref5$as === void 0 ? "div" : _ref5$as,
     __cmpls = _ref5.style,
@@ -140,11 +145,12 @@ var TextWrapper = exports.TextWrapper = (0, _react.forwardRef)(function (_ref5,
   }));
 });
 
+// TODO Delete when cleaning platform-linking-visual-refresh-v1
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled,@atlaskit/ui-styling-standard/no-exported-styles
 if (process.env.NODE_ENV !== 'production') {
-  TextWrapper.displayName = 'TextWrapper';
+  TextWrapperOldVisualRefresh.displayName = 'TextWrapperOldVisualRefresh';
 }
-var TooltipWrapper = exports.TooltipWrapper = (0, _react.forwardRef)(function (_ref6, __cmplr) {
+var TooltipWrapperOldVisualRefresh = exports.TooltipWrapperOldVisualRefresh = (0, _react.forwardRef)(function (_ref6, __cmplr) {
   var _ref6$as = _ref6.as,
     C = _ref6$as === void 0 ? "div" : _ref6$as,
     __cmpls = _ref6.style,
@@ -156,14 +162,15 @@ var TooltipWrapper = exports.TooltipWrapper = (0, _react.forwardRef)(function (_
   }));
 });
 
+// TODO Delete when cleaning platform-linking-visual-refresh-v1
 // NB: `overflow` is kept as `hidden` since
 // the internal contents of the `iframe` should
 // manage scrolling behaviour.
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled,@atlaskit/ui-styling-standard/no-exported-styles
 if (process.env.NODE_ENV !== 'production') {
-  TooltipWrapper.displayName = 'TooltipWrapper';
+  TooltipWrapperOldVisualRefresh.displayName = 'TooltipWrapperOldVisualRefresh';
 }
-var Content = exports.Content = (0, _react.forwardRef)(function (_ref7, __cmplr) {
+var ContentOldVisualRefresh = exports.ContentOldVisualRefresh = (0, _react.forwardRef)(function (_ref7, __cmplr) {
   var _ref7$as = _ref7.as,
     C = _ref7$as === void 0 ? "div" : _ref7$as,
     __cmpls = _ref7.style,
@@ -179,7 +186,7 @@ var Content = exports.Content = (0, _react.forwardRef)(function (_ref7, __cmplr)
   }));
 });
 if (process.env.NODE_ENV !== 'production') {
-  Content.displayName = 'Content';
+  ContentOldVisualRefresh.displayName = 'ContentOldVisualRefresh';
 }
 var getSizeWithUnit = function getSizeWithUnit() {
   var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '100%';

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

@@ -1,6 +1,4 @@
 /* index.tsx generated by @compiled/babel-plugin v0.36.0 */
-/* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
-/* eslint-disable @atlaskit/ui-styling-standard/no-unsafe-values */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -17,6 +15,8 @@ Object.defineProperty(exports, "getContainerStyles", {
 });
 require("./index.compiled.css");
 var _runtime = require("@compiled/react/runtime");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactMagneticDi = require("react-magnetic-di");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
@@ -28,11 +28,16 @@ var _flexible = require("../../../../utils/flexible");
 var _hoverCardControl = _interopRequireDefault(require("./hover-card-control"));
 var _indexOld = _interopRequireWildcard(require("./indexOld"));
 var _layeredLink = _interopRequireDefault(require("./layered-link"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-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 _excluded = ["containerSize"];
+/* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
+/* eslint-disable @atlaskit/ui-styling-standard/no-unsafe-values */
 /**
  * Eventually these exports should be removed on FF clean up bandicoots-compiled-migration-smartcard
  */
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+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; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var getChildrenOptions = exports.getChildrenOptions = function getChildrenOptions(children, context) {
   var options = {};
   if ((0, _utils.isFlexUiPreviewPresent)(context)) {
@@ -55,18 +60,31 @@ var getChildrenOptions = exports.getChildrenOptions = function getChildrenOption
 var renderChildren = function renderChildren(children, containerSize, containerTheme, status, retry, onClick) {
   return _react.default.Children.map(children, function (child) {
     if ( /*#__PURE__*/_react.default.isValidElement(child) && (0, _flexible.isFlexibleUiBlock)(child)) {
-      var blockSize = child.props.size;
-      var size = blockSize || containerSize;
       if ((0, _flexible.isFlexibleUiTitleBlock)(child)) {
-        return /*#__PURE__*/_react.default.cloneElement(child, {
-          // @ts-expect-error
-          onClick: onClick,
-          retry: retry,
-          size: size,
-          status: status,
-          theme: containerTheme
-        });
+        if ((0, _flexible.isStyleCacheProvider)(child)) {
+          return updateChildren(child, {
+            onClick: onClick,
+            retry: retry,
+            containerSize: containerSize,
+            status: status,
+            theme: containerTheme
+          });
+        } else {
+          var _blockSize = child.props.size;
+          var _size = _blockSize || containerSize;
+          return /*#__PURE__*/_react.default.cloneElement(child, {
+            // @ts-expect-error
+            onClick: onClick,
+            retry: retry,
+            size: _size,
+            status: status,
+            theme: containerTheme
+          });
+        }
       }
+      var blockSize = child.props.size;
+      var size = blockSize || containerSize;
+
       // @ts-expect-error
       return /*#__PURE__*/_react.default.cloneElement(child, {
         size: size,
@@ -75,6 +93,25 @@ var renderChildren = function renderChildren(children, containerSize, containerT
     }
   });
 };
+var updateChildren = function updateChildren(node, _ref) {
+  var containerSize = _ref.containerSize,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var updatedChildren = _react.default.Children.map(node.props.children, function (child) {
+    if ( /*#__PURE__*/_react.default.isValidElement(child) && (0, _flexible.isFlexibleUiTitleBlock)(child)) {
+      var _ref2 = child.props,
+        blockSize = _ref2.size;
+      var size = blockSize || containerSize;
+      return /*#__PURE__*/_react.default.cloneElement(child, _objectSpread(_objectSpread({}, props), {}, {
+        size: size
+      }));
+    } else {
+      return child;
+    }
+  });
+  return /*#__PURE__*/_react.default.cloneElement(node, {
+    children: updatedChildren
+  });
+};
 var getTitleBlockProps = function getTitleBlockProps(children) {
   var block = _react.default.Children.toArray(children).find(function (child) {
     return (0, _flexible.isFlexibleUiTitleBlock)(child);
@@ -84,13 +121,13 @@ var getTitleBlockProps = function getTitleBlockProps(children) {
   }
 };
 var getLayeredLink = function getLayeredLink(testId, context, children, onClick) {
-  var _ref = context || {},
-    title = _ref.title,
-    _ref$url = _ref.url,
-    url = _ref$url === void 0 ? '' : _ref$url;
-  var _ref2 = getTitleBlockProps(children) || {},
-    target = _ref2.anchorTarget,
-    text = _ref2.text;
+  var _ref3 = context || {},
+    title = _ref3.title,
+    _ref3$url = _ref3.url,
+    url = _ref3$url === void 0 ? '' : _ref3$url;
+  var _ref4 = getTitleBlockProps(children) || {},
+    target = _ref4.anchorTarget,
+    text = _ref4.text;
   return /*#__PURE__*/_react.default.createElement(_layeredLink.default, {
     onClick: onClick,
     target: target,
@@ -218,29 +255,29 @@ var previewOnRightStyleMap = {
  * @internal
  * @see Block
  */
-var ContainerNew = function ContainerNew(_ref3) {
-  var children = _ref3.children,
-    _ref3$clickableContai = _ref3.clickableContainer,
-    clickableContainer = _ref3$clickableContai === void 0 ? false : _ref3$clickableContai,
-    _ref3$hideBackground = _ref3.hideBackground,
-    hideBackground = _ref3$hideBackground === void 0 ? false : _ref3$hideBackground,
-    _ref3$hideElevation = _ref3.hideElevation,
-    hideElevation = _ref3$hideElevation === void 0 ? false : _ref3$hideElevation,
-    _ref3$hidePadding = _ref3.hidePadding,
-    hidePadding = _ref3$hidePadding === void 0 ? false : _ref3$hidePadding,
-    onClick = _ref3.onClick,
-    retry = _ref3.retry,
-    _ref3$showHoverPrevie = _ref3.showHoverPreview,
-    showHoverPreview = _ref3$showHoverPrevie === void 0 ? false : _ref3$showHoverPrevie,
-    hoverPreviewOptions = _ref3.hoverPreviewOptions,
-    actionOptions = _ref3.actionOptions,
-    _ref3$size = _ref3.size,
-    size = _ref3$size === void 0 ? _constants.SmartLinkSize.Medium : _ref3$size,
-    status = _ref3.status,
-    _ref3$testId = _ref3.testId,
-    testId = _ref3$testId === void 0 ? 'smart-links-container' : _ref3$testId,
-    _ref3$theme = _ref3.theme,
-    theme = _ref3$theme === void 0 ? _constants.SmartLinkTheme.Link : _ref3$theme;
+var ContainerNew = function ContainerNew(_ref5) {
+  var children = _ref5.children,
+    _ref5$clickableContai = _ref5.clickableContainer,
+    clickableContainer = _ref5$clickableContai === void 0 ? false : _ref5$clickableContai,
+    _ref5$hideBackground = _ref5.hideBackground,
+    hideBackground = _ref5$hideBackground === void 0 ? false : _ref5$hideBackground,
+    _ref5$hideElevation = _ref5.hideElevation,
+    hideElevation = _ref5$hideElevation === void 0 ? false : _ref5$hideElevation,
+    _ref5$hidePadding = _ref5.hidePadding,
+    hidePadding = _ref5$hidePadding === void 0 ? false : _ref5$hidePadding,
+    onClick = _ref5.onClick,
+    retry = _ref5.retry,
+    _ref5$showHoverPrevie = _ref5.showHoverPreview,
+    showHoverPreview = _ref5$showHoverPrevie === void 0 ? false : _ref5$showHoverPrevie,
+    hoverPreviewOptions = _ref5.hoverPreviewOptions,
+    actionOptions = _ref5.actionOptions,
+    _ref5$size = _ref5.size,
+    size = _ref5$size === void 0 ? _constants.SmartLinkSize.Medium : _ref5$size,
+    status = _ref5.status,
+    _ref5$testId = _ref5.testId,
+    testId = _ref5$testId === void 0 ? 'smart-links-container' : _ref5$testId,
+    _ref5$theme = _ref5.theme,
+    theme = _ref5$theme === void 0 ? _constants.SmartLinkTheme.Link : _ref5$theme;
   var padding = hidePadding ? '0rem' : getPadding(size);
   var gap = getGap(size);
   var context = (0, _react.useContext)(_flexibleUiContext.FlexibleUiContext);

package/dist/cjs/view/InlineCard/common/action-button/index.js

@@ -19,13 +19,16 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 var ActionButton = exports.ActionButton = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var children = _ref.children,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  // `Button transforms `testId` into `data-testid`. We need to transform it back to `testId`
+  var testId = props["data-testid"];
   return /*#__PURE__*/_react.default.createElement(_primitives.Box, (0, _extends2.default)({
     as: "span",
     ref: ref,
     xcss: [actionButtonStyle, !props.disabled && actionButtonNotDisabledStyle]
   }, props, {
     "aria-disabled": props.disabled,
-    role: "button"
+    role: "button",
+    testId: testId
   }), /*#__PURE__*/_react.default.createElement(_primitives.Box, {
     as: "span",
     xcss: internalButtonStyle

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: "34.10.3",
+  packageVersion: "34.10.5",
   componentName: 'linkUrl'
 };
 var Anchor = (0, _click.withLinkClickedEvent)('a');

package/dist/cjs/view/common/UnauthorisedViewContent.js

@@ -9,6 +9,8 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _primitives = require("@atlaskit/primitives");
 var _useAnalyticsEvents2 = require("../../common/analytics/generated/use-analytics-events");
 var _constants = require("../../constants");
 var _messages = require("../../messages");
@@ -33,7 +35,12 @@ var UnauthorisedViewContent = function UnauthorisedViewContent(_ref) {
     values: {
       context: providerName
     }
-  })) : /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.connect_unauthorised_account_description_no_provider), ' ', /*#__PURE__*/_react.default.createElement("a", {
+  })) : /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.connect_unauthorised_account_description_no_provider), ' ', (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? /*#__PURE__*/_react.default.createElement(_primitives.Anchor, {
+    href: isProductIntegrationSupported ? _constants.CONTENT_URL_3P_ACCOUNT_AUTH : _constants.CONTENT_URL_SECURITY_AND_PERMISSIONS,
+    target: "_blank",
+    testId: "".concat(testId, "-learn-more"),
+    onClick: handleLearnMoreClick
+  }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, learnMoreMessage)) : /*#__PURE__*/_react.default.createElement("a", {
     href: isProductIntegrationSupported ? _constants.CONTENT_URL_3P_ACCOUNT_AUTH : _constants.CONTENT_URL_SECURITY_AND_PERMISSIONS,
     target: "_blank",
     "data-testid": "".concat(testId, "-learn-more"),

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: "34.10.3"
+  packageVersion: "34.10.5"
 };
 export let TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/es2019/utils/flexible.js

@@ -72,7 +72,6 @@ export const isFlexibleUiElement = node => {
   return false;
 };
 export const isFlexibleUiTitleBlock = node => {
-  var _node$type3;
   if (!fg('bandicoots-compiled-migration-smartcard')) {
     return /*#__PURE__*/React.isValidElement(node) && node.type === TitleBlock;
   }
@@ -82,7 +81,7 @@ export const isFlexibleUiTitleBlock = node => {
   if (node.type === TitleBlock) {
     return true;
   }
-  if (typeof node.type !== 'string' && ((_node$type3 = node.type) === null || _node$type3 === void 0 ? void 0 : _node$type3.name) === 'StyleCacheProvider' && node.props.children) {
+  if (isStyleCacheProvider(node)) {
     // Component wrapped with compiled at runtime, check for children
     let isChildrenValid = true;
     React.Children.map(node.props.children, child => {
@@ -102,6 +101,10 @@ export const isFlexibleUiTitleBlock = node => {
   }
   return false;
 };
+export const isStyleCacheProvider = node => {
+  var _node$type3;
+  return typeof node.type !== 'string' && ((_node$type3 = node.type) === null || _node$type3 === void 0 ? void 0 : _node$type3.name) === 'StyleCacheProvider' && node.props.children;
+};
 export const isFlexibleUiPreviewBlock = node => {
   var _node$type4;
   if (!fg('bandicoots-compiled-migration-smartcard')) {