@atlaskit/smart-card 27.9.0 → 27.9.1

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/smart-card
 
+## 27.9.1
+
+### Patch Changes
+
+- [#117751](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/117751)
+  [`b3f950d2332ed`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b3f950d2332ed) -
+  EDM-10151 Fix embed overflow when embed blur fix enabled
+- Updated dependencies
+
 ## 27.9.0
 
 ### Minor 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: "27.9.0"
+  packageVersion: "27.9.1"
 };
 var TrackQuickActionType = exports.TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

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

@@ -28,7 +28,9 @@ var ExpandedFrame = exports.ExpandedFrame = function ExpandedFrame(_ref) {
     testId = _ref$testId === void 0 ? 'expanded-frame' : _ref$testId,
     inheritDimensions = _ref.inheritDimensions,
     _ref$allowScrollBar = _ref.allowScrollBar,
-    allowScrollBar = _ref$allowScrollBar === void 0 ? false : _ref$allowScrollBar;
+    allowScrollBar = _ref$allowScrollBar === void 0 ? false : _ref$allowScrollBar,
+    _ref$setOverflow = _ref.setOverflow,
+    setOverflow = _ref$setOverflow === void 0 ? true : _ref$setOverflow;
   var isInteractive = function isInteractive() {
     return !isPlaceholder && (Boolean(href) || Boolean(onClick));
   };
@@ -36,7 +38,6 @@ var ExpandedFrame = exports.ExpandedFrame = function ExpandedFrame(_ref) {
     return (0, _handlers.handleClickCommon)(event, onClick);
   };
   var handleMouseDown = (0, _useLinkClicked.useMouseDownEvent)();
-  var isFixEmbedCardBlurEnabled = (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.fix-embed-card-blurring') ? true : false;
   var renderHeaderOld = function renderHeaderOld() {
     return (
       /*#__PURE__*/
@@ -80,7 +81,7 @@ var ExpandedFrame = exports.ExpandedFrame = function ExpandedFrame(_ref) {
     return /*#__PURE__*/_react.default.createElement(_styled.Content, {
       "data-testid": "embed-content-wrapper",
       allowScrollBar: allowScrollBar,
-      removeOverflow: isFixEmbedCardBlurEnabled,
+      removeOverflow: (0, _platformFeatureFlags.fg)('platform.linking-platform.smart-card.fix-embed-card-blurring') && !setOverflow,
       isInteractive: isInteractive(),
       frameStyle: frameStyle
       // This fixes an issue with input fields in cross domain iframes (ie. databases and jira fields from different domains)
@@ -106,7 +107,7 @@ var ExpandedFrame = exports.ExpandedFrame = function ExpandedFrame(_ref) {
       ,
       "data-is-selected": isSelected,
       inheritDimensions: inheritDimensions
-    }, (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.enable-embed-card-header-tooltip_g9saw') ? renderHeader() : renderHeaderOld(), renderContent());
+    }, (0, _platformFeatureFlags.fg)('platform.linking-platform.smart-card.enable-embed-card-header-tooltip_g9saw') ? renderHeader() : renderHeaderOld(), renderContent());
   } else {
     return /*#__PURE__*/_react.default.createElement(_styled.Wrapper
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -122,6 +123,6 @@ var ExpandedFrame = exports.ExpandedFrame = function ExpandedFrame(_ref) {
       "data-is-selected": isSelected,
       "data-wrapper-type": "default",
       "data-is-interactive": isInteractive()
-    }, (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.enable-embed-card-header-tooltip_g9saw') ? renderHeader() : renderHeaderOld(), renderContent());
+    }, (0, _platformFeatureFlags.fg)('platform.linking-platform.smart-card.enable-embed-card-header-tooltip_g9saw') ? renderHeader() : renderHeaderOld(), renderContent());
   }
 };

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

@@ -63,7 +63,8 @@ var EmbedCardResolvedView = exports.EmbedCardResolvedView = /*#__PURE__*/_react2
     icon: icon,
     text: text,
     onClick: onClick,
-    inheritDimensions: inheritDimensions
+    inheritDimensions: inheritDimensions,
+    setOverflow: false
   }, (0, _react.jsx)(_Frame.Frame, {
     url: previewUrl,
     isTrusted: isTrusted,

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

@@ -91,8 +91,11 @@ var UnresolvedView = function UnresolvedView(_ref) {
       "data-testid": imageTestId
     }, imageUrlOrElement);
   }, [imageUrlOrElement, testId]);
-  return (0, _react.jsx)(_ExpandedFrame.ExpandedFrame, {
-    allowScrollBar: true
+  return (0, _react.jsx)(_ExpandedFrame.ExpandedFrame
+  // Scroll bar must be shown for unresolved views to display the connect account button
+  , {
+    allowScrollBar: true,
+    setOverflow: 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.

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

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

@@ -3,7 +3,7 @@ import { className, LinkWrapper, Wrapper, Header, IconWrapper, TextWrapper, Tool
 import { handleClickCommon } from '../../BlockCard/utils/handlers';
 import { useMouseDownEvent } from '../../../state/analytics/useLinkClicked';
 import Tooltip from '@atlaskit/tooltip';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 export const ExpandedFrame = ({
   isPlaceholder = false,
   children,
@@ -17,12 +17,12 @@ export const ExpandedFrame = ({
   maxWidth,
   testId = 'expanded-frame',
   inheritDimensions,
-  allowScrollBar = false
+  allowScrollBar = false,
+  setOverflow = true
 }) => {
   const isInteractive = () => !isPlaceholder && (Boolean(href) || Boolean(onClick));
   const handleClick = event => handleClickCommon(event, onClick);
   const handleMouseDown = useMouseDownEvent();
-  const isFixEmbedCardBlurEnabled = getBooleanFF('platform.linking-platform.smart-card.fix-embed-card-blurring') ? true : false;
   const renderHeaderOld = () =>
   /*#__PURE__*/
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -59,7 +59,7 @@ export const ExpandedFrame = ({
   const renderContent = () => /*#__PURE__*/React.createElement(Content, {
     "data-testid": "embed-content-wrapper",
     allowScrollBar: allowScrollBar,
-    removeOverflow: isFixEmbedCardBlurEnabled,
+    removeOverflow: fg('platform.linking-platform.smart-card.fix-embed-card-blurring') && !setOverflow,
     isInteractive: isInteractive(),
     frameStyle: frameStyle
     // This fixes an issue with input fields in cross domain iframes (ie. databases and jira fields from different domains)
@@ -84,7 +84,7 @@ export const ExpandedFrame = ({
       ,
       "data-is-selected": isSelected,
       inheritDimensions: inheritDimensions
-    }, getBooleanFF('platform.linking-platform.smart-card.enable-embed-card-header-tooltip_g9saw') ? renderHeader() : renderHeaderOld(), renderContent());
+    }, fg('platform.linking-platform.smart-card.enable-embed-card-header-tooltip_g9saw') ? renderHeader() : renderHeaderOld(), renderContent());
   } else {
     return /*#__PURE__*/React.createElement(Wrapper
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -100,6 +100,6 @@ export const ExpandedFrame = ({
       "data-is-selected": isSelected,
       "data-wrapper-type": "default",
       "data-is-interactive": isInteractive()
-    }, getBooleanFF('platform.linking-platform.smart-card.enable-embed-card-header-tooltip_g9saw') ? renderHeader() : renderHeaderOld(), renderContent());
+    }, fg('platform.linking-platform.smart-card.enable-embed-card-header-tooltip_g9saw') ? renderHeader() : renderHeaderOld(), renderContent());
   }
 };

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

@@ -53,7 +53,8 @@ export const EmbedCardResolvedView = /*#__PURE__*/React.forwardRef(({
     icon: icon,
     text: text,
     onClick: onClick,
-    inheritDimensions: inheritDimensions
+    inheritDimensions: inheritDimensions,
+    setOverflow: false
   }, jsx(Frame, {
     url: previewUrl,
     isTrusted: isTrusted,

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

@@ -80,8 +80,11 @@ const UnresolvedView = ({
       "data-testid": imageTestId
     }, imageUrlOrElement);
   }, [imageUrlOrElement, testId]);
-  return jsx(ExpandedFrame, {
-    allowScrollBar: true
+  return jsx(ExpandedFrame
+  // Scroll bar must be shown for unresolved views to display the connect account button
+  , {
+    allowScrollBar: true,
+    setOverflow: 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.

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

@@ -7,7 +7,7 @@ import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-m
 import LinkWarningModal from './LinkWarningModal';
 const PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "27.9.0",
+  packageVersion: "27.9.1",
   componentName: 'linkUrl'
 };
 const Link = withLinkClickedEvent('a');

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

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

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

@@ -3,7 +3,7 @@ import { className, LinkWrapper, Wrapper, Header, IconWrapper, TextWrapper, Tool
 import { handleClickCommon } from '../../BlockCard/utils/handlers';
 import { useMouseDownEvent } from '../../../state/analytics/useLinkClicked';
 import Tooltip from '@atlaskit/tooltip';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 export var ExpandedFrame = function ExpandedFrame(_ref) {
   var _ref$isPlaceholder = _ref.isPlaceholder,
     isPlaceholder = _ref$isPlaceholder === void 0 ? false : _ref$isPlaceholder,
@@ -21,7 +21,9 @@ export var ExpandedFrame = function ExpandedFrame(_ref) {
     testId = _ref$testId === void 0 ? 'expanded-frame' : _ref$testId,
     inheritDimensions = _ref.inheritDimensions,
     _ref$allowScrollBar = _ref.allowScrollBar,
-    allowScrollBar = _ref$allowScrollBar === void 0 ? false : _ref$allowScrollBar;
+    allowScrollBar = _ref$allowScrollBar === void 0 ? false : _ref$allowScrollBar,
+    _ref$setOverflow = _ref.setOverflow,
+    setOverflow = _ref$setOverflow === void 0 ? true : _ref$setOverflow;
   var isInteractive = function isInteractive() {
     return !isPlaceholder && (Boolean(href) || Boolean(onClick));
   };
@@ -29,7 +31,6 @@ export var ExpandedFrame = function ExpandedFrame(_ref) {
     return handleClickCommon(event, onClick);
   };
   var handleMouseDown = useMouseDownEvent();
-  var isFixEmbedCardBlurEnabled = getBooleanFF('platform.linking-platform.smart-card.fix-embed-card-blurring') ? true : false;
   var renderHeaderOld = function renderHeaderOld() {
     return (
       /*#__PURE__*/
@@ -73,7 +74,7 @@ export var ExpandedFrame = function ExpandedFrame(_ref) {
     return /*#__PURE__*/React.createElement(Content, {
       "data-testid": "embed-content-wrapper",
       allowScrollBar: allowScrollBar,
-      removeOverflow: isFixEmbedCardBlurEnabled,
+      removeOverflow: fg('platform.linking-platform.smart-card.fix-embed-card-blurring') && !setOverflow,
       isInteractive: isInteractive(),
       frameStyle: frameStyle
       // This fixes an issue with input fields in cross domain iframes (ie. databases and jira fields from different domains)
@@ -99,7 +100,7 @@ export var ExpandedFrame = function ExpandedFrame(_ref) {
       ,
       "data-is-selected": isSelected,
       inheritDimensions: inheritDimensions
-    }, getBooleanFF('platform.linking-platform.smart-card.enable-embed-card-header-tooltip_g9saw') ? renderHeader() : renderHeaderOld(), renderContent());
+    }, fg('platform.linking-platform.smart-card.enable-embed-card-header-tooltip_g9saw') ? renderHeader() : renderHeaderOld(), renderContent());
   } else {
     return /*#__PURE__*/React.createElement(Wrapper
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -115,6 +116,6 @@ export var ExpandedFrame = function ExpandedFrame(_ref) {
       "data-is-selected": isSelected,
       "data-wrapper-type": "default",
       "data-is-interactive": isInteractive()
-    }, getBooleanFF('platform.linking-platform.smart-card.enable-embed-card-header-tooltip_g9saw') ? renderHeader() : renderHeaderOld(), renderContent());
+    }, fg('platform.linking-platform.smart-card.enable-embed-card-header-tooltip_g9saw') ? renderHeader() : renderHeaderOld(), renderContent());
   }
 };

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

@@ -55,7 +55,8 @@ export var EmbedCardResolvedView = /*#__PURE__*/React.forwardRef(function (_ref,
     icon: icon,
     text: text,
     onClick: onClick,
-    inheritDimensions: inheritDimensions
+    inheritDimensions: inheritDimensions,
+    setOverflow: false
   }, jsx(Frame, {
     url: previewUrl,
     isTrusted: isTrusted,

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

@@ -79,8 +79,11 @@ var UnresolvedView = function UnresolvedView(_ref) {
       "data-testid": imageTestId
     }, imageUrlOrElement);
   }, [imageUrlOrElement, testId]);
-  return jsx(ExpandedFrame, {
-    allowScrollBar: true
+  return jsx(ExpandedFrame
+  // Scroll bar must be shown for unresolved views to display the connect account button
+  , {
+    allowScrollBar: true,
+    setOverflow: 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.

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

@@ -10,7 +10,7 @@ import { useLinkWarningModal } from './LinkWarningModal/hooks/use-link-warning-m
 import LinkWarningModal from './LinkWarningModal';
 var PACKAGE_DATA = {
   packageName: "@atlaskit/smart-card",
-  packageVersion: "27.9.0",
+  packageVersion: "27.9.1",
   componentName: 'linkUrl'
 };
 var Link = withLinkClickedEvent('a');

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

@@ -18,7 +18,23 @@ export interface ExpandedFrameProps {
     testId?: string;
     /** If dimensions of the card are to be inherited from the parent */
     inheritDimensions?: boolean;
-    /** To enable scrolling in use cases where the content will not have it's own scrollbar */
+    /**
+     * To enable scrolling in use cases where the content will not have it's own scrollbar.
+     *
+     * Requires `setOverflow` to be set to true.
+     *
+     * Always enable this when when the card is not resolved so the connect account button is not hiddden.
+     */
     allowScrollBar?: boolean;
+    /**
+     * Should the CSS `overflow` property be set to hidden or auto (clipping or
+     * supporting a scroll bar), or left out altogether.
+     *
+     * Set to true when embed is unresolved to prevent account connection button being unreachable.
+     *
+     * Set to false when the card is resolved to mitigate blurry embed card issue (EDM-7188).
+     * @default true
+     */
+    setOverflow?: boolean;
 }
 export declare const ExpandedFrame: FC<ExpandedFrameProps>;

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

@@ -45,7 +45,14 @@ export declare const TooltipWrapper: import("@emotion/styled").StyledComponent<{
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export interface ContentProps {
     isInteractive: boolean;
+    /**
+     * Whether to show a scroll bar (use overflow: auto) or hide overflow (overflow:hidden).
+     * Always set to true for unresolved embeds, otherwise the connect account button may be hidden and unreachable.
+     */
     allowScrollBar: boolean;
+    /**
+     * Remove the overflow: ... CSS property altogether.
+     */
     removeOverflow?: boolean;
     frameStyle?: FrameStyle;
 }

package/dist/types-ts4.5/view/EmbedCard/components/ExpandedFrame.d.ts

@@ -18,7 +18,23 @@ export interface ExpandedFrameProps {
     testId?: string;
     /** If dimensions of the card are to be inherited from the parent */
     inheritDimensions?: boolean;
-    /** To enable scrolling in use cases where the content will not have it's own scrollbar */
+    /**
+     * To enable scrolling in use cases where the content will not have it's own scrollbar.
+     *
+     * Requires `setOverflow` to be set to true.
+     *
+     * Always enable this when when the card is not resolved so the connect account button is not hiddden.
+     */
     allowScrollBar?: boolean;
+    /**
+     * Should the CSS `overflow` property be set to hidden or auto (clipping or
+     * supporting a scroll bar), or left out altogether.
+     *
+     * Set to true when embed is unresolved to prevent account connection button being unreachable.
+     *
+     * Set to false when the card is resolved to mitigate blurry embed card issue (EDM-7188).
+     * @default true
+     */
+    setOverflow?: boolean;
 }
 export declare const ExpandedFrame: FC<ExpandedFrameProps>;

package/dist/types-ts4.5/view/EmbedCard/components/styled.d.ts

@@ -45,7 +45,14 @@ export declare const TooltipWrapper: import("@emotion/styled").StyledComponent<{
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export interface ContentProps {
     isInteractive: boolean;
+    /**
+     * Whether to show a scroll bar (use overflow: auto) or hide overflow (overflow:hidden).
+     * Always set to true for unresolved embeds, otherwise the connect account button may be hidden and unreachable.
+     */
     allowScrollBar: boolean;
+    /**
+     * Remove the overflow: ... CSS property altogether.
+     */
     removeOverflow?: boolean;
     frameStyle?: FrameStyle;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "27.9.0",
+	"version": "27.9.1",
 	"description": "Smart card component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -33,13 +33,13 @@
 		"@atlaskit/avatar": "^21.11.0",
 		"@atlaskit/avatar-group": "^9.9.0",
 		"@atlaskit/badge": "^16.3.0",
-		"@atlaskit/button": "^18.1.0",
+		"@atlaskit/button": "^18.2.0",
 		"@atlaskit/checkbox": "^13.5.0",
 		"@atlaskit/dropdown-menu": "^12.14.0",
 		"@atlaskit/form": "^10.4.0",
 		"@atlaskit/frontend-utilities": "^2.7.0",
 		"@atlaskit/heading": "^2.4.0",
-		"@atlaskit/icon": "^22.5.0",
+		"@atlaskit/icon": "^22.6.0",
 		"@atlaskit/icon-file-type": "^6.4.0",
 		"@atlaskit/icon-object": "^6.4.0",
 		"@atlaskit/icon-priority": "^6.3.0",
@@ -55,7 +55,7 @@
 		"@atlaskit/outbound-auth-flow-client": "^3.4.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/popup": "^1.20.0",
-		"@atlaskit/primitives": "^10.0.0",
+		"@atlaskit/primitives": "^10.1.0",
 		"@atlaskit/section-message": "^6.5.0",
 		"@atlaskit/select": "^17.11.0",
 		"@atlaskit/spinner": "^16.2.0",