@atlaskit/smart-card 26.53.0 → 26.55.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/smart-card
 
+## 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
+
+- [#88849](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/88849) [`45f940ac839e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/45f940ac839e) - [ux] Deprecate ActionName.ViewAction for FlexibleCard and remove usage except for public API
+
 ## 26.53.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.53.0"
+  packageVersion: "26.55.0"
 };
 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/BlockCard/views/flexible/FlexibleResolvedView.js

@@ -50,9 +50,6 @@ var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
     }, {
       name: _constants.ActionName.PreviewAction,
       hideIcon: true
-    }, {
-      name: _constants.ActionName.ViewAction,
-      hideIcon: true
     }, {
       name: _constants.ActionName.DownloadAction,
       hideIcon: true

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/FlexibleCard/components/actions/index.js

@@ -40,18 +40,9 @@ Object.defineProperty(exports, "PreviewAction", {
     return _previewAction.default;
   }
 });
-exports.ViewAction = void 0;
-var _constants = require("../../../../constants");
-var _utils = require("./utils");
 var _action = _interopRequireDefault(require("./action"));
 var _deleteAction = _interopRequireDefault(require("./delete-action"));
 var _editAction = _interopRequireDefault(require("./edit-action"));
 var _downloadAction = _interopRequireDefault(require("./download-action"));
 var _followAction = _interopRequireDefault(require("./follow-action"));
-var _previewAction = _interopRequireDefault(require("./preview-action"));
-/**
- * Creates a ViewAction component. Accepts default ViewActionProps, and defaults
- * to the text 'View' inside the button.
- * @see Action
- */
-var ViewAction = exports.ViewAction = (0, _utils.createDataAction)(_constants.ActionName.ViewAction);
+var _previewAction = _interopRequireDefault(require("./preview-action"));

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

