@atlaskit/smart-card 25.6.1 → 25.7.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/smart-card
 
+## 25.7.0
+
+### Minor Changes
+
+- [`9c49eef4c87`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9c49eef4c87) - [ux]
+
+  - Add lozenge action to hover preview (wip, opt-in, feature flag)
+  - Fix hover preview's action dropdown menu showing behind container
+  - Allow setting z-index for portal component inside flexible smart links
+
 ## 25.6.1
 
 ### Patch Changes

package/dist/cjs/state/flexible-ui-context/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useFlexibleUiContext = exports.useFlexibleUiAnalyticsContext = exports.FlexibleUiContext = exports.FlexibleUiAnalyticsContext = void 0;
+exports.useFlexibleUiOptionContext = exports.useFlexibleUiContext = exports.useFlexibleUiAnalyticsContext = exports.FlexibleUiOptionContext = exports.FlexibleUiContext = exports.FlexibleUiAnalyticsContext = void 0;
 var _react = require("react");
 /**
  * This provides the data that will be used by Smart Links Flexible UI to populate it's
@@ -25,4 +25,15 @@ exports.FlexibleUiAnalyticsContext = FlexibleUiAnalyticsContext;
 var useFlexibleUiAnalyticsContext = function useFlexibleUiAnalyticsContext() {
   return (0, _react.useContext)(FlexibleUiAnalyticsContext);
 };
-exports.useFlexibleUiAnalyticsContext = useFlexibleUiAnalyticsContext;
+
+/**
+ * This provides the ui options that will be used by Smart Links Flexible UI
+ * to render its underlying elements.
+ */
+exports.useFlexibleUiAnalyticsContext = useFlexibleUiAnalyticsContext;
+var FlexibleUiOptionContext = /*#__PURE__*/(0, _react.createContext)(undefined);
+exports.FlexibleUiOptionContext = FlexibleUiOptionContext;
+var useFlexibleUiOptionContext = function useFlexibleUiOptionContext() {
+  return (0, _react.useContext)(FlexibleUiOptionContext);
+};
+exports.useFlexibleUiOptionContext = useFlexibleUiOptionContext;

package/dist/cjs/version.json

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

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

@@ -218,7 +218,8 @@ function CardWithUrlContent(_ref) {
         testId: testId,
         inlinePreloaderStyle: inlinePreloaderStyle,
         showHoverPreview: showHoverPreview,
-        showAuthTooltip: showAuthTooltip
+        showAuthTooltip: showAuthTooltip,
+        showServerActions: showServerActions
       });
     case 'block':
       return /*#__PURE__*/_react.default.createElement(_BlockCard.BlockCard, {

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

@@ -80,6 +80,7 @@ var ActionGroup = function ActionGroup(_ref) {
     onDropdownOpenChange = _ref.onDropdownOpenChange,
     testId = _ref.testId;
   var context = (0, _flexibleUiContext.useFlexibleUiContext)();
+  var ui = (0, _flexibleUiContext.useFlexibleUiOptionContext)();
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isOpen = _useState2[0],
@@ -131,11 +132,12 @@ var ActionGroup = function ActionGroup(_ref) {
             ref: triggerRef
           })));
         },
-        testId: "action-group-dropdown"
+        testId: "action-group-dropdown",
+        zIndex: ui === null || ui === void 0 ? void 0 : ui.zIndex
       }, renderActionItems(actionItems, size, appearance, true, onActionItemClick));
     }
     return null;
