@atlaskit/smart-card 26.54.0 → 26.55.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/smart-card
 
+## 26.55.1
+
+### Patch Changes
+
+- [#90546](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/90546) [`e3e2542b4963`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e3e2542b4963) - Update TypeScript type parameters when using `FormattedMessage` from `react-intl` to improve compatibility with React 18
+
+## 26.55.0
+
+### Minor Changes
+
+- [#89962](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/89962) [`56ed342d14f6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/56ed342d14f6) - EDM-9541: append embedded smart-cards with themeState query parameter under FF `platform.linking-platform.smart-card.enable-theme-state-url`
+
 ## 26.54.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: "26.54.0"
+  packageVersion: "26.55.1"
 };
 var TrackQuickActionType = exports.TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/cjs/utils/index.js

@@ -5,12 +5,14 @@ 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 = exports.combineFrameStyle = void 0;
+exports.sleep = exports.openUrl = exports.isSpecialKey = exports.isSpecialEvent = exports.isSpecialClick = exports.isIntersectionObserverSupported = exports.isIframe = exports.isCardWithData = exports.importWithRetry = exports.handleOnClick = exports.getPreviewUrlWithTheme = 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"));
 var _react = _interopRequireDefault(require("react"));
 var _reactLoadable = _interopRequireDefault(require("react-loadable"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _tokens = require("@atlaskit/tokens");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var isCardWithData = exports.isCardWithData = function isCardWithData(props) {
@@ -464,4 +466,17 @@ var combineFrameStyle = exports.combineFrameStyle = function combineFrameStyle(f
   if (isFrameVisible) {
     return 'show';
   }
+};
+
+/**
+ * Append a theme to the URL if it exists
+ * @param previewUrl
+ * @param themeState
+ */
+var getPreviewUrlWithTheme = exports.getPreviewUrlWithTheme = function getPreviewUrlWithTheme(previewUrl, themeState) {
+  if ((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.enable-theme-state-url')) {
+    var themeStateQueryString = encodeURIComponent((0, _tokens.themeObjectToString)(themeState));
+    return "".concat(previewUrl).concat(previewUrl.includes('?') ? '&' : '?', "themeState=").concat(themeStateQueryString);
+  }
+  return "".concat(previewUrl).concat(previewUrl.includes('?') ? '&' : '?', "themeMode=").concat(themeState.colorMode);
 };

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

@@ -12,6 +12,7 @@ var _ExpandedFrame = require("../components/ExpandedFrame");
 var _ImageIcon = require("../components/ImageIcon");
 var _Frame = require("../components/Frame");
 var _tokens = require("@atlaskit/tokens");
+var _utils = require("../../../utils");
 /** @jsx jsx */
 
 var EmbedCardResolvedView = exports.EmbedCardResolvedView = /*#__PURE__*/_react2.default.forwardRef(function (_ref, embedIframeRef) {
@@ -48,11 +49,11 @@ var EmbedCardResolvedView = exports.EmbedCardResolvedView = /*#__PURE__*/_react2
       default: linkGlyph
     });
   }, [src, linkGlyph, iconFromContext]);
-  var _useThemeObserver = (0, _tokens.useThemeObserver)(),
-    colorMode = _useThemeObserver.colorMode;
+  var themeState = (0, _tokens.useThemeObserver)();
+  var colorMode = themeState === null || themeState === void 0 ? void 0 : themeState.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);
+    previewUrl = (0, _utils.getPreviewUrlWithTheme)(previewUrl, themeState);
   }
   return (0, _react.jsx)(_ExpandedFrame.ExpandedFrame, {
     isSelected: isSelected,

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

@@ -92,8 +92,8 @@ var EmbedModal = function EmbedModal(_ref) {
       });
     }
   }, [onResize, width]);
