@atlaskit/smart-card 25.2.1 → 25.3.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/smart-card
 
+## 25.3.0
+
+### Minor Changes
+
+- [`4a1604ce132`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4a1604ce132) - Adds a new themeMode query param to preview links url from 1P integrators that support different theme modes.
+
 ## 25.2.1
 
 ### Patch Changes

package/dist/cjs/extractors/block/index.js

@@ -35,14 +35,15 @@ var extractBlockDetails = function extractBlockDetails(jsonLd) {
     return !!detail;
   });
 };
-var extractBlockActions = function extractBlockActions(props, jsonLd, opts, platform) {
+var extractBlockActions = function extractBlockActions(props, jsonLd, opts, platform, meta) {
   if (opts) {
     var handleInvoke = opts.handleInvoke;
     var actions = (0, _extractActions.extractActions)(jsonLd, handleInvoke);
     var previewAction = (0, _extractPreviewAction.extractPreviewAction)(_objectSpread(_objectSpread({}, opts), {}, {
       viewProps: props,
       jsonLd: jsonLd,
-      platform: platform
+      platform: platform,
+      meta: meta
     }));
 
     // The previewAction should always be the last action
@@ -91,7 +92,7 @@ var extractBlockProps = function extractBlockProps(jsonLd, meta, opts, renderers
     isTrusted: (0, _extractIsTrusted.extractIsTrusted)(meta)
   };
   return _objectSpread(_objectSpread({}, props), {}, {
-    actions: extractBlockActions(props, jsonLd, opts, platform)
+    actions: extractBlockActions(props, jsonLd, opts, platform, meta)
   });
 };
 exports.extractBlockProps = extractBlockProps;

package/dist/cjs/extractors/common/actions/extractPreviewAction.js

@@ -10,6 +10,7 @@ var _detail = require("../detail");
 var _extractors = require("@atlaskit/linking-common/extractors");
 var _BlockCard = require("../../../view/BlockCard");
 var _constants = require("../../../constants");
+var _extractIsSupportTheming = require("../../common/meta/extractIsSupportTheming");
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var getMetadataFromJsonLd = function getMetadataFromJsonLd(jsonLd, platform) {
@@ -62,7 +63,8 @@ var extractPreviewAction = function extractPreviewAction(_ref) {
     origin = _ref.origin,
     _ref$source = _ref.source,
     source = _ref$source === void 0 ? 'block' : _ref$source,
-    analytics = _ref.analytics;
+    analytics = _ref.analytics,
+    meta = _ref.meta;
   // Extract metadata from view props & raw JSON-LD.
   var metadataFromJsonLd = getMetadataFromJsonLd(jsonLd, platform);
   var metadataFromViewProps = getMetadataFromResolvedProps(viewProps);
@@ -80,7 +82,8 @@ var extractPreviewAction = function extractPreviewAction(_ref) {
       },
       onViewActionClick: function onViewActionClick() {
         handleInvoke(getInvokeOpts(key, 'ViewAction'));
-      }
+      },
+      isSupportTheming: (0, _extractIsSupportTheming.extractIsSupportTheming)(meta)
     }));
     // Setup props to go through proper Redux 'invocation' flow
     // for analytics, further state management if required in future.

package/dist/cjs/extractors/common/meta/extractIsSupportTheming.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.extractIsSupportTheming = void 0;
+var _constants = require("../../constants");
+var extractIsSupportTheming = function extractIsSupportTheming(meta) {
+  return Boolean((meta === null || meta === void 0 ? void 0 : meta.key) && _constants.PROVIDER_KEYS_WITH_THEMING.includes(meta.key));
+};
+exports.extractIsSupportTheming = extractIsSupportTheming;

package/dist/cjs/extractors/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.JIRA_TASK = exports.JIRA_SUB_TASK = exports.JIRA_STORY = exports.JIRA_SERVICE_REQUEST = exports.JIRA_PROBLEM = exports.JIRA_INCIDENT = exports.JIRA_GENERATOR_ID = exports.JIRA_EPIC = exports.JIRA_CUSTOM_TASK_TYPE = exports.JIRA_CHANGE = exports.JIRA_BUG = exports.CONFLUENCE_GENERATOR_ID = void 0;
+exports.PROVIDER_KEYS_WITH_THEMING = exports.JIRA_TASK = exports.JIRA_SUB_TASK = exports.JIRA_STORY = exports.JIRA_SERVICE_REQUEST = exports.JIRA_PROBLEM = exports.JIRA_INCIDENT = exports.JIRA_GENERATOR_ID = exports.JIRA_EPIC = exports.JIRA_CUSTOM_TASK_TYPE = exports.JIRA_CHANGE = exports.JIRA_BUG = exports.CONFLUENCE_GENERATOR_ID = void 0;
 var CONFLUENCE_GENERATOR_ID = 'https://www.atlassian.com/#Confluence';
 exports.CONFLUENCE_GENERATOR_ID = CONFLUENCE_GENERATOR_ID;
 var JIRA_GENERATOR_ID = 'https://www.atlassian.com/#Jira';
@@ -28,4 +28,8 @@ exports.JIRA_CHANGE = JIRA_CHANGE;
 var JIRA_PROBLEM = 'JiraProblem';
 exports.JIRA_PROBLEM = JIRA_PROBLEM;
 var JIRA_CUSTOM_TASK_TYPE = 'JiraCustomTaskType';
