@atlaskit/smart-card 40.8.3 → 40.9.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/smart-card
 
+## 40.9.0
+
+### Minor Changes
+
+- [#200326](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/200326)
+  [`49771d466a293`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/49771d466a293) -
+  This change introduces the `useEmbedResolvePostMessageListener` hook, allowing embedded content to
+  request a Smart Link resolve by posting a `force-resolve-smart-link` message from an iframe. This
+  is useful when an action within the embed requires the parent to refetch the link's data.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 40.8.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: "40.8.2"
+  packageVersion: "40.8.3"
 };
 var TrackQuickActionType = exports.TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

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

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useEmbedResolvePostMessageListener = void 0;
+var _react = require("react");
+var _useResolve = _interopRequireDefault(require("../../state/hooks/use-resolve"));
+var useEmbedResolvePostMessageListener = exports.useEmbedResolvePostMessageListener = function useEmbedResolvePostMessageListener(_ref) {
+  var url = _ref.url,
+    embedIframeRef = _ref.embedIframeRef;
+  var resolve = (0, _useResolve.default)();
+  (0, _react.useEffect)(function () {
+    var messageCallback = function messageCallback(event) {
+      var _embedIframeRef$curre;
+      if (typeof embedIframeRef === 'function') {
+        return;
+      }
+      var isFromExpectedIframe = embedIframeRef && event.source === ((_embedIframeRef$curre = embedIframeRef.current) === null || _embedIframeRef$curre === void 0 ? void 0 : _embedIframeRef$curre.contentWindow);
+      if (event.data === 'force-resolve-smart-link' && isFromExpectedIframe) {
+        resolve(url, true);
+      }
+    };
+    window.addEventListener('message', messageCallback);
+    return function () {
+      window.removeEventListener('message', messageCallback);
+    };
+  }, [resolve, url, embedIframeRef]);
+};

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

@@ -7,11 +7,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.EmbedCardResolvedView = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _link = _interopRequireDefault(require("@atlaskit/icon/core/migration/link"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _tokens = require("@atlaskit/tokens");
 var _utils = require("../../../utils");
 var _ExpandedFrame = require("../components/ExpandedFrame");
 var _Frame = require("../components/Frame");
 var _ImageIcon = require("../components/ImageIcon");
+var _useEmbedResolvePostMessageListener = require("../useEmbedResolvePostMessageListener");
 var EmbedCardResolvedView = exports.EmbedCardResolvedView = /*#__PURE__*/_react.default.forwardRef(function (_ref, embedIframeRef) {
   var link = _ref.link,
     context = _ref.context,
@@ -50,6 +52,13 @@ var EmbedCardResolvedView = exports.EmbedCardResolvedView = /*#__PURE__*/_react.
       appearance: (0, _utils.isProfileType)(type) ? 'round' : 'square'
     });
   }, [iconFromContext, src, linkGlyph, type]);
+  if ((0, _platformFeatureFlags.fg)('ptc-enable-embed-team-smart-links')) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    (0, _useEmbedResolvePostMessageListener.useEmbedResolvePostMessageListener)({
+      url: link,
+      embedIframeRef: embedIframeRef
+    });
+  }
   var themeState = (0, _tokens.useThemeObserver)();
   var previewUrl = preview === null || preview === void 0 ? void 0 : preview.src;
   if (previewUrl && isSupportTheming) {

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

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

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

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

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

@@ -0,0 +1,24 @@
+import { useEffect } from 'react';
+import useResolve from '../../state/hooks/use-resolve';
+export const useEmbedResolvePostMessageListener = ({
+  url,
+  embedIframeRef
+}) => {
+  const resolve = useResolve();
+  useEffect(() => {
+    const messageCallback = event => {
+      var _embedIframeRef$curre;
+      if (typeof embedIframeRef === 'function') {
+        return;
+      }
+      const isFromExpectedIframe = embedIframeRef && event.source === ((_embedIframeRef$curre = embedIframeRef.current) === null || _embedIframeRef$curre === void 0 ? void 0 : _embedIframeRef$curre.contentWindow);
+      if (event.data === 'force-resolve-smart-link' && isFromExpectedIframe) {
+        resolve(url, true);
+      }
+    };
+    window.addEventListener('message', messageCallback);
+    return () => {
+      window.removeEventListener('message', messageCallback);
+    };
+  }, [resolve, url, embedIframeRef]);
+};

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

@@ -1,10 +1,12 @@
 import React from 'react';
 import LinkGlyph from '@atlaskit/icon/core/migration/link';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useThemeObserver } from '@atlaskit/tokens';
 import { getPreviewUrlWithTheme, isProfileType } from '../../../utils';
 import { ExpandedFrame } from '../components/ExpandedFrame';
 import { Frame } from '../components/Frame';
 import { ImageIcon } from '../components/ImageIcon';