-  var _useThemeObserver = (0, _tokens.useThemeObserver)(),
-    colorMode = _useThemeObserver.colorMode;
+  var themeState = (0, _tokens.useThemeObserver)();
+  var colorMode = themeState === null || themeState === void 0 ? void 0 : themeState.colorMode;
   var previewUrl = src;
   var handleOnViewActionClick = (0, _react.useCallback)(function () {
     invoke({
@@ -144,7 +144,7 @@ var EmbedModal = function EmbedModal(_ref) {
     });
   }, [download, extensionKey, invoke]);
   if (previewUrl && isSupportTheming && colorMode) {
-    previewUrl = "".concat(previewUrl).concat(previewUrl.includes('?') ? '&' : '?', "themeMode=").concat(colorMode);
+    previewUrl = (0, _utils.getPreviewUrlWithTheme)(previewUrl, themeState);
   }
   return /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTransition, null, isOpen && /*#__PURE__*/_react.default.createElement(_modalDialog.default, {
     height: "100%",

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

package/dist/es2019/utils/index.js

@@ -1,5 +1,7 @@
 import React from 'react';
 import Loadable from 'react-loadable';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { themeObjectToString } from '@atlaskit/tokens';
 export const isCardWithData = props => !!props.data;
 export const isSpecialEvent = evt => evt.isDefaultPrevented() && (isIframe() || isSpecialKey(evt) || isSpecialClick(evt));
 export const isIframe = () => window.parent !== parent;
@@ -167,4 +169,17 @@ export const combineFrameStyle = (frameStyle, isFrameVisible) => {
   if (isFrameVisible) {
     return 'show';
   }
+};
+
+/**
+ * Append a theme to the URL if it exists
+ * @param previewUrl
+ * @param themeState
+ */
+export const getPreviewUrlWithTheme = (previewUrl, themeState) => {
+  if (getBooleanFF('platform.linking-platform.smart-card.enable-theme-state-url')) {
+    const themeStateQueryString = encodeURIComponent(themeObjectToString(themeState));
+    return `${previewUrl}${previewUrl.includes('?') ? '&' : '?'}themeState=${themeStateQueryString}`;
+  }
+  return `${previewUrl}${previewUrl.includes('?') ? '&' : '?'}themeMode=${themeState.colorMode}`;
 };

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

@@ -6,6 +6,7 @@ import { ExpandedFrame } from '../components/ExpandedFrame';
 import { ImageIcon } from '../components/ImageIcon';
 import { Frame } from '../components/Frame';
 import { useThemeObserver } from '@atlaskit/tokens';
+import { getPreviewUrlWithTheme } from '../../../utils';
 export const EmbedCardResolvedView = /*#__PURE__*/React.forwardRef(({
   link,
   context,
@@ -38,12 +39,11 @@ export const EmbedCardResolvedView = /*#__PURE__*/React.forwardRef(({
       default: linkGlyph
     });
   }, [src, linkGlyph, iconFromContext]);
-  const {
-    colorMode
-  } = useThemeObserver();
+  const themeState = useThemeObserver();
+  const colorMode = themeState === null || themeState === void 0 ? void 0 : themeState.colorMode;
   let previewUrl = preview === null || preview === void 0 ? void 0 : preview.src;
   if (previewUrl && isSupportTheming && colorMode) {
-    previewUrl = `${previewUrl}${previewUrl.includes('?') ? '&' : '?'}themeMode=${colorMode}`;
+    previewUrl = getPreviewUrlWithTheme(previewUrl, themeState);
   }
   return jsx(ExpandedFrame, {
     isSelected: isSelected,

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

@@ -9,7 +9,7 @@ import withAnalytics from './components/analytics';
 import { useThemeObserver } from '@atlaskit/tokens';
 import useInvokeClientAction from '../../state/hooks/use-invoke-client-action';
 import { ActionName, CardDisplay } from '../../constants';
-import { downloadUrl, openUrl } from '../../utils';
+import { downloadUrl, getPreviewUrlWithTheme, openUrl } from '../../utils';
 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 = ({
@@ -65,9 +65,8 @@ const EmbedModal = ({
       });
     }
   }, [onResize, width]);
-  const {
-    colorMode
-  } = useThemeObserver();
+  const themeState = useThemeObserver();
+  const colorMode = themeState === null || themeState === void 0 ? void 0 : themeState.colorMode;
   let previewUrl = src;
   const handleOnViewActionClick = useCallback(() => {
     invoke({
@@ -86,7 +85,7 @@ const EmbedModal = ({
     });
   }, [download, extensionKey, invoke]);
   if (previewUrl && isSupportTheming && colorMode) {
-    previewUrl = `${previewUrl}${previewUrl.includes('?') ? '&' : '?'}themeMode=${colorMode}`;
+    previewUrl = getPreviewUrlWithTheme(previewUrl, themeState);
   }
   return /*#__PURE__*/React.createElement(ModalTransition, null, isOpen && /*#__PURE__*/React.createElement(ModalDialog, {
     height: "100%",

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: "26.54.0",
+  packageVersion: "26.55.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: "26.54.0"
+  packageVersion: "26.55.1"
 };
 export var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

package/dist/esm/utils/index.js

@@ -3,6 +3,8 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React from 'react';
 import Loadable from 'react-loadable';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { themeObjectToString } from '@atlaskit/tokens';
 export var isCardWithData = function isCardWithData(props) {
   return !!props.data;
 };
@@ -354,4 +356,17 @@ export var combineFrameStyle = function combineFrameStyle(frameStyle, isFrameVis
   if (isFrameVisible) {
     return 'show';
   }
+};
+
+/**
+ * Append a theme to the URL if it exists
+ * @param previewUrl
+ * @param themeState
+ */
+export var getPreviewUrlWithTheme = function getPreviewUrlWithTheme(previewUrl, themeState) {
+  if (getBooleanFF('platform.linking-platform.smart-card.enable-theme-state-url')) {
+    var themeStateQueryString = encodeURIComponent(themeObjectToString(themeState));
+    return "".concat(previewUrl).concat(previewUrl.includes('?') ? '&' : '?', "themeState=").concat(themeStateQueryString);
+  }
+  return "".concat(previewUrl).concat(previewUrl.includes('?') ? '&' : '?', "themeMode=").concat(themeState.colorMode);
 };

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

@@ -6,6 +6,7 @@ import { ExpandedFrame } from '../components/ExpandedFrame';
 import { ImageIcon } from '../components/ImageIcon';
 import { Frame } from '../components/Frame';
 import { useThemeObserver } from '@atlaskit/tokens';
+import { getPreviewUrlWithTheme } from '../../../utils';
 export var EmbedCardResolvedView = /*#__PURE__*/React.forwardRef(function (_ref, embedIframeRef) {
   var link = _ref.link,
     context = _ref.context,
@@ -40,11 +41,11 @@ export var EmbedCardResolvedView = /*#__PURE__*/React.forwardRef(function (_ref,
       default: linkGlyph
     });
   }, [src, linkGlyph, iconFromContext]);
-  var _useThemeObserver = useThemeObserver(),
-    colorMode = _useThemeObserver.colorMode;
+  var themeState = useThemeObserver();
+  var colorMode = themeState === null || themeState === void 0 ? void 0 : themeState.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);
+    previewUrl = getPreviewUrlWithTheme(previewUrl, themeState);
   }
   return jsx(ExpandedFrame, {
     isSelected: isSelected,

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

@@ -12,7 +12,7 @@ import withAnalytics from './components/analytics';
 import { useThemeObserver } from '@atlaskit/tokens';
 import useInvokeClientAction from '../../state/hooks/use-invoke-client-action';
 import { ActionName, CardDisplay } from '../../constants';
-import { downloadUrl, openUrl } from '../../utils';
+import { downloadUrl, getPreviewUrlWithTheme, openUrl } from '../../utils';
 var toSize = function toSize(width) {
   return width === MAX_MODAL_SIZE ? EmbedModalSize.Large : EmbedModalSize.Small;
 };
@@ -82,8 +82,8 @@ var EmbedModal = function EmbedModal(_ref) {
       });
     }
   }, [onResize, width]);
-  var _useThemeObserver = useThemeObserver(),
-    colorMode = _useThemeObserver.colorMode;
+  var themeState = useThemeObserver();
+  var colorMode = themeState === null || themeState === void 0 ? void 0 : themeState.colorMode;
   var previewUrl = src;
   var handleOnViewActionClick = useCallback(function () {
     invoke({
@@ -134,7 +134,7 @@ var EmbedModal = function EmbedModal(_ref) {
     });
   }, [download, extensionKey, invoke]);
   if (previewUrl && isSupportTheming && colorMode) {
-    previewUrl = "".concat(previewUrl).concat(previewUrl.includes('?') ? '&' : '?', "themeMode=").concat(colorMode);
+    previewUrl = getPreviewUrlWithTheme(previewUrl, themeState);
   }
   return /*#__PURE__*/React.createElement(ModalTransition, null, isOpen && /*#__PURE__*/React.createElement(ModalDialog, {
     height: "100%",

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: "26.54.0",
+  packageVersion: "26.55.1",
   componentName: 'linkUrl'
 };
 var Link = withLinkClickedEvent('a');

package/dist/types/utils/index.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { CardProps } from '../view/Card';
 import { FrameStyle } from '../view/EmbedCard/types';
+import { ActiveThemeState } from '@atlaskit/tokens/src/theme-config';
 export declare const isCardWithData: (props: CardProps) => boolean;
 export declare const isSpecialEvent: (evt: React.MouseEvent | React.KeyboardEvent) => boolean;
 export declare const isIframe: () => boolean;
@@ -29,3 +30,9 @@ export declare const openUrl: (url?: string) => Promise<void>;
  * This function is to be removed on deprecation of isFrameVisible.
  */
 export declare const combineFrameStyle: (frameStyle?: CardProps['frameStyle'], isFrameVisible?: CardProps['isFrameVisible']) => FrameStyle | undefined;
+/**
+ * Append a theme to the URL if it exists
+ * @param previewUrl
+ * @param themeState
+ */
+export declare const getPreviewUrlWithTheme: (previewUrl: string, themeState: Partial<ActiveThemeState>) => string;

package/dist/types-ts4.5/utils/index.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { CardProps } from '../view/Card';
 import { FrameStyle } from '../view/EmbedCard/types';
+import { ActiveThemeState } from '@atlaskit/tokens/src/theme-config';
 export declare const isCardWithData: (props: CardProps) => boolean;
 export declare const isSpecialEvent: (evt: React.MouseEvent | React.KeyboardEvent) => boolean;
 export declare const isIframe: () => boolean;
@@ -29,3 +30,9 @@ export declare const openUrl: (url?: string) => Promise<void>;
  * This function is to be removed on deprecation of isFrameVisible.
  */
 export declare const combineFrameStyle: (frameStyle?: CardProps['frameStyle'], isFrameVisible?: CardProps['isFrameVisible']) => FrameStyle | undefined;
+/**
+ * Append a theme to the URL if it exists
+ * @param previewUrl
+ * @param themeState
+ */
+export declare const getPreviewUrlWithTheme: (previewUrl: string, themeState: Partial<ActiveThemeState>) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "26.54.0",
+  "version": "26.55.1",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -169,6 +169,9 @@
     },
     "platform.linking-platform.smart-card.hover-card-action-redesign": {
       "type": "boolean"
+    },
+    "platform.linking-platform.smart-card.enable-theme-state-url": {
+      "type": "boolean"
     }
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"