@atlaskit/smart-card 26.52.1 → 26.52.3

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/smart-card
 
+## 26.52.3
+
+### Patch Changes
+
+- [#88485](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/88485) [`1b538a48d41d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/1b538a48d41d) - Update aAiSummary service call to use smart_links prompt_id
+- [#87234](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/87234) [`62622d539ca6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/62622d539ca6) - Add ActionBlock
+
+## 26.52.2
+
+### Patch Changes
+
+- [#88354](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/88354) [`4c87d9b4f0c2`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4c87d9b4f0c2) - The internal composition of this component has changed. There is no expected change in behavior.
+- Updated dependencies
+
 ## 26.52.1
 
 ### Patch Changes

package/dist/cjs/extractors/flexible/actions/index.js

@@ -12,7 +12,7 @@ var _extractPreviewAction = require("./extract-preview-action");
 var _extractFollowAction = _interopRequireDefault(require("./extract-follow-action"));
 var extractActions = function extractActions(response, data, actionOptions, id) {
   var _action;
-  var action = (_action = {}, (0, _defineProperty2.default)(_action, _constants.ActionName.PreviewAction, (0, _extractPreviewAction.extractPreviewAction)(response, actionOptions)), (0, _defineProperty2.default)(_action, _constants.ActionName.DownloadAction, (0, _extractDownloadAction.extractDownloadAction)(data, actionOptions)), (0, _defineProperty2.default)(_action, _constants.ActionName.FollowAction, (0, _extractFollowAction.default)(response, actionOptions, id)), _action);
+  var action = (_action = {}, (0, _defineProperty2.default)(_action, _constants.ActionName.DownloadAction, (0, _extractDownloadAction.extractDownloadAction)(data, actionOptions)), (0, _defineProperty2.default)(_action, _constants.ActionName.FollowAction, (0, _extractFollowAction.default)(response, actionOptions, id)), (0, _defineProperty2.default)(_action, _constants.ActionName.PreviewAction, (0, _extractPreviewAction.extractPreviewAction)(response, actionOptions)), _action);
   return Object.values(action).some(function (value) {
     return Boolean(value);
   }) ? action : undefined;

package/dist/cjs/messages.js

@@ -261,6 +261,11 @@ var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: 'Owned by {context}',
     description: 'Indicates the person or entity that owns or maintains the resource.'
   },
+  preview_description: {
+    id: 'fabric.linking.preview_description.nonfinal',
+    defaultMessage: 'Open a full screen preview of this link',
+    description: 'Description on what Preview does'
+  },
   preview_improved: {
     id: 'fabric.linking.preview_improved',
     defaultMessage: 'Open preview',

package/dist/cjs/state/hooks/use-ai-summary/ai-summary-service/index.js

@@ -29,49 +29,44 @@ var AISummaryService = exports.AISummaryService = /*#__PURE__*/function () {
       status: 'ready'
     });
     (0, _defineProperty2.default)(this, "subscribedStateSetters", new Set());
-    (0, _defineProperty2.default)(this, "fetchStream", /*#__PURE__*/function () {
-      var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(summaryStyle) {
-        var payload, options, path, requestUrl, response;
-        return _regenerator.default.wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              payload = {
-                recipient_agent_named_id: 'summary_agent',
-                agent_input_context: {
-                  content_url: _this.url,
-                  content_ari: _this.ari,
-                  summary_style: summaryStyle,
-                  summary_output_mimetype: 'text/markdown'
-                }
-              };
-              options = {
-                method: 'POST',
-                headers: _this.config.headers,
-                body: JSON.stringify(payload)
-              };
-              path = 'chat/v1/invoke_agent/stream';
-              requestUrl = (0, _utils.addPath)(_this.config.baseUrl, path);
-              _context.next = 6;
-              return fetch(requestUrl, options);
-            case 6:
-              response = _context.sent;
-              if (!(!response.ok || response.status >= 400)) {
-                _context.next = 11;
-                break;
+    (0, _defineProperty2.default)(this, "fetchStream", /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+      var payload, options, path, requestUrl, response;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            payload = {
+              recipient_agent_named_id: 'summary_agent',
+              agent_input_context: {
+                content_url: _this.url,
+                content_ari: _this.ari,
+                prompt_id: 'smart_links',
+                summary_output_mimetype: 'text/markdown'
               }
-              throw new Error("Status: ".concat(response.status, "\n URL: ").concat(_this.url, "\n StatusText ").concat(response.statusText));
-            case 11:
-              return _context.abrupt("return", (0, _utils.readStream)(response));
-            case 12:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee);
-      }));
-      return function (_x) {
-        return _ref.apply(this, arguments);
-      };
-    }());
+            };
+            options = {
+              method: 'POST',
+              headers: _this.config.headers,
+              body: JSON.stringify(payload)
+            };
+            path = 'chat/v1/invoke_agent/stream';
+            requestUrl = (0, _utils.addPath)(_this.config.baseUrl, path);
+            _context.next = 6;
+            return fetch(requestUrl, options);
+          case 6:
+            response = _context.sent;
+            if (!(!response.ok || response.status >= 400)) {
+              _context.next = 11;
+              break;
+            }
+            throw new Error("Status: ".concat(response.status, "\n URL: ").concat(_this.url, "\n StatusText ").concat(response.statusText));
+          case 11:
+            return _context.abrupt("return", (0, _utils.readStream)(response));
+          case 12:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    })));
     var defaultConfig = {
       baseUrl: '/gateway/api/assist',
       headers: {
@@ -95,35 +90,10 @@ var AISummaryService = exports.AISummaryService = /*#__PURE__*/function () {
     key: "summariseUrl",
     value: function () {
       var _summariseUrl = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
-        var summaryStyle,
-          _iterator2,
-          _step2,
-          _subscriber,
-          id,
-          _this$onStart,
-          _this$onSuccess,
-          stream,
-          bufferContent,
-          _iteratorAbruptCompletion,
-          _didIteratorError,
-          _iteratorError,
-          _iterator,
-          _step,
-          chunk,
-          _iterator3,
-          _step3,
-          subscriber,
-          _chunk$message,
-          _this$onError,
-          message,
-          _iterator4,
-          _step4,
-          _subscriber2,
-          _args2 = arguments;
+        var _iterator2, _step2, _subscriber, id, _this$onStart, _this$onSuccess, stream, bufferContent, _iteratorAbruptCompletion, _didIteratorError, _iteratorError, _iterator, _step, chunk, _iterator3, _step3, subscriber, _chunk$message, _this$onError, message, _iterator4, _step4, _subscriber2;
         return _regenerator.default.wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
-              summaryStyle = _args2.length > 0 && _args2[0] !== undefined ? _args2[0] : 'medium';
               this.state = {
                 status: 'loading',
                 content: ''
@@ -140,23 +110,23 @@ var AISummaryService = exports.AISummaryService = /*#__PURE__*/function () {
                 _iterator2.f();
               }
               id = (0, _uuid.default)();
-              _context2.prev = 5;
+              _context2.prev = 4;
               (_this$onStart = this.onStart) === null || _this$onStart === void 0 || _this$onStart.call(this, id);
-              _context2.next = 9;
-              return this.fetchStream(summaryStyle);
-            case 9:
+              _context2.next = 8;
+              return this.fetchStream();
+            case 8:
               stream = _context2.sent;
               bufferContent = '';
               _iteratorAbruptCompletion = false;
               _didIteratorError = false;
-              _context2.prev = 13;
+              _context2.prev = 12;
               _iterator = _asyncIterator(stream);
-            case 15:
-              _context2.next = 17;
+            case 14:
+              _context2.next = 16;
               return _iterator.next();
-            case 17:
+            case 16:
               if (!(_iteratorAbruptCompletion = !(_step = _context2.sent).done)) {
-                _context2.next = 26;
+                _context2.next = 25;
                 break;
               }
               chunk = _step.value;
@@ -182,53 +152,53 @@ var AISummaryService = exports.AISummaryService = /*#__PURE__*/function () {
                 bufferContent = chunk.message.message.content;
               }
               if (!(chunk.type === 'ERROR')) {
-                _context2.next = 23;
+                _context2.next = 22;
                 break;
               }
               throw new Error(chunk === null || chunk === void 0 || (_chunk$message = chunk.message) === null || _chunk$message === void 0 ? void 0 : _chunk$message.message_template);
-            case 23:
+            case 22:
               _iteratorAbruptCompletion = false;
-              _context2.next = 15;
+              _context2.next = 14;
               break;
-            case 26:
-              _context2.next = 32;
+            case 25:
+              _context2.next = 31;
               break;
-            case 28:
-              _context2.prev = 28;
-              _context2.t0 = _context2["catch"](13);
+            case 27:
+              _context2.prev = 27;
+              _context2.t0 = _context2["catch"](12);
               _didIteratorError = true;
               _iteratorError = _context2.t0;
-            case 32:
+            case 31:
+              _context2.prev = 31;
               _context2.prev = 32;
-              _context2.prev = 33;
               if (!(_iteratorAbruptCompletion && _iterator.return != null)) {
-                _context2.next = 37;
+                _context2.next = 36;
                 break;
               }
-              _context2.next = 37;
+              _context2.next = 36;
               return _iterator.return();
-            case 37:
-              _context2.prev = 37;
+            case 36:
+              _context2.prev = 36;
               if (!_didIteratorError) {
-                _context2.next = 40;
+                _context2.next = 39;
                 break;
               }
               throw _iteratorError;
+            case 39:
+              return _context2.finish(36);
             case 40:
-              return _context2.finish(37);
+              return _context2.finish(31);
             case 41:
-              return _context2.finish(32);
-            case 42:
               (_this$onSuccess = this.onSuccess) === null || _this$onSuccess === void 0 || _this$onSuccess.call(this, id);
               this.state = {
                 status: 'done',
                 content: bufferContent
               };
-              _context2.next = 51;
+              _context2.next = 50;
               break;
-            case 46:
-              _context2.prev = 46;
-              _context2.t1 = _context2["catch"](5);
+            case 45:
+              _context2.prev = 45;
+              _context2.t1 = _context2["catch"](4);
               message = _context2.t1 instanceof Error && this.isExpectedError(_context2.t1.message) ? _context2.t1.message : 'UNEXPECTED';
               (_this$onError = this.onError) === null || _this$onError === void 0 || _this$onError.call(this, id, message);
               this.state = {
@@ -236,7 +206,7 @@ var AISummaryService = exports.AISummaryService = /*#__PURE__*/function () {
                 content: '',
                 error: message
               };
-            case 51:
+            case 50:
               _iterator4 = _createForOfIteratorHelper(this.subscribedStateSetters);
               try {
                 for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
@@ -248,11 +218,11 @@ var AISummaryService = exports.AISummaryService = /*#__PURE__*/function () {
               } finally {
                 _iterator4.f();
               }
-            case 53:
+            case 52:
             case "end":
               return _context2.stop();
           }
-        }, _callee2, this, [[5, 46], [13, 28, 32, 42], [33,, 37, 41]]);
+        }, _callee2, this, [[4, 45], [12, 27, 31, 41], [32,, 36, 40]]);
       }));
       function summariseUrl() {
         return _summariseUrl.apply(this, arguments);

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.52.1"
+  packageVersion: "26.52.3"
 };
 var TrackQuickActionType = exports.TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
   TrackQuickActionType["StatusUpdate"] = "StatusUpdate";

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