-  }, [appearance, isMoreThenTwoItems, isOpen, onActionItemClick, onOpenChange, renderableActionItems, size, visibleButtonsNum]);
+  }, [appearance, isMoreThenTwoItems, isOpen, onActionItemClick, onOpenChange, renderableActionItems, size, ui === null || ui === void 0 ? void 0 : ui.zIndex, visibleButtonsNum]);
   return renderableActionItems.length > 0 ? (0, _react2.jsx)("div", {
     css: styles,
     className: "actions-button-group"

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

@@ -37,7 +37,8 @@ var LozengeAction = function LozengeAction(_ref) {
     appearance = _ref.appearance,
     _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'smart-element-lozenge-action' : _ref$testId,
-    text = _ref.text;
+    text = _ref.text,
+    zIndex = _ref.zIndex;
   var _useState = (0, _react2.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isLoaded = _useState2[0],
@@ -189,7 +190,8 @@ var LozengeAction = function LozengeAction(_ref) {
     isOpen: isOpen,
     onOpenChange: handleOpenChange,
     testId: testId,
-    trigger: trigger
+    trigger: trigger,
+    zIndex: zIndex
   }, dropdownItemGroup);
 };
 var _default = (0, _errorBoundary.default)(LozengeAction);

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

@@ -82,6 +82,7 @@ var getContainerStyles = function getContainerStyles(size, hideBackground, hideE
 exports.getContainerStyles = getContainerStyles;
 var renderChildren = function renderChildren(children, containerSize, containerTheme, status, retry, onClick, onActionMenuOpenChange) {
   return _react.default.Children.map(children, function (child) {
+    // TODO: EDM-6468: Use useFlexibleUiOptionContext for rendering options inside block/element instead
     if ( /*#__PURE__*/_react.default.isValidElement(child) && (0, _flexible.isFlexibleUiBlock)(child)) {
       var blockSize = child.props.size;
       var size = blockSize || containerSize;
@@ -152,10 +153,12 @@ var Container = function Container(_ref3) {
     hideHoverCardPreviewButton = _ref3$hideHoverCardPr === void 0 ? false : _ref3$hideHoverCardPr,
     _ref3$hidePadding = _ref3.hidePadding,
     hidePadding = _ref3$hidePadding === void 0 ? false : _ref3$hidePadding,
-    _ref3$showHoverPrevie = _ref3.showHoverPreview,
-    showHoverPreview = _ref3$showHoverPrevie === void 0 ? false : _ref3$showHoverPrevie,
     onClick = _ref3.onClick,
     retry = _ref3.retry,
+    _ref3$showHoverPrevie = _ref3.showHoverPreview,
+    showHoverPreview = _ref3$showHoverPrevie === void 0 ? false : _ref3$showHoverPrevie,
+    _ref3$showServerActio = _ref3.showServerActions,
+    showServerActions = _ref3$showServerActio === void 0 ? false : _ref3$showServerActio,
     _ref3$size = _ref3.size,
     size = _ref3$size === void 0 ? _constants.SmartLinkSize.Medium : _ref3$size,
     status = _ref3.status,
@@ -182,7 +185,8 @@ var Container = function Container(_ref3) {
       url: context === null || context === void 0 ? void 0 : context.url,
       canOpen: hoverCardCanOpen,
       closeOnChildClick: true,
-      hidePreviewButton: hideHoverCardPreviewButton
+      hidePreviewButton: hideHoverCardPreviewButton,
+      showServerActions: showServerActions
     }, containerContent);
   }
   return containerContent;

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

@@ -12,6 +12,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
 var _lozengeAction = _interopRequireDefault(require("../../common/lozenge-action"));
+var _flexibleUiContext = require("../../../../../state/flexible-ui-context");
 var _templateObject, _templateObject2;
 /** @jsx jsx */
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -35,6 +36,7 @@ var Lozenge = function Lozenge(_ref) {
     text = _ref.text,
     _ref$testId = _ref.testId,
     testId = _ref$testId === void 0 ? 'smart-element-lozenge' : _ref$testId;
+  var ui = (0, _flexibleUiContext.useFlexibleUiOptionContext)();
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isBold = _useState2[0],
@@ -57,7 +59,8 @@ var Lozenge = function Lozenge(_ref) {
     action: action,
     appearance: appearance,
     testId: testId,
-    text: text
+    text: text,
+    zIndex: ui === null || ui === void 0 ? void 0 : ui.zIndex
   }) : (0, _react2.jsx)(_lozenge.default, {
     appearance: appearance,
     isBold: isBold,

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

@@ -85,16 +85,19 @@ var FlexibleCard = function FlexibleCard(_ref) {
   }, [onError, onResolve, status, title, url]);
   return /*#__PURE__*/_react.default.createElement(_flexibleUiContext.FlexibleUiAnalyticsContext.Provider, {
     value: analytics
+  }, /*#__PURE__*/_react.default.createElement(_flexibleUiContext.FlexibleUiOptionContext.Provider, {
+    value: ui
   }, /*#__PURE__*/_react.default.createElement(_flexibleUiContext.FlexibleUiContext.Provider, {
     value: context
   }, /*#__PURE__*/_react.default.createElement(_container.default, (0, _extends2.default)({
     testId: testId
   }, ui, {
-    showHoverPreview: showHoverPreview,
     onClick: onClick,
     retry: retry,
+    showHoverPreview: showHoverPreview,
+    showServerActions: showServerActions,
     status: status
-  }), children)));
+  }), children))));
 };
 var _default = FlexibleCard;
 exports.default = _default;

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

@@ -31,7 +31,9 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
     _ref$closeOnChildClic = _ref.closeOnChildClick,
     closeOnChildClick = _ref$closeOnChildClic === void 0 ? false : _ref$closeOnChildClic,
     _ref$hidePreviewButto = _ref.hidePreviewButton,
-    hidePreviewButton = _ref$hidePreviewButto === void 0 ? false : _ref$hidePreviewButto;
+    hidePreviewButton = _ref$hidePreviewButto === void 0 ? false : _ref$hidePreviewButto,
+    _ref$showServerAction = _ref.showServerActions,
+    showServerActions = _ref$showServerAction === void 0 ? false : _ref$showServerAction;
   var delay = 300;
   var _React$useState = _react2.default.useState(false),
     _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
@@ -140,9 +142,10 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
       onActionClick: onActionClick,
       onResolve: update,
       renderers: renderers,
+      showServerActions: showServerActions,
       url: url
     });
