@atlaskit/smart-card 23.13.2 → 23.14.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/smart-card
 
+## 23.14.0
+
+### Minor Changes
+
+- [`eb2e7a0e762`](https://bitbucket.org/atlassian/atlassian-frontend/commits/eb2e7a0e762) - Add new "showAuthTooltip" prop to SmartCard which shows Auth Tooltip on unauthorised inline Smart Links. This allows us to remove product feature flags in the future
+
+### Patch Changes
+
+- Updated dependencies
+
+## 23.13.3
+
+### Patch Changes
+
+- [`e5b8a41f4da`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e5b8a41f4da) - Hover Preview: Reduce hover content re-rendering
+
 ## 23.13.2
 
 ### Patch Changes

package/dist/cjs/version.json

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

package/dist/cjs/view/CardWithUrl/component.js

@@ -58,6 +58,7 @@ function CardWithUrlContent(_ref) {
       ui = _ref.ui,
       children = _ref.children,
       showHoverPreview = _ref.showHoverPreview,
+      showAuthTooltipProp = _ref.showAuthTooltip,
       analyticsEvents = _ref.analyticsEvents;
 
   // Get state, actions for this card.
@@ -79,8 +80,8 @@ function CardWithUrlContent(_ref) {
   var isFlexibleUi = (0, _react.useMemo)(function () {
     return (0, _flexible.isFlexibleUiCard)(children);
   }, [children]);
-  var showAuthTooltipValue = (0, _linkProvider.useFeatureFlag)('showAuthTooltip');
-  var showAuthTooltip = !!showAuthTooltipValue && showAuthTooltipValue === 'experiment';
+  var showAuthTooltipFeatureFlagValue = (0, _linkProvider.useFeatureFlag)('showAuthTooltip');
+  var showAuthTooltip = showAuthTooltipFeatureFlagValue !== undefined ? showAuthTooltipFeatureFlagValue === 'experiment' : showAuthTooltipProp;
   var enableFlexibleBlockCardFlag = Boolean((0, _linkProvider.useFeatureFlag)('enableFlexibleBlockCard')); // Setup UI handlers.
 
   var handleClick = (0, _react.useCallback)(function (event) {

package/dist/cjs/view/CardWithUrl/loader.js

@@ -71,6 +71,7 @@ function CardWithURLRenderer(props) {
       children = props.children,
       ui = props.ui,
       showHoverPreview = props.showHoverPreview,
+      showAuthTooltip = props.showAuthTooltip,
       analyticsEvents = props.analyticsEvents,
       placeholder = props.placeholder; // Wrapper around analytics.
 
@@ -139,6 +140,7 @@ function CardWithURLRenderer(props) {
     inlinePreloaderStyle: inlinePreloaderStyle,
     ui: ui,
     showHoverPreview: showHoverPreview,
+    showAuthTooltip: showAuthTooltip,
     analyticsEvents: analyticsEvents,
     placeholder: placeholder
   };

package/dist/cjs/view/FlexibleCard/components/blocks/action-group/action-group-item/index.js

@@ -0,0 +1,88 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = require("@emotion/react");
+
+var _react2 = _interopRequireWildcard(require("react"));
+
+var Actions = _interopRequireWildcard(require("../../../actions"));
+
+var _utils = require("../../utils");
+
+var _excluded = ["name", "hideContent", "hideIcon", "onClick"];
+
+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; }
+
+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 ActionGroupItem = function ActionGroupItem(_ref) {
+  var item = _ref.item,
+      size = _ref.size,
+      appearance = _ref.appearance,
+      asDropDownItems = _ref.asDropDownItems,
+      onActionItemClick = _ref.onActionItemClick;
+  var name = item.name,
+      hideContent = item.hideContent,
+      hideIcon = item.hideIcon,
+      onClick = item.onClick,
+      props = (0, _objectWithoutProperties2.default)(item, _excluded);
+  var handleOnClick = (0, _react2.useCallback)(function () {
+    if (onActionItemClick) {
+      onActionItemClick();
+    }
+
+    if (onClick) {
+      onClick();
+    }
+  }, [onActionItemClick, onClick]);
+  var Action = Actions[name];
+
+  if (!Action) {
+    return null;
+  }
+
+  var actionProps = _objectSpread({}, props);
+
+  if (hideContent && !asDropDownItems) {
+    actionProps.content = '';
+  }
+
+  if (hideIcon) {
+    actionProps.icon = undefined;
+  }
+
+  var action = (0, _react.jsx)(Action, (0, _extends2.default)({
+    url: "",
+    asDropDownItem: asDropDownItems,
+    size: size,
+    appearance: appearance,
+    onClick: handleOnClick
+  }, actionProps));
+
+  if (!(0, _utils.isJSXElementNull)(action)) {
+    return action;
+  }
+
+  return null;
+};
+
+var _default = ActionGroupItem;
+exports.default = _default;

package/dist/cjs/view/FlexibleCard/components/blocks/action-group/index.js

@@ -25,8 +25,6 @@ var _buttonGroup = _interopRequireDefault(require("@atlaskit/button/button-group
 
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 
-var _utils = require("../utils");
-
 var _dropdownMenu = _interopRequireDefault(require("@atlaskit/dropdown-menu"));
 
 var _constants = require("../../../../../constants");
@@ -35,17 +33,61 @@ var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-
 
 var _more = _interopRequireDefault(require("@atlaskit/icon/glyph/more"));
 
-var _utils2 = require("../../utils");
+var _utils = require("../../utils");
 
 var _token = require("../../../../../utils/token");
 
 var _messages = require("../../../../../messages");
 
+var _flexibleUiContext = require("../../../../../state/flexible-ui-context");
+
+var _actionGroupItem = _interopRequireDefault(require("./action-group-item"));
+
 var _excluded = ["triggerRef"];
 
 var _templateObject;
 
 var styles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  line-height: 1rem;\n  > div {\n    align-items: center;\n    button:focus {\n      // AK button removes the default browser outline on focus and apply\n      // box-shadow styling to create the outline appearance.\n      // Due to our container elements (Container/Block/ElementGroup) has\n      // overflow hidden to prevent the metadata element from leaking outside\n      // of its container, the box-shadow doesn't show properly.\n      // Invert the AK box-shadow styling.\n      box-shadow: inset 0 0 0 2px ", ";\n    }\n  }\n"])), _token.tokens.focus);
+
+var renderActionItems = function renderActionItems() {
+  var items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _constants.SmartLinkSize.Medium;
+  var appearance = arguments.length > 2 ? arguments[2] : undefined;
+  var asDropDownItems = arguments.length > 3 ? arguments[3] : undefined;
+  var onActionItemClick = arguments.length > 4 ? arguments[4] : undefined;
+  return items.map(function (item, idx) {
+    return (0, _react2.jsx)(_actionGroupItem.default, {
+      item: item,
+      key: idx,
+      size: size,
+      appearance: appearance,
+      asDropDownItems: asDropDownItems,
+      onActionItemClick: onActionItemClick
+    });
+  });
+};
+
+var filterActionItems = function filterActionItems() {
+  var items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var context = arguments.length > 1 ? arguments[1] : undefined;
+  return items.filter(function (item) {
+    switch (item.name) {
+      // Action that require data from the data context to render.
+      case _constants.ActionName.DownloadAction:
+        return Boolean(context === null || context === void 0 ? void 0 : context.downloadAction);
+
+      case _constants.ActionName.PreviewAction:
+        return Boolean(context === null || context === void 0 ? void 0 : context.previewAction);
+
+      case _constants.ActionName.ViewAction:
+        return Boolean(context === null || context === void 0 ? void 0 : context.viewAction);
+
+      default:
+        // Named and custom actions that user defines.
+        return Boolean(_constants.ActionName[item.name]);
+    }
+  });
+};
 /**
  * Creates a group of Action components. Accepts an array of Actions, in addition to some styling
  * preferences.
@@ -54,6 +96,7 @@ var styles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedT
  * @see Action
  */
 
+
 var ActionGroup = function ActionGroup(_ref) {
   var _ref$items = _ref.items,
       items = _ref$items === void 0 ? [] : _ref$items,
@@ -64,12 +107,17 @@ var ActionGroup = function ActionGroup(_ref) {
       visibleButtonsNum = _ref$visibleButtonsNu === void 0 ? 2 : _ref$visibleButtonsNu,
       onDropdownOpenChange = _ref.onDropdownOpenChange,
       testId = _ref.testId;
+  var context = (0, _flexibleUiContext.useFlexibleUiContext)();
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       isOpen = _useState2[0],
       setIsOpen = _useState2[1];
 
+  var renderableActionItems = (0, _react.useMemo)(function () {
+    return filterActionItems(items, context);
+  }, [context, items]);
+  var isMoreThenTwoItems = renderableActionItems.length > visibleButtonsNum;
   var onOpenChange = (0, _react.useCallback)(function (attrs) {
     setIsOpen(attrs.isOpen);
 
@@ -77,54 +125,54 @@ var ActionGroup = function ActionGroup(_ref) {
       onDropdownOpenChange(attrs.isOpen);
     }
   }, [onDropdownOpenChange]);
-  var onActionClick = (0, _react.useCallback)(function () {
+  var onActionItemClick = (0, _react.useCallback)(function () {
     if (isOpen) {
       onOpenChange({
         isOpen: false
       });
     }
   }, [isOpen, onOpenChange]);
-  var renderableActions = items.filter(function (action) {
-    return (0, _utils.renderActionItems)([action]);
-  });
+  var actionButtons = (0, _react.useMemo)(function () {
+    var actionItems = isMoreThenTwoItems ? renderableActionItems.slice(0, visibleButtonsNum - 1) : renderableActionItems;
+    return renderActionItems(actionItems, size, appearance, false, onActionItemClick);
+  }, [appearance, isMoreThenTwoItems, onActionItemClick, renderableActionItems, size, visibleButtonsNum]);
+  var moreActionDropdown = (0, _react.useMemo)(function () {
+    var actionItems = isMoreThenTwoItems ? renderableActionItems.slice(visibleButtonsNum - 1) : [];
+
+    if (actionItems.length > 0) {
+      var spacing = _utils.sizeToButtonSpacing[size];
+      var moreIcon = (0, _react2.jsx)(_more.default, {
+        label: "more"
+      });
+      var formatMessage = (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.more_actions);
+      return (0, _react2.jsx)(_dropdownMenu.default, {
+        isOpen: isOpen,
+        onOpenChange: onOpenChange,
+        trigger: function trigger(_ref2) {
+          var triggerRef = _ref2.triggerRef,
+              props = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+          return (0, _react2.jsx)(_tooltip.default, {
+            content: formatMessage,
+            hideTooltipOnClick: true,
+            testId: "action-group-more-button-tooltip",
+            tag: "span"
+          }, (0, _react2.jsx)(_standardButton.default, (0, _extends2.default)({}, props, {
+            spacing: spacing,
+            testId: "action-group-more-button",
+            iconBefore: moreIcon,
+            ref: triggerRef
+          })));
+        },
+        testId: "action-group-dropdown"
+      }, renderActionItems(actionItems, size, appearance, true, onActionItemClick));
+    }
 
-  var _useMemo = (0, _react.useMemo)(function () {
-    var isMoreThenTwoItems = renderableActions && renderableActions.length > visibleButtonsNum;
-    var buttons = isMoreThenTwoItems ? renderableActions.slice(0, visibleButtonsNum - 1) : renderableActions;
-    var dropdownItems = isMoreThenTwoItems ? renderableActions.slice(visibleButtonsNum - 1) : [];
-    return [buttons, dropdownItems];
-  }, [renderableActions, visibleButtonsNum]),
-      _useMemo2 = (0, _slicedToArray2.default)(_useMemo, 2),
-      buttonActions = _useMemo2[0],
-      dropdownItemActions = _useMemo2[1];
-
-  var dropdownMenuElement = (0, _utils.renderActionItems)(dropdownItemActions, size, appearance, true, onActionClick);
-  var buttonGroupElement = (0, _utils.renderActionItems)(buttonActions, size, appearance, false, onActionClick);
-  return (0, _react2.jsx)("div", {
+    return null;
+  }, [appearance, isMoreThenTwoItems, isOpen, onActionItemClick, onOpenChange, renderableActionItems, size, visibleButtonsNum]);
+  return renderableActionItems.length > 0 ? (0, _react2.jsx)("div", {
     css: styles,
     className: "actions-button-group"
-  }, (0, _react2.jsx)(_buttonGroup.default, null, buttonGroupElement, dropdownItemActions.length > 0 && dropdownMenuElement && dropdownMenuElement.length > 0 ? (0, _react2.jsx)(_dropdownMenu.default, {
-    isOpen: isOpen,
-    onOpenChange: onOpenChange,
-    trigger: function trigger(_ref2) {
-      var triggerRef = _ref2.triggerRef,
-          props = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
-      return (0, _react2.jsx)(_tooltip.default, {
-        content: (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _messages.messages.more_actions),
-        hideTooltipOnClick: true,
-        testId: "action-group-more-button-tooltip",
-        tag: "span"
-      }, (0, _react2.jsx)(_standardButton.default, (0, _extends2.default)({}, props, {
-        spacing: _utils2.sizeToButtonSpacing[size],
-        testId: "action-group-more-button",
-        iconBefore: (0, _react2.jsx)(_more.default, {
-          label: "more"
-        }),
-        ref: triggerRef
-      })));
-    },
-    testId: "action-group-dropdown"
-  }, dropdownMenuElement) : null));
+  }, (0, _react2.jsx)(_buttonGroup.default, null, actionButtons, moreActionDropdown)) : null;
 };
 
 var _default = ActionGroup;

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

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.renderElementItems = exports.renderChildren = exports.renderActionItems = exports.highlightRemoveStyles = exports.getGapSize = exports.getBaseStyles = exports.ElementDisplaySchema = void 0;
+exports.renderElementItems = exports.renderChildren = exports.isJSXElementNull = exports.highlightRemoveStyles = exports.getGapSize = exports.getBaseStyles = exports.ElementDisplaySchema = void 0;
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
@@ -27,16 +27,13 @@ var _constants = require("../../../../constants");
 
 var Elements = _interopRequireWildcard(require("../elements"));
 
-var Actions = _interopRequireWildcard(require("../actions"));
-
 var _flexible = require("../../../../utils/flexible");
 
 var _actionGroup = _interopRequireDefault(require("./action-group"));
 
 var _elementGroup = _interopRequireDefault(require("./element-group"));
 
-var _excluded = ["name"],
-    _excluded2 = ["name", "hideContent", "hideIcon", "onClick"];
+var _excluded = ["name"];
 
 var _ElementDisplaySchema, _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
@@ -44,10 +41,6 @@ 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; }
 
-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 ElementDisplaySchema = (_ElementDisplaySchema = {}, (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.AttachmentCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.AuthorGroup, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ChecklistProgress, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CollaboratorGroup, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CommentCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ViewCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ReactCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.VoteCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CreatedBy, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.CreatedOn, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.DueOn, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.LatestCommit, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.LinkIcon, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ModifiedBy, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ModifiedOn, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Preview, ['block']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Priority, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.ProgrammingLanguage, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Provider, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Snippet, ['block']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.SourceBranch, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.State, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.SubscriberCount, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.TargetBranch, ['inline']), (0, _defineProperty2.default)(_ElementDisplaySchema, _constants.ElementName.Title, ['inline']), _ElementDisplaySchema);
 exports.ElementDisplaySchema = ElementDisplaySchema;
 
@@ -103,6 +96,8 @@ var isJSXElementNull = function isJSXElementNull(children) {
   return Boolean(children.type() === null);
 };
 
+exports.isJSXElementNull = isJSXElementNull;
+
 var isElementOrElementGroup = function isElementOrElementGroup(node) {
   return /*#__PURE__*/_react.default.isValidElement(node) && ((0, _flexible.isFlexibleUiElement)(node) || node.type === _elementGroup.default);
 };
@@ -150,63 +145,4 @@ var renderElementItems = function renderElementItems() {
   }
 };
 
-exports.renderElementItems = renderElementItems;
-
-var renderActionItems = function renderActionItems() {
-  var items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  var size = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _constants.SmartLinkSize.Medium;
-  var appearance = arguments.length > 2 ? arguments[2] : undefined;
-  var asDropDownItems = arguments.length > 3 ? arguments[3] : undefined;
-  var onActionItemClick = arguments.length > 4 ? arguments[4] : undefined;
-  var actions = items.reduce(function (acc, curr, idx) {
-    var name = curr.name,
-        hideContent = curr.hideContent,
-        hideIcon = curr.hideIcon,
-        onClick = curr.onClick,
-        props = (0, _objectWithoutProperties2.default)(curr, _excluded2);
-    var Action = Actions[name];
-
-    var actionProps = _objectSpread({}, props);
-
-    if (hideContent && !asDropDownItems) {
-      actionProps.content = '';
-    }
-
-    if (hideIcon) {
-      actionProps.icon = undefined;
-    }
-
-    if (Action) {
-      var handleOnClick = function handleOnClick() {
-        if (onActionItemClick) {
-          onActionItemClick();
-        }
-
-        if (onClick) {
-          onClick();
-        }
-      };
-
-      var action = /*#__PURE__*/_react.default.createElement(Action, (0, _extends2.default)({
-        url: '',
-        asDropDownItem: asDropDownItems,
-        size: size,
-        key: idx,
-        appearance: appearance,
-        onClick: handleOnClick
-      }, actionProps));
-
-      if (!isJSXElementNull(action)) {
-        return [].concat((0, _toConsumableArray2.default)(acc), [action]);
-      }
-    }
-
-    return acc;
-  }, []);
-
-  if (actions.length) {
-    return actions;
-  }
-};
-
-exports.renderActionItems = renderActionItems;
+exports.renderElementItems = renderElementItems;

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

@@ -47,7 +47,9 @@ var FlexibleCard = function FlexibleCard(_ref) {
   var cardType = cardState.status,
       details = cardState.details;
   var status = cardType;
-  var context = (0, _utils.getContextByStatus)(url, status, details, renderers);
+  var context = (0, _react.useMemo)(function () {
+    return (0, _utils.getContextByStatus)(url, status, details, renderers);
+  }, [details, renderers, status, url]);
   var retry = (0, _utils.getRetryOptions)(url, status, details, onAuthorize);
 
   var _ref2 = context || {},

package/dist/cjs/view/HoverCard/components/HoverCardComponent.js

@@ -145,6 +145,31 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
       hideCard();
     }
   }, [closeOnChildClick, hideCard]);
+  var content = (0, _react2.useCallback)(function (_ref2) {
+    var update = _ref2.update;
+    return (0, _react.jsx)(_HoverCardContent.default, {
+      onMouseEnter: initShowCard,
+      onMouseLeave: initHideCard,
+      analytics: analytics,
+      cardActions: linkActions,
+      cardState: linkState,
+      onActionClick: onActionClick,
+      onResolve: update,
+      renderers: renderers,
+      url: url
+    });
+  }, [analytics, initHideCard, initShowCard, linkActions, linkState, onActionClick, renderers, url]);
+  var trigger = (0, _react2.useCallback)(function (triggerProps) {
+    return (0, _react.jsx)("span", {
+      ref: parentSpan
+    }, (0, _react.jsx)("span", (0, _extends2.default)({}, triggerProps, {
+      onMouseEnter: initShowCard,
+      onMouseLeave: initHideCard,
+      onMouseMove: setMousePosition,
+      onClick: onChildClick,
+      "data-testid": "hover-card-trigger-wrapper"
+    }), children));
+  }, [children, initHideCard, initShowCard, onChildClick, setMousePosition]);
   return (0, _react.jsx)(_popup.default, {
     testId: "hover-card",
     isOpen: isOpen && canOpen,
@@ -152,31 +177,8 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
     placement: "bottom-start",
     offset: popupOffset.current,
     autoFocus: false,
-    content: function content(_ref2) {
-      var update = _ref2.update;
-      return (0, _react.jsx)(_HoverCardContent.default, {
-        onMouseEnter: initShowCard,
-        onMouseLeave: initHideCard,
-        analytics: analytics,
-        cardActions: linkActions,
-        cardState: linkState,
-        onActionClick: onActionClick,
-        onResolve: update,
-        renderers: renderers,
-        url: url
-      });
-    },
-    trigger: function trigger(triggerProps) {
-      return (0, _react.jsx)("span", {
-        ref: parentSpan
-      }, (0, _react.jsx)("span", (0, _extends2.default)({}, triggerProps, {
-        onMouseEnter: initShowCard,
-        onMouseLeave: initHideCard,
-        onMouseMove: setMousePosition,
-        onClick: onChildClick,
-        "data-testid": "hover-card-trigger-wrapper"
-      }), children));
-    },
+    content: content,
+    trigger: trigger,
     zIndex: 511 // Temporary fix for Confluence inline comment on editor mod has z-index of 500, Jira issue view has z-index of 510
 
   });

package/dist/es2019/version.json

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

package/dist/es2019/view/CardWithUrl/component.js

@@ -30,6 +30,7 @@ export function CardWithUrlContent({
   ui,
   children,
   showHoverPreview,
+  showAuthTooltip: showAuthTooltipProp,
   analyticsEvents
 }) {
   // Get state, actions for this card.
@@ -49,8 +50,8 @@ export function CardWithUrlContent({
   const subproduct = getSubproduct(state.details);
   const services = getServices(state.details);
   let isFlexibleUi = useMemo(() => isFlexibleUiCard(children), [children]);
-  const showAuthTooltipValue = useFeatureFlag('showAuthTooltip');
-  const showAuthTooltip = !!showAuthTooltipValue && showAuthTooltipValue === 'experiment';
+  const showAuthTooltipFeatureFlagValue = useFeatureFlag('showAuthTooltip');
+  const showAuthTooltip = showAuthTooltipFeatureFlagValue !== undefined ? showAuthTooltipFeatureFlagValue === 'experiment' : showAuthTooltipProp;
   const enableFlexibleBlockCardFlag = Boolean(useFeatureFlag('enableFlexibleBlockCard')); // Setup UI handlers.
 
   const handleClick = useCallback(event => {

package/dist/es2019/view/CardWithUrl/loader.js

@@ -37,6 +37,7 @@ export function CardWithURLRenderer(props) {
     children,
     ui,
     showHoverPreview,
+    showAuthTooltip,
     analyticsEvents,
     placeholder
   } = props; // Wrapper around analytics.
@@ -108,6 +109,7 @@ export function CardWithURLRenderer(props) {
     inlinePreloaderStyle,
     ui,
     showHoverPreview,
+    showAuthTooltip,
     analyticsEvents,
     placeholder
   };

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

@@ -0,0 +1,64 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import React, { useCallback } from 'react';
+import * as Actions from '../../../actions';
+import { isJSXElementNull } from '../../utils';
+
+const ActionGroupItem = ({
+  item,
+  size,
+  appearance,
+  asDropDownItems,
+  onActionItemClick
+}) => {
+  const {
+    name,
+    hideContent,
+    hideIcon,
+    onClick,
+    ...props
+  } = item;
+  const handleOnClick = useCallback(() => {
+    if (onActionItemClick) {
+      onActionItemClick();
+    }
+
+    if (onClick) {
+      onClick();
+    }
+  }, [onActionItemClick, onClick]);
+  const Action = Actions[name];
+
+  if (!Action) {
+    return null;
+  }
+
+  const actionProps = { ...props
+  };
+
+  if (hideContent && !asDropDownItems) {
+    actionProps.content = '';
+  }
+
+  if (hideIcon) {
+    actionProps.icon = undefined;
+  }
+
+  const action = jsx(Action, _extends({
+    url: "",
+    asDropDownItem: asDropDownItems,
+    size: size,
+    appearance: appearance,
+    onClick: handleOnClick
+  }, actionProps));
+
+  if (!isJSXElementNull(action)) {
+    return action;
+  }
+
+  return null;
+};
+
+export default ActionGroupItem;