-exports.JIRA_CUSTOM_TASK_TYPE = JIRA_CUSTOM_TASK_TYPE;
+
+//List of provider keys that support theme modes for the embedded content.
+exports.JIRA_CUSTOM_TASK_TYPE = JIRA_CUSTOM_TASK_TYPE;
+var PROVIDER_KEYS_WITH_THEMING = ['jira-object-provider', 'confluence-object-provider', 'watermelon-object-provider'];
+exports.PROVIDER_KEYS_WITH_THEMING = PROVIDER_KEYS_WITH_THEMING;

package/dist/cjs/extractors/embed/index.js

@@ -8,6 +8,7 @@ exports.extractEmbedProps = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _extractors = require("@atlaskit/linking-common/extractors");
 var _extractIsTrusted = require("../common/meta/extractIsTrusted");
+var _extractIsSupportTheming = require("../common/meta/extractIsSupportTheming");
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var extractEmbedPreview = function extractEmbedPreview(jsonLd, platform, iframeUrlType) {
@@ -24,7 +25,8 @@ var extractEmbedProps = function extractEmbedProps(jsonLd, meta, platform, ifram
     title: (0, _extractors.extractTitle)(jsonLd),
     context: (0, _extractors.extractProvider)(jsonLd),
     preview: extractEmbedPreview(jsonLd, platform, iframeUrlType),
-    isTrusted: (0, _extractIsTrusted.extractIsTrusted)(meta)
+    isTrusted: (0, _extractIsTrusted.extractIsTrusted)(meta),
+    isSupportTheming: (0, _extractIsSupportTheming.extractIsSupportTheming)(meta)
   };
 };
 exports.extractEmbedProps = extractEmbedProps;

package/dist/cjs/extractors/flexible/actions/extract-preview-action.js

@@ -8,9 +8,11 @@ var _detail = require("../../common/detail");
 var _linkingCommon = require("@atlaskit/linking-common");
 var _extractors = require("@atlaskit/linking-common/extractors");
 var _icon = require("../icon");
+var _extractIsSupportTheming = require("../../common/meta/extractIsSupportTheming");
 var extractPreviewAction = function extractPreviewAction(response) {
   var _extractPreviewData;
   var data = response.data;
+  var meta = response.meta;
   var src = (_extractPreviewData = (0, _linkingCommon.extractPreview)(data, 'web')) === null || _extractPreviewData === void 0 ? void 0 : _extractPreviewData.src;
   if (src) {
     var _extractProvider;
@@ -20,7 +22,8 @@ var extractPreviewAction = function extractPreviewAction(response) {
       src: src,
       title: (0, _extractors.extractTitle)(data),
       linkIcon: (0, _icon.extractLinkIcon)(response),
-      url: (0, _extractors.extractLink)(data)
+      url: (0, _extractors.extractLink)(data),
+      isSupportTheming: (0, _extractIsSupportTheming.extractIsSupportTheming)(meta)
     };
   }
 };

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "25.2.1",
+	"version": "25.3.0",
 	"sideEffects": false
 }

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