@@ -5,13 +5,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _constants = require("../../../../../../constants");
 var _utils = require("../../../utils");
-var _templateObject;
 /** @jsx jsx */
+
 var getIconWidth = function getIconWidth(size) {
   switch (size) {
     case _constants.SmartLinkSize.XLarge:
@@ -23,16 +22,34 @@ var getIconWidth = function getIconWidth(size) {
       return '1rem';
   }
 };
-var getIconStyles = function getIconStyles(size, isDisabled) {
-  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  ", ";\n"])), isDisabled ? "var(--ds-text-disabled, #6B778C)" : "var(--ds-icon, #44546F)", (0, _utils.getIconSizeStyles)(getIconWidth(size)));
+var getIconStyles = function getIconStyles(isDisabled) {
+  return (0, _react2.css)({
+    color: isDisabled ? "var(--ds-text-disabled, #6B778C)" : "var(--ds-icon, #44546F)"
+  });
 };
+var backgroundStyles = (0, _react2.css)({
+  backgroundColor: "var(--ds-background-brand-subtlest, #E9F2FF)",
+  borderRadius: "var(--ds-border-radius-050, 2px)",
+  color: "var(--ds-icon-brand, #0C66E4)",
+  display: 'inline-block',
+  lineHeight: 0,
+  padding: "var(--ds-space-025, 2px)",
+  'span,svg,img': {
+    lineHeight: 0
+  },
+  // Use !important to win over `style` prop specificity in DS Spinner. :(
+  circle: {
+    stroke: "var(--ds-icon-brand, #0C66E4)".concat(" !important")
+  }
+});
 var ActionIcon = function ActionIcon(_ref) {
   var size = _ref.size,
     testId = _ref.testId,
     icon = _ref.icon,
-    isDisabled = _ref.isDisabled;
+    isDisabled = _ref.isDisabled,
+    showBackground = _ref.showBackground;
   return (0, _react2.jsx)("span", {
-    css: getIconStyles(size, isDisabled),
+    css: [getIconStyles(isDisabled), (0, _utils.getIconSizeStyles)(getIconWidth(size)), showBackground && backgroundStyles],
     "data-testid": "".concat(testId, "-icon")
   }, icon);
 };

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

@@ -0,0 +1,94 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _primitives = require("@atlaskit/primitives");
+var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+var _react = _interopRequireWildcard(require("react"));
+var _utils = require("../../../utils");
+var _actionIcon = _interopRequireDefault(require("../action-icon"));
+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 buttonStyles = (0, _primitives.xcss)({
+  all: 'unset',
+  padding: 'space.050',
+  width: '100%',
+  ':focus:not(:focus-visible)': {
+    outline: 'none'
+  },
+  ':focus': {
+    outlineColor: 'color.border.focused',
+    // xcss outlineOffset does not support space.negative.025
+    // @ts-ignore-next-line TS2322: Type "var(--ds-space-negative-025)" is not assignable to type
+    outlineOffset: "var(--ds-space-negative-025, -2px)",
+    outlineStyle: 'solid',
+    outlineWidth: 'border.width.outline'
+  },
+  ':hover': {
+    backgroundColor: 'color.background.neutral.subtle.hovered'
+  },
+  ':active': {
+    backgroundColor: 'color.background.neutral.subtle.pressed'
+  }
+});
+var contentStyles = (0, _primitives.xcss)({
+  color: 'color.text',
+  // Replace with font token once it becomes stable (currently alpha)
+  // font: 'font.body.small',
+  fontSize: '12px',
+  fontStyle: 'normal',
+  fontWeight: '400',
+  lineHeight: '20px'
+});
+var ActionStackItem = function ActionStackItem(_ref) {
+  var content = _ref.content,
+    iconOption = _ref.icon,
+    isDisabled = _ref.isDisabled,
+    isLoading = _ref.isLoading,
+    onClickCallback = _ref.onClick,
+    size = _ref.size,
+    spaceOption = _ref.space,
+    testId = _ref.testId,
+    tooltipMessage = _ref.tooltipMessage,
+    xcss = _ref.xcss;
+  var space = spaceOption !== null && spaceOption !== void 0 ? spaceOption : (0, _utils.getPrimitivesInlineSpaceBySize)(size);
+  var onClick = (0, _react.useCallback)(function () {
+    if (!isDisabled && !isLoading && onClickCallback) {
+      onClickCallback();
+    }
+  }, [isDisabled, isLoading, onClickCallback]);
+  var icon = iconOption && isLoading ? /*#__PURE__*/_react.default.createElement(_actionIcon.default, {
+    icon: /*#__PURE__*/_react.default.createElement(_spinner.default, {
+      testId: "".concat(testId, "-loading")
+    }),
+    showBackground: true,
+    size: size
+  }) : iconOption;
+
+  // Replace Box with Pressable once it becomes stable (currently beta)
+  return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+    content: tooltipMessage || content,
+    hideTooltipOnMouseDown: true
+  }, function (tooltipProps) {
+    return /*#__PURE__*/_react.default.createElement(_primitives.Box, (0, _extends2.default)({
+      as: "button",
+      xcss: [buttonStyles, xcss]
+    }, tooltipProps, {
+      onClick: onClick
+    }), /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
+      alignBlock: "center",
+      grow: "fill",
+      space: space,
+      testId: testId
+    }, icon, /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+      xcss: contentStyles
+    }, content)));
+  });
+};
+var _default = exports.default = ActionStackItem;

