@atlaskit/smart-card 25.3.1 → 25.3.2

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/smart-card
 
+## 25.3.2
+
+### Patch Changes
+
+- [`fab186f135b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fab186f135b) - Add load and update functionality to lozenge action
+- Updated dependencies
+
 ## 25.3.1
 
 ### Patch Changes

package/dist/cjs/extractors/action/extract-lozenge-action-items.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var extractLozengeActionItems = function extractLozengeActionItems(response) {
+  var _response$transitions, _response$transitions2;
+  var items = (_response$transitions = response === null || response === void 0 ? void 0 : (_response$transitions2 = response.transitions) === null || _response$transitions2 === void 0 ? void 0 : _response$transitions2.map(function (_ref) {
+    var _ref2;
+    var appearance = _ref.appearance,
+      id = _ref.id,
+      name = _ref.name;
+    return {
+      appearance: (_ref2 = appearance) !== null && _ref2 !== void 0 ? _ref2 : 'default',
+      id: id,
+      text: name
+    };
+  })) !== null && _response$transitions !== void 0 ? _response$transitions : [];
+  return items.sort(function (a, b) {
+    return a.appearance.localeCompare(b.appearance) || a.text.localeCompare(b.text);
+  });
+};
+var _default = extractLozengeActionItems;
+exports.default = _default;

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

@@ -8,30 +8,35 @@ exports.default = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _react = require("react");
+var _linkClientExtension = require("@atlaskit/link-client-extension");
+var _linkProvider = require("@atlaskit/link-provider");
 var useInvoke = function useInvoke() {
+  var _useSmartLinkContext = (0, _linkProvider.useSmartLinkContext)(),
+    connections = _useSmartLinkContext.connections;
+  var clientExt = (0, _linkClientExtension.useSmartLinkClientExtension)(connections.client);
   return (0, _react.useCallback)( /*#__PURE__*/function () {
-    var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(action) {
+    var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(req, cb) {
+      var response;
       return _regenerator.default.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
               _context.next = 2;
-              return new Promise(function (resolve) {
-                resolve();
-              });
+              return clientExt.invoke(req);
             case 2:
-              return _context.abrupt("return", _context.sent);
-            case 3:
+              response = _context.sent;
+              return _context.abrupt("return", cb ? cb(response) : response);
+            case 4:
             case "end":
               return _context.stop();
           }
         }
       }, _callee);
     }));
-    return function (_x) {
+    return function (_x, _x2) {
       return _ref.apply(this, arguments);
     };
-  }(), []);
+  }(), [clientExt]);
 };
 var _default = useInvoke;
 exports.default = _default;

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

@@ -3,12 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.InvokeActionName = exports.InvokeActionError = void 0;
-var InvokeActionName;
-exports.InvokeActionName = InvokeActionName;
-(function (InvokeActionName) {
-  InvokeActionName["UpdateAction"] = "UpdateAction";
-})(InvokeActionName || (exports.InvokeActionName = InvokeActionName = {}));
+exports.InvokeActionError = void 0;
 var InvokeActionError;
 exports.InvokeActionError = InvokeActionError;
 (function (InvokeActionError) {

package/dist/cjs/utils/actions/create-status-update-request.js

@@ -0,0 +1,21 @@
+"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"));
+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 createStatusUpdateRequest = function createStatusUpdateRequest(request, id) {
+  return _objectSpread(_objectSpread({}, request), {}, {
+    action: _objectSpread(_objectSpread({}, request.action), {}, {
+      payload: {
+        newStatusId: id
+      }
+    })
+  });
+};
+var _default = createStatusUpdateRequest;
+exports.default = _default;

package/dist/cjs/version.json

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

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

@@ -14,9 +14,10 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var withErrorBoundary = function withErrorBoundary(Component) {
   return function (props) {
     var fallback = (0, _react.useMemo)(function () {
+      var _props$testId;
       return /*#__PURE__*/_react.default.createElement(_lozenge.default, {
         appearance: props === null || props === void 0 ? void 0 : props.appearance,
-        testId: "".concat(props === null || props === void 0 ? void 0 : props.testId, "-fallback")
+        testId: "".concat((_props$testId = props === null || props === void 0 ? void 0 : props.testId) !== null && _props$testId !== void 0 ? _props$testId : 'smart-element-lozenge-action', "-fallback")
       }, props === null || props === void 0 ? void 0 : props.text);
     }, [props === null || props === void 0 ? void 0 : props.appearance, props === null || props === void 0 ? void 0 : props.testId, props === null || props === void 0 ? void 0 : props.text]);
     return /*#__PURE__*/_react.default.createElement(_reactErrorBoundary.ErrorBoundary, {

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

@@ -17,13 +17,22 @@ var _lozengeActionItem = _interopRequireDefault(require("./lozenge-action-item")
 var _lozengeActionTrigger = _interopRequireDefault(require("./lozenge-action-trigger"));
 var _lozengeActionError = _interopRequireDefault(require("./lozenge-action-error"));
 var _errorBoundary = _interopRequireDefault(require("./error-boundary"));
+var _styled = require("./styled");
 var _useInvoke = _interopRequireDefault(require("../../../../../state/hooks/use-invoke"));
 var _types = require("../../../../../state/hooks/use-invoke/types");
-var _styled = require("./styled");
+var _extractLozengeActionItems = _interopRequireDefault(require("../../../../../extractors/action/extract-lozenge-action-items"));
+var _createStatusUpdateRequest = _interopRequireDefault(require("../../../../../utils/actions/create-status-update-request"));
 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; }
 /** @jsx jsx */
 
+var validateItems = function validateItems() {
+  var items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var text = arguments.length > 1 ? arguments[1] : undefined;
+  return items.filter(function (item) {
+    return item.text !== text;
+  });
+};
 var LozengeAction = function LozengeAction(_ref) {
   var action = _ref.action,
     appearance = _ref.appearance,
@@ -38,66 +47,69 @@ var LozengeAction = function LozengeAction(_ref) {
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     isLoading = _useState4[0],
     setIsLoading = _useState4[1];
-  var _useState5 = (0, _react2.useState)(),
+  var _useState5 = (0, _react2.useState)(false),
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    items = _useState6[0],
-    setItems = _useState6[1];
+    isOpen = _useState6[0],
+    setIsOpen = _useState6[1];
   var _useState7 = (0, _react2.useState)(),
     _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-    errorCode = _useState8[0],
-    setErrorCode = _useState8[1];
+    items = _useState8[0],
+    setItems = _useState8[1];
+  var _useState9 = (0, _react2.useState)(),
+    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+    errorCode = _useState10[0],
+    setErrorCode = _useState10[1];
   var invoke = (0, _useInvoke.default)();
-  var onOpenChange = (0, _react2.useCallback)( /*#__PURE__*/function () {
+  var handleOpenChange = (0, _react2.useCallback)( /*#__PURE__*/function () {
     var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(args) {
-      var lozengeItems;
+      var responseItems, validItems;
       return _regenerator.default.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
-              if (!(args.isOpen && !isLoaded && action)) {
-                _context.next = 20;
+              setIsOpen(args.isOpen);
+              if (!(args.isOpen && !isLoaded && action !== null && action !== void 0 && action.read)) {
+                _context.next = 19;
                 break;
               }
-              _context.prev = 1;
+              _context.prev = 2;
               setIsLoading(true);
-              _context.next = 5;
-              return invoke(action);
-            case 5:
-              _context.t0 = _context.sent;
-              if (_context.t0) {
-                _context.next = 8;
-                break;
-              }
-              _context.t0 = [];
-            case 8:
-              lozengeItems = _context.t0;
-              setItems(lozengeItems);
+              _context.next = 6;
+              return invoke(action.read, _extractLozengeActionItems.default);
+            case 6:
+              responseItems = _context.sent;
+              validItems = validateItems(responseItems, text);
+              setItems(validItems);
               setIsLoaded(true);
-              if (lozengeItems.length === 0) {
+              if ((validItems === null || validItems === void 0 ? void 0 : validItems.length) === 0) {
                 setErrorCode(_types.InvokeActionError.NoData);
               }
-              _context.next = 17;
+              _context.next = 16;
               break;
-            case 14:
-              _context.prev = 14;
-              _context.t1 = _context["catch"](1);
-              // TODO: EDM-5746 and EDM-5782
+            case 13:
+              _context.prev = 13;
+              _context.t0 = _context["catch"](2);
+              // TODO: EDM-6261: Error state
               setErrorCode(_types.InvokeActionError.Unknown);
-            case 17:
-              _context.prev = 17;
+            case 16:
+              _context.prev = 16;
               setIsLoading(false);
-              return _context.finish(17);
+              return _context.finish(16);
+            case 19:
+              if (!args.isOpen) {
+                setErrorCode(undefined);
+              }
             case 20:
             case "end":
               return _context.stop();
           }
         }
-      }, _callee, null, [[1, 14, 17, 20]]);
+      }, _callee, null, [[2, 13, 16, 19]]);
     }));
     return function (_x) {
       return _ref2.apply(this, arguments);
     };
-  }(), [action, invoke, isLoaded]);
+  }(), [action === null || action === void 0 ? void 0 : action.read, invoke, isLoaded, text]);
   var trigger = (0, _react2.useCallback)(function (props) {
     return (0, _react.jsx)(_lozengeActionTrigger.default, (0, _extends2.default)({}, props, {
       appearance: appearance,
@@ -105,31 +117,69 @@ var LozengeAction = function LozengeAction(_ref) {
       text: text
     }));
   }, [appearance, testId, text]);
+  var handleItemClick = (0, _react2.useCallback)( /*#__PURE__*/function () {
+    var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(id) {
+      var request;
+      return _regenerator.default.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.prev = 0;
+              if (!(action !== null && action !== void 0 && action.update && id)) {
+                _context2.next = 8;
+                break;
+              }
+              setIsLoading(true);
+              request = (0, _createStatusUpdateRequest.default)(action.update, id);
+              _context2.next = 6;
+              return invoke(request);
+            case 6:
+              setIsLoading(false);
+              setIsOpen(false);
+            case 8:
+              _context2.next = 14;
+              break;
+            case 10:
+              _context2.prev = 10;
+              _context2.t0 = _context2["catch"](0);
+              // TODO: EDM-6261: Error state
+              setIsLoading(false);
+              setErrorCode(_types.InvokeActionError.Unknown);
+            case 14:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2, null, [[0, 10]]);
+    }));
+    return function (_x2) {
+      return _ref3.apply(this, arguments);
+    };
+  }(), [action === null || action === void 0 ? void 0 : action.update, invoke]);
   var dropdownItemGroup = (0, _react2.useMemo)(function () {
-    if (items && items.length > 0) {
-      return (0, _react.jsx)("span", {
-        css: _styled.dropdownItemGroupStyles
-      }, (0, _react.jsx)(_dropdownMenu.DropdownItemGroup, null, items.map(function (_ref3, idx) {
-        var appearance = _ref3.appearance,
-          text = _ref3.text;
-        return (0, _react.jsx)(_lozengeActionItem.default, {
-          appearance: appearance,
-          key: idx,
-          testId: "".concat(testId, "-item-").concat(idx),
-          text: text
-        });
-      })));
-    }
     if (errorCode) {
       return (0, _react.jsx)(_lozengeActionError.default, {
         errorCode: errorCode,
         testId: testId
       });
     }
-  }, [errorCode, items, testId]);
+    if (items && items.length > 0) {
+      return (0, _react.jsx)("span", {
+        css: _styled.dropdownItemGroupStyles,
+        "data-testid": "".concat(testId, "-item-group")
+      }, (0, _react.jsx)(_dropdownMenu.DropdownItemGroup, null, items.map(function (item, idx) {
+        return (0, _react.jsx)(_lozengeActionItem.default, (0, _extends2.default)({}, item, {
+          key: idx,
+          onClick: handleItemClick,
+          testId: "".concat(testId, "-item-").concat(idx)
+        }));
+      })));
+    }
+  }, [errorCode, handleItemClick, items, testId]);
   return (0, _react.jsx)(_dropdownMenu.default, {
     isLoading: isLoading,
-    onOpenChange: onOpenChange,
+    isOpen: isOpen,
+    onOpenChange: handleOpenChange,
     testId: testId,
     trigger: trigger
   }, dropdownItemGroup);

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

@@ -13,15 +13,26 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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 LozengeActionItem = function LozengeActionItem(_ref) {
   var appearance = _ref.appearance,
+    id = _ref.id,
+    onClick = _ref.onClick,
     testId = _ref.testId,
     text = _ref.text;
-  var onMouseEnter = (0, _react.useCallback)(function (e) {
+  var handleClick = (0, _react.useCallback)(function (e) {
+    // Prevent dropdown to close on select item.
+    // We want to show loading screen.
+    e.stopPropagation();
+    if (onClick) {
+      onClick(id);
+    }
+  }, [id, onClick]);
+  var handleMouseEnter = (0, _react.useCallback)(function (e) {
     var _e$currentTarget, _e$currentTarget$firs;
     (_e$currentTarget = e.currentTarget) === null || _e$currentTarget === void 0 ? void 0 : (_e$currentTarget$firs = _e$currentTarget.firstElementChild) === null || _e$currentTarget$firs === void 0 ? void 0 : _e$currentTarget$firs.focus();
   }, []);
   return /*#__PURE__*/_react.default.createElement("span", {
-    onMouseEnter: onMouseEnter
+    onMouseEnter: handleMouseEnter
   }, /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItem, {
+    onClick: handleClick,
     testId: testId
   }, /*#__PURE__*/_react.default.createElement(_lozenge.default, {
     appearance: appearance

package/dist/es2019/extractors/action/extract-lozenge-action-items.js

@@ -0,0 +1,17 @@
+const extractLozengeActionItems = response => {
+  var _response$transitions, _response$transitions2;
+  const items = (_response$transitions = response === null || response === void 0 ? void 0 : (_response$transitions2 = response.transitions) === null || _response$transitions2 === void 0 ? void 0 : _response$transitions2.map(({
+    appearance,
+    id,
+    name
+  }) => {
+    var _ref;
+    return {
+      appearance: (_ref = appearance) !== null && _ref !== void 0 ? _ref : 'default',
+      id,
+      text: name
+    };
+  })) !== null && _response$transitions !== void 0 ? _response$transitions : [];
+  return items.sort((a, b) => a.appearance.localeCompare(b.appearance) || a.text.localeCompare(b.text));
+};
+export default extractLozengeActionItems;

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

@@ -1,10 +1,19 @@
 import { useCallback } from 'react';
+import { useSmartLinkClientExtension } from '@atlaskit/link-client-extension';
+import { useSmartLinkContext } from '@atlaskit/link-provider';
 const useInvoke = () => {
-  return useCallback(async action => {
-    // TODO: EDM-5746 and EDM-5782
-    return await new Promise(resolve => {
-      resolve();
-    });
-  }, []);
+  const {
+    connections
+  } = useSmartLinkContext();
+  const clientExt = useSmartLinkClientExtension(connections.client);
+  return useCallback(async (req, cb) => {
+    // TODO: EDM-6140: Check cache from store
+
+    const response = await clientExt.invoke(req);
+
+    // TODO: EDM-6140: Cache response in store
+
+    return cb ? cb(response) : response;
+  }, [clientExt]);
 };
 export default useInvoke;

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

@@ -1,7 +1,3 @@
-export let InvokeActionName;
-(function (InvokeActionName) {
-  InvokeActionName["UpdateAction"] = "UpdateAction";
-})(InvokeActionName || (InvokeActionName = {}));
 export let InvokeActionError;
 (function (InvokeActionError) {
   InvokeActionError["NoData"] = "NoData";

package/dist/es2019/utils/actions/create-status-update-request.js

@@ -0,0 +1,10 @@
+const createStatusUpdateRequest = (request, id) => ({
+  ...request,
+  action: {
+    ...request.action,
+    payload: {
+      newStatusId: id
+    }
+  }
+});
+export default createStatusUpdateRequest;

package/dist/es2019/version.json

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

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

@@ -2,10 +2,13 @@ import React, { useMemo } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import Lozenge from '@atlaskit/lozenge';
 const withErrorBoundary = Component => props => {
-  const fallback = useMemo(() => /*#__PURE__*/React.createElement(Lozenge, {
-    appearance: props === null || props === void 0 ? void 0 : props.appearance,
-    testId: `${props === null || props === void 0 ? void 0 : props.testId}-fallback`
-  }, props === null || props === void 0 ? void 0 : props.text), [props === null || props === void 0 ? void 0 : props.appearance, props === null || props === void 0 ? void 0 : props.testId, props === null || props === void 0 ? void 0 : props.text]);
+  const fallback = useMemo(() => {
+    var _props$testId;
+    return /*#__PURE__*/React.createElement(Lozenge, {
+      appearance: props === null || props === void 0 ? void 0 : props.appearance,
+      testId: `${(_props$testId = props === null || props === void 0 ? void 0 : props.testId) !== null && _props$testId !== void 0 ? _props$testId : 'smart-element-lozenge-action'}-fallback`
+    }, props === null || props === void 0 ? void 0 : props.text);
+  }, [props === null || props === void 0 ? void 0 : props.appearance, props === null || props === void 0 ? void 0 : props.testId, props === null || props === void 0 ? void 0 : props.text]);
   return /*#__PURE__*/React.createElement(ErrorBoundary, {
     fallback: fallback
   }, /*#__PURE__*/React.createElement(Component, props));

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

@@ -7,9 +7,14 @@ import LozengeActionItem from './lozenge-action-item';
 import LozengeActionTrigger from './lozenge-action-trigger';
 import LozengeActionError from './lozenge-action-error';
 import withErrorBoundary from './error-boundary';
+import { dropdownItemGroupStyles } from './styled';
 import useInvoke from '../../../../../state/hooks/use-invoke';
 import { InvokeActionError } from '../../../../../state/hooks/use-invoke/types';
-import { dropdownItemGroupStyles } from './styled';
+import extractLozengeActionItems from '../../../../../extractors/action/extract-lozenge-action-items';
+import createStatusUpdateRequest from '../../../../../utils/actions/create-status-update-request';
+const validateItems = (items = [], text) => {
+  return items.filter(item => item.text !== text);
+};
 const LozengeAction = ({
   action,
   appearance,
@@ -18,56 +23,75 @@ const LozengeAction = ({
 }) => {
   const [isLoaded, setIsLoaded] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
   const [items, setItems] = useState();
   const [errorCode, setErrorCode] = useState();
   const invoke = useInvoke();
-  const onOpenChange = useCallback(async args => {
-    if (args.isOpen && !isLoaded && action) {
+  const handleOpenChange = useCallback(async args => {
+    setIsOpen(args.isOpen);
+    if (args.isOpen && !isLoaded && action !== null && action !== void 0 && action.read) {
       try {
         setIsLoading(true);
-        const lozengeItems = (await invoke(action)) || [];
-        setItems(lozengeItems);
+        const responseItems = await invoke(action.read, extractLozengeActionItems);
+        const validItems = validateItems(responseItems, text);
+        setItems(validItems);
         setIsLoaded(true);
-        if (lozengeItems.length === 0) {
+        if ((validItems === null || validItems === void 0 ? void 0 : validItems.length) === 0) {
           setErrorCode(InvokeActionError.NoData);
         }
       } catch (err) {
-        // TODO: EDM-5746 and EDM-5782
+        // TODO: EDM-6261: Error state
         setErrorCode(InvokeActionError.Unknown);
       } finally {
         setIsLoading(false);
       }
     }
-  }, [action, invoke, isLoaded]);
+    if (!args.isOpen) {
+      setErrorCode(undefined);
+    }
+  }, [action === null || action === void 0 ? void 0 : action.read, invoke, isLoaded, text]);
   const trigger = useCallback(props => jsx(LozengeActionTrigger, _extends({}, props, {
     appearance: appearance,
     testId: testId,
     text: text
   })), [appearance, testId, text]);
-  const dropdownItemGroup = useMemo(() => {
-    if (items && items.length > 0) {
-      return jsx("span", {
-        css: dropdownItemGroupStyles
-      }, jsx(DropdownItemGroup, null, items.map(({
-        appearance,
-        text
-      }, idx) => jsx(LozengeActionItem, {
-        appearance: appearance,
-        key: idx,
-        testId: `${testId}-item-${idx}`,
-        text: text
-      }))));
+  const handleItemClick = useCallback(async id => {
+    try {
+      if (action !== null && action !== void 0 && action.update && id) {
+        setIsLoading(true);
+        const request = createStatusUpdateRequest(action.update, id);
+        await invoke(request);
+        setIsLoading(false);
+        setIsOpen(false);
+      }
+    } catch (err) {
+      // TODO: EDM-6261: Error state
+      setIsLoading(false);
+      setErrorCode(InvokeActionError.Unknown);
     }
+  }, [action === null || action === void 0 ? void 0 : action.update, invoke]);
+  const dropdownItemGroup = useMemo(() => {
     if (errorCode) {
       return jsx(LozengeActionError, {
         errorCode: errorCode,
         testId: testId
       });
     }
-  }, [errorCode, items, testId]);
+    if (items && items.length > 0) {
+      return jsx("span", {
+        css: dropdownItemGroupStyles,
+        "data-testid": `${testId}-item-group`
+      }, jsx(DropdownItemGroup, null, items.map((item, idx) => jsx(LozengeActionItem, _extends({}, item, {
+        key: idx,
+        onClick: handleItemClick,
+        testId: `${testId}-item-${idx}`
+      })))));
+    }
+  }, [errorCode, handleItemClick, items, testId]);
   return jsx(DropdownMenu, {
     isLoading: isLoading,
-    onOpenChange: onOpenChange,
+    isOpen: isOpen,
+    onOpenChange: handleOpenChange,
     testId: testId,
     trigger: trigger
   }, dropdownItemGroup);

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

@@ -3,16 +3,27 @@ import { DropdownItem } from '@atlaskit/dropdown-menu';
 import Lozenge from '@atlaskit/lozenge';
 const LozengeActionItem = ({
   appearance,
+  id,
+  onClick,
   testId,
   text
 }) => {
-  const onMouseEnter = useCallback(e => {
+  const handleClick = useCallback(e => {
+    // Prevent dropdown to close on select item.
+    // We want to show loading screen.
+    e.stopPropagation();
+    if (onClick) {
+      onClick(id);
+    }
+  }, [id, onClick]);
+  const handleMouseEnter = useCallback(e => {
     var _e$currentTarget, _e$currentTarget$firs;
     (_e$currentTarget = e.currentTarget) === null || _e$currentTarget === void 0 ? void 0 : (_e$currentTarget$firs = _e$currentTarget.firstElementChild) === null || _e$currentTarget$firs === void 0 ? void 0 : _e$currentTarget$firs.focus();
   }, []);
   return /*#__PURE__*/React.createElement("span", {
-    onMouseEnter: onMouseEnter
+    onMouseEnter: handleMouseEnter
   }, /*#__PURE__*/React.createElement(DropdownItem, {
+    onClick: handleClick,
     testId: testId
   }, /*#__PURE__*/React.createElement(Lozenge, {
     appearance: appearance

package/dist/esm/extractors/action/extract-lozenge-action-items.js

@@ -0,0 +1,18 @@
+var extractLozengeActionItems = function extractLozengeActionItems(response) {
+  var _response$transitions, _response$transitions2;
+  var items = (_response$transitions = response === null || response === void 0 ? void 0 : (_response$transitions2 = response.transitions) === null || _response$transitions2 === void 0 ? void 0 : _response$transitions2.map(function (_ref) {
+    var _ref2;
+    var appearance = _ref.appearance,
+      id = _ref.id,
+      name = _ref.name;
+    return {
+      appearance: (_ref2 = appearance) !== null && _ref2 !== void 0 ? _ref2 : 'default',
+      id: id,
+      text: name
+    };
+  })) !== null && _response$transitions !== void 0 ? _response$transitions : [];
+  return items.sort(function (a, b) {
+    return a.appearance.localeCompare(b.appearance) || a.text.localeCompare(b.text);
+  });
+};
+export default extractLozengeActionItems;

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

@@ -1,29 +1,34 @@
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { useCallback } from 'react';
+import { useSmartLinkClientExtension } from '@atlaskit/link-client-extension';
+import { useSmartLinkContext } from '@atlaskit/link-provider';
 var useInvoke = function useInvoke() {
+  var _useSmartLinkContext = useSmartLinkContext(),
+    connections = _useSmartLinkContext.connections;
+  var clientExt = useSmartLinkClientExtension(connections.client);
   return useCallback( /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(action) {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(req, cb) {
+      var response;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
               _context.next = 2;
-              return new Promise(function (resolve) {
-                resolve();
-              });
+              return clientExt.invoke(req);
             case 2:
-              return _context.abrupt("return", _context.sent);
-            case 3:
+              response = _context.sent;
+              return _context.abrupt("return", cb ? cb(response) : response);
+            case 4:
             case "end":
               return _context.stop();
           }
         }
       }, _callee);
     }));
-    return function (_x) {
+    return function (_x, _x2) {
       return _ref.apply(this, arguments);
     };
-  }(), []);
+  }(), [clientExt]);
 };
 export default useInvoke;

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

@@ -1,7 +1,3 @@
-export var InvokeActionName;
-(function (InvokeActionName) {
-  InvokeActionName["UpdateAction"] = "UpdateAction";
-})(InvokeActionName || (InvokeActionName = {}));
 export var InvokeActionError;
 (function (InvokeActionError) {
   InvokeActionError["NoData"] = "NoData";

package/dist/esm/utils/actions/create-status-update-request.js

@@ -0,0 +1,13 @@
+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; }
+var createStatusUpdateRequest = function createStatusUpdateRequest(request, id) {
+  return _objectSpread(_objectSpread({}, request), {}, {
+    action: _objectSpread(_objectSpread({}, request.action), {}, {
+      payload: {
+        newStatusId: id
+      }
+    })
+  });
+};
+export default createStatusUpdateRequest;

package/dist/esm/version.json

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

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

@@ -4,9 +4,10 @@ import Lozenge from '@atlaskit/lozenge';
 var withErrorBoundary = function withErrorBoundary(Component) {
   return function (props) {
     var fallback = useMemo(function () {
+      var _props$testId;
       return /*#__PURE__*/React.createElement(Lozenge, {
         appearance: props === null || props === void 0 ? void 0 : props.appearance,
-        testId: "".concat(props === null || props === void 0 ? void 0 : props.testId, "-fallback")
+        testId: "".concat((_props$testId = props === null || props === void 0 ? void 0 : props.testId) !== null && _props$testId !== void 0 ? _props$testId : 'smart-element-lozenge-action', "-fallback")
       }, props === null || props === void 0 ? void 0 : props.text);
     }, [props === null || props === void 0 ? void 0 : props.appearance, props === null || props === void 0 ? void 0 : props.testId, props === null || props === void 0 ? void 0 : props.text]);
     return /*#__PURE__*/React.createElement(ErrorBoundary, {

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

@@ -10,9 +10,18 @@ import LozengeActionItem from './lozenge-action-item';
 import LozengeActionTrigger from './lozenge-action-trigger';
 import LozengeActionError from './lozenge-action-error';
 import withErrorBoundary from './error-boundary';
+import { dropdownItemGroupStyles } from './styled';
 import useInvoke from '../../../../../state/hooks/use-invoke';
 import { InvokeActionError } from '../../../../../state/hooks/use-invoke/types';
-import { dropdownItemGroupStyles } from './styled';
+import extractLozengeActionItems from '../../../../../extractors/action/extract-lozenge-action-items';
+import createStatusUpdateRequest from '../../../../../utils/actions/create-status-update-request';
+var validateItems = function validateItems() {
+  var items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var text = arguments.length > 1 ? arguments[1] : undefined;
+  return items.filter(function (item) {
+    return item.text !== text;
+  });
+};
 var LozengeAction = function LozengeAction(_ref) {
   var action = _ref.action,
     appearance = _ref.appearance,
@@ -27,66 +36,69 @@ var LozengeAction = function LozengeAction(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     isLoading = _useState4[0],
     setIsLoading = _useState4[1];
-  var _useState5 = useState(),
+  var _useState5 = useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
-    items = _useState6[0],
-    setItems = _useState6[1];
+    isOpen = _useState6[0],
+    setIsOpen = _useState6[1];
   var _useState7 = useState(),
     _useState8 = _slicedToArray(_useState7, 2),
-    errorCode = _useState8[0],
-    setErrorCode = _useState8[1];
+    items = _useState8[0],
+    setItems = _useState8[1];
+  var _useState9 = useState(),
+    _useState10 = _slicedToArray(_useState9, 2),
+    errorCode = _useState10[0],
+    setErrorCode = _useState10[1];
   var invoke = useInvoke();
-  var onOpenChange = useCallback( /*#__PURE__*/function () {
+  var handleOpenChange = useCallback( /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(args) {
-      var lozengeItems;
+      var responseItems, validItems;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
-              if (!(args.isOpen && !isLoaded && action)) {
-                _context.next = 20;
+              setIsOpen(args.isOpen);
+              if (!(args.isOpen && !isLoaded && action !== null && action !== void 0 && action.read)) {
+                _context.next = 19;
                 break;
               }
-              _context.prev = 1;
+              _context.prev = 2;
               setIsLoading(true);
-              _context.next = 5;
-              return invoke(action);
-            case 5:
-              _context.t0 = _context.sent;
-              if (_context.t0) {
-                _context.next = 8;
-                break;
-              }
-              _context.t0 = [];
-            case 8:
-              lozengeItems = _context.t0;
-              setItems(lozengeItems);
+              _context.next = 6;
+              return invoke(action.read, extractLozengeActionItems);
+            case 6:
+              responseItems = _context.sent;
+              validItems = validateItems(responseItems, text);
+              setItems(validItems);
               setIsLoaded(true);
-              if (lozengeItems.length === 0) {
+              if ((validItems === null || validItems === void 0 ? void 0 : validItems.length) === 0) {
                 setErrorCode(InvokeActionError.NoData);
               }
-              _context.next = 17;
+              _context.next = 16;
               break;
-            case 14:
-              _context.prev = 14;
-              _context.t1 = _context["catch"](1);
-              // TODO: EDM-5746 and EDM-5782
+            case 13:
+              _context.prev = 13;
+              _context.t0 = _context["catch"](2);
+              // TODO: EDM-6261: Error state
               setErrorCode(InvokeActionError.Unknown);
-            case 17:
-              _context.prev = 17;
+            case 16:
+              _context.prev = 16;
               setIsLoading(false);
-              return _context.finish(17);
+              return _context.finish(16);
+            case 19:
+              if (!args.isOpen) {
+                setErrorCode(undefined);
+              }
             case 20:
             case "end":
               return _context.stop();
           }
         }
-      }, _callee, null, [[1, 14, 17, 20]]);
+      }, _callee, null, [[2, 13, 16, 19]]);
     }));
     return function (_x) {
       return _ref2.apply(this, arguments);
     };
-  }(), [action, invoke, isLoaded]);
+  }(), [action === null || action === void 0 ? void 0 : action.read, invoke, isLoaded, text]);
   var trigger = useCallback(function (props) {
     return jsx(LozengeActionTrigger, _extends({}, props, {
       appearance: appearance,
@@ -94,31 +106,69 @@ var LozengeAction = function LozengeAction(_ref) {
       text: text
     }));
   }, [appearance, testId, text]);
+  var handleItemClick = useCallback( /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(id) {
+      var request;
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.prev = 0;
+              if (!(action !== null && action !== void 0 && action.update && id)) {
+                _context2.next = 8;
+                break;
+              }
+              setIsLoading(true);
+              request = createStatusUpdateRequest(action.update, id);
+              _context2.next = 6;
+              return invoke(request);
+            case 6:
+              setIsLoading(false);
+              setIsOpen(false);
+            case 8:
+              _context2.next = 14;
+              break;
+            case 10:
+              _context2.prev = 10;
+              _context2.t0 = _context2["catch"](0);
+              // TODO: EDM-6261: Error state
+              setIsLoading(false);
+              setErrorCode(InvokeActionError.Unknown);
+            case 14:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2, null, [[0, 10]]);
+    }));
+    return function (_x2) {
+      return _ref3.apply(this, arguments);
+    };
+  }(), [action === null || action === void 0 ? void 0 : action.update, invoke]);
   var dropdownItemGroup = useMemo(function () {
-    if (items && items.length > 0) {
-      return jsx("span", {
-        css: dropdownItemGroupStyles
-      }, jsx(DropdownItemGroup, null, items.map(function (_ref3, idx) {
-        var appearance = _ref3.appearance,
-          text = _ref3.text;
-        return jsx(LozengeActionItem, {
-          appearance: appearance,
-          key: idx,
-          testId: "".concat(testId, "-item-").concat(idx),
-          text: text
-        });
-      })));
-    }
     if (errorCode) {
       return jsx(LozengeActionError, {
         errorCode: errorCode,
         testId: testId
       });
     }
-  }, [errorCode, items, testId]);
+    if (items && items.length > 0) {
+      return jsx("span", {
+        css: dropdownItemGroupStyles,
+        "data-testid": "".concat(testId, "-item-group")
+      }, jsx(DropdownItemGroup, null, items.map(function (item, idx) {
+        return jsx(LozengeActionItem, _extends({}, item, {
+          key: idx,
+          onClick: handleItemClick,
+          testId: "".concat(testId, "-item-").concat(idx)
+        }));
+      })));
+    }
+  }, [errorCode, handleItemClick, items, testId]);
   return jsx(DropdownMenu, {
     isLoading: isLoading,
-    onOpenChange: onOpenChange,
+    isOpen: isOpen,
+    onOpenChange: handleOpenChange,
     testId: testId,
     trigger: trigger
   }, dropdownItemGroup);

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

@@ -3,15 +3,26 @@ import { DropdownItem } from '@atlaskit/dropdown-menu';
 import Lozenge from '@atlaskit/lozenge';
 var LozengeActionItem = function LozengeActionItem(_ref) {
   var appearance = _ref.appearance,
+    id = _ref.id,
+    onClick = _ref.onClick,
     testId = _ref.testId,
     text = _ref.text;
-  var onMouseEnter = useCallback(function (e) {
+  var handleClick = useCallback(function (e) {
+    // Prevent dropdown to close on select item.
+    // We want to show loading screen.
+    e.stopPropagation();
+    if (onClick) {
+      onClick(id);
+    }
+  }, [id, onClick]);
+  var handleMouseEnter = useCallback(function (e) {
     var _e$currentTarget, _e$currentTarget$firs;
     (_e$currentTarget = e.currentTarget) === null || _e$currentTarget === void 0 ? void 0 : (_e$currentTarget$firs = _e$currentTarget.firstElementChild) === null || _e$currentTarget$firs === void 0 ? void 0 : _e$currentTarget$firs.focus();
   }, []);
   return /*#__PURE__*/React.createElement("span", {
-    onMouseEnter: onMouseEnter
+    onMouseEnter: handleMouseEnter
   }, /*#__PURE__*/React.createElement(DropdownItem, {
+    onClick: handleClick,
     testId: testId
   }, /*#__PURE__*/React.createElement(Lozenge, {
     appearance: appearance

package/dist/types/extractors/action/extract-lozenge-action-items.d.ts

@@ -0,0 +1,4 @@
+import type { GetStatusTransitionsInvokeResponse } from '@atlaskit/linking-types/smart-link-actions';
+import { LozengeItem } from '../../view/FlexibleCard/components/common/lozenge-action/types';
+declare const extractLozengeActionItems: (response: GetStatusTransitionsInvokeResponse) => LozengeItem[];
+export default extractLozengeActionItems;

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

@@ -1,3 +1,3 @@
-import { InvokeAction } from './types';
-declare const useInvoke: () => <T>(action: InvokeAction) => Promise<void | T>;
+import type { InvokeRequest } from '@atlaskit/linking-types/smart-link-actions';
+declare const useInvoke: () => (req: InvokeRequest, cb?: Function | undefined) => Promise<any>;
 export default useInvoke;

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

@@ -1,10 +1,11 @@
-export declare enum InvokeActionName {
-    UpdateAction = "UpdateAction"
-}
+import type { InvokeRequest } from '@atlaskit/linking-types/smart-link-actions';
 export declare enum InvokeActionError {
     NoData = "NoData",
     Unknown = "Unknown"
 }
-export declare type InvokeAction = {
-    name: InvokeActionName;
+export declare type InvokeActions = {
+    create?: InvokeRequest;
+    read?: InvokeRequest;
+    update?: InvokeRequest;
+    delete?: InvokeRequest;
 };

package/dist/types/utils/actions/create-status-update-request.d.ts

@@ -0,0 +1,4 @@
+import type { InvokeRequest } from '@atlaskit/linking-types/smart-link-actions';
+import { StatusUpdateActionPayload } from '@atlaskit/linking-types/smart-link-actions';
+declare const createStatusUpdateRequest: (request: InvokeRequest, id: string) => InvokeRequest<StatusUpdateActionPayload>;
+export default createStatusUpdateRequest;

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

@@ -1,6 +1,5 @@
-import type { ThemeAppearance } from '@atlaskit/lozenge';
-export declare type LozengeActionItemProps = {
-    appearance?: ThemeAppearance;
+import { LozengeItem } from '../types';
+export declare type LozengeActionItemProps = LozengeItem & {
+    onClick?: (id: string) => void;
     testId?: string;
-    text: string;
 };

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

@@ -1,11 +1,12 @@
 import type { ThemeAppearance } from '@atlaskit/lozenge';
-import type { InvokeAction } from '../../../../../state/hooks/use-invoke/types';
+import type { InvokeActions } from '../../../../../state/hooks/use-invoke/types';
 export declare type LozengeItem = {
     appearance?: ThemeAppearance;
+    id: string;
     text: string;
 };
 export declare type LozengeActionProps = {
-    action?: InvokeAction;
+    action?: InvokeActions;
     appearance?: ThemeAppearance;
     testId?: string;
     text: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "25.3.1",
+  "version": "25.3.2",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -33,8 +33,10 @@
     "@atlaskit/icon-object": "^6.2.0",
     "@atlaskit/icon-priority": "^6.3.0",
     "@atlaskit/in-product-testing": "^0.1.0",
+    "@atlaskit/link-client-extension": "^0.3.0",
     "@atlaskit/linking-common": "^2.4.0",
-    "@atlaskit/logo": "^13.11.0",
+    "@atlaskit/linking-types": "^0.3.0",
+    "@atlaskit/logo": "^13.12.0",
     "@atlaskit/lozenge": "^11.3.0",
     "@atlaskit/media-common": "^4.0.0",
     "@atlaskit/modal-dialog": "^12.4.0",
@@ -98,6 +100,7 @@
     "@types/react-loadable": "^5.4.1",
     "abortcontroller-polyfill": "^1.1.9",
     "brace": "^0.11.1",
+    "fetch-mock": "^8.0.0",
     "jest-emotion": "^10.0.32",
     "jest-extended": "^0.11.2",
     "jsdom": "^16.2.2",