@atlaskit/smart-card 25.5.0 → 25.5.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/smart-card
 
+## 25.5.2
+
+### Patch Changes
+
+- [`c2aab8ee44b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c2aab8ee44b) - Add lozenge dropdown action to Flexible Smart Link based element lozenge
+
+## 25.5.1
+
+### Patch Changes
+
+- [`bcc645691c5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bcc645691c5) - Add lozenge action feature flag and extract server action for state lozenge from JSON-LD response
+- Updated dependencies
+
 ## 25.5.0
 
 ### Minor Changes

package/dist/cjs/extractors/flexible/extract-server-action.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var extractServerAction = function extractServerAction(data) {
+  var actions = data === null || data === void 0 ? void 0 : data['atlassian:serverAction'];
+  if (!actions) {
+    return [];
+  }
+  if (actions && !Array.isArray(actions)) {
+    return [actions];
+  }
+  return actions;
+};
+var _default = extractServerAction;
+exports.default = _default;

package/dist/cjs/extractors/flexible/extract-state.js

@@ -0,0 +1,71 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _lozenge = require("../common/lozenge");
+var _helpers = require("../../state/helpers");
+var _extractServerAction = _interopRequireDefault(require("./extract-server-action"));
+var _extractors = require("@atlaskit/linking-common/extractors");
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var toInvokeRequest = function toInvokeRequest(extensionKey, resourceIdentifiers, actionType, details) {
+  if (!actionType) {
+    return;
+  }
+  return {
+    action: {
+      actionType: actionType,
+      resourceIdentifiers: resourceIdentifiers
+    },
+    providerKey: extensionKey,
+    details: details
+  };
+};
+var extractAction = function extractAction(response, id) {
+  var _action$dataRetrieval, _action$dataUpdateAct;
+  var extensionKey = (0, _helpers.getExtensionKey)(response);
+  var data = response === null || response === void 0 ? void 0 : response.data;
+  var actions = (0, _extractServerAction.default)(data);
+  if (!extensionKey || actions.length === 0) {
+    return;
+  }
+  var action = actions.find(function (item) {
+    return (item === null || item === void 0 ? void 0 : item.name) === 'UpdateAction' && (item === null || item === void 0 ? void 0 : item.refField) === 'tag';
+  });
+  if (!action || !action.resourceIdentifiers) {
+    return;
+  }
+  var read = toInvokeRequest(extensionKey, action.resourceIdentifiers, (_action$dataRetrieval = action.dataRetrievalAction) === null || _action$dataRetrieval === void 0 ? void 0 : _action$dataRetrieval.name);
+  var url = (0, _extractors.extractLink)(data);
+  var details = {
+    id: id,
+    url: url
+  };
+  var update = toInvokeRequest(extensionKey, action.resourceIdentifiers, (_action$dataUpdateAct = action.dataUpdateAction) === null || _action$dataUpdateAct === void 0 ? void 0 : _action$dataUpdateAct.name, details);
+  return read || update ? {
+    read: read,
+    update: update
+  } : undefined;
+};
+var extractState = function extractState(response, showServerActions, id) {
+  if (!response || !response.data) {
+    return;
+  }
+  var lozenge = (0, _lozenge.extractLozenge)(response === null || response === void 0 ? void 0 : response.data);
+  if (!lozenge) {
+    return;
+  }
+  if (!showServerActions) {
+    return lozenge;
+  }
+  var action = extractAction(response, id);
+  return _objectSpread(_objectSpread({}, lozenge), {}, {
+    action: action
+  });
+};
+var _default = extractState;
+exports.default = _default;

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

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _primitives = require("../common/primitives");
-var _lozenge = require("../common/lozenge");
 var _icon = require("./icon");
 var _utils = require("./utils");
 var _collaboratorGroup = require("./collaboratorGroup");
@@ -14,16 +13,24 @@ var _extractors = require("@atlaskit/linking-common/extractors");
 var _extractPriority = _interopRequireDefault(require("./extract-priority"));
 var _extractProviderIcon = _interopRequireDefault(require("./icon/extract-provider-icon"));
 var _extractPreview = _interopRequireDefault(require("./extract-preview"));
+var _extractState = _interopRequireDefault(require("./extract-state"));
 var _latestCommit = require("./latest-commit");
 var _extractPreviewAction = require("./actions/extract-preview-action");
 var _extractDownloadAction = require("./actions/extract-download-action");
 var _extractViewAction = require("./actions/extract-view-action");
-var extractFlexibleUiContext = function extractFlexibleUiContext(response, renderers) {
+var extractFlexibleUiContext = function extractFlexibleUiContext() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    featureFlags = _ref.featureFlags,
+    id = _ref.id,
+    renderers = _ref.renderers,
+    showServerActions = _ref.showServerActions,
+    response = _ref.response;
   if (!response) {
     return undefined;
   }
   var data = response.data;
   var url = (0, _extractors.extractLink)(data);
+  var showLozengeAction = (featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.useLozengeAction) === 'experiment';
   return {
     attachmentCount: (0, _utils.extractAttachmentCount)(data),
     authorGroup: (0, _extractors.extractPersonCreatedBy)(data),
@@ -50,7 +57,7 @@ var extractFlexibleUiContext = function extractFlexibleUiContext(response, rende
     snippet: (0, _primitives.extractSummary)(data) || undefined,
     // Explicitly set here to remove an empty string
     sourceBranch: (0, _utils.extractSourceBranch)(data),
-    state: (0, _lozenge.extractLozenge)(data),
+    state: (0, _extractState.default)(response, showLozengeAction && showServerActions, id),
     subscriberCount: (0, _utils.extractSubscriberCount)(data),
     targetBranch: (0, _utils.extractTargetBranch)(data),
     title: (0, _extractors.extractTitle)(data) || url,

package/dist/cjs/state/hooks/use-invoke/types.js

@@ -5,8 +5,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.InvokeActionError = void 0;
 var InvokeActionError;
+/**
+ * Additional details for invoke function that may be required for component
+ */
 exports.InvokeActionError = InvokeActionError;
 (function (InvokeActionError) {
   InvokeActionError["NoData"] = "NoData";
   InvokeActionError["Unknown"] = "Unknown";
-})(InvokeActionError || (exports.InvokeActionError = InvokeActionError = {}));
+})(InvokeActionError || (exports.InvokeActionError = InvokeActionError = {}));
+/**
+ * Invoke request with additional details for the component
+ */
+/**
+ * CRUD invoke requests for the component that support server actions
+ */

package/dist/cjs/version.json

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

package/dist/cjs/view/FlexibleCard/components/common/lozenge-action/index.js

@@ -78,7 +78,7 @@ var LozengeAction = function LozengeAction(_ref) {
               return invoke(action.read, _extractLozengeActionItems.default);
             case 6:
               responseItems = _context.sent;
-              validItems = validateItems(responseItems, text);
+              validItems = typeof text === 'string' ? validateItems(responseItems, text) : responseItems;
               setItems(validItems);
               setIsLoaded(true);
               if ((validItems === null || validItems === void 0 ? void 0 : validItems.length) === 0) {

package/dist/cjs/view/FlexibleCard/components/common/lozenge-action/styled.js

@@ -8,7 +8,7 @@ exports.triggerLozengeStyles = exports.triggerButtonStyles = exports.dropdownIte
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _templateObject, _templateObject2, _templateObject3;
-var triggerButtonStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  all: unset;\n  background-color: transparent;\n  color: unset;\n  cursor: pointer;\n  font-family: unset;\n  font-size: unset;\n  font-style: unset;\n  font-weight: unset;\n  font-variant: unset;\n  line-height: 0;\n  padding: 0;\n  text-transform: unset;\n\n  border: 2px solid transparent;\n  margin: -2px;\n\n  &:focus-visible,\n  &:focus-within,\n  &[aria-expanded='true'] {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ";\n    border-radius: 5px;\n  }\n"])), "var(--ds-border-focused, #388BFF)");
+var triggerButtonStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  all: unset;\n  background-color: transparent;\n  color: unset;\n  cursor: pointer;\n  font-family: unset;\n  font-size: unset;\n  font-style: unset;\n  font-weight: unset;\n  font-variant: unset;\n  line-height: 0;\n  padding: 0;\n  text-transform: unset;\n\n  border: 2px solid transparent;\n  margin: 2px;\n\n  &:focus-visible,\n  &:focus-within,\n  &[aria-expanded='true'] {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ";\n    border-radius: 5px;\n  }\n"])), "var(--ds-border-focused, #388BFF)");
 exports.triggerButtonStyles = triggerButtonStyles;
 var triggerLozengeStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  display: flex;\n\n  span[role='img'] {\n    margin: -4px -8px -4px -1px;\n  }\n"])));
 exports.triggerLozengeStyles = triggerLozengeStyles;