package/dist/cjs/view/FlexibleCard/components/actions/action/action-stack-item/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _react2 = require("@emotion/react");
+var _react = require("@emotion/react");
 var _constants = require("../../../../../constants");
+var _actionStackItem = _interopRequireDefault(require("./action-stack-item"));
 var _actionButton = _interopRequireDefault(require("./action-button"));
 var _actionDropdownItem = _interopRequireDefault(require("./action-dropdown-item"));
 var _actionIcon = _interopRequireDefault(require("./action-icon"));
@@ -17,12 +17,10 @@ var _actionIcon = _interopRequireDefault(require("./action-icon"));
  * A base action that can be triggered with an on click.
  * @internal
  * @param {ActionProps} ActionProps - The props necessary for the Action.
- * @see DeleteAction
- * @see EditAction
- * @see CustomAction
  */
 var Action = function Action(_ref) {
-  var _ref$appearance = _ref.appearance,
+  var as = _ref.as,
+    _ref$appearance = _ref.appearance,
     appearance = _ref$appearance === void 0 ? 'subtle' : _ref$appearance,
     content = _ref.content,
     _ref$isLoading = _ref.isLoading,
@@ -35,44 +33,62 @@ var Action = function Action(_ref) {
     icon = _ref.icon,
     _ref$iconPosition = _ref.iconPosition,
     iconPosition = _ref$iconPosition === void 0 ? 'before' : _ref$iconPosition,
+    spaceInline = _ref.spaceInline,
     tooltipMessage = _ref.tooltipMessage,
+    xcss = _ref.xcss,
     asDropDownItem = _ref.asDropDownItem,
     overrideCss = _ref.overrideCss,
     isDisabled = _ref.isDisabled;
   if (!onClick) {
     return null;
   }
-  var actionIcon = icon && (0, _react2.jsx)(_actionIcon.default, {
+  var isStackItem = as === 'stack-item';
+  var isDropdownItem = as === 'dropdown-item' || asDropDownItem;
+  var actionIcon = icon && (0, _react.jsx)(_actionIcon.default, {
     isDisabled: isDisabled,
     icon: icon,
     size: size,
+    showBackground: isStackItem,
     testId: testId
   });
   var iconBefore = icon && iconPosition === 'before' ? actionIcon : undefined;
   var iconAfter = icon && iconPosition === 'after' ? actionIcon : undefined;
-  if (asDropDownItem) {
-    return (0, _react2.jsx)(_actionDropdownItem.default, {
+  if (isStackItem) {
+    return (0, _react.jsx)(_actionStackItem.default, {
       content: content,
-      iconAfter: iconAfter,
-      iconBefore: iconBefore,
+      icon: actionIcon,
+      space: spaceInline,
+      isDisabled: isDisabled,
       isLoading: isLoading,
       onClick: onClick,
-      testId: testId
+      size: size,
+      testId: testId,
+      tooltipMessage: tooltipMessage || content,
+      xcss: xcss
     });
-  } else {
-    return (0, _react2.jsx)(_actionButton.default, {
-      appearance: appearance,
+  }
+  if (isDropdownItem) {
+    return (0, _react.jsx)(_actionDropdownItem.default, {
       content: content,
       iconAfter: iconAfter,
       iconBefore: iconBefore,
       isLoading: isLoading,
       onClick: onClick,
-      overrideCss: overrideCss,
-      size: size,
-      testId: testId,
-      tooltipMessage: tooltipMessage || content,
-      isDisabled: isDisabled
+      testId: testId
     });
   }
+  return (0, _react.jsx)(_actionButton.default, {
+    appearance: appearance,
+    content: content,
+    iconAfter: iconAfter,
+    iconBefore: iconBefore,
+    isLoading: isLoading,
+    onClick: onClick,
+    overrideCss: overrideCss,
+    size: size,
+    testId: testId,
+    tooltipMessage: tooltipMessage || content,
+    isDisabled: isDisabled
+  });
 };
 var _default = exports.default = Action;

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

@@ -20,6 +20,7 @@ var _flexibleUiContext = require("../../../../../state/flexible-ui-context");
 var _useInvokeClientAction = _interopRequireDefault(require("../../../../../state/hooks/use-invoke-client-action"));
 var _utils = require("../../utils");
 var _action = _interopRequireDefault(require("../action"));
+var _previewIcon = _interopRequireDefault(require("./preview-icon"));
 var _excluded = ["onClick"];
 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; }
@@ -70,14 +71,17 @@ var PreviewAction = function PreviewAction(_ref) {
       onClickCallback();
     }
   }, [analytics, data, invoke, onClickCallback]);
+  var isStackItem = props.as === 'stack-item';
+  var Icon = isStackItem ? _previewIcon.default : _vidFullScreenOn.default;
+  var tooltipMessage = isStackItem ? _messages.messages.preview_description : _messages.messages.preview_improved;
   return data ? /*#__PURE__*/_react.default.createElement(_action.default, (0, _extends2.default)({
     content: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.preview_improved),
-    icon: /*#__PURE__*/_react.default.createElement(_vidFullScreenOn.default, {
+    icon: /*#__PURE__*/_react.default.createElement(Icon, {
       label: "Open preview"
     }),
     onClick: onClick,
     testId: "smart-action-preview-action",
-    tooltipMessage: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.preview_improved)
+    tooltipMessage: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, tooltipMessage)
   }, data, props)) : null;
 };
 var _default = exports.default = PreviewAction;

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

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _expand = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/expand"));
+var _primitives = require("@atlaskit/primitives");
+var _react = _interopRequireDefault(require("react"));
+var iconStyles = (0, _primitives.xcss)({
+  transform: 'rotate(-45deg)'
+});
+var PreviewIcon = function PreviewIcon(props) {
+  return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    xcss: iconStyles
+  }, /*#__PURE__*/_react.default.createElement(_expand.default, props));
+};
+var _default = exports.default = PreviewIcon;