@atlaskit/smart-card 26.69.1 → 26.71.0

package/dist/es2019/view/FlexibleCard/components/actions/automation-action/automation-manual-triggers/manual-triggers-modal/sub-components/rule/main.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
+import { ButtonItem } from '@atlaskit/menu';
+import { Box, Stack, xcss } from '@atlaskit/primitives';
+import Spinner from '@atlaskit/spinner';
+import { useAutomationMenu } from '../../menu-context';
+const ruleButtonStyle = xcss({
+  borderColor: 'color.border',
+  borderStyle: 'solid',
+  borderWidth: 'border.width',
+  borderRadius: 'border.radius'
+});
+const selectedRuleButtonStyle = xcss({
+  backgroundColor: 'color.background.accent.blue.subtlest',
+  borderColor: 'color.border.accent.blue',
+  borderStyle: 'solid',
+  borderWidth: 'border.width.outline',
+  borderRadius: 'border.radius'
+});
+const ruleNameStyle = xcss({
+  // Using this to increase the height of the button itself.
+  height: '28px'
+});
+export const AutomationModalRule = ({
+  rule,
+  selectedRule,
+  setSelectedRule
+}) => {
+  const {
+    createAnalyticsEvent
+  } = useAnalyticsEvents();
+  const {
+    analyticsSource,
+    invokingRuleId
+  } = useAutomationMenu();
+  const isSelectedRule = (selectedRule === null || selectedRule === void 0 ? void 0 : selectedRule.id) === rule.id;
+  const isExecuting = rule.id === invokingRuleId;
+  const ruleOnClick = () => {
+    createAnalyticsEvent({
+      type: 'sendUIEvent',
+      data: {
+        action: 'clicked',
+        actionSubject: 'button',
+        actionSubjectId: 'selectManualTriggerAutomation',
+        source: analyticsSource,
+        attributes: {
+          ruleId: rule.id.toString()
+        }
+      }
+    }).fire();
+    setSelectedRule(rule);
+  };
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: isSelectedRule ? selectedRuleButtonStyle : ruleButtonStyle
+  }, /*#__PURE__*/React.createElement(ButtonItem, {
+    isDisabled: !!invokingRuleId,
+    iconBefore: isExecuting ? /*#__PURE__*/React.createElement(Spinner, {
+      size: "small"
+    }) : null,
+    onClick: ruleOnClick
+  }, /*#__PURE__*/React.createElement(Stack, {
+    xcss: ruleNameStyle,
+    alignBlock: "center"
+  }, rule.name)));
+};

package/dist/es2019/view/FlexibleCard/components/actions/automation-action/automation-manual-triggers/manual-triggers-modal/sub-components/rule-list/index.js

@@ -0,0 +1,2 @@
+import { AutomationModalRuleList } from './main';
+export { AutomationModalRuleList };

package/dist/es2019/view/FlexibleCard/components/actions/automation-action/automation-manual-triggers/manual-triggers-modal/sub-components/rule-list/main.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { MenuGroup } from '@atlaskit/menu';
+import { Stack } from '@atlaskit/primitives';
+import { useAutomationMenu } from '../../menu-context';
+import { AutomationModalEmptyState } from '../empty-state';
+import { AutomationModalRule } from '../rule';
+export const AutomationModalRuleList = ({
+  selectedRule,
+  setSelectedRule
+}) => {
+  const {
+    rules
+  } = useAutomationMenu();
+  if (rules.length === 0) {
+    return /*#__PURE__*/React.createElement(AutomationModalEmptyState, null);
+  }
+  return /*#__PURE__*/React.createElement(MenuGroup, null, /*#__PURE__*/React.createElement(Stack, {
+    space: "space.050"
+  }, rules.map(rule => /*#__PURE__*/React.createElement(AutomationModalRule, {
+    key: `manual-rule-${rule.id}`,
+    rule: rule,
+    selectedRule: selectedRule,
+    setSelectedRule: setSelectedRule
+  }))));
+};

package/dist/es2019/view/FlexibleCard/components/actions/automation-action/automation-manual-triggers/manual-triggers-modal/sub-components/skeleton/index.js

@@ -0,0 +1 @@
+export { Skeleton } from './main';

