@atlaskit/smart-card 26.48.3 → 26.48.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/smart-card
 
+## 26.48.4
+
+### Patch Changes
+
+- [#76818](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/76818) [`0752383c4c98`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0752383c4c98) - Fix embed unresolved view not respecting frameStyle prop
+
 ## 26.48.3
 
 ### Patch Changes

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

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

package/dist/cjs/utils/index.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.sleep = exports.openUrl = exports.isSpecialKey = exports.isSpecialEvent = exports.isSpecialClick = exports.isIntersectionObserverSupported = exports.isIframe = exports.isCardWithData = exports.importWithRetry = exports.handleOnClick = exports.getLabelForFileType = exports.getIframeSandboxAttribute = exports.getIconForFileType = exports.downloadUrl = void 0;
+exports.sleep = exports.openUrl = exports.isSpecialKey = exports.isSpecialEvent = exports.isSpecialClick = exports.isIntersectionObserverSupported = exports.isIframe = exports.isCardWithData = exports.importWithRetry = exports.handleOnClick = exports.getLabelForFileType = exports.getIframeSandboxAttribute = exports.getIconForFileType = exports.downloadUrl = exports.combineFrameStyle = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -451,4 +451,17 @@ var openUrl = exports.openUrl = /*#__PURE__*/function () {
   return function openUrl(_x3) {
     return _ref3.apply(this, arguments);
   };
-}();
+}();
+
+/**
+ * Migrate internal usages of the deprecated isFrameVisible to frameStyle
+ * This function is to be removed on deprecation of isFrameVisible.
+ */
+var combineFrameStyle = exports.combineFrameStyle = function combineFrameStyle(frameStyle, isFrameVisible) {
+  if (frameStyle !== undefined) {
+    return frameStyle;
+  }
+  if (isFrameVisible) {
+    return 'show';
+  }
+};

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

@@ -30,7 +30,7 @@ function Component(_ref) {
     isSelected = _ref.isSelected,
     isHovered = _ref.isHovered,
     isFrameVisible = _ref.isFrameVisible,
-    frameStyle = _ref.frameStyle,
+    frameStyleProp = _ref.frameStyle,
     platform = _ref.platform,
     onClick = _ref.onClick,
     appearance = _ref.appearance,
@@ -75,6 +75,7 @@ function Component(_ref) {
   }, [children]);
   var enableFlexibleBlockCardFlag = Boolean((0, _linkProvider.useFeatureFlag)('enableFlexibleBlockCard'));
   var actionOptions = (0, _combineActionOptions.combineActionOptions)(actionOptionsProp, showServerActions, showActions, platform);