@@ -39,7 +39,7 @@ var ActionBlock = function ActionBlock(_ref) {
       arr.sort(sort);
     }
     return arr.map(function (name) {
-      var Action = Actions[name];
+      var Action = name in Actions ? Actions[name] : undefined;
       return Action ? /*#__PURE__*/_react.default.createElement(Action, {
         as: "stack-item",
         spaceInline: spaceInline,
@@ -47,15 +47,7 @@ var ActionBlock = function ActionBlock(_ref) {
         onClick: function onClick() {
           return onClickCallback === null || onClickCallback === void 0 ? void 0 : onClickCallback(name);
         },
-        size: size
-        // Remove url once ViewAction is retired.
-        // This seems to be a typescript workaround
-        // because ViewAction marks it as required,
-        // which does not reflect actual implementation as the url
-        // came from data context and not all actions require url.
-        // https://product-fabric.atlassian.net/browse/EDM-9547
-        ,
-        url: "",
+        size: size,
         xcss: (0, _primitives.xcss)({
           paddingInline: padding
         })

package/dist/cjs/view/FlexibleCard/components/blocks/action-group/action-group-item/index.js

@@ -38,7 +38,7 @@ var ActionGroupItem = function ActionGroupItem(_ref) {
       onClick();
     }
   }, [onActionItemClick, onClick]);
-  var Action = Actions[name];
+  var Action = name in Actions ? Actions[name] : undefined;
   if (!Action) {
     return null;
   }
@@ -49,15 +49,7 @@ var ActionGroupItem = function ActionGroupItem(_ref) {
   if (hideIcon) {
     actionProps.icon = undefined;
   }
-  return (0, _react.jsx)(Action
-  // Remove url once ViewAction is retired.
-  // This seems to be a typescript workaround
-  // because ViewAction marks it as required,
-  // which does not reflect actual implementation as the url
-  // came from data context and not all actions require url.
-  // https://product-fabric.atlassian.net/browse/EDM-9547
-  , (0, _extends2.default)({
-    url: "",
+  return (0, _react.jsx)(Action, (0, _extends2.default)({
     asDropDownItem: asDropDownItems,
     size: size,
     appearance: appearance,

package/dist/cjs/view/FlexibleCard/components/blocks/utils.js

@@ -107,20 +107,18 @@ var filterActionItems = exports.filterActionItems = function filterActionItems()
   var items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   var context = arguments.length > 1 ? arguments[1] : undefined;
   return items.filter(function (item) {
-    var _context$actions;
     switch (item.name) {
       case _constants.ActionName.DeleteAction:
       case _constants.ActionName.EditAction:
       case _constants.ActionName.CustomAction:
         // Named and custom actions that user defines.
         return Boolean(_constants.ActionName[item.name]);
-      // Remove once ViewAction is retired
-      // https://product-fabric.atlassian.net/browse/EDM-9547
-      case _constants.ActionName.ViewAction:
-        return Boolean(context === null || context === void 0 ? void 0 : context.viewAction);
       default:
         // Action that require data from the data context to render.
-        return Boolean(context === null || context === void 0 || (_context$actions = context.actions) === null || _context$actions === void 0 ? void 0 : _context$actions[item.name]);
+        if ((context === null || context === void 0 ? void 0 : context.actions) === undefined) {
+          return false;
+        }
+        return Boolean(item.name in context.actions ? context.actions[item.name] : undefined);
     }
   });
 };

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.53.0",
+  packageVersion: "26.55.0",
   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.53.0"
+  packageVersion: "26.55.0"
 };
 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/BlockCard/views/flexible/FlexibleResolvedView.js

@@ -36,9 +36,6 @@ const FlexibleResolvedView = ({
   }, {
     name: ActionName.PreviewAction,
     hideIcon: true
-  }, {
-    name: ActionName.ViewAction,
-    hideIcon: true
   }, {
     name: ActionName.DownloadAction,
     hideIcon: true

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/FlexibleCard/components/actions/index.js

@@ -1,15 +1,6 @@
-import { ActionName } from '../../../../constants';
-import { createDataAction } from './utils';
 export { default as CustomAction } from './action';
 export { default as DeleteAction } from './delete-action';
 export { default as EditAction } from './edit-action';
 export { default as DownloadAction } from './download-action';
 export { default as FollowAction } from './follow-action';
-export { default as PreviewAction } from './preview-action';
-
-/**
- * Creates a ViewAction component. Accepts default ViewActionProps, and defaults
- * to the text 'View' inside the button.
- * @see Action
- */
-export const ViewAction = createDataAction(ActionName.ViewAction);
+export { default as PreviewAction } from './preview-action';

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

@@ -30,21 +30,13 @@ const ActionBlock = ({
       arr.sort(sort);
     }
     return arr.map(name => {
-      const Action = Actions[name];
+      const Action = name in Actions ? Actions[name] : undefined;
       return Action ? /*#__PURE__*/React.createElement(Action, {
         as: "stack-item",
         spaceInline: spaceInline,
         key: name,
         onClick: () => onClickCallback === null || onClickCallback === void 0 ? void 0 : onClickCallback(name),
-        size: size
-        // Remove url once ViewAction is retired.
-        // This seems to be a typescript workaround
-        // because ViewAction marks it as required,
-        // which does not reflect actual implementation as the url
-        // came from data context and not all actions require url.
-        // https://product-fabric.atlassian.net/browse/EDM-9547
-        ,
-        url: "",
+        size: size,
         xcss: xcss({
           paddingInline: padding
         })

package/dist/es2019/view/FlexibleCard/components/blocks/action-group/action-group-item/index.js

@@ -26,7 +26,7 @@ const ActionGroupItem = ({
       onClick();
     }
   }, [onActionItemClick, onClick]);
-  const Action = Actions[name];
+  const Action = name in Actions ? Actions[name] : undefined;
   if (!Action) {
     return null;
   }
@@ -39,15 +39,7 @@ const ActionGroupItem = ({
   if (hideIcon) {
     actionProps.icon = undefined;
   }
-  return jsx(Action
-  // Remove url once ViewAction is retired.
-  // This seems to be a typescript workaround
-  // because ViewAction marks it as required,
-  // which does not reflect actual implementation as the url
-  // came from data context and not all actions require url.
-  // https://product-fabric.atlassian.net/browse/EDM-9547
-  , _extends({
-    url: "",
+  return jsx(Action, _extends({
     asDropDownItem: asDropDownItems,
     size: size,
     appearance: appearance,

package/dist/es2019/view/FlexibleCard/components/blocks/utils.js

@@ -129,20 +129,18 @@ export const getActionGroupStyles = size => {
 };
 export const filterActionItems = (items = [], context) => {
   return items.filter(item => {
-    var _context$actions;
     switch (item.name) {
       case ActionName.DeleteAction:
       case ActionName.EditAction:
       case ActionName.CustomAction:
         // Named and custom actions that user defines.
         return Boolean(ActionName[item.name]);
-      // Remove once ViewAction is retired
-      // https://product-fabric.atlassian.net/browse/EDM-9547
-      case ActionName.ViewAction:
-        return Boolean(context === null || context === void 0 ? void 0 : context.viewAction);
       default:
         // Action that require data from the data context to render.
-        return Boolean(context === null || context === void 0 ? void 0 : (_context$actions = context.actions) === null || _context$actions === void 0 ? void 0 : _context$actions[item.name]);
+        if ((context === null || context === void 0 ? void 0 : context.actions) === undefined) {
+          return false;
+        }
+        return Boolean(item.name in context.actions ? context.actions[item.name] : undefined);
     }
   });
 };

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.53.0",
+  packageVersion: "26.55.0",
   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.53.0"
+  packageVersion: "26.55.0"
 };
 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/BlockCard/views/flexible/FlexibleResolvedView.js

@@ -40,9 +40,6 @@ var FlexibleResolvedView = function FlexibleResolvedView(_ref) {
     }, {
       name: ActionName.PreviewAction,
       hideIcon: true
-    }, {
-      name: ActionName.ViewAction,
-      hideIcon: true
     }, {
       name: ActionName.DownloadAction,
       hideIcon: true

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/FlexibleCard/components/actions/index.js

@@ -1,15 +1,6 @@
-import { ActionName } from '../../../../constants';
-import { createDataAction } from './utils';
 export { default as CustomAction } from './action';
 export { default as DeleteAction } from './delete-action';
 export { default as EditAction } from './edit-action';
 export { default as DownloadAction } from './download-action';
 export { default as FollowAction } from './follow-action';
-export { default as PreviewAction } from './preview-action';
-
-/**
- * Creates a ViewAction component. Accepts default ViewActionProps, and defaults
- * to the text 'View' inside the button.
- * @see Action
- */
-export var ViewAction = createDataAction(ActionName.ViewAction);
+export { default as PreviewAction } from './preview-action';

package/dist/esm/view/FlexibleCard/components/blocks/action-block/index.js

@@ -30,7 +30,7 @@ var ActionBlock = function ActionBlock(_ref) {
       arr.sort(sort);
     }
     return arr.map(function (name) {
-      var Action = Actions[name];
+      var Action = name in Actions ? Actions[name] : undefined;
       return Action ? /*#__PURE__*/React.createElement(Action, {
         as: "stack-item",
         spaceInline: spaceInline,
@@ -38,15 +38,7 @@ var ActionBlock = function ActionBlock(_ref) {
         onClick: function onClick() {
           return onClickCallback === null || onClickCallback === void 0 ? void 0 : onClickCallback(name);
         },
-        size: size
-        // Remove url once ViewAction is retired.
-        // This seems to be a typescript workaround
-        // because ViewAction marks it as required,
-        // which does not reflect actual implementation as the url
-        // came from data context and not all actions require url.
-        // https://product-fabric.atlassian.net/browse/EDM-9547
-        ,
-        url: "",
+        size: size,
         xcss: xcss({
           paddingInline: padding
         })

package/dist/esm/view/FlexibleCard/components/blocks/action-group/action-group-item/index.js

@@ -28,7 +28,7 @@ var ActionGroupItem = function ActionGroupItem(_ref) {
       onClick();
     }
   }, [onActionItemClick, onClick]);
-  var Action = Actions[name];
+  var Action = name in Actions ? Actions[name] : undefined;
   if (!Action) {
     return null;
   }
@@ -39,15 +39,7 @@ var ActionGroupItem = function ActionGroupItem(_ref) {
   if (hideIcon) {
     actionProps.icon = undefined;
   }
-  return jsx(Action
-  // Remove url once ViewAction is retired.
-  // This seems to be a typescript workaround
-  // because ViewAction marks it as required,
-  // which does not reflect actual implementation as the url
-  // came from data context and not all actions require url.
-  // https://product-fabric.atlassian.net/browse/EDM-9547
-  , _extends({
-    url: "",
+  return jsx(Action, _extends({
     asDropDownItem: asDropDownItems,
     size: size,
     appearance: appearance,

package/dist/esm/view/FlexibleCard/components/blocks/utils.js

@@ -98,20 +98,18 @@ export var filterActionItems = function filterActionItems() {
   var items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   var context = arguments.length > 1 ? arguments[1] : undefined;
   return items.filter(function (item) {
-    var _context$actions;
     switch (item.name) {
       case ActionName.DeleteAction:
       case ActionName.EditAction:
       case ActionName.CustomAction:
         // Named and custom actions that user defines.
         return Boolean(ActionName[item.name]);
-      // Remove once ViewAction is retired
-      // https://product-fabric.atlassian.net/browse/EDM-9547
-      case ActionName.ViewAction:
-        return Boolean(context === null || context === void 0 ? void 0 : context.viewAction);
       default:
         // Action that require data from the data context to render.
-        return Boolean(context === null || context === void 0 || (_context$actions = context.actions) === null || _context$actions === void 0 ? void 0 : _context$actions[item.name]);
+        if ((context === null || context === void 0 ? void 0 : context.actions) === undefined) {
+          return false;
+        }
+        return Boolean(item.name in context.actions ? context.actions[item.name] : undefined);
     }
   });
 };