+import { useEmbedResolvePostMessageListener } from '../useEmbedResolvePostMessageListener';
 export const EmbedCardResolvedView = /*#__PURE__*/React.forwardRef(({
   link,
   context,
@@ -41,6 +43,13 @@ export const EmbedCardResolvedView = /*#__PURE__*/React.forwardRef(({
       appearance: isProfileType(type) ? 'round' : 'square'
     });
   }, [iconFromContext, src, linkGlyph, type]);
+  if (fg('ptc-enable-embed-team-smart-links')) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useEmbedResolvePostMessageListener({
+      url: link,
+      embedIframeRef
+    });
+  }
   const themeState = useThemeObserver();
   let previewUrl = preview === null || preview === void 0 ? void 0 : preview.src;
   if (previewUrl && isSupportTheming) {

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

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

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

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

package/dist/esm/view/EmbedCard/useEmbedResolvePostMessageListener.js

@@ -0,0 +1,23 @@
+import { useEffect } from 'react';
+import useResolve from '../../state/hooks/use-resolve';
+export var useEmbedResolvePostMessageListener = function useEmbedResolvePostMessageListener(_ref) {
+  var url = _ref.url,
+    embedIframeRef = _ref.embedIframeRef;
+  var resolve = useResolve();
+  useEffect(function () {
+    var messageCallback = function messageCallback(event) {
+      var _embedIframeRef$curre;
+      if (typeof embedIframeRef === 'function') {
+        return;
+      }
+      var isFromExpectedIframe = embedIframeRef && event.source === ((_embedIframeRef$curre = embedIframeRef.current) === null || _embedIframeRef$curre === void 0 ? void 0 : _embedIframeRef$curre.contentWindow);
+      if (event.data === 'force-resolve-smart-link' && isFromExpectedIframe) {
+        resolve(url, true);
+      }
+    };
+    window.addEventListener('message', messageCallback);
+    return function () {
+      window.removeEventListener('message', messageCallback);
+    };
+  }, [resolve, url, embedIframeRef]);
+};

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

@@ -1,10 +1,12 @@
 import React from 'react';
 import LinkGlyph from '@atlaskit/icon/core/migration/link';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useThemeObserver } from '@atlaskit/tokens';
 import { getPreviewUrlWithTheme, isProfileType } from '../../../utils';
 import { ExpandedFrame } from '../components/ExpandedFrame';
 import { Frame } from '../components/Frame';
 import { ImageIcon } from '../components/ImageIcon';
+import { useEmbedResolvePostMessageListener } from '../useEmbedResolvePostMessageListener';
 export var EmbedCardResolvedView = /*#__PURE__*/React.forwardRef(function (_ref, embedIframeRef) {
   var link = _ref.link,
     context = _ref.context,
@@ -43,6 +45,13 @@ export var EmbedCardResolvedView = /*#__PURE__*/React.forwardRef(function (_ref,
       appearance: isProfileType(type) ? 'round' : 'square'
     });
   }, [iconFromContext, src, linkGlyph, type]);
+  if (fg('ptc-enable-embed-team-smart-links')) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useEmbedResolvePostMessageListener({
+      url: link,
+      embedIframeRef: embedIframeRef
+    });
+  }
   var themeState = useThemeObserver();
   var previewUrl = preview === null || preview === void 0 ? void 0 : preview.src;
   if (previewUrl && isSupportTheming) {

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

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

package/dist/types/view/EmbedCard/useEmbedResolvePostMessageListener.d.ts

@@ -0,0 +1,6 @@
+interface UseEmbedResolvePostMessageListenerProps {
+    url: string;
+    embedIframeRef: React.ForwardedRef<HTMLIFrameElement>;
+}
+export declare const useEmbedResolvePostMessageListener: ({ url, embedIframeRef, }: UseEmbedResolvePostMessageListenerProps) => void;
+export {};

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

@@ -0,0 +1,6 @@
+interface UseEmbedResolvePostMessageListenerProps {
+    url: string;
+    embedIframeRef: React.ForwardedRef<HTMLIFrameElement>;
+}
+export declare const useEmbedResolvePostMessageListener: ({ url, embedIframeRef, }: UseEmbedResolvePostMessageListenerProps) => void;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "40.8.3",
+	"version": "40.9.0",
 	"description": "Smart card component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -56,7 +56,7 @@
 		"@atlaskit/linking-types": "^14.0.0",
 		"@atlaskit/logo": "^19.6.0",
 		"@atlaskit/lozenge": "^13.0.0",
-		"@atlaskit/menu": "^8.1.0",
+		"@atlaskit/menu": "^8.3.0",
 		"@atlaskit/modal-dialog": "^14.3.0",
 		"@atlaskit/outbound-auth-flow-client": "^3.4.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
@@ -102,7 +102,7 @@
 		"@atlaskit/visual-regression": "workspace:^",
 		"@atlassian/analytics-tooling": "^0.5.0",
 		"@atlassian/feature-flags-test-utils": "^0.3.0",
-		"@atlassian/gemini": "^1.19.0",
+		"@atlassian/gemini": "^1.20.0",
 		"@testing-library/dom": "^10.1.0",
 		"@testing-library/jest-dom": "^6.4.5",
 		"@testing-library/react": "^13.4.0",
@@ -243,6 +243,9 @@
 		},
 		"platform_smartlink_3pclick_analytics": {
 			"type": "boolean"
+		},
+		"ptc-enable-embed-team-smart-links": {
+			"type": "boolean"
 		}
 	},
 	"compassUnitTestMetricSourceId": "ari:cloud:compass:a436116f-02ce-4520-8fbb-7301462a1674:metric-source/c5751cc6-3513-4070-9deb-af31e86aed34/f74ef1bc-7240-4aac-9dc8-9dc43b502089"