@@ -63,7 +63,8 @@ var ResolvedView = function ResolvedView(_ref) {
     _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'block-card-resolved-view' : _ref$testId,
     _ref$showActions = _ref.showActions,
-    showActions = _ref$showActions === void 0 ? true : _ref$showActions;
+    showActions = _ref$showActions === void 0 ? true : _ref$showActions,
+    isSupportTheming = _ref.isSupportTheming;
   var resolvedMetadata = details.length > 0 ? (0, _react.jsx)(_MetadataList.MetadataList, {
     testId: testId ? "".concat(testId, "-meta") : undefined,
     items: details

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

@@ -11,6 +11,7 @@ var _link = _interopRequireDefault(require("@atlaskit/icon/glyph/link"));
 var _ExpandedFrame = require("../components/ExpandedFrame");
 var _ImageIcon = require("../components/ImageIcon");
 var _Frame = require("../components/Frame");
+var _tokens = require("@atlaskit/tokens");
 /** @jsx jsx */
 
 var EmbedCardResolvedView = /*#__PURE__*/_react2.default.forwardRef(function (_ref, embedIframeRef) {
@@ -27,7 +28,8 @@ var EmbedCardResolvedView = /*#__PURE__*/_react2.default.forwardRef(function (_r
     testId = _ref$testId === void 0 ? 'embed-card-resolved-view' : _ref$testId,
     inheritDimensions = _ref.inheritDimensions,
     onIframeDwell = _ref.onIframeDwell,
-    onIframeFocus = _ref.onIframeFocus;
+    onIframeFocus = _ref.onIframeFocus,
+    isSupportTheming = _ref.isSupportTheming;
   var iconFromContext = context === null || context === void 0 ? void 0 : context.icon;
   var src = typeof iconFromContext === 'string' ? iconFromContext : undefined;
   var text = title || (context === null || context === void 0 ? void 0 : context.text);
@@ -47,6 +49,12 @@ var EmbedCardResolvedView = /*#__PURE__*/_react2.default.forwardRef(function (_r
       default: linkGlyph
     });
   }, [src, linkGlyph, iconFromContext]);
+  var _useThemeObserver = (0, _tokens.useThemeObserver)(),
+    colorMode = _useThemeObserver.colorMode;
+  var previewUrl = preview === null || preview === void 0 ? void 0 : preview.src;
+  if (previewUrl && isSupportTheming && colorMode) {
+    previewUrl = "".concat(previewUrl).concat(previewUrl.includes('?') ? '&' : '?', "themeMode=").concat(colorMode);
+  }
   return (0, _react.jsx)(_ExpandedFrame.ExpandedFrame, {
     isSelected: isSelected,
     isFrameVisible: isFrameVisible,
@@ -58,7 +66,7 @@ var EmbedCardResolvedView = /*#__PURE__*/_react2.default.forwardRef(function (_r
     onClick: onClick,
     inheritDimensions: inheritDimensions
   }, (0, _react.jsx)(_Frame.Frame, {
-    url: preview === null || preview === void 0 ? void 0 : preview.src,
+    url: previewUrl,
     isTrusted: isTrusted,
     testId: testId,
     ref: embedIframeRef,

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

@@ -15,6 +15,7 @@ var _embedContent = _interopRequireDefault(require("./components/embed-content")
 var _types = require("./types");
 var _errorBoundary = _interopRequireDefault(require("./components/error-boundary"));
 var _analytics = _interopRequireDefault(require("./components/analytics"));
+var _tokens = require("@atlaskit/tokens");
 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 toSize = function toSize(width) {
@@ -42,7 +43,8 @@ var EmbedModal = function EmbedModal(_ref) {
     _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'smart-embed-preview-modal' : _ref$testId,
     title = _ref.title,
-    url = _ref.url;
+    url = _ref.url,
+    isSupportTheming = _ref.isSupportTheming;
   var defaultWidth = toWidth(size);
   var _useState = (0, _react.useState)(showModal),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -82,6 +84,12 @@ var EmbedModal = function EmbedModal(_ref) {
       });
     }
   }, [onResize, width]);
+  var _useThemeObserver = (0, _tokens.useThemeObserver)(),
+    colorMode = _useThemeObserver.colorMode;
+  var previewUrl = src;
+  if (previewUrl && isSupportTheming && colorMode) {
+    previewUrl = "".concat(previewUrl).concat(previewUrl.includes('?') ? '&' : '?', "themeMode=").concat(colorMode);
+  }
   return /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTransition, null, isOpen && /*#__PURE__*/_react.default.createElement(_modalDialog.default, {
     height: "100%",
     onClose: handleOnClose,
@@ -103,7 +111,7 @@ var EmbedModal = function EmbedModal(_ref) {
   }), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalBody, null, /*#__PURE__*/_react.default.createElement(_embedContent.default, {
     isTrusted: isTrusted,
     name: iframeName,
-    src: src,
+    src: previewUrl,
     testId: testId
   }))));
 };

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

@@ -34,7 +34,8 @@ var PreviewAction = function PreviewAction(props) {
     url = props.url,
     title = props.title,
     providerName = props.providerName,
-    downloadUrl = props.downloadUrl;
+    downloadUrl = props.downloadUrl,
+    isSupportTheming = props.isSupportTheming;
   var defaultAnalytics = (0, _state.useSmartLinkAnalytics)(url, function () {});
   var analytics = (0, _flexibleUiContext.useFlexibleUiAnalyticsContext)() || defaultAnalytics;
   var EmbedIcon = {
@@ -55,7 +56,8 @@ var PreviewAction = function PreviewAction(props) {
         title: title,
         url: url,
         analytics: analytics,
-        origin: 'smartLinkCard'
+        origin: 'smartLinkCard',
+        isSupportTheming: isSupportTheming
       });
     };
     var action = _objectSpread(_objectSpread({}, props), {}, {

package/dist/es2019/extractors/block/index.js

@@ -21,7 +21,7 @@ const extractBlockIcon = jsonLd => {
   }
 };
 const extractBlockDetails = jsonLd => [extractCommentCount(jsonLd), extractProgrammingLanguage(jsonLd), extractSubscriberCount(jsonLd), extractAttachmentCount(jsonLd)].filter(detail => !!detail);
-export const extractBlockActions = (props, jsonLd, opts, platform) => {
+export const extractBlockActions = (props, jsonLd, opts, platform, meta) => {
   if (opts) {
     const {
       handleInvoke
@@ -31,7 +31,8 @@ export const extractBlockActions = (props, jsonLd, opts, platform) => {
       ...opts,
       viewProps: props,
       jsonLd,
-      platform
+      platform,
+      meta
     });
 
     // The previewAction should always be the last action
@@ -79,6 +80,6 @@ export const extractBlockProps = (jsonLd, meta, opts, renderers, platform) => {
   };
   return {
     ...props,
-    actions: extractBlockActions(props, jsonLd, opts, platform)
+    actions: extractBlockActions(props, jsonLd, opts, platform, meta)
   };
 };

package/dist/es2019/extractors/common/actions/extractPreviewAction.js

@@ -2,6 +2,7 @@ import { extractDownloadUrl } from '../detail';
 import { extractPreview, extractProvider } from '@atlaskit/linking-common/extractors';
 import { PreviewAction } from '../../../view/BlockCard';
 import { CardDisplay } from '../../../constants';
+import { extractIsSupportTheming } from '../../common/meta/extractIsSupportTheming';
 const getMetadataFromJsonLd = (jsonLd, platform) => {
   const download = extractDownloadUrl(jsonLd);
   const provider = extractProvider(jsonLd);
@@ -44,7 +45,8 @@ export const extractPreviewAction = ({
   platform,
   origin,
   source = 'block',
-  analytics
+  analytics,
+  meta
 }) => {
   // Extract metadata from view props & raw JSON-LD.
   const metadataFromJsonLd = getMetadataFromJsonLd(jsonLd, platform);
@@ -67,7 +69,8 @@ export const extractPreviewAction = ({
       },
       onViewActionClick: () => {
         handleInvoke(getInvokeOpts(key, 'ViewAction'));
-      }
+      },
+      isSupportTheming: extractIsSupportTheming(meta)
     });
     // Setup props to go through proper Redux 'invocation' flow
     // for analytics, further state management if required in future.

package/dist/es2019/extractors/common/meta/extractIsSupportTheming.js

@@ -0,0 +1,4 @@
+import { PROVIDER_KEYS_WITH_THEMING } from '../../constants';
+export const extractIsSupportTheming = meta => {
+  return Boolean((meta === null || meta === void 0 ? void 0 : meta.key) && PROVIDER_KEYS_WITH_THEMING.includes(meta.key));
+};

package/dist/es2019/extractors/constants.js

@@ -10,4 +10,7 @@ export const JIRA_INCIDENT = 'JiraIncident';
 export const JIRA_SERVICE_REQUEST = 'JiraServiceRequest';
 export const JIRA_CHANGE = 'JiraChange';
 export const JIRA_PROBLEM = 'JiraProblem';
-export const JIRA_CUSTOM_TASK_TYPE = 'JiraCustomTaskType';
+export const JIRA_CUSTOM_TASK_TYPE = 'JiraCustomTaskType';
+
+//List of provider keys that support theme modes for the embedded content.
+export const PROVIDER_KEYS_WITH_THEMING = ['jira-object-provider', 'confluence-object-provider', 'watermelon-object-provider'];

package/dist/es2019/extractors/embed/index.js

@@ -1,5 +1,6 @@
 import { extractLink, extractTitle, extractProvider, extractPreview } from '@atlaskit/linking-common/extractors';
 import { extractIsTrusted } from '../common/meta/extractIsTrusted';
+import { extractIsSupportTheming } from '../common/meta/extractIsSupportTheming';
 const extractEmbedPreview = (jsonLd, platform, iframeUrlType) => {
   const preview = extractPreview(jsonLd, platform, iframeUrlType);
   if (preview && preview.src) {
@@ -9,12 +10,11 @@ const extractEmbedPreview = (jsonLd, platform, iframeUrlType) => {
     };
   }
 };
-export const extractEmbedProps = (jsonLd, meta, platform, iframeUrlType) => {
-  return {
-    link: extractLink(jsonLd) || '',
-    title: extractTitle(jsonLd),
-    context: extractProvider(jsonLd),
-    preview: extractEmbedPreview(jsonLd, platform, iframeUrlType),
-    isTrusted: extractIsTrusted(meta)
-  };
-};
+export const extractEmbedProps = (jsonLd, meta, platform, iframeUrlType) => ({
+  link: extractLink(jsonLd) || '',
+  title: extractTitle(jsonLd),
+  context: extractProvider(jsonLd),
+  preview: extractEmbedPreview(jsonLd, platform, iframeUrlType),
+  isTrusted: extractIsTrusted(meta),
+  isSupportTheming: extractIsSupportTheming(meta)
+});

package/dist/es2019/extractors/flexible/actions/extract-preview-action.js

@@ -2,9 +2,11 @@ import { extractDownloadUrl } from '../../common/detail';
 import { extractPreview as extractPreviewData } from '@atlaskit/linking-common';
 import { extractLink, extractProvider, extractTitle } from '@atlaskit/linking-common/extractors';
 import { extractLinkIcon } from '../icon';
+import { extractIsSupportTheming } from '../../common/meta/extractIsSupportTheming';
 export const extractPreviewAction = response => {
   var _extractPreviewData;
   const data = response.data;
+  const meta = response.meta;
   const src = (_extractPreviewData = extractPreviewData(data, 'web')) === null || _extractPreviewData === void 0 ? void 0 : _extractPreviewData.src;
   if (src) {
     var _extractProvider;
@@ -14,7 +16,8 @@ export const extractPreviewAction = response => {
       src,
       title: extractTitle(data),
       linkIcon: extractLinkIcon(response),
-      url: extractLink(data)
+      url: extractLink(data),
+      isSupportTheming: extractIsSupportTheming(meta)
     };
   }
 };

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "25.2.1",
+	"version": "25.3.0",
 	"sideEffects": false
 }

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

@@ -39,7 +39,8 @@ export const ResolvedView = ({
   lozenge,
   details = [],
   testId = 'block-card-resolved-view',
-  showActions = true
+  showActions = true,
+  isSupportTheming
 }) => {
   const resolvedMetadata = details.length > 0 ? jsx(MetadataList, {
     testId: testId ? `${testId}-meta` : undefined,

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

@@ -5,6 +5,7 @@ import LinkGlyph from '@atlaskit/icon/glyph/link';
 import { ExpandedFrame } from '../components/ExpandedFrame';
 import { ImageIcon } from '../components/ImageIcon';
 import { Frame } from '../components/Frame';
+import { useThemeObserver } from '@atlaskit/tokens';
 export const EmbedCardResolvedView = /*#__PURE__*/React.forwardRef(({
   link,
   context,
@@ -18,7 +19,8 @@ export const EmbedCardResolvedView = /*#__PURE__*/React.forwardRef(({
   testId = 'embed-card-resolved-view',
   inheritDimensions,
   onIframeDwell,
-  onIframeFocus
+  onIframeFocus,
+  isSupportTheming
 }, embedIframeRef) => {
   const iconFromContext = context === null || context === void 0 ? void 0 : context.icon;
   const src = typeof iconFromContext === 'string' ? iconFromContext : undefined;
@@ -37,6 +39,13 @@ export const EmbedCardResolvedView = /*#__PURE__*/React.forwardRef(({
       default: linkGlyph
     });
   }, [src, linkGlyph, iconFromContext]);
+  const {
+    colorMode
+  } = useThemeObserver();
+  let previewUrl = preview === null || preview === void 0 ? void 0 : preview.src;
+  if (previewUrl && isSupportTheming && colorMode) {
+    previewUrl = `${previewUrl}${previewUrl.includes('?') ? '&' : '?'}themeMode=${colorMode}`;
+  }
   return jsx(ExpandedFrame, {
     isSelected: isSelected,
     isFrameVisible: isFrameVisible,
@@ -48,7 +57,7 @@ export const EmbedCardResolvedView = /*#__PURE__*/React.forwardRef(({
     onClick: onClick,
     inheritDimensions: inheritDimensions
   }, jsx(Frame, {
-    url: preview === null || preview === void 0 ? void 0 : preview.src,
+    url: previewUrl,
     isTrusted: isTrusted,
     testId: testId,
     ref: embedIframeRef,

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

@@ -6,6 +6,7 @@ import EmbedContent from './components/embed-content';
 import { EmbedModalSize } from './types';
 import withErrorBoundary from './components/error-boundary';
 import withAnalytics from './components/analytics';
+import { useThemeObserver } from '@atlaskit/tokens';
 const toSize = width => width === MAX_MODAL_SIZE ? EmbedModalSize.Large : EmbedModalSize.Small;
 const toWidth = size => size === EmbedModalSize.Large ? MAX_MODAL_SIZE : MIN_MODAL_SIZE;
 const EmbedModal = ({
@@ -24,7 +25,8 @@ const EmbedModal = ({
   src,
   testId = 'smart-embed-preview-modal',
   title,
-  url
+  url,
+  isSupportTheming
 }) => {
   const defaultWidth = toWidth(size);
   const [isOpen, setIsOpen] = useState(showModal);
@@ -57,6 +59,13 @@ const EmbedModal = ({
       });
     }
   }, [onResize, width]);
+  const {
+    colorMode
+  } = useThemeObserver();
+  let previewUrl = src;
+  if (previewUrl && isSupportTheming && colorMode) {
+    previewUrl = `${previewUrl}${previewUrl.includes('?') ? '&' : '?'}themeMode=${colorMode}`;
+  }
   return /*#__PURE__*/React.createElement(ModalTransition, null, isOpen && /*#__PURE__*/React.createElement(ModalDialog, {
     height: "100%",
     onClose: handleOnClose,
@@ -78,7 +87,7 @@ const EmbedModal = ({
   }), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement(EmbedContent, {
     isTrusted: isTrusted,
     name: iframeName,
-    src: src,
+    src: previewUrl,
     testId: testId
   }))));
 };

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

@@ -17,7 +17,8 @@ const PreviewAction = props => {
     url,
     title,
     providerName,
-    downloadUrl
+    downloadUrl,
+    isSupportTheming
   } = props;
   const defaultAnalytics = useSmartLinkAnalytics(url, () => {});
   const analytics = useFlexibleUiAnalyticsContext() || defaultAnalytics;
@@ -38,7 +39,8 @@ const PreviewAction = props => {
       title,
       url,
       analytics,
-      origin: 'smartLinkCard'
+      origin: 'smartLinkCard',
+      isSupportTheming
     });
     const action = {
       ...props,

package/dist/esm/extractors/block/index.js

@@ -28,14 +28,15 @@ var extractBlockDetails = function extractBlockDetails(jsonLd) {
     return !!detail;
   });
 };
-export var extractBlockActions = function extractBlockActions(props, jsonLd, opts, platform) {
+export var extractBlockActions = function extractBlockActions(props, jsonLd, opts, platform, meta) {
   if (opts) {
     var handleInvoke = opts.handleInvoke;
     var actions = extractActions(jsonLd, handleInvoke);
     var previewAction = extractPreviewAction(_objectSpread(_objectSpread({}, opts), {}, {
       viewProps: props,
       jsonLd: jsonLd,
-      platform: platform
+      platform: platform,
+      meta: meta
     }));
 
     // The previewAction should always be the last action
@@ -82,6 +83,6 @@ export var extractBlockProps = function extractBlockProps(jsonLd, meta, opts, re
     isTrusted: extractIsTrusted(meta)
   };
   return _objectSpread(_objectSpread({}, props), {}, {
-    actions: extractBlockActions(props, jsonLd, opts, platform)
+    actions: extractBlockActions(props, jsonLd, opts, platform, meta)
   });
 };

package/dist/esm/extractors/common/actions/extractPreviewAction.js

@@ -5,6 +5,7 @@ import { extractDownloadUrl } from '../detail';
 import { extractPreview, extractProvider } from '@atlaskit/linking-common/extractors';
 import { PreviewAction } from '../../../view/BlockCard';
 import { CardDisplay } from '../../../constants';
+import { extractIsSupportTheming } from '../../common/meta/extractIsSupportTheming';
 var getMetadataFromJsonLd = function getMetadataFromJsonLd(jsonLd, platform) {
   var download = extractDownloadUrl(jsonLd);
   var provider = extractProvider(jsonLd);
@@ -55,7 +56,8 @@ export var extractPreviewAction = function extractPreviewAction(_ref) {
     origin = _ref.origin,
     _ref$source = _ref.source,
     source = _ref$source === void 0 ? 'block' : _ref$source,
-    analytics = _ref.analytics;
+    analytics = _ref.analytics,
+    meta = _ref.meta;
   // Extract metadata from view props & raw JSON-LD.
   var metadataFromJsonLd = getMetadataFromJsonLd(jsonLd, platform);
   var metadataFromViewProps = getMetadataFromResolvedProps(viewProps);
@@ -73,7 +75,8 @@ export var extractPreviewAction = function extractPreviewAction(_ref) {
       },
       onViewActionClick: function onViewActionClick() {
         handleInvoke(getInvokeOpts(key, 'ViewAction'));
-      }
+      },
+      isSupportTheming: extractIsSupportTheming(meta)
     }));
     // Setup props to go through proper Redux 'invocation' flow
     // for analytics, further state management if required in future.

package/dist/esm/extractors/common/meta/extractIsSupportTheming.js

@@ -0,0 +1,4 @@
+import { PROVIDER_KEYS_WITH_THEMING } from '../../constants';
+export var extractIsSupportTheming = function extractIsSupportTheming(meta) {
+  return Boolean((meta === null || meta === void 0 ? void 0 : meta.key) && PROVIDER_KEYS_WITH_THEMING.includes(meta.key));
+};

package/dist/esm/extractors/constants.js

@@ -10,4 +10,7 @@ export var JIRA_INCIDENT = 'JiraIncident';
 export var JIRA_SERVICE_REQUEST = 'JiraServiceRequest';
 export var JIRA_CHANGE = 'JiraChange';
 export var JIRA_PROBLEM = 'JiraProblem';
-export var JIRA_CUSTOM_TASK_TYPE = 'JiraCustomTaskType';
+export var JIRA_CUSTOM_TASK_TYPE = 'JiraCustomTaskType';
+
+//List of provider keys that support theme modes for the embedded content.
+export var PROVIDER_KEYS_WITH_THEMING = ['jira-object-provider', 'confluence-object-provider', 'watermelon-object-provider'];

package/dist/esm/extractors/embed/index.js

@@ -3,6 +3,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import { extractLink, extractTitle, extractProvider, extractPreview } from '@atlaskit/linking-common/extractors';
 import { extractIsTrusted } from '../common/meta/extractIsTrusted';
+import { extractIsSupportTheming } from '../common/meta/extractIsSupportTheming';
 var extractEmbedPreview = function extractEmbedPreview(jsonLd, platform, iframeUrlType) {
   var preview = extractPreview(jsonLd, platform, iframeUrlType);
   if (preview && preview.src) {
@@ -17,6 +18,7 @@ export var extractEmbedProps = function extractEmbedProps(jsonLd, meta, platform
     title: extractTitle(jsonLd),
     context: extractProvider(jsonLd),
     preview: extractEmbedPreview(jsonLd, platform, iframeUrlType),
-    isTrusted: extractIsTrusted(meta)
+    isTrusted: extractIsTrusted(meta),
+    isSupportTheming: extractIsSupportTheming(meta)
   };
 };

package/dist/esm/extractors/flexible/actions/extract-preview-action.js

@@ -2,9 +2,11 @@ import { extractDownloadUrl } from '../../common/detail';
 import { extractPreview as extractPreviewData } from '@atlaskit/linking-common';
 import { extractLink, extractProvider, extractTitle } from '@atlaskit/linking-common/extractors';
 import { extractLinkIcon } from '../icon';
+import { extractIsSupportTheming } from '../../common/meta/extractIsSupportTheming';
 export var extractPreviewAction = function extractPreviewAction(response) {
   var _extractPreviewData;
   var data = response.data;
+  var meta = response.meta;
   var src = (_extractPreviewData = extractPreviewData(data, 'web')) === null || _extractPreviewData === void 0 ? void 0 : _extractPreviewData.src;
   if (src) {
     var _extractProvider;
@@ -14,7 +16,8 @@ export var extractPreviewAction = function extractPreviewAction(response) {
       src: src,
       title: extractTitle(data),
       linkIcon: extractLinkIcon(response),
-      url: extractLink(data)
+      url: extractLink(data),
+      isSupportTheming: extractIsSupportTheming(meta)
     };
   }
 };

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "25.2.1",
+	"version": "25.3.0",
 	"sideEffects": false
 }

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

@@ -53,7 +53,8 @@ export var ResolvedView = function ResolvedView(_ref) {
     _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'block-card-resolved-view' : _ref$testId,
     _ref$showActions = _ref.showActions,
-    showActions = _ref$showActions === void 0 ? true : _ref$showActions;
+    showActions = _ref$showActions === void 0 ? true : _ref$showActions,
+    isSupportTheming = _ref.isSupportTheming;
   var resolvedMetadata = details.length > 0 ? jsx(MetadataList, {
     testId: testId ? "".concat(testId, "-meta") : undefined,
     items: details

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

@@ -5,6 +5,7 @@ import LinkGlyph from '@atlaskit/icon/glyph/link';
 import { ExpandedFrame } from '../components/ExpandedFrame';
 import { ImageIcon } from '../components/ImageIcon';
 import { Frame } from '../components/Frame';
+import { useThemeObserver } from '@atlaskit/tokens';
 export var EmbedCardResolvedView = /*#__PURE__*/React.forwardRef(function (_ref, embedIframeRef) {
   var link = _ref.link,
     context = _ref.context,
@@ -19,7 +20,8 @@ export var EmbedCardResolvedView = /*#__PURE__*/React.forwardRef(function (_ref,
     testId = _ref$testId === void 0 ? 'embed-card-resolved-view' : _ref$testId,
     inheritDimensions = _ref.inheritDimensions,
     onIframeDwell = _ref.onIframeDwell,
-    onIframeFocus = _ref.onIframeFocus;
+    onIframeFocus = _ref.onIframeFocus,
+    isSupportTheming = _ref.isSupportTheming;
   var iconFromContext = context === null || context === void 0 ? void 0 : context.icon;
   var src = typeof iconFromContext === 'string' ? iconFromContext : undefined;
   var text = title || (context === null || context === void 0 ? void 0 : context.text);
@@ -39,6 +41,12 @@ export var EmbedCardResolvedView = /*#__PURE__*/React.forwardRef(function (_ref,
       default: linkGlyph
     });
   }, [src, linkGlyph, iconFromContext]);
+  var _useThemeObserver = useThemeObserver(),
+    colorMode = _useThemeObserver.colorMode;
+  var previewUrl = preview === null || preview === void 0 ? void 0 : preview.src;
+  if (previewUrl && isSupportTheming && colorMode) {
+    previewUrl = "".concat(previewUrl).concat(previewUrl.includes('?') ? '&' : '?', "themeMode=").concat(colorMode);
+  }
   return jsx(ExpandedFrame, {
     isSelected: isSelected,
     isFrameVisible: isFrameVisible,
@@ -50,7 +58,7 @@ export var EmbedCardResolvedView = /*#__PURE__*/React.forwardRef(function (_ref,
     onClick: onClick,
     inheritDimensions: inheritDimensions
   }, jsx(Frame, {
-    url: preview === null || preview === void 0 ? void 0 : preview.src,
+    url: previewUrl,
     isTrusted: isTrusted,
     testId: testId,
     ref: embedIframeRef,

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

@@ -7,6 +7,7 @@ import EmbedContent from './components/embed-content';
 import { EmbedModalSize } from './types';
 import withErrorBoundary from './components/error-boundary';
 import withAnalytics from './components/analytics';
+import { useThemeObserver } from '@atlaskit/tokens';
 var toSize = function toSize(width) {
   return width === MAX_MODAL_SIZE ? EmbedModalSize.Large : EmbedModalSize.Small;
 };
@@ -32,7 +33,8 @@ var EmbedModal = function EmbedModal(_ref) {
     _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'smart-embed-preview-modal' : _ref$testId,
     title = _ref.title,
-    url = _ref.url;
+    url = _ref.url,
+    isSupportTheming = _ref.isSupportTheming;
   var defaultWidth = toWidth(size);
   var _useState = useState(showModal),
     _useState2 = _slicedToArray(_useState, 2),
@@ -72,6 +74,12 @@ var EmbedModal = function EmbedModal(_ref) {
       });
     }
   }, [onResize, width]);
+  var _useThemeObserver = useThemeObserver(),
+    colorMode = _useThemeObserver.colorMode;
+  var previewUrl = src;
+  if (previewUrl && isSupportTheming && colorMode) {
+    previewUrl = "".concat(previewUrl).concat(previewUrl.includes('?') ? '&' : '?', "themeMode=").concat(colorMode);
+  }
   return /*#__PURE__*/React.createElement(ModalTransition, null, isOpen && /*#__PURE__*/React.createElement(ModalDialog, {
     height: "100%",
     onClose: handleOnClose,
@@ -93,7 +101,7 @@ var EmbedModal = function EmbedModal(_ref) {
   }), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement(EmbedContent, {
     isTrusted: isTrusted,
     name: iframeName,
-    src: src,
+    src: previewUrl,
     testId: testId
   }))));
 };

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

@@ -23,7 +23,8 @@ var PreviewAction = function PreviewAction(props) {
     url = props.url,
     title = props.title,
     providerName = props.providerName,
-    downloadUrl = props.downloadUrl;
+    downloadUrl = props.downloadUrl,
+    isSupportTheming = props.isSupportTheming;
   var defaultAnalytics = useSmartLinkAnalytics(url, function () {});
   var analytics = useFlexibleUiAnalyticsContext() || defaultAnalytics;
   var EmbedIcon = {
@@ -44,7 +45,8 @@ var PreviewAction = function PreviewAction(props) {
         title: title,
         url: url,
         analytics: analytics,
-        origin: 'smartLinkCard'
+        origin: 'smartLinkCard',
+        isSupportTheming: isSupportTheming
       });
     };
     var action = _objectSpread(_objectSpread({}, props), {}, {

package/dist/types/extractors/block/index.d.ts

@@ -4,6 +4,6 @@ import { LinkPerson } from '@atlaskit/linking-common/extractors';
 import { ExtractBlockOpts } from './types';
 import { BlockCardResolvedViewProps } from '../../view/BlockCard';
 import { ActionProps } from '../../view/BlockCard/components/Action';
-export declare const extractBlockActions: (props: BlockCardResolvedViewProps, jsonLd: JsonLd.Data.BaseData, opts?: ExtractBlockOpts | undefined, platform?: JsonLd.Primitives.Platforms | undefined) => ActionProps[];
+export declare const extractBlockActions: (props: BlockCardResolvedViewProps, jsonLd: JsonLd.Data.BaseData, opts?: ExtractBlockOpts | undefined, platform?: JsonLd.Primitives.Platforms | undefined, meta?: JsonLd.Meta.BaseMeta | undefined) => ActionProps[];
 export declare const extractBlockUsers: (jsonLd: JsonLd.Data.BaseData) => LinkPerson[] | undefined;
 export declare const extractBlockProps: (jsonLd: JsonLd.Data.BaseData, meta?: JsonLd.Meta.BaseMeta | undefined, opts?: ExtractBlockOpts | undefined, renderers?: CardProviderRenderers | undefined, platform?: JsonLd.Primitives.Platforms | undefined) => BlockCardResolvedViewProps;

package/dist/types/extractors/common/actions/extractPreviewAction.d.ts

@@ -2,8 +2,9 @@ import { JsonLd } from 'json-ld-types';
 import { CardPlatform } from '../../../view/Card/types';
 import { BlockCardResolvedViewProps } from '../../../view/BlockCard';
 import { ExtractBlockOpts } from '../../block/types';
-export declare const extractPreviewAction: ({ extensionKey, viewProps, jsonLd, handleInvoke, testId, platform, origin, source, analytics, }: ExtractBlockOpts & {
+export declare const extractPreviewAction: ({ extensionKey, viewProps, jsonLd, handleInvoke, testId, platform, origin, source, analytics, meta, }: ExtractBlockOpts & {
     viewProps: BlockCardResolvedViewProps;
     jsonLd: JsonLd.Data.BaseData;
     platform?: JsonLd.Primitives.Platforms | undefined;
+    meta?: JsonLd.Meta.BaseMeta | undefined;
 }) => import("../../../view/BlockCard/components/Action").ActionProps | undefined;

package/dist/types/extractors/common/meta/extractIsSupportTheming.d.ts

@@ -0,0 +1,2 @@
+import { JsonLd } from 'json-ld-types';
+export declare const extractIsSupportTheming: (meta?: JsonLd.Meta.BaseMeta | undefined) => boolean;

package/dist/types/extractors/constants.d.ts

@@ -10,3 +10,4 @@ export declare const JIRA_SERVICE_REQUEST = "JiraServiceRequest";
 export declare const JIRA_CHANGE = "JiraChange";
 export declare const JIRA_PROBLEM = "JiraProblem";
 export declare const JIRA_CUSTOM_TASK_TYPE = "JiraCustomTaskType";
+export declare const PROVIDER_KEYS_WITH_THEMING: string[];

package/dist/types/state/flexible-ui-context/types.d.ts

@@ -193,6 +193,7 @@ export declare type PreviewActionData = {
     src?: string;
     title?: string;
     url?: string;
+    isSupportTheming?: boolean;
 };
 export declare type ViewActionData = {
     viewUrl?: string;

package/dist/types/view/BlockCard/actions/PreviewAction.d.ts

@@ -25,6 +25,7 @@ declare type PreviewInfo = {
     onOpenFailed?: (error: Error, errorInfo: ErrorInfo) => void;
     analytics: AnalyticsFacade;
     origin?: AnalyticsOrigin;
+    isSupportTheming?: boolean;
 };
 declare const _default: ({ details, ...rest }: PreviewInfo) => ActionProps;
 export default _default;

package/dist/types/view/BlockCard/views/ResolvedView.d.ts

@@ -28,7 +28,9 @@ export interface ResolvedViewProps {
     showActions?: boolean;
     titlePrefix?: React.ReactNode;
     isTrusted?: boolean;
+    /** It determines whether a link source supports different design theme modes */
+    isSupportTheming?: boolean;
 }
 export declare const blockCardResolvedViewClassName = "block-card-resolved-view";
 export declare const blockCardResolvedViewByClassName = "block-card-resolved-view-by";
-export declare const ResolvedView: ({ icon, actions, thumbnail, context, title, titleTextColor, titlePrefix, isSelected, users, handleAvatarClick, handleMoreAvatarsClick, onClick, link, byline, lozenge, details, testId, showActions, }: ResolvedViewProps) => jsx.JSX.Element;
+export declare const ResolvedView: ({ icon, actions, thumbnail, context, title, titleTextColor, titlePrefix, isSelected, users, handleAvatarClick, handleMoreAvatarsClick, onClick, link, byline, lozenge, details, testId, showActions, isSupportTheming, }: ResolvedViewProps) => jsx.JSX.Element;

package/dist/types/view/EmbedCard/views/ResolvedView.d.ts

@@ -24,6 +24,7 @@ export interface EmbedCardResolvedViewProps {
     onClick?: (evt: React.MouseEvent) => void;
     /** For testing purposes only. */
     testId?: string;
+    isSupportTheming?: boolean;
     inheritDimensions?: boolean;
     /** Optional callback for when user dwells cursor over iframe - for analytics **/
     onIframeDwell?: (dwellTime: number, dwellPercentVisible: number) => void;

package/dist/types/view/EmbedModal/index.d.ts

@@ -5,6 +5,7 @@ declare const _default: React.FC<{
     icon?: import("../common/Icon").IconProps | undefined;
     iframeName: string;
     isTrusted?: boolean | undefined;
+    isSupportTheming?: boolean | undefined;
     onClose: (context: import("./types").EmbedModalContext) => void;
     onDownloadActionClick?: (() => void) | undefined;
     onOpen?: ((context: import("./types").EmbedModalContext) => void) | undefined;

package/dist/types/view/EmbedModal/types.d.ts

@@ -14,6 +14,7 @@ export declare type EmbedModalProps = {
     icon?: IconProps;
     iframeName: string;
     isTrusted?: boolean;
+    isSupportTheming?: boolean;
     onClose: (context: EmbedModalContext) => void;
     onDownloadActionClick?: () => void;
     onOpen?: (context: EmbedModalContext) => void;

package/dist/types/view/FlexibleCard/components/actions/action/preview-action/types.d.ts

@@ -9,6 +9,7 @@ export declare type FlexibleEmbedProps = {
     src?: string;
     title?: string;
     url: string;
+    isSupportTheming?: boolean;
 };
 export interface PreviewFunctionProps extends EmbedModalProps {
     popupMountPointId: string;

package/package.json

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