+  var frameStyle = (0, _utils.combineFrameStyle)(frameStyleProp, isFrameVisible);
 
   // Setup UI handlers.
   var handleClickWrapper = (0, _react.useCallback)(function (event) {
@@ -261,7 +262,6 @@ function Component(_ref) {
         handleInvoke: handleInvoke,
         analytics: analytics,
         isSelected: isSelected,
-        isFrameVisible: isFrameVisible,
         frameStyle: frameStyle,
         platform: platform,
         onResolve: onResolve,

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

@@ -1,16 +1,14 @@
 "use strict";
 
-var _typeof = require("@babel/runtime/helpers/typeof");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ExpandedFrame = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _styled = require("./styled");
 var _handlers = require("../../BlockCard/utils/handlers");
 var _useLinkClicked = require("../../../state/analytics/useLinkClicked");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var ExpandedFrame = exports.ExpandedFrame = function ExpandedFrame(_ref) {
   var _ref$isPlaceholder = _ref.isPlaceholder,
     isPlaceholder = _ref$isPlaceholder === void 0 ? false : _ref$isPlaceholder,
@@ -19,8 +17,8 @@ var ExpandedFrame = exports.ExpandedFrame = function ExpandedFrame(_ref) {
     icon = _ref.icon,
     text = _ref.text,
     isSelected = _ref.isSelected,
-    isFrameVisible = _ref.isFrameVisible,
-    frameStyle = _ref.frameStyle,
+    _ref$frameStyle = _ref.frameStyle,
+    frameStyle = _ref$frameStyle === void 0 ? 'showOnHover' : _ref$frameStyle,
     href = _ref.href,
     minWidth = _ref.minWidth,
     maxWidth = _ref.maxWidth,
@@ -36,9 +34,6 @@ var ExpandedFrame = exports.ExpandedFrame = function ExpandedFrame(_ref) {
     return (0, _handlers.handleClickCommon)(event, onClick);
   };
   var handleMouseDown = (0, _useLinkClicked.useMouseDownEvent)();
-  var calculatedFrameStyle = (0, _react.useMemo)(function () {
-    return frameStyle !== undefined ? frameStyle : isFrameVisible ? 'show' : 'showOnHover';
-  }, [frameStyle, isFrameVisible]);
   var renderHeader = function renderHeader() {
     return /*#__PURE__*/_react.default.createElement(_styled.Header, {
       className: "embed-header",
@@ -66,7 +61,7 @@ var ExpandedFrame = exports.ExpandedFrame = function ExpandedFrame(_ref) {
       className: _styled.className,
       isInteractive: isInteractive(),
       isSelected: isSelected,
-      frameStyle: calculatedFrameStyle,
+      frameStyle: frameStyle,
       minWidth: minWidth,
       maxWidth: maxWidth,
       "data-testid": testId,
@@ -82,7 +77,7 @@ var ExpandedFrame = exports.ExpandedFrame = function ExpandedFrame(_ref) {
       isInteractive: isInteractive(),
       isSelected: isSelected,
       minWidth: minWidth,
-      frameStyle: calculatedFrameStyle,
+      frameStyle: frameStyle,
       maxWidth: maxWidth,
       "data-testid": testId,
       "data-trello-do-not-use-override": testId,

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

@@ -33,7 +33,6 @@ var EmbedCard = exports.EmbedCard = /*#__PURE__*/_react.default.forwardRef(funct
     analytics = _ref.analytics,
     handleInvoke = _ref.handleInvoke,
     isSelected = _ref.isSelected,
-    isFrameVisible = _ref.isFrameVisible,
     frameStyle = _ref.frameStyle,
     platform = _ref.platform,
     onResolve = _ref.onResolve,
@@ -71,7 +70,6 @@ var EmbedCard = exports.EmbedCard = /*#__PURE__*/_react.default.forwardRef(funct
       if (resolvedViewProps.preview) {
         return /*#__PURE__*/_react.default.createElement(_ResolvedView2.EmbedCardResolvedView, (0, _extends2.default)({}, resolvedViewProps, {
           isSelected: isSelected,
-          isFrameVisible: isFrameVisible,
           frameStyle: frameStyle,
           inheritDimensions: inheritDimensions,
           onClick: handleFrameClick,
@@ -114,6 +112,7 @@ var EmbedCard = exports.EmbedCard = /*#__PURE__*/_react.default.forwardRef(funct
         analytics: analytics,
         context: unauthorisedViewProps.context,
         extensionKey: extensionKey,
+        frameStyle: frameStyle,
         isProductIntegrationSupported: isProductIntegrationSupported,
         inheritDimensions: inheritDimensions,
         isSelected: isSelected,
@@ -134,8 +133,8 @@ var EmbedCard = exports.EmbedCard = /*#__PURE__*/_react.default.forwardRef(funct
       if (forbiddenViewProps.preview) {
         return /*#__PURE__*/_react.default.createElement(_ResolvedView2.EmbedCardResolvedView, (0, _extends2.default)({}, forbiddenViewProps, {
           title: forbiddenViewProps.link,
+          frameStyle: frameStyle,
           isSelected: isSelected,
-          isFrameVisible: isFrameVisible,
           inheritDimensions: inheritDimensions,
           onClick: handleFrameClick,
           ref: iframeRef
@@ -149,6 +148,7 @@ var EmbedCard = exports.EmbedCard = /*#__PURE__*/_react.default.forwardRef(funct
       });
       return /*#__PURE__*/_react.default.createElement(_forbiddenView.default, {
         context: forbiddenViewProps.context,
+        frameStyle: frameStyle,
         inheritDimensions: inheritDimensions,
         isSelected: isSelected,
         onAuthorize: handleAuthorize,
@@ -172,6 +172,7 @@ var EmbedCard = exports.EmbedCard = /*#__PURE__*/_react.default.forwardRef(funct
       }) : undefined;
       return /*#__PURE__*/_react.default.createElement(_notFoundView.default, {
         context: notFoundViewProps.context,
+        frameStyle: frameStyle,
         inheritDimensions: inheritDimensions,
         isSelected: isSelected,
         onClick: handleFrameClick,

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

@@ -19,7 +19,6 @@ var EmbedCardResolvedView = exports.EmbedCardResolvedView = /*#__PURE__*/_react2
     context = _ref.context,
     onClick = _ref.onClick,
     isSelected = _ref.isSelected,
-    isFrameVisible = _ref.isFrameVisible,
     frameStyle = _ref.frameStyle,
     preview = _ref.preview,
     title = _ref.title,
@@ -57,7 +56,6 @@ var EmbedCardResolvedView = exports.EmbedCardResolvedView = /*#__PURE__*/_react2
   }
   return (0, _react.jsx)(_ExpandedFrame.ExpandedFrame, {
     isSelected: isSelected,
-    isFrameVisible: isFrameVisible,
     frameStyle: frameStyle,
     href: link,
     testId: testId,

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

@@ -19,6 +19,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var UnresolvedView = function UnresolvedView(_ref) {
   var button = _ref.button,
     description = _ref.description,
+    frameStyle = _ref.frameStyle,
     iconUrlOrElement = _ref.icon,
     image = _ref.image,
     inheritDimensions = _ref.inheritDimensions,
@@ -42,8 +43,15 @@ var UnresolvedView = function UnresolvedView(_ref) {
     });
   }, [iconUrlOrElement]);
   return (0, _react.jsx)(_ExpandedFrame.ExpandedFrame, {
-    allowScrollBar: true,
-    frameStyle: "show",
+    allowScrollBar: true
+    // EDM-9259: Fix embed frame showing on unresolved views when frameStyle is set to hide.
+    // Set fallback to 'show' here to maintain the current behaviour when platform.editor.show-embed-card-frame-renderer is OFF.
+    // Remove 'show' on platform.editor.show-embed-card-frame-renderer cleanup as frameStyle will be set to 'show' both in renderer and editor.
+    // We want all views to be consistent and respect frameStyle instead of
+    // having resolved view default to showOnHover and unresolved view default to show.
+    // Default frameStyle is set inside <ExpandedFrame />
+    ,
+    frameStyle: frameStyle !== null && frameStyle !== void 0 ? frameStyle : 'show',
     href: url,
     icon: icon,
     inheritDimensions: inheritDimensions,

package/dist/cjs/view/FlexibleCard/components/actions/action/preview-action/index.js

@@ -12,8 +12,6 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 var _react = _interopRequireDefault(require("react"));
 var _index = _interopRequireDefault(require("../index"));
 var _flexibleUiContext = require("../../../../../../state/flexible-ui-context");
-var _reactIntlNext = require("react-intl-next");
-var _messages = require("../../../../../../messages");
 var _utils = require("../../../utils");
 var _useInvokeClientAction = _interopRequireDefault(require("../../../../../../state/hooks/use-invoke-client-action"));
 var _constants = require("../../../../../../constants");
@@ -75,8 +73,7 @@ var PreviewAction = function PreviewAction(props) {
         if (_onClick) {
           _onClick();
         }
-      },
-      content: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.preview_improved)
+      }
     });
     return /*#__PURE__*/_react.default.createElement(_index.default, (0, _extends2.default)({}, action, {
       appearance: appearance,

package/dist/cjs/view/FlexibleCard/components/blocks/title-block/errored/index.js

@@ -16,14 +16,13 @@ var _block = _interopRequireDefault(require("../../block"));
 var _constants = require("../../../../../../constants");
 var _utils = require("../../../utils");
 var _elementGroup = _interopRequireDefault(require("../../element-group"));
-var _token = require("../../../../../../utils/token");
 var _excluded = ["actionGroup", "retry", "position", "testId", "title", "hideIcon"];
 var _templateObject, _templateObject2;
 /** @jsx jsx */
-var actionStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  cursor: pointer;\n  :hover {\n    color: ", ";\n    text-decoration: underline;\n  }\n"])), _token.tokens.errorMessageHover);
+var actionStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  cursor: pointer;\n  :hover {\n    color: ", ";\n    text-decoration: underline;\n  }\n"])), "var(--ds-text-subtle, #8993A4)");
 var getMessageStyles = function getMessageStyles(size, hasAction) {
   var sizeStyles = (0, _utils.getLinkSizeStyles)(size);
-  return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    flex: 1 1 auto;\n    justify-content: flex-end;\n    ", "\n    ", "\n    ", "\n    color: ", ";\n    :focus {\n      outline: ", " solid 2px;\n    }\n  "])), hasAction ? actionStyles : '', sizeStyles, (0, _utils.getTruncateStyles)(1, (0, _utils.getLinkLineHeight)(size)), _token.tokens.errorMessage, _token.tokens.focus);
+  return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    flex: 1 1 auto;\n    justify-content: flex-end;\n    ", "\n    ", "\n    ", "\n    color: ", ";\n    :focus {\n      outline: ", " solid 2px;\n    }\n  "])), hasAction ? actionStyles : '', sizeStyles, (0, _utils.getTruncateStyles)(1, (0, _utils.getLinkLineHeight)(size)), "var(--ds-text-disabled, #6B778C)", "var(--ds-border-focused, #388BFF)");
 };
 
 /**

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

@@ -11,7 +11,6 @@ var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _constants = require("../../../../constants");
 var _flexible = require("../../../../utils/flexible");
-var _token = require("../../../../utils/token");
 var _flexibleUiContext = require("../../../../state/flexible-ui-context");
 var _layeredLink = _interopRequireDefault(require("./layered-link"));
 var _hoverCardControl = _interopRequireDefault(require("./hover-card-control"));
@@ -78,7 +77,7 @@ var getChildrenOptions = function getChildrenOptions(children, context) {
 };
 var getContainerStyles = exports.getContainerStyles = function getContainerStyles(size, hideBackground, hideElevation, hidePadding, clickableContainer, childrenOptions) {
   var paddingCss = getContainerPaddingStyles(size, hidePadding, childrenOptions);
-  return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    gap: ", " 0;\n    flex-direction: column;\n    min-width: 0;\n    overflow-x: hidden;\n    position: relative;\n    ", "\n    ", "\n    ", "\n    ", "\n    &:hover ~ .actions-button-group {\n      opacity: 1;\n    }\n    a:focus,\n    .has-action:focus {\n      outline-offset: -2px;\n    }\n  "])), getGap(size), hideBackground ? '' : "background-color: ".concat(_token.tokens.background, ";"), paddingCss, hideElevation ? '' : elevationStyles, clickableContainer ? clickableContainerStyles : '');
+  return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    gap: ", " 0;\n    flex-direction: column;\n    min-width: 0;\n    overflow-x: hidden;\n    position: relative;\n    ", "\n    ", "\n    ", "\n    ", "\n    &:hover ~ .actions-button-group {\n      opacity: 1;\n    }\n    a:focus,\n    .has-action:focus {\n      outline-offset: -2px;\n    }\n  "])), getGap(size), hideBackground ? '' : "background-color: ".concat("var(--ds-surface-raised, #FFFFFF)", ";"), paddingCss, hideElevation ? '' : elevationStyles, clickableContainer ? clickableContainerStyles : '');
 };
 var renderChildren = function renderChildren(children, containerSize, containerTheme, status, retry, onClick) {
   return _react.default.Children.map(children, function (child) {

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

@@ -9,7 +9,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
-var _token = require("../../../../../utils/token");
 var _utils = require("../../utils");
 var _constants = require("../../../../../constants");
 var _messages = require("../../../../../messages");
@@ -18,8 +17,8 @@ var _atlaskitIcon = _interopRequireDefault(require("../../common/atlaskit-icon")
 var _templateObject, _templateObject2, _templateObject3, _messageMapper;
 /** @jsx jsx */
 var badgeStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  display: inline-flex;\n  min-width: fit-content;\n"])));
-var iconStyles = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  line-height: 0;\n  vertical-align: middle;\n  ", "\n  img,\n  span,\n  svg {\n    line-height: 0;\n    vertical-align: middle;\n  }\n"])), _token.tokens.badgeIcon, (0, _utils.getIconSizeStyles)('1rem'));
-var labelStyles = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: 0.75rem;\n  line-height: 1rem;\n  padding-left: 0.125rem;\n  vertical-align: middle;\n"])), _token.tokens.badgeText);
+var iconStyles = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  line-height: 0;\n  vertical-align: middle;\n  ", "\n  img,\n  span,\n  svg {\n    line-height: 0;\n    vertical-align: middle;\n  }\n"])), "var(--ds-icon-subtle, #626F86)", (0, _utils.getIconSizeStyles)('1rem'));
+var labelStyles = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: 0.75rem;\n  line-height: 1rem;\n  padding-left: 0.125rem;\n  vertical-align: middle;\n"])), "var(--ds-text-subtlest, #626F86)");
 var messageMapper = (_messageMapper = {}, (0, _defineProperty2.default)(_messageMapper, _constants.IconType.PriorityBlocker, _messages.messages.priority_blocker), (0, _defineProperty2.default)(_messageMapper, _constants.IconType.PriorityCritical, _messages.messages.priority_critical), (0, _defineProperty2.default)(_messageMapper, _constants.IconType.PriorityHigh, _messages.messages.priority_high), (0, _defineProperty2.default)(_messageMapper, _constants.IconType.PriorityHighest, _messages.messages.priority_highest), (0, _defineProperty2.default)(_messageMapper, _constants.IconType.PriorityLow, _messages.messages.priority_low), (0, _defineProperty2.default)(_messageMapper, _constants.IconType.PriorityLowest, _messages.messages.priority_lowest), (0, _defineProperty2.default)(_messageMapper, _constants.IconType.PriorityMajor, _messages.messages.priority_major), (0, _defineProperty2.default)(_messageMapper, _constants.IconType.PriorityMedium, _messages.messages.priority_medium), (0, _defineProperty2.default)(_messageMapper, _constants.IconType.PriorityMinor, _messages.messages.priority_minor), (0, _defineProperty2.default)(_messageMapper, _constants.IconType.PriorityTrivial, _messages.messages.priority_trivial), (0, _defineProperty2.default)(_messageMapper, _constants.IconType.PriorityUndefined, _messages.messages.priority_undefined), _messageMapper);
 var getFormattedMessageFromIcon = function getFormattedMessageFromIcon(icon) {
   if (icon) {

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

@@ -11,12 +11,11 @@ var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _react2 = require("@emotion/react");
 var _utils = require("../../utils");
-var _token = require("../../../../../utils/token");
 var _intlUtils = require("@formatjs/intl-utils");
 var _messages = require("../../../../../messages");
 var _templateObject;
 /** @jsx jsx */
-var styles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: 0.75rem;\n  line-height: 1rem;\n  ", "\n"])), _token.tokens.text, (0, _utils.getTruncateStyles)(1));
+var styles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: 0.75rem;\n  line-height: 1rem;\n  ", "\n"])), "var(--ds-text-subtlest, #626F86)", (0, _utils.getTruncateStyles)(1));
 var typeToDescriptorMap = {
   created: {
     relative: _messages.messages.created_on_relative,

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

@@ -13,7 +13,6 @@ var _react2 = require("@emotion/react");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _constants = require("../../../../../constants");
 var _utils = require("../../utils");
-var _token = require("../../../../../utils/token");
 var _useLinkClicked = require("../../../../../state/analytics/useLinkClicked");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 /** @jsx jsx */
@@ -31,10 +30,10 @@ var getThemeStyles = function getThemeStyles(theme) {
       return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        a& {\n          color: ", ";\n          &:active,\n          &:visited,\n          &:focus,\n          &:hover {\n            color: ", ";\n            text-decoration: underline;\n          }\n          font-size: 12px;\n        }\n      "])), "var(--ds-text-subtlest, #626F86)", "var(--ds-text-subtlest, #626F86)");
     // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
     case _constants.SmartLinkTheme.Black:
-      return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n        color: ", ";\n        :active {\n          color: ", ";\n        }\n        :hover {\n          color: ", ";\n          text-decoration: underline;\n        }\n      "])), _token.tokens.blackLink, _token.tokens.blackLinkPressed, _token.tokens.blackLink);
+      return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n        color: ", ";\n        :active {\n          color: ", ";\n        }\n        :hover {\n          color: ", ";\n          text-decoration: underline;\n        }\n      "])), "var(--ds-text-subtle, #44546F)", "var(--ds-text, #172B4D)", "var(--ds-text-subtle, #44546F)");
     case _constants.SmartLinkTheme.Link:
     default:
-      return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n        color: ", ";\n        :active {\n          color: ", ";\n        }\n        :hover {\n          color: ", ";\n          text-decoration: underline;\n        }\n      "])), _token.tokens.blueLink, _token.tokens.blueLinkPressed, _token.tokens.blueLink);
+      return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n        color: ", ";\n        :active {\n          color: ", ";\n        }\n        :hover {\n          color: ", ";\n          text-decoration: underline;\n        }\n      "])), "var(--ds-link, #0C66E4)", "var(--ds-link-pressed, #0055CC)", "var(--ds-link, #0C66E4)");
   }
 };
 var getAnchorStyles = function getAnchorStyles(size, theme, maxLines, hasSpace) {

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

@@ -9,11 +9,10 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _utils = require("../../utils");
-var _token = require("../../../../../utils/token");
 var _templateObject;
 /** @jsx jsx */
 var getStyles = function getStyles(maxLines) {
-  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: 0.75rem;\n  line-height: 1rem;\n  white-space: normal;\n  ", "\n"])), _token.tokens.text, (0, _utils.getTruncateStyles)(maxLines));
+  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  font-size: 0.75rem;\n  line-height: 1rem;\n  white-space: normal;\n  ", "\n"])), "var(--ds-text-subtlest, #626F86)", (0, _utils.getTruncateStyles)(maxLines));
 };
 
 /**

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

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

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

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

package/dist/es2019/utils/index.js

@@ -154,4 +154,17 @@ export const openUrl = async url => {
     return;
   }
   window.open(url, '_blank', 'noopener=yes');
+};
+
+/**
+ * Migrate internal usages of the deprecated isFrameVisible to frameStyle
+ * This function is to be removed on deprecation of isFrameVisible.
+ */
+export const combineFrameStyle = (frameStyle, isFrameVisible) => {
+  if (frameStyle !== undefined) {
+    return frameStyle;
+  }
+  if (isFrameVisible) {
+    return 'show';
+  }
 };

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

@@ -1,7 +1,7 @@
 import React, { useEffect, useCallback, useMemo } from 'react';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { useFeatureFlag } from '@atlaskit/link-provider';
-import { isSpecialEvent } from '../../utils';
+import { combineFrameStyle, isSpecialEvent } from '../../utils';
 import * as measure from '../../utils/performance';
 import { getDefinitionId, getServices, isFinalState, getClickUrl, getResourceType, getExtensionKey, getSubproduct, getProduct, getCanBeDatasource } from '../../state/helpers';
 import { useSmartLink } from '../../state';
@@ -20,7 +20,7 @@ function Component({
   isSelected,
   isHovered,
   isFrameVisible,
-  frameStyle,
+  frameStyle: frameStyleProp,
   platform,
   onClick,
   appearance,
@@ -66,6 +66,7 @@ function Component({
   let isFlexibleUi = useMemo(() => isFlexibleUiCard(children), [children]);
   const enableFlexibleBlockCardFlag = Boolean(useFeatureFlag('enableFlexibleBlockCard'));
   const actionOptions = combineActionOptions(actionOptionsProp, showServerActions, showActions, platform);
+  const frameStyle = combineFrameStyle(frameStyleProp, isFrameVisible);
 
   // Setup UI handlers.
   const handleClickWrapper = useCallback(event => {
@@ -248,7 +249,6 @@ function Component({
         handleInvoke: handleInvoke,
         analytics: analytics,
         isSelected: isSelected,
-        isFrameVisible: isFrameVisible,
         frameStyle: frameStyle,
         platform: platform,
         onResolve: onResolve,

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

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 import { className, LinkWrapper, Wrapper, Header, IconWrapper, TextWrapper, Content } from './styled';
 import { handleClickCommon } from '../../BlockCard/utils/handlers';
 import { useMouseDownEvent } from '../../../state/analytics/useLinkClicked';
@@ -9,8 +9,7 @@ export const ExpandedFrame = ({
   icon,
   text,
   isSelected,
-  isFrameVisible,
-  frameStyle,
+  frameStyle = 'showOnHover',
   href,
   minWidth,
   maxWidth,
@@ -21,7 +20,6 @@ export const ExpandedFrame = ({
   const isInteractive = () => !isPlaceholder && (Boolean(href) || Boolean(onClick));
   const handleClick = event => handleClickCommon(event, onClick);
   const handleMouseDown = useMouseDownEvent();
-  const calculatedFrameStyle = useMemo(() => frameStyle !== undefined ? frameStyle : isFrameVisible ? 'show' : 'showOnHover', [frameStyle, isFrameVisible]);
   const renderHeader = () => /*#__PURE__*/React.createElement(Header, {
     className: "embed-header",
     frameStyle: frameStyle
@@ -45,7 +43,7 @@ export const ExpandedFrame = ({
       className: className,
       isInteractive: isInteractive(),
       isSelected: isSelected,
-      frameStyle: calculatedFrameStyle,
+      frameStyle: frameStyle,
       minWidth: minWidth,
       maxWidth: maxWidth,
       "data-testid": testId,
@@ -61,7 +59,7 @@ export const ExpandedFrame = ({
       isInteractive: isInteractive(),
       isSelected: isSelected,
       minWidth: minWidth,
-      frameStyle: calculatedFrameStyle,
+      frameStyle: frameStyle,
       maxWidth: maxWidth,
       "data-testid": testId,
       "data-trello-do-not-use-override": testId,

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

@@ -26,7 +26,6 @@ export const EmbedCard = /*#__PURE__*/React.forwardRef(({
   analytics,
   handleInvoke,
   isSelected,
-  isFrameVisible,
   frameStyle,
   platform,
   onResolve,
@@ -67,7 +66,6 @@ export const EmbedCard = /*#__PURE__*/React.forwardRef(({
       if (resolvedViewProps.preview) {
         return /*#__PURE__*/React.createElement(EmbedCardResolvedView, _extends({}, resolvedViewProps, {
           isSelected: isSelected,
-          isFrameVisible: isFrameVisible,
           frameStyle: frameStyle,
           inheritDimensions: inheritDimensions,
           onClick: handleFrameClick,
@@ -110,6 +108,7 @@ export const EmbedCard = /*#__PURE__*/React.forwardRef(({
         analytics: analytics,
         context: unauthorisedViewProps.context,
         extensionKey: extensionKey,
+        frameStyle: frameStyle,
         isProductIntegrationSupported: isProductIntegrationSupported,
         inheritDimensions: inheritDimensions,
         isSelected: isSelected,
@@ -130,8 +129,8 @@ export const EmbedCard = /*#__PURE__*/React.forwardRef(({
       if (forbiddenViewProps.preview) {
         return /*#__PURE__*/React.createElement(EmbedCardResolvedView, _extends({}, forbiddenViewProps, {
           title: forbiddenViewProps.link,
+          frameStyle: frameStyle,
           isSelected: isSelected,
-          isFrameVisible: isFrameVisible,
           inheritDimensions: inheritDimensions,
           onClick: handleFrameClick,
           ref: iframeRef
@@ -145,6 +144,7 @@ export const EmbedCard = /*#__PURE__*/React.forwardRef(({
       });
       return /*#__PURE__*/React.createElement(ForbiddenView, {
         context: forbiddenViewProps.context,
+        frameStyle: frameStyle,
         inheritDimensions: inheritDimensions,
         isSelected: isSelected,
         onAuthorize: handleAuthorize,
@@ -168,6 +168,7 @@ export const EmbedCard = /*#__PURE__*/React.forwardRef(({
       }) : undefined;
       return /*#__PURE__*/React.createElement(NotFoundView, {
         context: notFoundViewProps.context,
+        frameStyle: frameStyle,
         inheritDimensions: inheritDimensions,
         isSelected: isSelected,
         onClick: handleFrameClick,

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

@@ -11,7 +11,6 @@ export const EmbedCardResolvedView = /*#__PURE__*/React.forwardRef(({
   context,
   onClick,
   isSelected,
-  isFrameVisible,
   frameStyle,
   preview,
   title,
@@ -48,7 +47,6 @@ export const EmbedCardResolvedView = /*#__PURE__*/React.forwardRef(({
   }
   return jsx(ExpandedFrame, {
     isSelected: isSelected,
-    isFrameVisible: isFrameVisible,
     frameStyle: frameStyle,
     href: link,
     testId: testId,

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

@@ -8,6 +8,7 @@ import { containerStyles, contentStyles, descriptionStyles, imageStyles, titleSt
 const UnresolvedView = ({
   button,
   description,
+  frameStyle,
   icon: iconUrlOrElement,
   image,
   inheritDimensions,
@@ -32,8 +33,15 @@ const UnresolvedView = ({
     });
   }, [iconUrlOrElement]);
   return jsx(ExpandedFrame, {
-    allowScrollBar: true,
-    frameStyle: "show",
+    allowScrollBar: true
+    // EDM-9259: Fix embed frame showing on unresolved views when frameStyle is set to hide.
+    // Set fallback to 'show' here to maintain the current behaviour when platform.editor.show-embed-card-frame-renderer is OFF.
+    // Remove 'show' on platform.editor.show-embed-card-frame-renderer cleanup as frameStyle will be set to 'show' both in renderer and editor.
+    // We want all views to be consistent and respect frameStyle instead of
+    // having resolved view default to showOnHover and unresolved view default to show.
+    // Default frameStyle is set inside <ExpandedFrame />
+    ,
+    frameStyle: frameStyle !== null && frameStyle !== void 0 ? frameStyle : 'show',
     href: url,
     icon: icon,
     inheritDimensions: inheritDimensions,

package/dist/es2019/view/FlexibleCard/components/actions/action/preview-action/index.js

@@ -2,8 +2,6 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import Action from '../index';
 import { useFlexibleUiAnalyticsContext } from '../../../../../../state/flexible-ui-context';
-import { FormattedMessage } from 'react-intl-next';
-import { messages } from '../../../../../../messages';
 import { openEmbedModalWithFlexibleUiIcon } from '../../../utils';
 import useInvokeClientAction from '../../../../../../state/hooks/use-invoke-client-action';
 import { ActionName } from '../../../../../../constants';
@@ -51,8 +49,7 @@ const PreviewAction = props => {
         if (onClick) {
           onClick();
         }
-      },
-      content: /*#__PURE__*/React.createElement(FormattedMessage, messages.preview_improved)
+      }
     };
     return /*#__PURE__*/React.createElement(Action, _extends({}, action, {
       appearance: appearance,

package/dist/es2019/view/FlexibleCard/components/blocks/title-block/errored/index.js

@@ -8,11 +8,10 @@ import Block from '../../block';
 import { SmartLinkAlignment, SmartLinkDirection, SmartLinkSize } from '../../../../../../constants';
 import { getLinkLineHeight, getLinkSizeStyles, getTruncateStyles } from '../../../utils';
 import ElementGroup from '../../element-group';
-import { tokens } from '../../../../../../utils/token';
 const actionStyles = css`
   cursor: pointer;
   :hover {
-    color: ${tokens.errorMessageHover};
+    color: ${"var(--ds-text-subtle, #8993A4)"};
     text-decoration: underline;
   }
 `;
@@ -24,9 +23,9 @@ const getMessageStyles = (size, hasAction) => {
     ${hasAction ? actionStyles : ''}
     ${sizeStyles}
     ${getTruncateStyles(1, getLinkLineHeight(size))}
-    color: ${tokens.errorMessage};
+    color: ${"var(--ds-text-disabled, #6B778C)"};
     :focus {
-      outline: ${tokens.focus} solid 2px;
+      outline: ${"var(--ds-border-focused, #388BFF)"} solid 2px;
     }
   `;
 };

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

@@ -3,7 +3,6 @@ import React, { useContext } from 'react';
 import { css, jsx } from '@emotion/react';
 import { MediaPlacement, SmartLinkSize, SmartLinkTheme } from '../../../../constants';
 import { isFlexibleUiBlock, isFlexibleUiPreviewBlock, isFlexibleUiTitleBlock } from '../../../../utils/flexible';
-import { tokens } from '../../../../utils/token';
 import { FlexibleUiContext } from '../../../../state/flexible-ui-context';
 import LayeredLink from './layered-link';
 import HoverCardControl from './hover-card-control';
@@ -99,7 +98,7 @@ export const getContainerStyles = (size, hideBackground, hideElevation, hidePadd
     min-width: 0;
     overflow-x: hidden;
     position: relative;
-    ${hideBackground ? '' : `background-color: ${tokens.background};`}
+    ${hideBackground ? '' : `background-color: ${"var(--ds-surface-raised, #FFFFFF)"};`}
     ${paddingCss}
     ${hideElevation ? '' : elevationStyles}
     ${clickableContainer ? clickableContainerStyles : ''}