-  }, [analytics, initHideCard, initShowCard, filteredActions, linkState, onActionClick, renderers, url]);
+  }, [analytics, initHideCard, initShowCard, filteredActions, linkState, onActionClick, renderers, showServerActions, url]);
   var trigger = (0, _react2.useCallback)(function (triggerProps) {
     return (0, _react.jsx)("span", {
       ref: parentSpan
@@ -163,7 +166,7 @@ var HoverCardComponent = function HoverCardComponent(_ref) {
     autoFocus: false,
     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
+    zIndex: _styled.HOVER_CARD_Z_INDEX
   });
 };
 exports.HoverCardComponent = HoverCardComponent;

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

@@ -100,7 +100,8 @@ var HoverCardContent = function HoverCardContent(_ref) {
     renderers = _ref.renderers,
     url = _ref.url,
     onMouseEnter = _ref.onMouseEnter,
-    onMouseLeave = _ref.onMouseLeave;
+    onMouseLeave = _ref.onMouseLeave,
+    showServerActions = _ref.showServerActions;
   var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var extensionKey = (0, _react2.useMemo)(function () {
@@ -141,6 +142,7 @@ var HoverCardContent = function HoverCardContent(_ref) {
     onClick: onClick,
     onResolve: onResolve,
     renderers: renderers,
+    showServerActions: showServerActions,
     ui: _styled.flexibleUiOptions,
     url: url,
     children: {}

package/dist/cjs/view/HoverCard/styled.js

@@ -4,12 +4,15 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.titleBlockCss = exports.separatorCss = exports.getTransitionStyles = exports.flexibleUiOptions = exports.HoverCardContainer = exports.CARD_WIDTH_REM = exports.CARD_GAP_PX = void 0;
+exports.titleBlockCss = exports.separatorCss = exports.getTransitionStyles = exports.flexibleUiOptions = exports.HoverCardContainer = exports.HOVER_CARD_Z_INDEX = exports.CARD_WIDTH_REM = exports.CARD_GAP_PX = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _index = require("../../index");
 var _constants = require("../../constants");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+// Temporary fix for Confluence inline comment on editor mod has z-index of 500, Jira issue view has z-index of 510
+var HOVER_CARD_Z_INDEX = 511;
+exports.HOVER_CARD_Z_INDEX = HOVER_CARD_Z_INDEX;
 var flexibleUiOptions = {
   hideBackground: true,
   hideElevation: true,
@@ -17,7 +20,8 @@ var flexibleUiOptions = {
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   theme: _constants.SmartLinkTheme.Black,
   hidePadding: true,
-  hideHoverCardPreviewButton: false
+  hideHoverCardPreviewButton: false,
+  zIndex: HOVER_CARD_Z_INDEX + 1
 };
 exports.flexibleUiOptions = flexibleUiOptions;
 var CARD_WIDTH_REM = 24;

package/dist/cjs/view/InlineCard/ResolvedView/index.js

@@ -54,7 +54,9 @@ var InlineCardResolvedView = /*#__PURE__*/function (_React$Component) {
         titleTextColor = _this$props.titleTextColor,
         titlePrefix = _this$props.titlePrefix,
         _this$props$showHover = _this$props.showHoverPreview,
-        showHoverPreview = _this$props$showHover === void 0 ? false : _this$props$showHover;
+        showHoverPreview = _this$props$showHover === void 0 ? false : _this$props$showHover,
+        _this$props$showServe = _this$props.showServerActions,
+        showServerActions = _this$props$showServe === void 0 ? false : _this$props$showServe;
       var inlineCardResolvedView = /*#__PURE__*/_react.default.createElement(_Frame.Frame, {
         testId: testId,
         link: link,
@@ -69,6 +71,7 @@ var InlineCardResolvedView = /*#__PURE__*/function (_React$Component) {
       if (showHoverPreview && link) {
         return /*#__PURE__*/_react.default.createElement(_index.HoverCard, {
           id: id,
+          showServerActions: showServerActions,
           url: link
         }, inlineCardResolvedView);
       }

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

@@ -64,7 +64,8 @@ var InlineCard = function InlineCard(_ref) {
     testId = _ref.testId,
     inlinePreloaderStyle = _ref.inlinePreloaderStyle,
     showHoverPreview = _ref.showHoverPreview,
-    showAuthTooltip = _ref.showAuthTooltip;
+    showAuthTooltip = _ref.showAuthTooltip,
+    showServerActions = _ref.showServerActions;
   var status = cardState.status,
     details = cardState.details;
   var cardDetails = details && details.data || (0, _jsonld.getEmptyJsonLd)();
@@ -95,6 +96,7 @@ var InlineCard = function InlineCard(_ref) {
       return /*#__PURE__*/_react.default.createElement(_ResolvedView.InlineCardResolvedView, (0, _extends2.default)({}, resolvedProps, {
         id: id,
         showHoverPreview: showHoverPreview,
+        showServerActions: showServerActions,
         link: url,
         isSelected: isSelected,
         onClick: handleFrameClick,

package/dist/es2019/state/flexible-ui-context/index.js

@@ -11,4 +11,11 @@ export const useFlexibleUiContext = () => useContext(FlexibleUiContext);
  * underlying elements.
  */
 export const FlexibleUiAnalyticsContext = /*#__PURE__*/createContext(undefined);
-export const useFlexibleUiAnalyticsContext = () => useContext(FlexibleUiAnalyticsContext);
+export const useFlexibleUiAnalyticsContext = () => useContext(FlexibleUiAnalyticsContext);
+
+/**
+ * This provides the ui options that will be used by Smart Links Flexible UI
+ * to render its underlying elements.
+ */
+export const FlexibleUiOptionContext = /*#__PURE__*/createContext(undefined);
+export const useFlexibleUiOptionContext = () => useContext(FlexibleUiOptionContext);

package/dist/es2019/version.json

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

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

@@ -205,7 +205,8 @@ export function CardWithUrlContent({
         testId: testId,
         inlinePreloaderStyle: inlinePreloaderStyle,
         showHoverPreview: showHoverPreview,
-        showAuthTooltip: showAuthTooltip
+        showAuthTooltip: showAuthTooltip,
+        showServerActions: showServerActions
       });
     case 'block':
       return /*#__PURE__*/React.createElement(BlockCard, {

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

@@ -11,7 +11,7 @@ import Button from '@atlaskit/button/standard-button';
 import MoreIcon from '@atlaskit/icon/glyph/more';
 import { sizeToButtonSpacing } from '../../utils';
 import { messages } from '../../../../../messages';
-import { useFlexibleUiContext } from '../../../../../state/flexible-ui-context';
+import { useFlexibleUiContext, useFlexibleUiOptionContext } from '../../../../../state/flexible-ui-context';
 import ActionGroupItem from './action-group-item';
 const styles = css`
   display: inline-flex;
@@ -70,6 +70,7 @@ const ActionGroup = ({
   testId
 }) => {
   const context = useFlexibleUiContext();
+  const ui = useFlexibleUiOptionContext();
   const [isOpen, setIsOpen] = useState(false);
   const renderableActionItems = useMemo(() => filterActionItems(items, context), [context, items]);
   const isMoreThenTwoItems = renderableActionItems.length > visibleButtonsNum;
@@ -115,11 +116,12 @@ const ActionGroup = ({
           iconBefore: moreIcon,
           ref: triggerRef
         }))),
-        testId: "action-group-dropdown"
+        testId: "action-group-dropdown",
+        zIndex: ui === null || ui === void 0 ? void 0 : ui.zIndex
       }, renderActionItems(actionItems, size, appearance, true, onActionItemClick));
     }
     return null;
-  }, [appearance, isMoreThenTwoItems, isOpen, onActionItemClick, onOpenChange, renderableActionItems, size, visibleButtonsNum]);
+  }, [appearance, isMoreThenTwoItems, isOpen, onActionItemClick, onOpenChange, renderableActionItems, size, ui === null || ui === void 0 ? void 0 : ui.zIndex, visibleButtonsNum]);
   return renderableActionItems.length > 0 ? jsx("div", {
     css: styles,
     className: "actions-button-group"

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

@@ -20,7 +20,8 @@ const LozengeAction = ({
   action,
   appearance,
   testId = 'smart-element-lozenge-action',
-  text
+  text,
+  zIndex
 }) => {
   const [isLoaded, setIsLoaded] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
@@ -103,7 +104,8 @@ const LozengeAction = ({
     isOpen: isOpen,
     onOpenChange: handleOpenChange,
     testId: testId,
-    trigger: trigger
+    trigger: trigger,
+    zIndex: zIndex
   }, dropdownItemGroup);
 };
 export default withErrorBoundary(LozengeAction);

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

@@ -112,6 +112,7 @@ export const getContainerStyles = (size, hideBackground, hideElevation, hidePadd
   `;
 };
 const renderChildren = (children, containerSize, containerTheme, status, retry, onClick, onActionMenuOpenChange) => React.Children.map(children, child => {
+  // TODO: EDM-6468: Use useFlexibleUiOptionContext for rendering options inside block/element instead
   if ( /*#__PURE__*/React.isValidElement(child) && isFlexibleUiBlock(child)) {
     const {
       size: blockSize
@@ -177,9 +178,10 @@ const Container = ({
   hideElevation = false,
   hideHoverCardPreviewButton = false,
   hidePadding = false,
-  showHoverPreview = false,
   onClick,
   retry,
+  showHoverPreview = false,
+  showServerActions = false,
   size = SmartLinkSize.Medium,
   status,
   testId = 'smart-links-container',
@@ -199,7 +201,8 @@ const Container = ({
       url: context === null || context === void 0 ? void 0 : context.url,
       canOpen: hoverCardCanOpen,
       closeOnChildClick: true,
-      hidePreviewButton: hideHoverCardPreviewButton
+      hidePreviewButton: hideHoverCardPreviewButton,
+      showServerActions: showServerActions
     }, containerContent);
   }
   return containerContent;

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

@@ -3,6 +3,7 @@ import React, { useCallback, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import AtlaskitLozenge from '@atlaskit/lozenge';
 import LozengeAction from '../../common/lozenge-action';
+import { useFlexibleUiOptionContext } from '../../../../../state/flexible-ui-context';
 const styles = css`
   display: inline-flex;
   line-height: inherit;
@@ -26,6 +27,7 @@ const Lozenge = ({
   text,
   testId = 'smart-element-lozenge'
 }) => {
+  const ui = useFlexibleUiOptionContext();
   const [isBold, setIsBold] = useState(false);
   const onHover = useCallback(isHover => {
     if (onClick) {
@@ -41,7 +43,8 @@ const Lozenge = ({
     action: action,
     appearance: appearance,
     testId: testId,
-    text: text
+    text: text,
+    zIndex: ui === null || ui === void 0 ? void 0 : ui.zIndex
   }) : jsx(AtlaskitLozenge, {
     appearance: appearance,
     isBold: isBold,

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

@@ -3,7 +3,7 @@ import React, { useEffect, useMemo } from 'react';
 import { useFeatureFlag } from '@atlaskit/link-provider';
 import { SmartLinkStatus } from '../../constants';
 import Container from './components/container';
-import { FlexibleUiAnalyticsContext, FlexibleUiContext } from '../../state/flexible-ui-context';
+import { FlexibleUiAnalyticsContext, FlexibleUiContext, FlexibleUiOptionContext } from '../../state/flexible-ui-context';
 import { getContextByStatus, getRetryOptions } from './utils';
 
 /**
@@ -76,15 +76,18 @@ const FlexibleCard = ({
   }, [onError, onResolve, status, title, url]);
   return /*#__PURE__*/React.createElement(FlexibleUiAnalyticsContext.Provider, {
     value: analytics
+  }, /*#__PURE__*/React.createElement(FlexibleUiOptionContext.Provider, {
+    value: ui
   }, /*#__PURE__*/React.createElement(FlexibleUiContext.Provider, {
     value: context
   }, /*#__PURE__*/React.createElement(Container, _extends({
     testId: testId
   }, ui, {
-    showHoverPreview: showHoverPreview,
     onClick: onClick,
     retry: retry,
+    showHoverPreview: showHoverPreview,
+    showServerActions: showServerActions,
     status: status
-  }), children)));
+  }), children))));
 };
 export default FlexibleCard;

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

@@ -7,7 +7,7 @@ import { useSmartLinkActions } from '../../../state/hooks-external/useSmartLinkA
 import { useSmartLinkRenderers } from '../../../state/renderers';
 import { useSmartCardState as useLinkState } from '../../../state/store';
 import HoverCardContent from '../components/HoverCardContent';
-import { CARD_GAP_PX } from '../styled';
+import { CARD_GAP_PX, HOVER_CARD_Z_INDEX } from '../styled';
 import { CardDisplay } from '../../../constants';
 export const HoverCardComponent = ({
   children,
@@ -16,7 +16,8 @@ export const HoverCardComponent = ({
   analytics,
   canOpen = true,
   closeOnChildClick = false,
-  hidePreviewButton = false
+  hidePreviewButton = false,
+  showServerActions = false
 }) => {
   const delay = 300;
   const [isOpen, setIsOpen] = React.useState(false);
@@ -120,8 +121,9 @@ export const HoverCardComponent = ({
     onActionClick: onActionClick,
     onResolve: update,
     renderers: renderers,
+    showServerActions: showServerActions,
     url: url
-  }), [analytics, initHideCard, initShowCard, filteredActions, linkState, onActionClick, renderers, url]);
+  }), [analytics, initHideCard, initShowCard, filteredActions, linkState, onActionClick, renderers, showServerActions, url]);
   const trigger = useCallback(triggerProps => jsx("span", {
     ref: parentSpan
   }, jsx("span", _extends({}, triggerProps, {
@@ -140,6 +142,6 @@ export const HoverCardComponent = ({
     autoFocus: false,
     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
+    zIndex: HOVER_CARD_Z_INDEX
   });
 };

package/dist/es2019/view/HoverCard/components/HoverCardContent.js

@@ -58,7 +58,8 @@ const HoverCardContent = ({
   renderers,
   url,
   onMouseEnter,
-  onMouseLeave
+  onMouseLeave,
+  showServerActions
 }) => {
   var _cardState$details;
   const {
@@ -99,6 +100,7 @@ const HoverCardContent = ({
     onClick: onClick,
     onResolve: onResolve,
     renderers: renderers,
+    showServerActions,
     ui: flexibleUiOptions,
     url: url,
     children: {}

package/dist/es2019/view/HoverCard/styled.js

@@ -1,6 +1,8 @@
 import { css } from '@emotion/react';
 import { loadingPlaceholderClassName } from '../../index';
 import { SmartLinkSize, SmartLinkTheme } from '../../constants';
+// Temporary fix for Confluence inline comment on editor mod has z-index of 500, Jira issue view has z-index of 510
+export const HOVER_CARD_Z_INDEX = 511;
 export const flexibleUiOptions = {
   hideBackground: true,
   hideElevation: true,
@@ -8,7 +10,8 @@ export const flexibleUiOptions = {
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   theme: SmartLinkTheme.Black,
   hidePadding: true,
-  hideHoverCardPreviewButton: false
+  hideHoverCardPreviewButton: false,
+  zIndex: HOVER_CARD_Z_INDEX + 1
 };
 export const CARD_WIDTH_REM = 24;
 // gap between mouse cursor and hover card

package/dist/es2019/view/InlineCard/ResolvedView/index.js

@@ -29,7 +29,8 @@ export class InlineCardResolvedView extends React.Component {
       testId = 'inline-card-resolved-view',
       titleTextColor,
       titlePrefix,
-      showHoverPreview = false
+      showHoverPreview = false,
+      showServerActions = false
     } = this.props;
     const inlineCardResolvedView = /*#__PURE__*/React.createElement(Frame, {
       testId: testId,
@@ -45,6 +46,7 @@ export class InlineCardResolvedView extends React.Component {
     if (showHoverPreview && link) {
       return /*#__PURE__*/React.createElement(HoverCard, {
         id: id,
+        showServerActions: showServerActions,
         url: link
       }, inlineCardResolvedView);
     }

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

@@ -27,7 +27,8 @@ export const InlineCard = ({
   testId,
   inlinePreloaderStyle,
   showHoverPreview,
-  showAuthTooltip
+  showAuthTooltip,
+  showServerActions
 }) => {
   var _details$meta;
   const {
@@ -62,6 +63,7 @@ export const InlineCard = ({
       return /*#__PURE__*/React.createElement(InlineCardResolvedView, _extends({}, resolvedProps, {
         id: id,
         showHoverPreview: showHoverPreview,
+        showServerActions: showServerActions,
         link: url,
         isSelected: isSelected,
         onClick: handleFrameClick,

package/dist/esm/state/flexible-ui-context/index.js

@@ -15,4 +15,13 @@ export var useFlexibleUiContext = function useFlexibleUiContext() {
 export var FlexibleUiAnalyticsContext = /*#__PURE__*/createContext(undefined);
 export var useFlexibleUiAnalyticsContext = function useFlexibleUiAnalyticsContext() {
   return useContext(FlexibleUiAnalyticsContext);
+};
+
+/**
+ * This provides the ui options that will be used by Smart Links Flexible UI
+ * to render its underlying elements.
+ */
+export var FlexibleUiOptionContext = /*#__PURE__*/createContext(undefined);
+export var useFlexibleUiOptionContext = function useFlexibleUiOptionContext() {
+  return useContext(FlexibleUiOptionContext);
 };

package/dist/esm/version.json

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

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

@@ -208,7 +208,8 @@ export function CardWithUrlContent(_ref) {
         testId: testId,
         inlinePreloaderStyle: inlinePreloaderStyle,
         showHoverPreview: showHoverPreview,
-        showAuthTooltip: showAuthTooltip
+        showAuthTooltip: showAuthTooltip,
+        showServerActions: showServerActions
       });
     case 'block':
       return /*#__PURE__*/React.createElement(BlockCard, {