package/dist/cjs/view/FlexibleCard/components/elements/lozenge/index.js

@@ -11,13 +11,13 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
-var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
+var _lozengeAction = _interopRequireDefault(require("../../common/lozenge-action"));
 var _templateObject, _templateObject2;
 /** @jsx jsx */
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var styles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  line-height: inherit;\n"])));
-var actionStyles = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  > span > span {\n    display: inline-flex;\n    align-items: center;\n    margin-right: -2px;\n  }\n\n  svg {\n    width: unset;\n    height: unset;\n    margin: -4px 0;\n  }\n\n  :hover {\n    cursor: pointer;\n  }\n"])));
+var actionStyles = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  overflow: visible;\n"])));
 
 /**
  * A base element that displays a Lozenge.
@@ -26,7 +26,8 @@ var actionStyles = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0,
  * @see State
  */
 var Lozenge = function Lozenge(_ref) {
-  var _ref$appearance = _ref.appearance,
+  var action = _ref.action,
+    _ref$appearance = _ref.appearance,
     appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
     name = _ref.name,
     onClick = _ref.onClick,
@@ -52,6 +53,16 @@ var Lozenge = function Lozenge(_ref) {
   if (!text) {
     return null;
   }
+  var lozenge = action ? (0, _react2.jsx)(_lozengeAction.default, {
+    action: action,
+    appearance: appearance,
+    testId: testId,
+    text: text
+  }) : (0, _react2.jsx)(_lozenge.default, {
+    appearance: appearance,
+    isBold: isBold,
+    testId: "".concat(testId, "-lozenge")
+  }, text);
   return (0, _react2.jsx)("span", {
     css: [styles, onClick ? actionStyles : undefined, overrideCss],
     "data-fit-to-content": true,
@@ -62,14 +73,7 @@ var Lozenge = function Lozenge(_ref) {
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave,
     tabIndex: onClick ? 0 : -1
-  }, (0, _react2.jsx)(_lozenge.default, {
-    appearance: appearance,
-    isBold: isBold,
-    testId: "".concat(testId, "-lozenge")
-  }, text, onClick && (0, _react2.jsx)(_chevronDown.default, {
-    label: "action",
-    testId: "".concat(testId, "-action")
-  })));
+  }, lozenge);
 };
 var _default = Lozenge;
 exports.default = _default;

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

@@ -21,24 +21,33 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * @see Container
  */
 var FlexibleCard = function FlexibleCard(_ref) {
-  var cardState = _ref.cardState,
+  var analytics = _ref.analytics,
+    cardState = _ref.cardState,
     children = _ref.children,
+    id = _ref.id,
     onAuthorize = _ref.onAuthorize,
+    onClick = _ref.onClick,
     onError = _ref.onError,
     onResolve = _ref.onResolve,
     renderers = _ref.renderers,
-    ui = _ref.ui,
-    url = _ref.url,
-    onClick = _ref.onClick,
+    showHoverPreview = _ref.showHoverPreview,
+    showServerActions = _ref.showServerActions,
     testId = _ref.testId,
-    analytics = _ref.analytics,
-    showHoverPreview = _ref.showHoverPreview;
+    ui = _ref.ui,
+    url = _ref.url;
   var cardType = cardState.status,
     details = cardState.details;
   var status = cardType;
   var context = (0, _react.useMemo)(function () {
-    return (0, _utils.getContextByStatus)(url, status, details, renderers);
-  }, [details, renderers, status, url]);
+    return (0, _utils.getContextByStatus)({
+      response: details,
+      id: id,
+      renderers: renderers,
+      showServerActions: showServerActions,
+      status: status,
+      url: url
+    });
+  }, [details, id, renderers, showServerActions, status, url]);
   var retry = (0, _utils.getRetryOptions)(url, status, details, onAuthorize);
   var _ref2 = context || {},
     title = _ref2.title;

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

@@ -14,7 +14,11 @@ var _icon = require("../../extractors/flexible/icon");
 var _utils = require("../../utils");
 var _extractors = require("@atlaskit/linking-common/extractors");
 var _extractProviderIcon = _interopRequireDefault(require("../../extractors/flexible/icon/extract-provider-icon"));