package/dist/es2019/view/FlexibleCard/components/actions/automation-action/automation-manual-triggers/manual-triggers-modal/sub-components/skeleton/main.js

@@ -0,0 +1,79 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { keyframes, css } from '@emotion/react';
+import { N20, N30 } from '@atlaskit/theme/colors';
+const AutomationSkeletonContainer = css({
+  paddingBlock: "var(--ds-space-025, 2px)"
+});
+const SkeletonContainer = css({
+  marginBlock: "var(--ds-space-100, 8px)",
+  marginInline: "var(--ds-space-250, 20px)",
+  display: 'flex'
+});
+const SkeletonIcon = css({
+  width: "var(--ds-space-200, 16px)",
+  height: "var(--ds-space-200, 16px)",
+  display: 'inline-block',
+  borderRadius: "var(--ds-space-025, 2px)",
+  backgroundColor: 'currentColor',
+  border: `${"var(--ds-space-025, 2px)"} solid transparent`,
+  opacity: 0.15
+});
+const MenuIcon = css({
+  width: '24px',
+  height: '24px',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center'
+});
+const shimmer = keyframes({
+  '0%': {
+    backgroundPosition: '-300px 0'
+  },
+  '100%': {
+    backgroundPosition: '2000px 0'
+  }
+});
+const SkeletonText = css({
+  width: '85%',
+  height: "var(--ds-space-200, 16px)",
+  marginTop: "var(--ds-space-050, 4px)",
+  marginLeft: "var(--ds-space-150, 12px)",
+  animationDuration: '1s',
+  animationFillMode: 'forwards',
+  animationIterationCount: 'infinite',
+  animationName: shimmer,
+  animationTimingFunction: 'linear',
+  backgroundColor: `var(--ds-skeleton, ${N30})`,
+  backgroundImage: `linear-gradient(to right, ${`var(--ds-skeleton, ${N30})`} 10%, ${`var(--ds-skeleton-subtle, ${N20})`} 30%, ${`var(--ds-skeleton, ${N30})`} 50%)`,
+  backgroundRepeat: 'no-repeat'
+});
+const SkeletonLine = () => jsx("div", {
+  css: SkeletonContainer
+}, jsx("div", {
+  css: MenuIcon
+}, jsx("div", {
+  css: SkeletonIcon
+})), jsx("div", {
+  css: SkeletonText
+}));
+const getSkeletonLines = lineCount => {
+  const skeletonLines = [];
+  for (let i = 0; i < lineCount; i++) {
+    skeletonLines.push(jsx(SkeletonLine, {
+      key: `skeleton-line-${i}`
+    }));
+  }
+  return skeletonLines;
+};
+export const Skeleton = props => {
+  const {
+    lineCount = 5
+  } = props;
+  return (
+    // eslint-disable-next-line @atlaskit/design-system/use-primitives
+    jsx("div", {
+      css: AutomationSkeletonContainer
+    }, getSkeletonLines(lineCount))
+  );
+};

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

