@atlaskit/smart-card 17.6.0 → 17.7.2

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/smart-card
 
+## 17.7.2
+
+### Patch Changes
+
+- [`9066a1e8154`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9066a1e8154) - EDM-2926: Add title override for title block
+
+## 17.7.1
+
+### Patch Changes
+
+- [`123201c5105`](https://bitbucket.org/atlassian/atlassian-frontend/commits/123201c5105) - Add ability to add custom action item
+
+## 17.7.0
+
+### Minor Changes
+
+- [`924aa854655`](https://bitbucket.org/atlassian/atlassian-frontend/commits/924aa854655) - Replaced deprecated dependency with @atlaskit/droplist and @atlaskit/item with @atlaskit/dropdown-menu in block card actions list
+- [`fb15a8a421c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fb15a8a421c) - move smart-card views and helpers from media-ui into smart-card
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 17.6.0
 
 ### Minor Changes

package/dist/cjs/constants.js

@@ -156,6 +156,7 @@ exports.ActionName = ActionName;
 
 (function (ActionName) {
   ActionName["DeleteAction"] = "DeleteAction";
+  ActionName["CustomAction"] = "CustomAction";
 })(ActionName || (exports.ActionName = ActionName = {}));
 
 var IconType;

package/dist/cjs/version.json

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

package/dist/cjs/view/BlockCard/components/ActionList.js

@@ -2,40 +2,39 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ActionList = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _core = require("@emotion/core");
 
-var _react = require("react");
-
-var _item = _interopRequireDefault(require("@atlaskit/item"));
+var _buttonGroup = _interopRequireDefault(require("@atlaskit/button/button-group"));
 
-var _droplist = _interopRequireDefault(require("@atlaskit/droplist"));
+var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 
-var _buttonGroup = _interopRequireDefault(require("@atlaskit/button/button-group"));
+var _dropdownMenu = _interopRequireWildcard(require("@atlaskit/dropdown-menu"));
 
-var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
+var _more = _interopRequireDefault(require("@atlaskit/icon/glyph/more"));
 
 var _Action = require("./Action");
 
 var _utils = require("../utils");
 
-/** @jsx jsx */
-var ActionList = function ActionList(_ref) {
-  var items = _ref.items;
+var _excluded = ["triggerRef"];
+
+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); }
 
-  var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      isOpen = _useState2[0],
-      setOpen = _useState2[1];
+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 ActionList = function ActionList(_ref) {
+  var items = _ref.items;
   var actionsToShow = items.slice(0, 2);
   var actionsToList = items.slice(2, items.length);
   return (0, _core.jsx)("div", {
@@ -51,25 +50,29 @@ var ActionList = function ActionList(_ref) {
     css: {
       marginLeft: (0, _utils.gs)(0.5)
     }
-  }, (0, _core.jsx)(_droplist.default, {
-    appearance: "default",
-    position: "right top",
-    isTriggerNotTabbable: true,
-    onOpenChange: function onOpenChange() {
-      return setOpen(true);
-    },
-    onClick: function onClick() {
-      return setOpen(!isOpen);
+  }, (0, _core.jsx)(_dropdownMenu.default, {
+    trigger: function trigger(_ref2) {
+      var triggerRef = _ref2.triggerRef,
+          props = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+      return (0, _core.jsx)(_standardButton.default, (0, _extends2.default)({}, props, {
+        iconBefore: (0, _core.jsx)(_more.default, {
+          label: "more"
+        }),
+        ref: triggerRef,
+        css: {
+          height: 'auto'
+        },
+        testId: "dropdown-trigger"
+      }));
     },
-    isOpen: isOpen,
-    trigger: (0, _core.jsx)(_customThemeButton.default, {
-      spacing: "compact"
-    }, "...")
+    placement: "right-start"
+  }, (0, _core.jsx)(_dropdownMenu.DropdownItemGroup, {
+    testId: "dropdown-menu"
   }, actionsToList.map(function (actionToList) {
-    return (0, _core.jsx)(_item.default, {
+    return (0, _core.jsx)(_dropdownMenu.DropdownItem, {
       key: actionToList.id
     }, actionToList.text);
-  }))) : null);
+  })))) : null);
 };
 
 exports.ActionList = ActionList;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DeleteAction = void 0;
+exports.DeleteAction = exports.CustomAction = void 0;
 
 var _constants = require("../../../../constants");
 
@@ -15,4 +15,6 @@ var _utils = require("./utils");
 // UIActions infer that you do not need to get any data from the context.
 // DataActions infer that the action depends on the data from the context.
 var DeleteAction = (0, _utils.createUIAction)(_constants.ActionName.DeleteAction);
-exports.DeleteAction = DeleteAction;
+exports.DeleteAction = DeleteAction;
+var CustomAction = (0, _utils.createUIAction)(_constants.ActionName.CustomAction);
+exports.CustomAction = CustomAction;

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

@@ -27,6 +27,8 @@ var _messages = require("../../../../messages");
 
 var _cross = _interopRequireDefault(require("@atlaskit/icon/glyph/cross"));
 
+var _actionMappings;
+
 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; }
@@ -35,7 +37,10 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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 actionMappings = (0, _defineProperty2.default)({}, _constants.ActionName.DeleteAction, {
+var actionMappings = (_actionMappings = {}, (0, _defineProperty2.default)(_actionMappings, _constants.ActionName.CustomAction, {
+  component: _action.default,
+  props: {}
+}), (0, _defineProperty2.default)(_actionMappings, _constants.ActionName.DeleteAction, {
   component: _action.default,
   props: {
     testId: 'smart-action-delete-action',
@@ -45,7 +50,7 @@ var actionMappings = (0, _defineProperty2.default)({}, _constants.ActionName.Del
     }),
     toolTipMessage: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.messages.delete)
   }
-});
+}), _actionMappings);
 
 var getContextKey = function getContextKey(name) {
   // Attempt to predict context prop name in advance to reduce the amount of

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

@@ -31,7 +31,7 @@ var _elementGroup = _interopRequireDefault(require("../../element-group"));
 
 var _token = require("../../../../../../utils/token");
 
-var _excluded = ["maxLines", "retry", "position", "testId", "theme"];
+var _excluded = ["maxLines", "retry", "position", "testId", "theme", "text"];
 
 var _templateObject, _templateObject2;
 
@@ -48,6 +48,7 @@ var TitleBlockErroredView = function TitleBlockErroredView(_ref) {
       position = _ref.position,
       testId = _ref.testId,
       theme = _ref.theme,
+      text = _ref.text,
       blockProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
   var _ref2 = retry || {},
@@ -58,14 +59,17 @@ var TitleBlockErroredView = function TitleBlockErroredView(_ref) {
   var _blockProps$size = blockProps.size,
       size = _blockProps$size === void 0 ? _constants.SmartLinkSize.Medium : _blockProps$size;
   var hasAction = onClick !== undefined;
+  var overrideText = !!text ? {
+    text: text
+  } : {};
   return (0, _core.jsx)(_block.default, (0, _extends2.default)({}, blockProps, {
     testId: "".concat(testId, "-errored-view")
   }), (0, _core.jsx)(_elements.LinkIcon, {
     position: position
-  }), (0, _core.jsx)(_elements.Title, {
+  }), (0, _core.jsx)(_elements.Title, (0, _extends2.default)({}, overrideText, {
     maxLines: maxLines,
     theme: theme
-  }), descriptor && (0, _core.jsx)(_elementGroup.default, {
+  })), descriptor && (0, _core.jsx)(_elementGroup.default, {
     direction: _constants.SmartLinkDirection.Horizontal,
     align: _constants.SmartLinkAlignment.Right
   }, (0, _core.jsx)("span", {

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

@@ -25,7 +25,7 @@ var _utils = require("../../utils");
 
 var _actionGroup = _interopRequireDefault(require("../../action-group"));
 
-var _excluded = ["maxLines", "metadata", "position", "subtitle", "actions", "testId", "theme"];
+var _excluded = ["maxLines", "metadata", "position", "subtitle", "actions", "testId", "theme", "text"];
 
 var TitleBlockResolvedView = function TitleBlockResolvedView(_ref) {
   var maxLines = _ref.maxLines,
@@ -38,9 +38,13 @@ var TitleBlockResolvedView = function TitleBlockResolvedView(_ref) {
       actions = _ref$actions === void 0 ? [] : _ref$actions,
       testId = _ref.testId,
       theme = _ref.theme,
+      text = _ref.text,
       blockProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var metadataElements = (0, _utils.renderElementItems)(metadata);
   var subtitleElements = (0, _utils.renderElementItems)(subtitle);
+  var overrideText = !!text ? {
+    text: text
+  } : {};
   return /*#__PURE__*/_react.default.createElement(_block.default, (0, _extends2.default)({}, blockProps, {
     testId: "".concat(testId, "-resolved-view")
   }), /*#__PURE__*/_react.default.createElement(_elements.LinkIcon, {
@@ -48,10 +52,10 @@ var TitleBlockResolvedView = function TitleBlockResolvedView(_ref) {
   }), /*#__PURE__*/_react.default.createElement(_elementGroup.default, {
     direction: _constants.SmartLinkDirection.Vertical,
     width: _constants.SmartLinkWidth.Flexible
-  }, /*#__PURE__*/_react.default.createElement(_elements.Title, {
+  }, /*#__PURE__*/_react.default.createElement(_elements.Title, (0, _extends2.default)({
     maxLines: maxLines,
     theme: theme
-  }), subtitleElements && /*#__PURE__*/_react.default.createElement(_elementGroup.default, {
+  }, overrideText)), subtitleElements && /*#__PURE__*/_react.default.createElement(_elementGroup.default, {
     direction: _constants.SmartLinkDirection.Horizontal
   }, subtitleElements)), metadataElements && /*#__PURE__*/_react.default.createElement(_elementGroup.default, {
     direction: _constants.SmartLinkDirection.Horizontal,

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

@@ -23,7 +23,7 @@ var _block = _interopRequireDefault(require("../../block"));
 
 var _constants = require("../../../../../../constants");
 
-var _excluded = ["maxLines", "retry", "position", "testId", "theme"];
+var _excluded = ["maxLines", "retry", "position", "testId", "theme", "text"];
 
 var getSpinnerSize = function getSpinnerSize(size) {
   // Spinner sizes should be equivalent or smaller than Icon size
@@ -50,18 +50,22 @@ var TitleBlockResolvingView = function TitleBlockResolvingView(_ref) {
       position = _ref.position,
       testId = _ref.testId,
       theme = _ref.theme,
+      text = _ref.text,
       blockProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _blockProps$size = blockProps.size,
       size = _blockProps$size === void 0 ? _constants.SmartLinkSize.Medium : _blockProps$size;
+  var overrideText = !!text ? {
+    text: text
+  } : {};
   return (0, _core.jsx)(_block.default, (0, _extends2.default)({}, blockProps, {
     testId: "".concat(testId, "-resolving-view")
   }), (0, _core.jsx)(_spinner.default, {
     size: getSpinnerSize(size),
     testId: "".concat(testId, "-resolving-spinner")
-  }), (0, _core.jsx)(_elements.Title, {
+  }), (0, _core.jsx)(_elements.Title, (0, _extends2.default)({}, overrideText, {
     maxLines: maxLines,
     theme: theme
-  }));
+  })));
 };
 
 var _default = TitleBlockResolvingView;

package/dist/es2019/constants.js

@@ -131,6 +131,7 @@ export let ActionName;
 
 (function (ActionName) {
   ActionName["DeleteAction"] = "DeleteAction";
+  ActionName["CustomAction"] = "CustomAction";
 })(ActionName || (ActionName = {}));
 
 export let IconType;

package/dist/es2019/version.json

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

package/dist/es2019/view/BlockCard/components/ActionList.js

@@ -2,17 +2,15 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
-import { useState } from 'react';
-import Item from '@atlaskit/item';
-import DropList from '@atlaskit/droplist';
 import ButtonGroup from '@atlaskit/button/button-group';
-import Button from '@atlaskit/button/custom-theme-button';
+import Button from '@atlaskit/button/standard-button';
+import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
+import MoreIcon from '@atlaskit/icon/glyph/more';
 import { Action } from './Action';
 import { gs, mq } from '../utils';
 export const ActionList = ({
   items
 }) => {
-  const [isOpen, setOpen] = useState(false);
   const actionsToShow = items.slice(0, 2);
   const actionsToList = items.slice(2, items.length);
   return jsx("div", {
@@ -26,17 +24,24 @@ export const ActionList = ({
     css: {
       marginLeft: gs(0.5)
     }
-  }, jsx(DropList, {
-    appearance: "default",
-    position: "right top",
-    isTriggerNotTabbable: true,
-    onOpenChange: () => setOpen(true),
-    onClick: () => setOpen(!isOpen),
-    isOpen: isOpen,
-    trigger: jsx(Button, {
-      spacing: "compact"
-    }, "...")
-  }, actionsToList.map(actionToList => jsx(Item, {
+  }, jsx(DropdownMenu, {
+    trigger: ({
+      triggerRef,
+      ...props
+    }) => jsx(Button, _extends({}, props, {
+      iconBefore: jsx(MoreIcon, {
+        label: "more"
+      }),
+      ref: triggerRef,
+      css: {
+        height: 'auto'
+      },
+      testId: "dropdown-trigger"
+    })),
+    placement: "right-start"
+  }, jsx(DropdownItemGroup, {
+    testId: "dropdown-menu"
+  }, actionsToList.map(actionToList => jsx(DropdownItem, {
     key: actionToList.id
-  }, actionToList.text)))) : null);
+  }, actionToList.text))))) : null);
 };

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

@@ -5,4 +5,5 @@ import { createUIAction } from './utils'; // Attention: Keep the export name and
 // UIActions infer that you do not need to get any data from the context.
 // DataActions infer that the action depends on the data from the context.
 
-export const DeleteAction = createUIAction(ActionName.DeleteAction);
+export const DeleteAction = createUIAction(ActionName.DeleteAction);
+export const CustomAction = createUIAction(ActionName.CustomAction);

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

@@ -7,6 +7,10 @@ import { FormattedMessage } from 'react-intl-next';
 import { messages } from '../../../../messages';
 import CrossIcon from '@atlaskit/icon/glyph/cross';
 const actionMappings = {
+  [ActionName.CustomAction]: {
+    component: Action,
+    props: {}
+  },
   [ActionName.DeleteAction]: {
     component: Action,
     props: {

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

@@ -36,6 +36,7 @@ const TitleBlockErroredView = ({
   position,
   testId,
   theme,
+  text,
   ...blockProps
 }) => {
   const {
@@ -47,14 +48,17 @@ const TitleBlockErroredView = ({
     size = SmartLinkSize.Medium
   } = blockProps;
   const hasAction = onClick !== undefined;
+  const overrideText = !!text ? {
+    text
+  } : {};
   return jsx(Block, _extends({}, blockProps, {
     testId: `${testId}-errored-view`
   }), jsx(LinkIcon, {
     position: position
-  }), jsx(Title, {
+  }), jsx(Title, _extends({}, overrideText, {
     maxLines: maxLines,
     theme: theme
-  }), descriptor && jsx(ElementGroup, {
+  })), descriptor && jsx(ElementGroup, {
     direction: SmartLinkDirection.Horizontal,
     align: SmartLinkAlignment.Right
   }, jsx("span", {

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

@@ -15,10 +15,14 @@ const TitleBlockResolvedView = ({
   actions = [],
   testId,
   theme,
+  text,
   ...blockProps
 }) => {
   const metadataElements = renderElementItems(metadata);
   const subtitleElements = renderElementItems(subtitle);
+  const overrideText = !!text ? {
+    text
+  } : {};
   return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
     testId: `${testId}-resolved-view`
   }), /*#__PURE__*/React.createElement(LinkIcon, {
@@ -26,10 +30,10 @@ const TitleBlockResolvedView = ({
   }), /*#__PURE__*/React.createElement(ElementGroup, {
     direction: SmartLinkDirection.Vertical,
     width: SmartLinkWidth.Flexible
-  }, /*#__PURE__*/React.createElement(Title, {
+  }, /*#__PURE__*/React.createElement(Title, _extends({
     maxLines: maxLines,
     theme: theme
-  }), subtitleElements && /*#__PURE__*/React.createElement(ElementGroup, {
+  }, overrideText)), subtitleElements && /*#__PURE__*/React.createElement(ElementGroup, {
     direction: SmartLinkDirection.Horizontal
   }, subtitleElements)), metadataElements && /*#__PURE__*/React.createElement(ElementGroup, {
     direction: SmartLinkDirection.Horizontal,

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

@@ -33,20 +33,24 @@ const TitleBlockResolvingView = ({
   position,
   testId,
   theme,
+  text,
   ...blockProps
 }) => {
   const {
     size = SmartLinkSize.Medium
   } = blockProps;
+  const overrideText = !!text ? {
+    text
+  } : {};
   return jsx(Block, _extends({}, blockProps, {
     testId: `${testId}-resolving-view`
   }), jsx(Spinner, {
     size: getSpinnerSize(size),
     testId: `${testId}-resolving-spinner`
-  }), jsx(Title, {
+  }), jsx(Title, _extends({}, overrideText, {
     maxLines: maxLines,
     theme: theme
-  }));
+  })));
 };
 
 export default TitleBlockResolvingView;

package/dist/esm/constants.js

@@ -131,6 +131,7 @@ export var ActionName;
 
 (function (ActionName) {
   ActionName["DeleteAction"] = "DeleteAction";
+  ActionName["CustomAction"] = "CustomAction";
 })(ActionName || (ActionName = {}));
 
 export var IconType;

package/dist/esm/version.json

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

package/dist/esm/view/BlockCard/components/ActionList.js

@@ -1,23 +1,17 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+var _excluded = ["triggerRef"];
 
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
-import { useState } from 'react';
-import Item from '@atlaskit/item';
-import DropList from '@atlaskit/droplist';
 import ButtonGroup from '@atlaskit/button/button-group';
-import Button from '@atlaskit/button/custom-theme-button';
+import Button from '@atlaskit/button/standard-button';
+import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
+import MoreIcon from '@atlaskit/icon/glyph/more';
 import { Action } from './Action';
 import { gs, mq } from '../utils';
 export var ActionList = function ActionList(_ref) {
   var items = _ref.items;
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isOpen = _useState2[0],
-      setOpen = _useState2[1];
-
   var actionsToShow = items.slice(0, 2);
   var actionsToList = items.slice(2, items.length);
   return jsx("div", {
@@ -33,23 +27,28 @@ export var ActionList = function ActionList(_ref) {
     css: {
       marginLeft: gs(0.5)
     }
-  }, jsx(DropList, {
-    appearance: "default",
-    position: "right top",
-    isTriggerNotTabbable: true,
-    onOpenChange: function onOpenChange() {
-      return setOpen(true);
-    },
-    onClick: function onClick() {
-      return setOpen(!isOpen);
+  }, jsx(DropdownMenu, {
+    trigger: function trigger(_ref2) {
+      var triggerRef = _ref2.triggerRef,
+          props = _objectWithoutProperties(_ref2, _excluded);
+
+      return jsx(Button, _extends({}, props, {
+        iconBefore: jsx(MoreIcon, {
+          label: "more"
+        }),
+        ref: triggerRef,
+        css: {
+          height: 'auto'
+        },
+        testId: "dropdown-trigger"
+      }));
     },
-    isOpen: isOpen,
-    trigger: jsx(Button, {
-      spacing: "compact"
-    }, "...")
+    placement: "right-start"
+  }, jsx(DropdownItemGroup, {
+    testId: "dropdown-menu"
   }, actionsToList.map(function (actionToList) {
-    return jsx(Item, {
+    return jsx(DropdownItem, {
       key: actionToList.id
     }, actionToList.text);
-  }))) : null);
+  })))) : null);
 };

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

@@ -5,4 +5,5 @@ import { createUIAction } from './utils'; // Attention: Keep the export name and
 // UIActions infer that you do not need to get any data from the context.
 // DataActions infer that the action depends on the data from the context.
 
-export var DeleteAction = createUIAction(ActionName.DeleteAction);
+export var DeleteAction = createUIAction(ActionName.DeleteAction);
+export var CustomAction = createUIAction(ActionName.CustomAction);

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

@@ -1,6 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
+var _actionMappings;
+
 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; }
@@ -12,8 +14,10 @@ import Action from './action';
 import { FormattedMessage } from 'react-intl-next';
 import { messages } from '../../../../messages';
 import CrossIcon from '@atlaskit/icon/glyph/cross';
-
-var actionMappings = _defineProperty({}, ActionName.DeleteAction, {
+var actionMappings = (_actionMappings = {}, _defineProperty(_actionMappings, ActionName.CustomAction, {
+  component: Action,
+  props: {}
+}), _defineProperty(_actionMappings, ActionName.DeleteAction, {
   component: Action,
   props: {
     testId: 'smart-action-delete-action',
@@ -23,7 +27,7 @@ var actionMappings = _defineProperty({}, ActionName.DeleteAction, {
     }),
     toolTipMessage: /*#__PURE__*/React.createElement(FormattedMessage, messages.delete)
   }
-});
+}), _actionMappings);
 
 var getContextKey = function getContextKey(name) {
   // Attempt to predict context prop name in advance to reduce the amount of

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _excluded = ["maxLines", "retry", "position", "testId", "theme"];
+var _excluded = ["maxLines", "retry", "position", "testId", "theme", "text"];
 
 var _templateObject, _templateObject2;
 
@@ -28,6 +28,7 @@ var TitleBlockErroredView = function TitleBlockErroredView(_ref) {
       position = _ref.position,
       testId = _ref.testId,
       theme = _ref.theme,
+      text = _ref.text,
       blockProps = _objectWithoutProperties(_ref, _excluded);
 
   var _ref2 = retry || {},
@@ -38,14 +39,17 @@ var TitleBlockErroredView = function TitleBlockErroredView(_ref) {
   var _blockProps$size = blockProps.size,
       size = _blockProps$size === void 0 ? SmartLinkSize.Medium : _blockProps$size;
   var hasAction = onClick !== undefined;
+  var overrideText = !!text ? {
+    text: text
+  } : {};
   return jsx(Block, _extends({}, blockProps, {
     testId: "".concat(testId, "-errored-view")
   }), jsx(LinkIcon, {
     position: position
-  }), jsx(Title, {
+  }), jsx(Title, _extends({}, overrideText, {
     maxLines: maxLines,
     theme: theme
-  }), descriptor && jsx(ElementGroup, {
+  })), descriptor && jsx(ElementGroup, {
     direction: SmartLinkDirection.Horizontal,
     align: SmartLinkAlignment.Right
   }, jsx("span", {

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["maxLines", "metadata", "position", "subtitle", "actions", "testId", "theme"];
+var _excluded = ["maxLines", "metadata", "position", "subtitle", "actions", "testId", "theme", "text"];
 import React from 'react';
 import { LinkIcon, Title } from '../../../elements';
 import Block from '../../block';
@@ -20,10 +20,14 @@ var TitleBlockResolvedView = function TitleBlockResolvedView(_ref) {
       actions = _ref$actions === void 0 ? [] : _ref$actions,
       testId = _ref.testId,
       theme = _ref.theme,
+      text = _ref.text,
       blockProps = _objectWithoutProperties(_ref, _excluded);
 
   var metadataElements = renderElementItems(metadata);
   var subtitleElements = renderElementItems(subtitle);
+  var overrideText = !!text ? {
+    text: text
+  } : {};
   return /*#__PURE__*/React.createElement(Block, _extends({}, blockProps, {
     testId: "".concat(testId, "-resolved-view")
   }), /*#__PURE__*/React.createElement(LinkIcon, {
@@ -31,10 +35,10 @@ var TitleBlockResolvedView = function TitleBlockResolvedView(_ref) {
   }), /*#__PURE__*/React.createElement(ElementGroup, {
     direction: SmartLinkDirection.Vertical,
     width: SmartLinkWidth.Flexible
-  }, /*#__PURE__*/React.createElement(Title, {
+  }, /*#__PURE__*/React.createElement(Title, _extends({
     maxLines: maxLines,
     theme: theme
-  }), subtitleElements && /*#__PURE__*/React.createElement(ElementGroup, {
+  }, overrideText)), subtitleElements && /*#__PURE__*/React.createElement(ElementGroup, {
     direction: SmartLinkDirection.Horizontal
   }, subtitleElements)), metadataElements && /*#__PURE__*/React.createElement(ElementGroup, {
     direction: SmartLinkDirection.Horizontal,

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["maxLines", "retry", "position", "testId", "theme"];
+var _excluded = ["maxLines", "retry", "position", "testId", "theme", "text"];
 
 /** @jsx jsx */
 import React from 'react';
@@ -35,19 +35,23 @@ var TitleBlockResolvingView = function TitleBlockResolvingView(_ref) {
       position = _ref.position,
       testId = _ref.testId,
       theme = _ref.theme,
+      text = _ref.text,
       blockProps = _objectWithoutProperties(_ref, _excluded);
 
   var _blockProps$size = blockProps.size,
       size = _blockProps$size === void 0 ? SmartLinkSize.Medium : _blockProps$size;
+  var overrideText = !!text ? {
+    text: text
+  } : {};
   return jsx(Block, _extends({}, blockProps, {
     testId: "".concat(testId, "-resolving-view")
   }), jsx(Spinner, {
     size: getSpinnerSize(size),
     testId: "".concat(testId, "-resolving-spinner")
-  }), jsx(Title, {
+  }), jsx(Title, _extends({}, overrideText, {
     maxLines: maxLines,
     theme: theme
-  }));
+  })));
 };
 
 export default TitleBlockResolvingView;

package/dist/types/constants.d.ts

@@ -101,7 +101,8 @@ export declare enum ElementName {
  * Flexible UI action (button)
  */
 export declare enum ActionName {
-    DeleteAction = "DeleteAction"
+    DeleteAction = "DeleteAction",
+    CustomAction = "CustomAction"
 }
 /**
  * Flexible UI icons - each mapped to AK icons.

package/dist/types/view/FlexibleCard/components/actions/index.d.ts

@@ -1,3 +1,4 @@
 /// <reference types="react" />
 import { ActionProps } from './action/types';
 export declare const DeleteAction: import("react").FC<ActionProps>;
+export declare const CustomAction: import("react").FC<ActionProps>;

package/dist/types/view/FlexibleCard/components/blocks/title-block/types.d.ts

@@ -9,4 +9,5 @@ export declare type TitleBlockProps = BlockProps & {
     subtitle?: ElementItem[];
     actions?: ActionItem[];
     theme?: SmartLinkTheme;
+    text?: string;
 };

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

@@ -1,4 +1,5 @@
 import { ActionName, ElementName, SmartLinkDirection, SmartLinkSize, SmartLinkStatus } from '../../../../constants';
+import { ActionProps } from '../actions/action/types';
 export declare type BlockProps = {
     direction?: SmartLinkDirection;
     size?: SmartLinkSize;
@@ -10,10 +11,23 @@ export declare type ElementItem = {
     size?: SmartLinkSize;
     testId?: string;
 };
-export declare type ActionItem = {
-    name: ActionName;
+export declare type BaseActionItem = {
     testId?: string;
     hideContent?: boolean;
     hideIcon?: boolean;
     onClick: () => any;
 };
+/**
+ * Customer can define named action item. Icon and label will be provided implicitly.
+ */
+export declare type NamedActionItem = BaseActionItem & {
+    name: Exclude<ActionName, ActionName.CustomAction>;
+};
+/**
+ * Customer can define a custom action item. This will require them to specify
+ * either `icon` and `iconPosition` OR `content` OR both BUT not neither of those things.
+ */
+export declare type CustomActionItem = BaseActionItem & {
+    name: ActionName.CustomAction;
+} & ((Required<Pick<ActionProps, 'icon' | 'iconPosition'>> & Pick<ActionProps, 'content'>) | ((Required<Pick<ActionProps, 'content'>> & Pick<ActionProps, 'icon' | 'iconPosition'>) & Pick<ActionProps, 'tooltipMessage'>));
+export declare type ActionItem = NamedActionItem | CustomActionItem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "17.6.0",
+  "version": "17.7.2",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -26,24 +26,22 @@
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/avatar": "^20.5.0",
     "@atlaskit/avatar-group": "^8.5.5",
-    "@atlaskit/button": "^16.1.4",
+    "@atlaskit/button": "^16.2.0",
     "@atlaskit/dropdown-menu": "^11.1.0",
-    "@atlaskit/droplist": "^11.0.0",
     "@atlaskit/icon": "^21.10.0",
     "@atlaskit/icon-file-type": "^6.3.0",
     "@atlaskit/icon-object": "^6.2.0",
     "@atlaskit/icon-priority": "^6.3.0",
     "@atlaskit/in-product-testing": "^0.1.0",
-    "@atlaskit/item": "^12.0.0",
     "@atlaskit/logo": "^13.5.0",
     "@atlaskit/lozenge": "^11.1.0",
-    "@atlaskit/media-common": "^2.10.0",
-    "@atlaskit/media-ui": "^19.0.0",
+    "@atlaskit/media-common": "^2.11.0",
+    "@atlaskit/media-ui": "^20.0.0",
     "@atlaskit/modal-dialog": "^12.2.0",
     "@atlaskit/outbound-auth-flow-client": "^3.3.0",
     "@atlaskit/spinner": "^15.1.0",
     "@atlaskit/theme": "^12.1.0",
-    "@atlaskit/tokens": "^0.6.0",
+    "@atlaskit/tokens": "^0.7.0",
     "@atlaskit/tooltip": "^17.5.2",
     "@atlaskit/ufo": "^0.1.0",
     "@babel/runtime": "^7.0.0",
@@ -78,7 +76,7 @@
     "@atlaskit/inline-message": "^11.2.0",
     "@atlaskit/lozenge": "^11.1.0",
     "@atlaskit/media-integration-test-helpers": "^2.5.0",
-    "@atlaskit/media-test-helpers": "^29.1.0",
+    "@atlaskit/media-test-helpers": "^29.2.0",
     "@atlaskit/page": "^12.1.0",
     "@atlaskit/radio": "^5.3.0",
     "@atlaskit/range": "^6.0.0",