-var getContextByStatus = function getContextByStatus(url, status, details, renderers) {
+var getContextByStatus = function getContextByStatus(params) {
+  var _ref = params !== null && params !== void 0 ? params : {},
+    response = _ref.response,
+    status = _ref.status,
+    url = _ref.url;
   switch (status) {
     case _constants.SmartLinkStatus.Pending:
     case _constants.SmartLinkStatus.Resolving:
@@ -23,15 +27,15 @@ var getContextByStatus = function getContextByStatus(url, status, details, rende
         url: url
       };
     case _constants.SmartLinkStatus.Resolved:
-      return (0, _flexible.default)(details, renderers);
+      return (0, _flexible.default)(params);
     case _constants.SmartLinkStatus.Unauthorized:
     case _constants.SmartLinkStatus.Forbidden:
     case _constants.SmartLinkStatus.NotFound:
     case _constants.SmartLinkStatus.Errored:
     case _constants.SmartLinkStatus.Fallback:
     default:
-      var linkIcon = (0, _icon.extractErrorIcon)(details, status);
-      var provider = (0, _extractProviderIcon.default)(details === null || details === void 0 ? void 0 : details.data);
+      var linkIcon = (0, _icon.extractErrorIcon)(response, status);
+      var provider = (0, _extractProviderIcon.default)(response === null || response === void 0 ? void 0 : response.data);
       return {
         linkIcon: linkIcon,
         title: url,
@@ -59,9 +63,9 @@ var getForbiddenMessageKey = function getForbiddenMessageKey(meta) {
       return 'restricted_link';
   }
 };
-var getRetryOptions = function getRetryOptions(url, status, details, onAuthorize) {
-  var _details$meta, _access$action;
-  var data = details && details.data || (0, _jsonld.getEmptyJsonLd)();
+var getRetryOptions = function getRetryOptions(url, status, response, onAuthorize) {
+  var _response$meta, _access$action;
+  var data = response && response.data || (0, _jsonld.getEmptyJsonLd)();
   var provider = (0, _extractors.extractProvider)(data);
   var context = provider === null || provider === void 0 ? void 0 : provider.text;
   var values = context ? {
@@ -69,7 +73,7 @@ var getRetryOptions = function getRetryOptions(url, status, details, onAuthorize
   } : undefined;
   switch (status) {
     case _constants.SmartLinkStatus.Forbidden:
-      var meta = (_details$meta = details === null || details === void 0 ? void 0 : details.meta) !== null && _details$meta !== void 0 ? _details$meta : (0, _jsonld.getForbiddenJsonLd)().meta;
+      var meta = (_response$meta = response === null || response === void 0 ? void 0 : response.meta) !== null && _response$meta !== void 0 ? _response$meta : (0, _jsonld.getForbiddenJsonLd)().meta;
       var access = (0, _context.extractRequestAccessContext)({
         jsonLd: meta,
         url: url,

package/dist/es2019/extractors/flexible/extract-server-action.js

@@ -0,0 +1,11 @@
+const extractServerAction = data => {
+  const actions = data === null || data === void 0 ? void 0 : data['atlassian:serverAction'];
+  if (!actions) {
+    return [];
+  }
+  if (actions && !Array.isArray(actions)) {
+    return [actions];
+  }
+  return actions;
+};
+export default extractServerAction;

package/dist/es2019/extractors/flexible/extract-state.js

@@ -0,0 +1,59 @@
+import { extractLozenge } from '../common/lozenge';
+import { getExtensionKey } from '../../state/helpers';
+import extractServerAction from './extract-server-action';
+import { extractLink } from '@atlaskit/linking-common/extractors';
+const toInvokeRequest = (extensionKey, resourceIdentifiers, actionType, details) => {
+  if (!actionType) {
+    return;
+  }
+  return {
+    action: {
+      actionType,
+      resourceIdentifiers
+    },
+    providerKey: extensionKey,
+    details
+  };
+};
+const extractAction = (response, id) => {
+  var _action$dataRetrieval, _action$dataUpdateAct;
+  const extensionKey = getExtensionKey(response);
+  const data = response === null || response === void 0 ? void 0 : response.data;
+  const actions = extractServerAction(data);
+  if (!extensionKey || actions.length === 0) {
+    return;
+  }
+  const action = actions.find(item => (item === null || item === void 0 ? void 0 : item.name) === 'UpdateAction' && (item === null || item === void 0 ? void 0 : item.refField) === 'tag');
+  if (!action || !action.resourceIdentifiers) {
+    return;
+  }
+  const read = toInvokeRequest(extensionKey, action.resourceIdentifiers, (_action$dataRetrieval = action.dataRetrievalAction) === null || _action$dataRetrieval === void 0 ? void 0 : _action$dataRetrieval.name);
+  const url = extractLink(data);
+  const details = {
+    id,
+    url
+  };
+  const update = toInvokeRequest(extensionKey, action.resourceIdentifiers, (_action$dataUpdateAct = action.dataUpdateAction) === null || _action$dataUpdateAct === void 0 ? void 0 : _action$dataUpdateAct.name, details);
+  return read || update ? {
+    read,
+    update
+  } : undefined;
+};
+const extractState = (response, showServerActions, id) => {
+  if (!response || !response.data) {
+    return;
+  }
+  const lozenge = extractLozenge(response === null || response === void 0 ? void 0 : response.data);
+  if (!lozenge) {
+    return;
+  }
+  if (!showServerActions) {
+    return lozenge;
+  }
+  const action = extractAction(response, id);
+  return {
+    ...lozenge,
+    action
+  };
+};
+export default extractState;

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

@@ -1,5 +1,4 @@
 import { extractSummary } from '../common/primitives';
-import { extractLozenge } from '../common/lozenge';
 import { extractLinkIcon } from './icon';
 import { extractAttachmentCount, extractChecklistProgress, extractCommentCount, extractCreatedBy, extractModifiedBy, extractProgrammingLanguage, extractSubscriberCount, extractViewCount, extractReactCount, extractVoteCount, extractSourceBranch, extractTargetBranch, extractDueOn } from './utils';
 import { extractPersonsUpdatedBy } from './collaboratorGroup';
@@ -7,16 +6,24 @@ import { extractPersonCreatedBy, extractTitle, extractDateUpdated, extractDateCr
 import extractPriority from './extract-priority';
 import extractProviderIcon from './icon/extract-provider-icon';
 import extractPreview from './extract-preview';
+import extractState from './extract-state';
 import { extractLatestCommit } from './latest-commit';
 import { extractPreviewAction } from './actions/extract-preview-action';
 import { extractDownloadAction } from './actions/extract-download-action';
 import { extractViewAction } from './actions/extract-view-action';
-const extractFlexibleUiContext = (response, renderers) => {
+const extractFlexibleUiContext = ({
+  featureFlags,
+  id,
+  renderers,
+  showServerActions,
+  response
+} = {}) => {
   if (!response) {
     return undefined;
   }
   const data = response.data;
   const url = extractLink(data);
+  const showLozengeAction = (featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.useLozengeAction) === 'experiment';
   return {
     attachmentCount: extractAttachmentCount(data),
     authorGroup: extractPersonCreatedBy(data),
@@ -43,7 +50,7 @@ const extractFlexibleUiContext = (response, renderers) => {
     snippet: extractSummary(data) || undefined,
     // Explicitly set here to remove an empty string
     sourceBranch: extractSourceBranch(data),
-    state: extractLozenge(data),
+    state: extractState(response, showLozengeAction && showServerActions, id),
     subscriberCount: extractSubscriberCount(data),
     targetBranch: extractTargetBranch(data),
     title: extractTitle(data) || url,

package/dist/es2019/state/hooks/use-invoke/types.js

@@ -1,5 +1,15 @@
 export let InvokeActionError;
+
+/**
+ * Additional details for invoke function that may be required for component
+ */
 (function (InvokeActionError) {
   InvokeActionError["NoData"] = "NoData";
   InvokeActionError["Unknown"] = "Unknown";
-})(InvokeActionError || (InvokeActionError = {}));
+})(InvokeActionError || (InvokeActionError = {}));
+/**
+ * Invoke request with additional details for the component
+ */
+/**
+ * CRUD invoke requests for the component that support server actions
+ */

package/dist/es2019/version.json

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

package/dist/es2019/view/FlexibleCard/components/common/lozenge-action/index.js

@@ -35,7 +35,7 @@ const LozengeAction = ({
       try {
         setIsLoading(true);
         const responseItems = await invoke(action.read, extractLozengeActionItems);
-        const validItems = validateItems(responseItems, text);
+        const validItems = typeof text === 'string' ? validateItems(responseItems, text) : responseItems;
         setItems(validItems);
         setIsLoaded(true);
         if ((validItems === null || validItems === void 0 ? void 0 : validItems.length) === 0) {

package/dist/es2019/view/FlexibleCard/components/common/lozenge-action/styled.js

@@ -14,7 +14,7 @@ export const triggerButtonStyles = css`
   text-transform: unset;
 
   border: 2px solid transparent;
-  margin: -2px;
+  margin: 2px;
 
   &:focus-visible,
   &:focus-within,

package/dist/es2019/view/FlexibleCard/components/elements/lozenge/index.js

@@ -2,27 +2,13 @@
 import React, { useCallback, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import AtlaskitLozenge from '@atlaskit/lozenge';
-import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
+import LozengeAction from '../../common/lozenge-action';
 const styles = css`
   display: inline-flex;
   line-height: inherit;
 `;
 const actionStyles = css`
-  > span > span {
-    display: inline-flex;
-    align-items: center;
-    margin-right: -2px;
-  }
-
-  svg {
-    width: unset;
-    height: unset;
-    margin: -4px 0;
-  }
-
-  :hover {
-    cursor: pointer;
-  }
+  overflow: visible;
 `;
 
 /**
@@ -32,6 +18,7 @@ const actionStyles = css`
  * @see State
  */
 const Lozenge = ({
+  action,
   appearance = 'default',
   name,
   onClick,
@@ -50,6 +37,16 @@ const Lozenge = ({
   if (!text) {
     return null;
   }
+  const lozenge = action ? jsx(LozengeAction, {
+    action: action,
+    appearance: appearance,
+    testId: testId,
+    text: text
+  }) : jsx(AtlaskitLozenge, {
+    appearance: appearance,
+    isBold: isBold,
+    testId: `${testId}-lozenge`
+  }, text);
   return jsx("span", {
     css: [styles, onClick ? actionStyles : undefined, overrideCss],
     "data-fit-to-content": true,
@@ -60,13 +57,6 @@ const Lozenge = ({
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave,
     tabIndex: onClick ? 0 : -1
-  }, jsx(AtlaskitLozenge, {
-    appearance: appearance,
-    isBold: isBold,
-    testId: `${testId}-lozenge`
-  }, text, onClick && jsx(ChevronDownIcon, {
-    label: "action",
-    testId: `${testId}-action`
-  })));
+  }, lozenge);
 };
 export default Lozenge;

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

@@ -12,25 +12,34 @@ import { getContextByStatus, getRetryOptions } from './utils';
  * @see Container
  */
 const FlexibleCard = ({
+  analytics,
   cardState,
   children,
+  id,
   onAuthorize,
+  onClick,
   onError,
   onResolve,
   renderers,
-  ui,
-  url,
-  onClick,
+  showHoverPreview,
+  showServerActions,
   testId,
-  analytics,
-  showHoverPreview
+  ui,
+  url
 }) => {
   const {
     status: cardType,
     details
   } = cardState;
   const status = cardType;
-  const context = useMemo(() => getContextByStatus(url, status, details, renderers), [details, renderers, status, url]);
+  const context = useMemo(() => getContextByStatus({
+    response: details,
+    id,
+    renderers,
+    showServerActions,
+    status,
+    url
+  }), [details, id, renderers, showServerActions, status, url]);
   const retry = getRetryOptions(url, status, details, onAuthorize);
   const {
     title

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

@@ -2,12 +2,17 @@ import { SmartLinkStatus } from '../../constants';
 import { getEmptyJsonLd, getForbiddenJsonLd } from '../../utils/jsonld';
 import { extractRequestAccessContext } from '../../extractors/common/context';
 import { messages } from '../../messages';
-import extractFlexibleLinkContext from '../../extractors/flexible';
+import extractFlexibleUiContext from '../../extractors/flexible';
 import { extractErrorIcon } from '../../extractors/flexible/icon';
 import { handleOnClick } from '../../utils';
 import { extractProvider } from '@atlaskit/linking-common/extractors';
 import extractProviderIcon from '../../extractors/flexible/icon/extract-provider-icon';
-export const getContextByStatus = (url, status, details, renderers) => {
+export const getContextByStatus = params => {
+  const {
+    response,
+    status,
+    url
+  } = params !== null && params !== void 0 ? params : {};
   switch (status) {
     case SmartLinkStatus.Pending:
     case SmartLinkStatus.Resolving:
@@ -16,15 +21,15 @@ export const getContextByStatus = (url, status, details, renderers) => {
         url
       };
     case SmartLinkStatus.Resolved:
-      return extractFlexibleLinkContext(details, renderers);
+      return extractFlexibleUiContext(params);
     case SmartLinkStatus.Unauthorized:
     case SmartLinkStatus.Forbidden:
     case SmartLinkStatus.NotFound:
     case SmartLinkStatus.Errored:
     case SmartLinkStatus.Fallback:
     default:
-      const linkIcon = extractErrorIcon(details, status);
-      const provider = extractProviderIcon(details === null || details === void 0 ? void 0 : details.data);
+      const linkIcon = extractErrorIcon(response, status);
+      const provider = extractProviderIcon(response === null || response === void 0 ? void 0 : response.data);
       return {
         linkIcon,
         title: url,
@@ -51,9 +56,9 @@ const getForbiddenMessageKey = meta => {
       return 'restricted_link';
   }
 };
-export const getRetryOptions = (url, status, details, onAuthorize) => {
-  var _details$meta, _access$action;
-  const data = details && details.data || getEmptyJsonLd();
+export const getRetryOptions = (url, status, response, onAuthorize) => {
+  var _response$meta, _access$action;
+  const data = response && response.data || getEmptyJsonLd();
   const provider = extractProvider(data);
   const context = provider === null || provider === void 0 ? void 0 : provider.text;
   const values = context ? {
@@ -61,7 +66,7 @@ export const getRetryOptions = (url, status, details, onAuthorize) => {
   } : undefined;
   switch (status) {
     case SmartLinkStatus.Forbidden:
-      const meta = (_details$meta = details === null || details === void 0 ? void 0 : details.meta) !== null && _details$meta !== void 0 ? _details$meta : getForbiddenJsonLd().meta;
+      const meta = (_response$meta = response === null || response === void 0 ? void 0 : response.meta) !== null && _response$meta !== void 0 ? _response$meta : getForbiddenJsonLd().meta;
       const access = extractRequestAccessContext({
         jsonLd: meta,
         url,

package/dist/esm/extractors/flexible/extract-server-action.js

@@ -0,0 +1,11 @@
+var extractServerAction = function extractServerAction(data) {
+  var actions = data === null || data === void 0 ? void 0 : data['atlassian:serverAction'];
+  if (!actions) {
+    return [];
+  }
+  if (actions && !Array.isArray(actions)) {
+    return [actions];
+  }
+  return actions;
+};
+export default extractServerAction;

package/dist/esm/extractors/flexible/extract-state.js

@@ -0,0 +1,63 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import { extractLozenge } from '../common/lozenge';
+import { getExtensionKey } from '../../state/helpers';
+import extractServerAction from './extract-server-action';
+import { extractLink } from '@atlaskit/linking-common/extractors';
+var toInvokeRequest = function toInvokeRequest(extensionKey, resourceIdentifiers, actionType, details) {
+  if (!actionType) {
+    return;
+  }
+  return {
+    action: {
+      actionType: actionType,
+      resourceIdentifiers: resourceIdentifiers
+    },
+    providerKey: extensionKey,
+    details: details
+  };
+};
+var extractAction = function extractAction(response, id) {
+  var _action$dataRetrieval, _action$dataUpdateAct;
+  var extensionKey = getExtensionKey(response);
+  var data = response === null || response === void 0 ? void 0 : response.data;
+  var actions = extractServerAction(data);
+  if (!extensionKey || actions.length === 0) {
+    return;
+  }
+  var action = actions.find(function (item) {
+    return (item === null || item === void 0 ? void 0 : item.name) === 'UpdateAction' && (item === null || item === void 0 ? void 0 : item.refField) === 'tag';
+  });
+  if (!action || !action.resourceIdentifiers) {
+    return;
+  }
+  var read = toInvokeRequest(extensionKey, action.resourceIdentifiers, (_action$dataRetrieval = action.dataRetrievalAction) === null || _action$dataRetrieval === void 0 ? void 0 : _action$dataRetrieval.name);
+  var url = extractLink(data);
+  var details = {
+    id: id,
+    url: url
+  };
+  var update = toInvokeRequest(extensionKey, action.resourceIdentifiers, (_action$dataUpdateAct = action.dataUpdateAction) === null || _action$dataUpdateAct === void 0 ? void 0 : _action$dataUpdateAct.name, details);
+  return read || update ? {
+    read: read,
+    update: update
+  } : undefined;
+};
+var extractState = function extractState(response, showServerActions, id) {
+  if (!response || !response.data) {
+    return;
+  }
+  var lozenge = extractLozenge(response === null || response === void 0 ? void 0 : response.data);
+  if (!lozenge) {
+    return;
+  }
+  if (!showServerActions) {
+    return lozenge;
+  }
+  var action = extractAction(response, id);
+  return _objectSpread(_objectSpread({}, lozenge), {}, {
+    action: action
+  });
+};
+export default extractState;

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

@@ -1,5 +1,4 @@
 import { extractSummary } from '../common/primitives';
-import { extractLozenge } from '../common/lozenge';
 import { extractLinkIcon } from './icon';
 import { extractAttachmentCount, extractChecklistProgress, extractCommentCount, extractCreatedBy, extractModifiedBy, extractProgrammingLanguage, extractSubscriberCount, extractViewCount, extractReactCount, extractVoteCount, extractSourceBranch, extractTargetBranch, extractDueOn } from './utils';
 import { extractPersonsUpdatedBy } from './collaboratorGroup';
@@ -7,16 +6,24 @@ import { extractPersonCreatedBy, extractTitle, extractDateUpdated, extractDateCr
 import extractPriority from './extract-priority';
 import extractProviderIcon from './icon/extract-provider-icon';
 import extractPreview from './extract-preview';
+import extractState from './extract-state';
 import { extractLatestCommit } from './latest-commit';
 import { extractPreviewAction } from './actions/extract-preview-action';
 import { extractDownloadAction } from './actions/extract-download-action';
 import { extractViewAction } from './actions/extract-view-action';
-var extractFlexibleUiContext = function extractFlexibleUiContext(response, renderers) {
+var extractFlexibleUiContext = function extractFlexibleUiContext() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    featureFlags = _ref.featureFlags,
+    id = _ref.id,
+    renderers = _ref.renderers,
+    showServerActions = _ref.showServerActions,
+    response = _ref.response;
   if (!response) {
     return undefined;
   }
   var data = response.data;
   var url = extractLink(data);
+  var showLozengeAction = (featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.useLozengeAction) === 'experiment';
   return {
     attachmentCount: extractAttachmentCount(data),
     authorGroup: extractPersonCreatedBy(data),
@@ -43,7 +50,7 @@ var extractFlexibleUiContext = function extractFlexibleUiContext(response, rende
     snippet: extractSummary(data) || undefined,
     // Explicitly set here to remove an empty string
     sourceBranch: extractSourceBranch(data),
-    state: extractLozenge(data),
+    state: extractState(response, showLozengeAction && showServerActions, id),
     subscriberCount: extractSubscriberCount(data),
     targetBranch: extractTargetBranch(data),
     title: extractTitle(data) || url,

package/dist/esm/state/hooks/use-invoke/types.js

@@ -1,5 +1,15 @@
 export var InvokeActionError;
+
+/**
+ * Additional details for invoke function that may be required for component
+ */
 (function (InvokeActionError) {
   InvokeActionError["NoData"] = "NoData";
   InvokeActionError["Unknown"] = "Unknown";
-})(InvokeActionError || (InvokeActionError = {}));
+})(InvokeActionError || (InvokeActionError = {}));
+/**
+ * Invoke request with additional details for the component
+ */
+/**
+ * CRUD invoke requests for the component that support server actions
+ */

package/dist/esm/version.json

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

package/dist/esm/view/FlexibleCard/components/common/lozenge-action/index.js

@@ -70,7 +70,7 @@ var LozengeAction = function LozengeAction(_ref) {
               return invoke(action.read, extractLozengeActionItems);
             case 6:
               responseItems = _context.sent;
-              validItems = validateItems(responseItems, text);
+              validItems = typeof text === 'string' ? validateItems(responseItems, text) : responseItems;
               setItems(validItems);
               setIsLoaded(true);
               if ((validItems === null || validItems === void 0 ? void 0 : validItems.length) === 0) {

package/dist/esm/view/FlexibleCard/components/common/lozenge-action/styled.js

@@ -1,6 +1,6 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2, _templateObject3;
 import { css } from '@emotion/react';
-export var triggerButtonStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  all: unset;\n  background-color: transparent;\n  color: unset;\n  cursor: pointer;\n  font-family: unset;\n  font-size: unset;\n  font-style: unset;\n  font-weight: unset;\n  font-variant: unset;\n  line-height: 0;\n  padding: 0;\n  text-transform: unset;\n\n  border: 2px solid transparent;\n  margin: -2px;\n\n  &:focus-visible,\n  &:focus-within,\n  &[aria-expanded='true'] {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ";\n    border-radius: 5px;\n  }\n"])), "var(--ds-border-focused, #388BFF)");
+export var triggerButtonStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  all: unset;\n  background-color: transparent;\n  color: unset;\n  cursor: pointer;\n  font-family: unset;\n  font-size: unset;\n  font-style: unset;\n  font-weight: unset;\n  font-variant: unset;\n  line-height: 0;\n  padding: 0;\n  text-transform: unset;\n\n  border: 2px solid transparent;\n  margin: 2px;\n\n  &:focus-visible,\n  &:focus-within,\n  &[aria-expanded='true'] {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ";\n    border-radius: 5px;\n  }\n"])), "var(--ds-border-focused, #388BFF)");
 export var triggerLozengeStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n\n  span[role='img'] {\n    margin: -4px -8px -4px -1px;\n  }\n"])));
 export var dropdownItemGroupStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  button {\n    padding: 6px 12px;\n    min-height: 28px;\n    width: 220px;\n\n    &:hover {\n      background-color: inherit;\n    }\n\n    &:focus,\n    &:focus-visible {\n      background-color: ", ";\n      box-sizing: border-box;\n      box-shadow: inset 2px 0 0 ", ";\n      outline: none;\n    }\n  }\n"])), "var(--ds-background-neutral-subtle-hovered, #091E420F)", "var(--ds-border-selected, #0C66E4)");

package/dist/esm/view/FlexibleCard/components/elements/lozenge/index.js

@@ -5,9 +5,9 @@ var _templateObject, _templateObject2;
 import React, { useCallback, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import AtlaskitLozenge from '@atlaskit/lozenge';
-import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
+import LozengeAction from '../../common/lozenge-action';
 var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  line-height: inherit;\n"])));
-var actionStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  > span > span {\n    display: inline-flex;\n    align-items: center;\n    margin-right: -2px;\n  }\n\n  svg {\n    width: unset;\n    height: unset;\n    margin: -4px 0;\n  }\n\n  :hover {\n    cursor: pointer;\n  }\n"])));
+var actionStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  overflow: visible;\n"])));
 
 /**
  * A base element that displays a Lozenge.
@@ -16,7 +16,8 @@ var actionStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLi
  * @see State
  */
 var Lozenge = function Lozenge(_ref) {
-  var _ref$appearance = _ref.appearance,
+  var action = _ref.action,
+    _ref$appearance = _ref.appearance,
     appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
     name = _ref.name,
     onClick = _ref.onClick,
@@ -42,6 +43,16 @@ var Lozenge = function Lozenge(_ref) {
   if (!text) {
     return null;
   }
+  var lozenge = action ? jsx(LozengeAction, {
+    action: action,
+    appearance: appearance,
+    testId: testId,
+    text: text
+  }) : jsx(AtlaskitLozenge, {
+    appearance: appearance,
+    isBold: isBold,
+    testId: "".concat(testId, "-lozenge")
+  }, text);
   return jsx("span", {
     css: [styles, onClick ? actionStyles : undefined, overrideCss],
     "data-fit-to-content": true,
@@ -52,13 +63,6 @@ var Lozenge = function Lozenge(_ref) {
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave,
     tabIndex: onClick ? 0 : -1
-  }, jsx(AtlaskitLozenge, {
-    appearance: appearance,
-    isBold: isBold,
-    testId: "".concat(testId, "-lozenge")
-  }, text, onClick && jsx(ChevronDownIcon, {
-    label: "action",
-    testId: "".concat(testId, "-action")
-  })));
+  }, lozenge);
 };
 export default Lozenge;

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

@@ -12,24 +12,33 @@ import { getContextByStatus, getRetryOptions } from './utils';
  * @see Container
  */
 var FlexibleCard = function FlexibleCard(_ref) {
-  var cardState = _ref.cardState,
+  var analytics = _ref.analytics,
+    cardState = _ref.cardState,
     children = _ref.children,
+    id = _ref.id,
     onAuthorize = _ref.onAuthorize,
+    onClick = _ref.onClick,
     onError = _ref.onError,
     onResolve = _ref.onResolve,
     renderers = _ref.renderers,
-    ui = _ref.ui,
-    url = _ref.url,
-    onClick = _ref.onClick,
+    showHoverPreview = _ref.showHoverPreview,
+    showServerActions = _ref.showServerActions,
     testId = _ref.testId,
-    analytics = _ref.analytics,
-    showHoverPreview = _ref.showHoverPreview;
+    ui = _ref.ui,
+    url = _ref.url;
   var cardType = cardState.status,
     details = cardState.details;
   var status = cardType;
   var context = useMemo(function () {
-    return getContextByStatus(url, status, details, renderers);
-  }, [details, renderers, status, url]);
+    return getContextByStatus({
+      response: details,
+      id: id,
+      renderers: renderers,
+      showServerActions: showServerActions,
+      status: status,
+      url: url
+    });
+  }, [details, id, renderers, showServerActions, status, url]);
   var retry = getRetryOptions(url, status, details, onAuthorize);
   var _ref2 = context || {},
     title = _ref2.title;

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

@@ -2,12 +2,16 @@ import { SmartLinkStatus } from '../../constants';
 import { getEmptyJsonLd, getForbiddenJsonLd } from '../../utils/jsonld';
 import { extractRequestAccessContext } from '../../extractors/common/context';
 import { messages } from '../../messages';
-import extractFlexibleLinkContext from '../../extractors/flexible';
+import extractFlexibleUiContext from '../../extractors/flexible';
 import { extractErrorIcon } from '../../extractors/flexible/icon';
 import { handleOnClick } from '../../utils';
 import { extractProvider } from '@atlaskit/linking-common/extractors';
 import extractProviderIcon from '../../extractors/flexible/icon/extract-provider-icon';
-export var getContextByStatus = function getContextByStatus(url, status, details, renderers) {
+export var getContextByStatus = function getContextByStatus(params) {
+  var _ref = params !== null && params !== void 0 ? params : {},
+    response = _ref.response,
+    status = _ref.status,
+    url = _ref.url;
   switch (status) {
     case SmartLinkStatus.Pending:
     case SmartLinkStatus.Resolving:
@@ -16,15 +20,15 @@ export var getContextByStatus = function getContextByStatus(url, status, details
         url: url
       };
     case SmartLinkStatus.Resolved:
-      return extractFlexibleLinkContext(details, renderers);
+      return extractFlexibleUiContext(params);
     case SmartLinkStatus.Unauthorized:
     case SmartLinkStatus.Forbidden:
     case SmartLinkStatus.NotFound:
     case SmartLinkStatus.Errored:
     case SmartLinkStatus.Fallback:
     default:
-      var linkIcon = extractErrorIcon(details, status);
-      var provider = extractProviderIcon(details === null || details === void 0 ? void 0 : details.data);
+      var linkIcon = extractErrorIcon(response, status);
+      var provider = extractProviderIcon(response === null || response === void 0 ? void 0 : response.data);
       return {
         linkIcon: linkIcon,
         title: url,
@@ -51,9 +55,9 @@ var getForbiddenMessageKey = function getForbiddenMessageKey(meta) {
       return 'restricted_link';
   }
 };
-export var getRetryOptions = function getRetryOptions(url, status, details, onAuthorize) {
-  var _details$meta, _access$action;
-  var data = details && details.data || getEmptyJsonLd();
+export var getRetryOptions = function getRetryOptions(url, status, response, onAuthorize) {
+  var _response$meta, _access$action;
+  var data = response && response.data || getEmptyJsonLd();
   var provider = extractProvider(data);
   var context = provider === null || provider === void 0 ? void 0 : provider.text;
   var values = context ? {
@@ -61,7 +65,7 @@ export var getRetryOptions = function getRetryOptions(url, status, details, onAu
   } : undefined;
   switch (status) {
     case SmartLinkStatus.Forbidden:
-      var meta = (_details$meta = details === null || details === void 0 ? void 0 : details.meta) !== null && _details$meta !== void 0 ? _details$meta : getForbiddenJsonLd().meta;
+      var meta = (_response$meta = response === null || response === void 0 ? void 0 : response.meta) !== null && _response$meta !== void 0 ? _response$meta : getForbiddenJsonLd().meta;
       var access = extractRequestAccessContext({
         jsonLd: meta,
         url: url,

package/dist/types/extractors/common/lozenge/types.d.ts

@@ -1,5 +1,7 @@
+import { InvokeActions } from '../../../state/hooks/use-invoke/types';
 export declare type LinkLozengeColor = 'default' | 'success' | 'removed' | 'inprogress' | 'new' | 'moved';
 export interface LinkLozenge {
+    action?: InvokeActions;
     text: string;
     appearance?: LinkLozengeColor;
 }

package/dist/types/extractors/flexible/extract-server-action.d.ts

@@ -0,0 +1,3 @@
+import type { JsonLd } from 'json-ld-types';
+declare const extractServerAction: (data?: JsonLd.Data.BaseData | undefined) => JsonLd.Primitives.ServerAction[];
+export default extractServerAction;

package/dist/types/extractors/flexible/extract-state.d.ts

@@ -0,0 +1,4 @@
+import type { JsonLd } from 'json-ld-types';
+import type { LinkLozenge } from '../common/lozenge/types';
+declare const extractState: (response?: JsonLd.Response<JsonLd.Data.BaseData> | undefined, showServerActions?: boolean | undefined, id?: string | undefined) => LinkLozenge | undefined;
+export default extractState;

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

@@ -1,5 +1,4 @@
-import { JsonLd } from 'json-ld-types';
-import { CardProviderRenderers } from '@atlaskit/link-provider';
 import { FlexibleUiDataContext } from '../../state/flexible-ui-context/types';
-declare const extractFlexibleUiContext: (response?: JsonLd.Response<JsonLd.Data.BaseData> | undefined, renderers?: CardProviderRenderers | undefined) => FlexibleUiDataContext | undefined;
+import { ExtractFlexibleUiDataContextParams } from '../../view/FlexibleCard/types';
+declare const extractFlexibleUiContext: ({ featureFlags, id, renderers, showServerActions, response, }?: Partial<ExtractFlexibleUiDataContextParams>) => FlexibleUiDataContext | undefined;
 export default extractFlexibleUiContext;

package/dist/types/state/hooks/use-invoke/types.d.ts

@@ -3,11 +3,31 @@ export declare enum InvokeActionError {
     NoData = "NoData",
     Unknown = "Unknown"
 }
+/**
+ * Additional details for invoke function that may be required for component
+ */
+export declare type CardDetails = {
+    /**
+     * An identifier for Smart Link analytics
+     */
+    id?: string;
+    /**
+     * The URL of the Smart Link
+     */
+    url?: string;
+};
+/**
+ * Invoke request with additional details for the component
+ */
+export declare type InvokeRequestWithCardDetails = InvokeRequest & {
+    details?: CardDetails;
+};
+/**
+ * CRUD invoke requests for the component that support server actions
+ */
 export declare type InvokeActions = {
     create?: InvokeRequest;
     read?: InvokeRequest;
-    update?: InvokeRequest & {
-        details?: Record<string, any>;
-    };
+    update?: InvokeRequestWithCardDetails;
     delete?: InvokeRequest;
 };

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

@@ -1,5 +1,5 @@
 import React from 'react';
 import { CardAppearance, CardPlatform, CardProps } from './types';
 import { WrappedComponentProps } from 'react-intl-next';
-export declare const Card: React.ForwardRefExoticComponent<Pick<Omit<React.PropsWithChildren<import("react-intl-next").WithIntlProps<CardProps & WrappedComponentProps<"intl">>>, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "url" | "children" | "data" | "key" | "id" | "placeholder" | "onError" | "onClick" | "appearance" | "testId" | "analyticsContext" | "isSelected" | "inheritDimensions" | "ui" | "showActions" | "showHoverPreview" | "onResolve" | "platform" | "showAuthTooltip" | "frameStyle" | "embedIframeRef" | "inlinePreloaderStyle" | "isFrameVisible" | "importer" | "container" | "showServerActions" | "embedIframeUrlType" | "analyticsEvents" | "forwardedRef"> & React.RefAttributes<any>>;
+export declare const Card: React.ForwardRefExoticComponent<Pick<Omit<React.PropsWithChildren<import("react-intl-next").WithIntlProps<CardProps & WrappedComponentProps<"intl">>>, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "url" | "children" | "data" | "key" | "id" | "placeholder" | "onError" | "onClick" | "appearance" | "testId" | "analyticsContext" | "isSelected" | "inheritDimensions" | "ui" | "showActions" | "showHoverPreview" | "showServerActions" | "showAuthTooltip" | "onResolve" | "platform" | "frameStyle" | "embedIframeRef" | "inlinePreloaderStyle" | "isFrameVisible" | "importer" | "container" | "embedIframeUrlType" | "analyticsEvents" | "forwardedRef"> & React.RefAttributes<any>>;
 export type { CardAppearance, CardProps, CardPlatform };

package/dist/types/view/FlexibleCard/components/common/lozenge-action/lozenge-action-trigger/type.d.ts

@@ -1,7 +1,8 @@
+/// <reference types="react" />
 import type { ThemeAppearance } from '@atlaskit/lozenge';
 import type { CustomTriggerProps } from '@atlaskit/dropdown-menu';
 export declare type LozengeActionTriggerProps = {
     appearance?: ThemeAppearance;
     testId?: string;
-    text: string;
+    text: string | React.ReactNode;
 } & CustomTriggerProps<HTMLButtonElement>;

package/dist/types/view/FlexibleCard/components/common/lozenge-action/types.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { ThemeAppearance } from '@atlaskit/lozenge';
 import type { InvokeActions } from '../../../../../state/hooks/use-invoke/types';
 export declare type LozengeItem = {
@@ -9,5 +10,5 @@ export declare type LozengeActionProps = {
     action?: InvokeActions;
     appearance?: ThemeAppearance;
     testId?: string;
-    text: string;
+    text: string | React.ReactNode;
 };

package/dist/types/view/FlexibleCard/components/elements/lozenge/index.d.ts

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import React from 'react';
-import { LozengeProps } from './types';
+import type { LozengeProps } from './types';
 /**
  * A base element that displays a Lozenge.
  * @internal

package/dist/types/view/FlexibleCard/components/elements/lozenge/types.d.ts

@@ -1,7 +1,12 @@
 /// <reference types="react" />
 import { ElementProps } from '../types';
+import { InvokeActions } from '../../../../../state/hooks/use-invoke/types';
 export declare type LozengeAppearance = 'default' | 'inprogress' | 'moved' | 'new' | 'removed' | 'success';
 export declare type LozengeProps = ElementProps & {
+    /**
+     * Action that can be performed on the element
+     */
+    action?: InvokeActions;
     /**
      * Determines the appearance of the Atlaskit lozenge.
      */

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

@@ -1,8 +1,9 @@
 /// <reference types="react" />
 import { MessageDescriptor } from 'react-intl-next';
-import { CardState } from '@atlaskit/linking-common';
+import type { JsonLd } from 'json-ld-types';
+import { CardState, LinkingPlatformFeatureFlags } from '@atlaskit/linking-common';
 import { CardProviderRenderers } from '@atlaskit/link-provider';
-import { SmartLinkSize, SmartLinkTheme } from '../../constants';
+import { SmartLinkSize, SmartLinkStatus, SmartLinkTheme } from '../../constants';
 import { CardAppearance } from '../../view/Card';
 import { OnResolveCallback } from '../Card/types';
 import { OnErrorCallback } from '../types';
@@ -56,6 +57,10 @@ export declare type FlexibleCardProps = {
      * to render Emoji.
      */
     renderers?: CardProviderRenderers;
+    /**
+     * Determines whether to show available server actions.
+     */
+    showServerActions?: boolean;
     /**
      * A `testId` prop is provided for specified elements, which is a unique
      * string that appears as a data attribute `data-testid` in the rendered code,
@@ -127,3 +132,8 @@ export declare type RetryOptions = {
      */
     values?: Record<string, string>;
 };
+export declare type ExtractFlexibleUiDataContextParams = Pick<FlexibleCardProps, 'id' | 'showServerActions' | 'renderers' | 'url'> & {
+    status?: SmartLinkStatus;
+    response?: JsonLd.Response;
+    featureFlags?: Partial<LinkingPlatformFeatureFlags>;
+};

package/dist/types/view/FlexibleCard/utils.d.ts

@@ -1,7 +1,6 @@
 import { JsonLd } from 'json-ld-types';
-import { CardProviderRenderers } from '@atlaskit/link-provider';
-import { RetryOptions } from './types';
+import { ExtractFlexibleUiDataContextParams, RetryOptions } from './types';
 import { SmartLinkStatus } from '../../constants';
 import { FlexibleUiDataContext } from '../../state/flexible-ui-context/types';
-export declare const getContextByStatus: (url: string, status?: SmartLinkStatus | undefined, details?: JsonLd.Response<JsonLd.Data.BaseData> | undefined, renderers?: CardProviderRenderers | undefined) => FlexibleUiDataContext | undefined;
-export declare const getRetryOptions: (url: string, status?: SmartLinkStatus | undefined, details?: JsonLd.Response<JsonLd.Data.BaseData> | undefined, onAuthorize?: (() => void) | undefined) => RetryOptions | undefined;
+export declare const getContextByStatus: (params: ExtractFlexibleUiDataContextParams) => FlexibleUiDataContext | undefined;
+export declare const getRetryOptions: (url: string, status?: SmartLinkStatus | undefined, response?: JsonLd.Response<JsonLd.Data.BaseData> | undefined, onAuthorize?: (() => void) | undefined) => RetryOptions | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "25.5.0",
+  "version": "25.5.2",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -34,7 +34,7 @@
     "@atlaskit/icon-priority": "^6.3.0",
     "@atlaskit/in-product-testing": "^0.1.0",
     "@atlaskit/link-client-extension": "^0.4.0",
-    "@atlaskit/linking-common": "^2.4.0",
+    "@atlaskit/linking-common": "^2.5.0",
     "@atlaskit/linking-types": "^0.4.0",
     "@atlaskit/logo": "^13.12.0",
     "@atlaskit/lozenge": "^11.3.0",