@@ -1,33 +1,56 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useState } from 'react';
+import React, { useState, lazy, Suspense } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl-next';
 import AutomationManualTriggersGlyph from './manaul-triggers-icon';
 import Action from '../action';
 import { useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
 import { ActionName } from '../../../../../constants';
 import { messages } from '../../../../../messages';
-// import { useSmartLinkContext } from '../../../../../../../link-provider/src';
-
+import { useSmartLinkContext } from '@atlaskit/link-provider';
+const AutomationModal = /*#__PURE__*/lazy(() => import( /* webpackChunkName: "@atlaskit-internal_smart-card-automation-modal" */'./automation-manual-triggers/manual-triggers-modal'));
 const handleAutomateActionClick = setIsModalOpen => {
   setIsModalOpen(true);
 };
+const handleAutomationActionClose = setIsModalOpen => {
+  setIsModalOpen(false);
+};
 const AutomationAction = props => {
-  var _context$actions;
-  const [_isModalOpen, setIsModalOpen] = useState(false);
+  var _ref, _context$actions;
+  const [isModalOpen, setIsModalOpen] = useState(false);
   const {
     formatMessage
   } = useIntl();
-  // const { connections } = useSmartLinkContext();
-
-  // const env = connections.client.envKey ?? 'prod';
+  const smartLinkContext = useSmartLinkContext();
+  const {
+    connections
+  } = smartLinkContext;
+  const environment = (_ref = connections.client.envKey) !== null && _ref !== void 0 ? _ref : 'prod';
   const context = useFlexibleUiContext();
-  const data = context === null || context === void 0 ? void 0 : (_context$actions = context.actions) === null || _context$actions === void 0 ? void 0 : _context$actions[ActionName.AutomationAction];
-  if (!data) {
+  const automationActionData = context === null || context === void 0 ? void 0 : (_context$actions = context.actions) === null || _context$actions === void 0 ? void 0 : _context$actions[ActionName.AutomationAction];
+  if (!automationActionData) {
     return null;
   }
+  const {
+    baseAutomationUrl,
+    objectName,
+    objectAri,
+    siteAri,
+    canManageAutomation,
+    analyticsSource,
+    modalTitle,
+    modalDescription
+  } = automationActionData;
   const automationActionTitle = /*#__PURE__*/React.createElement(FormattedMessage, messages.automation_action_title);
   const automationActionTooltip = /*#__PURE__*/React.createElement(FormattedMessage, messages.automation_action_tooltip);
   const automationActionIconLabel = formatMessage(messages.automation_action_icon_label);
+  const automationModalTitle = /*#__PURE__*/React.createElement(FormattedMessage, modalTitle);
+  const automationModalDescription = /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, modalDescription, {
+    values: {
+      name: objectName,
+      b: chunks => /*#__PURE__*/React.createElement("strong", null, chunks),
+      br: /*#__PURE__*/React.createElement("br", null)
+    }
+  }));
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Action, _extends({
     content: automationActionTitle,
     icon: /*#__PURE__*/React.createElement(AutomationManualTriggersGlyph, {
@@ -35,8 +58,23 @@ const AutomationAction = props => {
     }),
     testId: "smart-action-automation-action",
     tooltipMessage: automationActionTooltip
-  }, data, props, {
+  }, automationActionData, props, {
     onClick: () => handleAutomateActionClick(setIsModalOpen)
+  })), isModalOpen &&
+  /*#__PURE__*/
+  // TODO skeleton modal fallback
+  React.createElement(Suspense, {
+    fallback: false
+  }, /*#__PURE__*/React.createElement(AutomationModal, {
+    environment: environment,
+    baseAutomationUrl: baseAutomationUrl,
+    objectAri: objectAri,
+    siteAri: siteAri,
+    canManageAutomation: canManageAutomation,
+    analyticsSource: analyticsSource,
+    modalTitle: automationModalTitle,
+    modalDescription: automationModalDescription,
+    onClose: () => handleAutomationActionClose(setIsModalOpen)
   })));
 };
 export default AutomationAction;

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

@@ -41,6 +41,10 @@ const ActionBlock = ({
   const context = useFlexibleUiContext();
   const ui = useFlexibleUiOptionContext();
   const [message, setMessage] = useState();
+  const [isLoading, setIsLoading] = useState(false);
+  const onLoadingChange = useCallback(isLoading => {
+    setIsLoading(isLoading);
+  }, [setIsLoading]);
   const padding = !(ui !== null && ui !== void 0 && ui.hidePadding) ? getPrimitivesPaddingSpaceBySize((ui === null || ui === void 0 ? void 0 : ui.size) || SmartLinkSize.Medium) : undefined;
   const onClick = useCallback(name => {
     setMessage(undefined);
@@ -63,13 +67,15 @@ const ActionBlock = ({
         key: name,
         onClick: () => onClick(name),
         onError: onError,
+        onLoadingChange: onLoadingChange,
         size: size,
         xcss: xcss({
           paddingInline: padding
-        })
+        }),
+        hideTooltip: isLoading
       }) : null;
     });
-  }, [context === null || context === void 0 ? void 0 : context.actions, onClick, onError, padding, size, spaceInline]);
+  }, [context === null || context === void 0 ? void 0 : context.actions, onClick, onError, padding, size, spaceInline, isLoading, onLoadingChange]);
   return actions ? jsx("div", {
     css: ignoreContainerPaddingStyles,
     ref: blockRef,

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.69.1",
+  packageVersion: "26.71.0",
   componentName: 'linkUrl'
 };
 const Link = withLinkClickedEvent('a');

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

@@ -24,7 +24,7 @@ var getProductData = function getProductData(meta) {
   return ProductData === null || ProductData === void 0 || (_ProductData$product = ProductData[product]) === null || _ProductData$product === void 0 ? void 0 : _ProductData$product[resourceType];
 };
 export var extractAutomationAction = function extractAutomationAction(response) {
-  if (!getBooleanFF('platform.linking-platfom.smart-card.confluence.page.automation-action') || !response.data) {
+  if (!getBooleanFF('platform.linking-platfom.smart-card.confluence.page.automation-action_xcdoi') || !response.data) {
     return undefined;
   }
   var data = response.data;

package/dist/esm/messages.js

@@ -67,7 +67,7 @@ export var messages = defineMessages({
   },
   automation_action_title: {
     id: 'fabric.linking.automation-action.title',
-    defaultMessage: 'Run automation...',
+    defaultMessage: 'View automation rules...',
     description: 'The title of the button in a hover card to open an automation menu for a given SmartLink.'
   },
   automation_action_icon_label: {
@@ -77,7 +77,7 @@ export var messages = defineMessages({
   },
   automation_action_tooltip: {
     id: 'fabric.linking.automation-action.tooltip',
-    defaultMessage: 'Open an automation modal',
+    defaultMessage: 'Select an automation rule to run',
     description: 'The tooltip for the automation action indicating that a button will open an automation modal.'
   },
   automation_action_confluence_page_modal_title: {

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

@@ -12,14 +12,14 @@ function _asyncIterator(r) { var n, t, o, e = 2; for ("undefined" != typeof Symb
 function AsyncFromSyncIterator(r) { function AsyncFromSyncIteratorContinuation(r) { if (Object(r) !== r) return Promise.reject(new TypeError(r + " is not an object.")); var n = r.done; return Promise.resolve(r.value).then(function (r) { return { value: r, done: n }; }); } return AsyncFromSyncIterator = function AsyncFromSyncIterator(r) { this.s = r, this.n = r.next; }, AsyncFromSyncIterator.prototype = { s: null, n: null, next: function next() { return AsyncFromSyncIteratorContinuation(this.n.apply(this.s, arguments)); }, return: function _return(r) { var n = this.s.return; return void 0 === n ? Promise.resolve({ value: r, done: !0 }) : AsyncFromSyncIteratorContinuation(n.apply(this.s, arguments)); }, throw: function _throw(r) { var n = this.s.return; return void 0 === n ? Promise.reject(r) : AsyncFromSyncIteratorContinuation(n.apply(this.s, arguments)); } }, new AsyncFromSyncIterator(r); }
 import uuid from 'uuid';
 import { errorMessages } from './types';
-import { addPath } from './utils';
+import { addPath, getXProductHeaderValue } from './utils';
 import { readStream } from './readStream';
 import { getBaseUrl } from '@atlaskit/linking-common';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 export var AISummaryService = /*#__PURE__*/function () {
   function AISummaryService(props) {
     var _this = this,
-      _props$product;
+      _getXProductHeaderVal;
     _classCallCheck(this, AISummaryService);
     _defineProperty(this, "state", {
       content: '',
@@ -78,7 +78,7 @@ export var AISummaryService = /*#__PURE__*/function () {
       headers: _objectSpread({
         'Content-Type': 'application/json;charset=UTF-8',
         'x-experience-id': 'smart-link',
-        'x-product': ((_props$product = props.product) === null || _props$product === void 0 ? void 0 : _props$product.toLowerCase()) || 'confluence'
+        'x-product': ((_getXProductHeaderVal = getXProductHeaderValue(props.product)) === null || _getXProductHeaderVal === void 0 ? void 0 : _getXProductHeaderVal.toLowerCase()) || 'confluence'
       }, props.headers)
     };
     this.url = props.url;

package/dist/esm/state/hooks/use-ai-summary/ai-summary-service/utils.js

@@ -9,4 +9,34 @@ export var addPath = function addPath(baseUrl, path) {
   var pathWithoutLeadingSlash = !path.startsWith('/') ? path : path.substring(1, path.length);
   var url = [urlWithTrailingSlash, pathWithoutLeadingSlash].join('');
   return url;
+};
+
+/**
+ * Subset of a map of Jira `ProductTypes` to AI Mate expected values
+ * See for more info: https://atlassian.slack.com/archives/C066UP0G0G3/p1716341647677829?thread_ts=1716338063.255939&cid=C066UP0G0G3
+ */
+var AiMateJiraXProduct = {
+  JSM: 'JSM',
+  JSW: 'JIRA-SOFTWARE',
+  JWM: 'JIRA-CORE',
+  JPD: 'JPD'
+};
+/**
+ * Checks if `product` is a Jira related product.
+ */
+var isJiraProduct = function isJiraProduct(product) {
+  var JIRA_PRODUCTS = ['JPD', 'JSM', 'JSW', 'JWM'];
+  return product !== undefined && JIRA_PRODUCTS.includes(product);
+};
+
+/**
+ * Converts a `ProductType` to the expected `x-product` header value for AI Mate.
+ *
+ * @see https://developer.atlassian.com/platform/assistance-service/security/entitlements/#approach
+ */
+export var getXProductHeaderValue = function getXProductHeaderValue(product) {
+  if (isJiraProduct(product)) {
+    return AiMateJiraXProduct[product];
+  }
+  return product;
 };

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

package/dist/esm/view/FlexibleCard/components/actions/action/action-stack-item/action-button.js

@@ -0,0 +1,78 @@
+import _extends from "@babel/runtime/helpers/extends";
+import { xcss } from '@atlaskit/primitives';
+import { Box, Inline } from '@atlaskit/primitives';
+import Spinner from '@atlaskit/spinner';
+import React, { useCallback } from 'react';
+import { getPrimitivesInlineSpaceBySize } from '../../../utils';
+import ActionIcon from '../action-icon';
+var buttonStyles = xcss({
+  all: 'unset',
+  cursor: 'pointer',
+  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 = 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 ActionButton = function ActionButton(_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,
+    tooltipProps = _ref.tooltipProps,
+    xcss = _ref.xcss;
+  var space = spaceOption !== null && spaceOption !== void 0 ? spaceOption : getPrimitivesInlineSpaceBySize(size);
+  var onClick = useCallback(function () {
+    if (!isDisabled && !isLoading && onClickCallback) {
+      onClickCallback();
+    }
+  }, [isDisabled, isLoading, onClickCallback]);
+  var icon = iconOption && isLoading ? /*#__PURE__*/React.createElement(ActionIcon, {
+    asStackItemIcon: true,
+    icon: /*#__PURE__*/React.createElement(Spinner, {
+      testId: "".concat(testId, "-loading")
+    }),
+    size: size
+  }) : iconOption;
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    as: "button",
+    xcss: [buttonStyles, xcss]
+  }, tooltipProps, {
+    onClick: onClick,
+    testId: testId
+  }), /*#__PURE__*/React.createElement(Inline, {
+    alignBlock: "center",
+    grow: "fill",
+    space: space
+  }, icon, /*#__PURE__*/React.createElement(Box, {
+    xcss: contentStyles
+  }, content)));
+};
+export default ActionButton;

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

@@ -1,88 +1,27 @@
 import _extends from "@babel/runtime/helpers/extends";
-import { Box, Inline, xcss } from '@atlaskit/primitives';
-import Spinner from '@atlaskit/spinner';
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["content", "tooltipMessage", "tooltipOnHide", "hideTooltipOnMouseDown", "hideTooltip"];
 import Tooltip from '@atlaskit/tooltip';
-import React, { useCallback } from 'react';
-import { getPrimitivesInlineSpaceBySize } from '../../../utils';
-import ActionIcon from '../action-icon';
-var buttonStyles = xcss({
-  all: 'unset',
-  cursor: 'pointer',
-  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 = 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'
-});
+import React from 'react';
+import ActionButton from './action-button';
 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,
     tooltipOnHide = _ref.tooltipOnHide,
-    hideTooltipOnMouseDown = _ref.hideTooltipOnMouseDown;
-  var space = spaceOption !== null && spaceOption !== void 0 ? spaceOption : getPrimitivesInlineSpaceBySize(size);
-  var onClick = useCallback(function () {
-    if (!isDisabled && !isLoading && onClickCallback) {
-      onClickCallback();
-    }
-  }, [isDisabled, isLoading, onClickCallback]);
-  var icon = iconOption && isLoading ? /*#__PURE__*/React.createElement(ActionIcon, {
-    asStackItemIcon: true,
-    icon: /*#__PURE__*/React.createElement(Spinner, {
-      testId: "".concat(testId, "-loading")
-    }),
-    size: size
-  }) : iconOption;
-
-  // Replace Box with Pressable once it becomes stable (currently beta)
-  return /*#__PURE__*/React.createElement(Tooltip, {
+    hideTooltipOnMouseDown = _ref.hideTooltipOnMouseDown,
+    hideTooltip = _ref.hideTooltip,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return hideTooltip ? /*#__PURE__*/React.createElement(ActionButton, _extends({}, props, {
+    content: content
+  })) : /*#__PURE__*/React.createElement(Tooltip, {
     content: tooltipMessage || content,
     onHide: tooltipOnHide,
     hideTooltipOnMouseDown: hideTooltipOnMouseDown
   }, function (tooltipProps) {
-    return /*#__PURE__*/React.createElement(Box, _extends({
-      as: "button",
-      xcss: [buttonStyles, xcss]
-    }, tooltipProps, {
-      onClick: onClick,
-      testId: testId
-    }), /*#__PURE__*/React.createElement(Inline, {
-      alignBlock: "center",
-      grow: "fill",
-      space: space
-    }, icon, /*#__PURE__*/React.createElement(Box, {
-      xcss: contentStyles
-    }, content)));
+    return /*#__PURE__*/React.createElement(ActionButton, _extends({}, props, {
+      content: content,
+      tooltipProps: tooltipProps
+    }));
   });
 };
 export default ActionStackItem;

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

@@ -30,6 +30,7 @@ var Action = function Action(_ref) {
     spaceInline = _ref.spaceInline,
     tooltipMessage = _ref.tooltipMessage,
     tooltipOnHide = _ref.tooltipOnHide,
+    hideTooltip = _ref.hideTooltip,
     hideTooltipOnMouseDown = _ref.hideTooltipOnMouseDown,
     xcss = _ref.xcss,
     asDropDownItem = _ref.asDropDownItem,
@@ -65,7 +66,8 @@ var Action = function Action(_ref) {
       tooltipMessage: tooltipMessage || content,
       xcss: xcss,
       tooltipOnHide: tooltipOnHide,
-      hideTooltipOnMouseDown: hideTooltipOnMouseDown
+      hideTooltipOnMouseDown: hideTooltipOnMouseDown,
+      hideTooltip: hideTooltip
     });
   }
   if (isDropdownItem) {

package/dist/esm/view/FlexibleCard/components/actions/ai-summary-action/ai-summary-action-component.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
+import React, { useEffect } from 'react';
 import { di } from 'react-magnetic-di';
 import { useAISummary } from '../../../../../state/hooks/use-ai-summary';
 import { CopySummaryAction } from './copy-summary-action';
@@ -8,6 +8,7 @@ export var AISummaryActionComponent = function AISummaryActionComponent(props) {
   var url = props.url,
     ari = props.ari,
     product = props.product,
+    onLoadingChange = props.onLoadingChange,
     _props$testId = props.testId,
     testId = _props$testId === void 0 ? 'smart-action-ai-summary-action' : _props$testId;
   var _useAISummary = useAISummary({
@@ -19,6 +20,9 @@ export var AISummaryActionComponent = function AISummaryActionComponent(props) {
     status = _useAISummary$state.status,
     content = _useAISummary$state.content,
     summariseUrl = _useAISummary.summariseUrl;
+  useEffect(function () {
+    onLoadingChange === null || onLoadingChange === void 0 || onLoadingChange(status === 'loading');
+  }, [onLoadingChange, status]);
   return status === 'done' ? /*#__PURE__*/React.createElement(CopySummaryAction, _extends({}, props, {
     testId: testId,
     content: content