@atlaskit/editor-plugin-card 0.11.0 → 0.12.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-plugin-card
 
+## 0.12.0
+
+### Minor Changes
+
+- [#42821](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42821) [`9ae7cc56578`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9ae7cc56578) - [ux] Adds datasource edit button to blue links that can resolve into datasources
+
+## 0.11.1
+
+### Patch Changes
+
+- [#42248](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42248) [`c3ce5d9263f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c3ce5d9263f) - Add inline card overlay component
+- [#42848](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42848) [`f2f8428f703`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f2f8428f703) - Abandons feature flag lp-link-picker-focus-trap as it was not successfully rolled out. Will re-introduce as platform feature flag as/when necessary.
+- Updated dependencies
+
 ## 0.11.0
 
 ### Minor Changes

package/dist/cjs/messages.js

@@ -25,5 +25,10 @@ var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
     id: 'fabric.editor.datasource.assetsObjects.description',
     defaultMessage: 'Insert objects from Assets in Jira Service Management with search and filtering',
     description: 'Description text displayed when selecting the type of data to include onto the page, in this case: JSM Assets objects'
+  },
+  inlineOverlay: {
+    id: 'fabric.editor.inlineOverlay',
+    defaultMessage: 'Change view',
+    description: 'An overlay shown when hover over inline smart link to inform user that they can change link view to card and/or embed.'
   }
 });

package/dist/cjs/nodeviews/inlineCardWithAwareness.js

@@ -6,11 +6,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.InlineCardWithAwareness = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _rafSchd = _interopRequireDefault(require("raf-schd"));
 var _ui = require("@atlaskit/editor-common/ui");
 var _smartCard = require("@atlaskit/smart-card");
 var _actions = require("../pm-plugins/actions");
+var _InlineCardOverlay = _interopRequireDefault(require("../ui/InlineCardOverlay"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var InlineCard = function InlineCard(_ref) {
@@ -26,6 +28,13 @@ var InlineCard = function InlineCard(_ref) {
   var _node$attrs = node.attrs,
     url = _node$attrs.url,
     data = _node$attrs.data;
+
+  // A complete show/hide logic for the overlay will be implemented
+  // in EDM-8239 and EDM-8241
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isOverlayVisible = _useState2[0],
+    setIsOverlayVisible = _useState2[1];
   var onClick = function onClick() {};
   var onResolve = (0, _react.useCallback)(function (data) {
     if (!getPos || typeof getPos === 'boolean') {
@@ -59,7 +68,16 @@ var InlineCard = function InlineCard(_ref) {
     });
   }, [onResolve]);
   var card = /*#__PURE__*/_react.default.createElement("span", {
-    className: "card"
+    className: "card",
+    onMouseEnter: function onMouseEnter() {
+      return setIsOverlayVisible(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setIsOverlayVisible(false);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_InlineCardOverlay.default, {
+    isVisible: isOverlayVisible,
+    url: url
   }, /*#__PURE__*/_react.default.createElement(_smartCard.Card, {
     key: url,
     url: url,
@@ -71,7 +89,7 @@ var InlineCard = function InlineCard(_ref) {
     onError: onError,
     inlinePreloaderStyle: useAlternativePreloader ? 'on-right-without-skeleton' : undefined,
     showServerActions: showServerActions
-  }));
+  })));
   // [WS-2307]: we only render card wrapped into a Provider when the value is ready,
   // otherwise if we got data, we can render the card directly since it doesn't need the Provider
   return cardContext && cardContext.value ? /*#__PURE__*/_react.default.createElement(cardContext.Provider, {

package/dist/cjs/toolbar.js

@@ -120,14 +120,8 @@ var floatingToolbar = exports.floatingToolbar = function floatingToolbar(cardOpt
 
     // Applies padding override for when link picker is currently displayed
     var className = pluginState !== null && pluginState !== void 0 && pluginState.showLinkingToolbar ? _styles.FLOATING_TOOLBAR_LINKPICKER_CLASSNAME : undefined;
-
-    /**
-     * Enable focus trap only if feature flag is enabled AND for the new version of the picker
-     */
     var lpLinkPicker = featureFlags.lpLinkPicker,
-      lpLinkPickerFocusTrap = featureFlags.lpLinkPickerFocusTrap,
       preventPopupOverflow = featureFlags.preventPopupOverflow;
-    var shouldEnableFocusTrap = lpLinkPicker && lpLinkPickerFocusTrap;
     var isLinkPickerEnabled = !!lpLinkPicker;
     return _objectSpread(_objectSpread({
       title: intl.formatMessage(_messages.cardMessages.card),
@@ -146,8 +140,7 @@ var floatingToolbar = exports.floatingToolbar = function floatingToolbar(cardOpt
         return element;
       },
       items: generateToolbarItems(state, featureFlags, intl, providerFactory, cardOptions, platform, linkPickerOptions, pluginInjectionApi),
-      scrollable: pluginState !== null && pluginState !== void 0 && pluginState.showLinkingToolbar ? false : true,
-      focusTrap: shouldEnableFocusTrap && (pluginState === null || pluginState === void 0 ? void 0 : pluginState.showLinkingToolbar)
+      scrollable: pluginState !== null && pluginState !== void 0 && pluginState.showLinkingToolbar ? false : true
     }, (0, _EditLinkToolbar.editLinkToolbarConfig)(Boolean(pluginState === null || pluginState === void 0 ? void 0 : pluginState.showLinkingToolbar), isLinkPickerEnabled));
   };
 };

package/dist/cjs/ui/EditDatasourceButton.js

@@ -8,6 +8,7 @@ var _react = require("@emotion/react");
 var _messages = require("@atlaskit/editor-common/messages");
 var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-common/utils");
+var _primitives = require("@atlaskit/primitives");
 var _actions = require("../pm-plugins/actions");
 var _CardContextProvider = require("./CardContextProvider");
 var _useFetchDatasourceInfo = require("./useFetchDatasourceInfo");
@@ -16,9 +17,6 @@ var _useFetchDatasourceInfo = require("./useFetchDatasourceInfo");
 var buttonStyles = (0, _react.css)({
   pointerEvents: 'auto'
 });
-var buttonWrapperStyles = (0, _react.css)({
-  display: 'flex'
-});
 
 // Edit button in toolbar to open datasource modal. This button is shown for inline, block, and embed cards
 // if they can resolve into a datasource.
@@ -51,9 +49,7 @@ var EditDatasourceButtonWithCardContext = function EditDatasourceButtonWithCardC
       editorView.focus();
     }
   };
-  return (0, _react.jsx)("div", {
-    css: buttonWrapperStyles
-  }, (0, _react.jsx)(_ui.FloatingToolbarButton, {
+  return (0, _react.jsx)(_primitives.Flex, null, (0, _react.jsx)(_ui.FloatingToolbarButton, {
     css: buttonStyles,
     title: intl.formatMessage(_messages.cardMessages.datasourceTitle),
     icon: (0, _react.jsx)(_ui.SmallerEditIcon, null),

package/dist/cjs/ui/HyperlinkToolbarAppearance.js

@@ -16,6 +16,8 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
+var _primitives = require("@atlaskit/primitives");
+var _EditDatasourceButton = require("./EditDatasourceButton");
 var _LinkToolbarAppearance = require("./LinkToolbarAppearance");
 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; }
@@ -155,7 +157,13 @@ var HyperlinkToolbarAppearance = exports.HyperlinkToolbarAppearance = /*#__PURE_
       if (!supportedUrlsMap.get(url)) {
         return null;
       }
-      return /*#__PURE__*/_react.default.createElement(_LinkToolbarAppearance.LinkToolbarAppearance, {
+      return /*#__PURE__*/_react.default.createElement(_primitives.Flex, null, /*#__PURE__*/_react.default.createElement(_EditDatasourceButton.EditDatasourceButton, {
+        url: url,
+        intl: intl,
+        editorState: editorState,
+        editorView: editorView,
+        editorAnalyticsApi: editorAnalyticsApi
+      }), /*#__PURE__*/_react.default.createElement(_LinkToolbarAppearance.LinkToolbarAppearance, {
         key: "link-appearance",
         url: url,
         intl: intl,
@@ -166,7 +174,7 @@ var HyperlinkToolbarAppearance = exports.HyperlinkToolbarAppearance = /*#__PURE_
         platform: platform,
         editorAnalyticsApi: editorAnalyticsApi,
         cardActions: cardActions
-      });
+      }));
     }
   }]);
   return HyperlinkToolbarAppearance;

package/dist/cjs/ui/InlineCardOverlay/index.js

@@ -0,0 +1,187 @@
+"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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
+var _utils = require("@atlaskit/editor-common/utils");
+var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/hipchat/chevron-down"));
+var _chevronUp = _interopRequireDefault(require("@atlaskit/icon/glyph/hipchat/chevron-up"));
+var _colors = require("@atlaskit/theme/colors");
+var _messages = require("../../messages");
+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(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /** @jsx jsx */
+var PADDING_IN_PX = 2;
+var containerStyles = (0, _react2.css)({
+  position: 'relative'
+});
+var linkStyles = (0, _react2.css)({
+  color: "var(--ds-text, #172B4D)",
+  textDecoration: 'none'
+});
+var overlayStyles = (0, _react2.css)({
+  // Positioning
+  position: 'relative',
+  display: 'inline-flex',
+  flexWrap: 'nowrap',
+  alignItems: 'center',
+  alignSelf: 'stretch',
+  height: 'inherit',
+  lineHeight: 'initial',
+  width: 'max-content',
+  top: "var(--ds-space-0, 0)",
+  bottom: "var(--ds-space-0, 0)",
+  right: 3,
+  margin: "-1px ".concat("var(--ds-space-0, 0)"),
+  padding: "var(--ds-space-0, 0)",
+  // Styling
+  fontSize: 'inherit',
+  fontWeight: 'normal',
+  color: "var(--ds-text, ".concat(_colors.N800, ")"),
+  background: "var(--ds-background-accent-gray-subtlest, ".concat(_colors.N20A, ")"),
+  borderRadius: 3,
+  // inline card border of 4px - 1px
+
+  // Using `&` twice to increase specificity. (These are not nested styles.)
+  /* eslint-disable @atlaskit/design-system/no-nested-styles */
+  '&&:link': _objectSpread({}, linkStyles),
+  '&&:active': _objectSpread({}, linkStyles),
+  '&&:focus': _objectSpread({}, linkStyles),
+  '&&:hover': _objectSpread({}, linkStyles),
+  '&&:visited': _objectSpread({}, linkStyles),
+  /* eslint-enable @atlaskit/design-system/no-nested-styles */
+
+  // EDM-1717: box-shadow Safari fix bring load wrapper zIndex to 1
+  zIndex: 2,
+  // Fill lines, match heading and paragraph size
+  '::before': {
+    content: '" "',
+    display: 'inline-block',
+    verticalAlign: 'middle',
+    width: "var(--ds-space-0, 0)",
+    margin: "var(--ds-space-0, 0)",
+    padding: "var(--ds-space-0, 0)"
+  }
+});
+var safariOverlayStyles = (0, _react2.css)({
+  height: '1.1em',
+  paddingBottom: "var(--ds-space-025, 2px)",
+  right: 3
+});
+var textStyles = (0, _react2.css)({
+  paddingLeft: "var(--ds-space-050, 4px)"
+});
+var iconStyles = (0, _react2.css)({
+  // Position icon in the middle
+  display: 'inline-grid',
+  // We want to position the icon in the middle of large text type like heading 1
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  span: {
+    display: 'inline-grid'
+  }
+});
+var markerStyles = (0, _react2.css)({
+  height: "var(--ds-space-0, 0)",
+  width: "var(--ds-space-0, 0)",
+  margin: "var(--ds-space-0, 0)",
+  padding: "var(--ds-space-0, 0)"
+});
+var InlineCardOverlay = function InlineCardOverlay(_ref) {
+  var children = _ref.children,
+    _ref$isToolbarOpen = _ref.isToolbarOpen,
+    isToolbarOpen = _ref$isToolbarOpen === void 0 ? false : _ref$isToolbarOpen,
+    _ref$isVisible = _ref.isVisible,
+    isVisible = _ref$isVisible === void 0 ? false : _ref$isVisible,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'inline-card-overlay' : _ref$testId,
+    url = _ref.url;
+  var _useState = (0, _react.useState)(true),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    showLabel = _useState2[0],
+    setShowLabel = _useState2[1];
+  var _useState3 = (0, _react.useState)(0),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    overlayWidth = _useState4[0],
+    setOverlayWidth = _useState4[1];
+  var containerRef = (0, _react.useRef)(null);
+  var markerRef = (0, _react.useRef)(null);
+  var overlayRef = (0, _react.useRef)(null);
+  var labelRef = (0, _react.useRef)(null);
+  (0, _react.useLayoutEffect)(function () {
+    if (!isVisible) {
+      // Reset to default state for width calculation when the component become visible.
+      setShowLabel(true);
+      return;
+    }
+    try {
+      var _containerRef$current, _containerRef$current2, _markerRef$current$ge, _markerRef$current, _overlayRef$current$g, _overlayRef$current, _labelRef$current$get, _labelRef$current;
+      // Get the width of the available space to display overlay
+      var start = (_containerRef$current = containerRef === null || containerRef === void 0 || (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 || (_containerRef$current2 = _containerRef$current2.getBoundingClientRect()) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.left) !== null && _containerRef$current !== void 0 ? _containerRef$current : 0;
+      var end = (_markerRef$current$ge = markerRef === null || markerRef === void 0 || (_markerRef$current = markerRef.current) === null || _markerRef$current === void 0 || (_markerRef$current = _markerRef$current.getBoundingClientRect()) === null || _markerRef$current === void 0 ? void 0 : _markerRef$current.left) !== null && _markerRef$current$ge !== void 0 ? _markerRef$current$ge : 0;
+      var availableWidth = end - start - PADDING_IN_PX;
+
+      // Get overlay width and label width
+      var _overlayWidth = (_overlayRef$current$g = overlayRef === null || overlayRef === void 0 || (_overlayRef$current = overlayRef.current) === null || _overlayRef$current === void 0 || (_overlayRef$current = _overlayRef$current.getBoundingClientRect()) === null || _overlayRef$current === void 0 ? void 0 : _overlayRef$current.width) !== null && _overlayRef$current$g !== void 0 ? _overlayRef$current$g : 0;
+
+      // Show label if there is enough space to display
+      var shouldShowLabel = availableWidth > 0 && _overlayWidth > 0 ? availableWidth > _overlayWidth : false;
+      setShowLabel(shouldShowLabel);
+
+      // We use relative positioning and need to set
+      // negative margin left (ltr) as the width of the overlay
+      // to make the overlay position on top of inline link.
+      var labelWidth = (_labelRef$current$get = labelRef === null || labelRef === void 0 || (_labelRef$current = labelRef.current) === null || _labelRef$current === void 0 || (_labelRef$current = _labelRef$current.getBoundingClientRect()) === null || _labelRef$current === void 0 ? void 0 : _labelRef$current.width) !== null && _labelRef$current$get !== void 0 ? _labelRef$current$get : 0;
+      var newOverlayWidth = shouldShowLabel ? _overlayWidth : _overlayWidth - labelWidth;
+      setOverlayWidth(newOverlayWidth);
+    } catch (_unused) {
+      // If something goes wrong, play it safe by hiding label so that
+      // the component does not look too janky.
+      setShowLabel(false);
+    }
+  }, [isVisible]);
+  var intl = (0, _reactIntlNext.useIntl)();
+  var label = intl.formatMessage(_messages.messages.inlineOverlay);
+  var icon = (0, _react.useMemo)(function () {
+    var IconComponent = isToolbarOpen ? _chevronUp.default : _chevronDown.default;
+    return (0, _react2.jsx)(IconComponent, {
+      label: label,
+      size: "small",
+      testId: "".concat(testId, "-").concat(isToolbarOpen ? 'open' : 'close')
+    });
+  }, [isToolbarOpen, label, testId]);
+  return (0, _react2.jsx)("span", {
+    css: containerStyles,
+    ref: containerRef
+  }, children, isVisible && (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("span", {
+    "aria-hidden": "true",
+    css: markerStyles,
+    ref: markerRef
+  }), (0, _react2.jsx)("a", {
+    css: [overlayStyles, _utils.browser.safari && safariOverlayStyles],
+    style: {
+      marginLeft: -overlayWidth
+    },
+    "data-testid": testId,
+    href: url,
+    onClick: function onClick(e) {
+      return e.preventDefault();
+    },
+    ref: overlayRef
+  }, showLabel && (0, _react2.jsx)("span", {
+    css: textStyles,
+    "data-testid": "".concat(testId, "-label"),
+    ref: labelRef
+  }, label), (0, _react2.jsx)("span", {
+    css: iconStyles
+  }, icon))));
+};
+var _default = exports.default = InlineCardOverlay;

package/dist/cjs/ui/InlineCardOverlay/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/ui/useFetchDatasourceInfo.js

@@ -11,6 +11,10 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = require("react");
 /** @jsx jsx */
 
+// eslint-disable-next-line import/no-extraneous-dependencies
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+
 var useFetchDatasourceInfo = exports.useFetchDatasourceInfo = function useFetchDatasourceInfo(_ref) {
   var isRegularCardNode = _ref.isRegularCardNode,
     url = _ref.url,

package/dist/es2019/messages.js

@@ -19,5 +19,10 @@ export const messages = defineMessages({
     id: 'fabric.editor.datasource.assetsObjects.description',
     defaultMessage: 'Insert objects from Assets in Jira Service Management with search and filtering',
     description: 'Description text displayed when selecting the type of data to include onto the page, in this case: JSM Assets objects'
+  },
+  inlineOverlay: {
+    id: 'fabric.editor.inlineOverlay',
+    defaultMessage: 'Change view',
+    description: 'An overlay shown when hover over inline smart link to inform user that they can change link view to card and/or embed.'
   }
 });

package/dist/es2019/nodeviews/inlineCardWithAwareness.js

@@ -1,8 +1,9 @@
-import React, { memo, useCallback, useMemo } from 'react';
+import React, { memo, useCallback, useMemo, useState } from 'react';
 import rafSchedule from 'raf-schd';
 import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
 import { Card as SmartCard } from '@atlaskit/smart-card';
 import { registerCard } from '../pm-plugins/actions';
+import InlineCardOverlay from '../ui/InlineCardOverlay';
 const InlineCard = ({
   node,
   cardContext,
@@ -16,6 +17,10 @@ const InlineCard = ({
     url,
     data
   } = node.attrs;
+
+  // A complete show/hide logic for the overlay will be implemented
+  // in EDM-8239 and EDM-8241
+  const [isOverlayVisible, setIsOverlayVisible] = useState(false);
   const onClick = () => {};
   const onResolve = useCallback(data => {
     if (!getPos || typeof getPos === 'boolean') {
@@ -53,7 +58,12 @@ const InlineCard = ({
     });
   }, [onResolve]);
   const card = /*#__PURE__*/React.createElement("span", {
-    className: "card"
+    className: "card",
+    onMouseEnter: () => setIsOverlayVisible(true),
+    onMouseLeave: () => setIsOverlayVisible(false)
+  }, /*#__PURE__*/React.createElement(InlineCardOverlay, {
+    isVisible: isOverlayVisible,
+    url: url
   }, /*#__PURE__*/React.createElement(SmartCard, {
     key: url,
     url: url,
@@ -65,7 +75,7 @@ const InlineCard = ({
     onError: onError,
     inlinePreloaderStyle: useAlternativePreloader ? 'on-right-without-skeleton' : undefined,
     showServerActions: showServerActions
-  }));
+  })));
   // [WS-2307]: we only render card wrapped into a Provider when the value is ready,
   // otherwise if we got data, we can render the card directly since it doesn't need the Provider
   return cardContext && cardContext.value ? /*#__PURE__*/React.createElement(cardContext.Provider, {

package/dist/es2019/toolbar.js

@@ -114,16 +114,10 @@ export const floatingToolbar = (cardOptions, featureFlags, platform, linkPickerO
 
     // Applies padding override for when link picker is currently displayed
     const className = pluginState !== null && pluginState !== void 0 && pluginState.showLinkingToolbar ? FLOATING_TOOLBAR_LINKPICKER_CLASSNAME : undefined;
-
-    /**
-     * Enable focus trap only if feature flag is enabled AND for the new version of the picker
-     */
     const {
       lpLinkPicker,
-      lpLinkPickerFocusTrap,
       preventPopupOverflow
     } = featureFlags;
-    const shouldEnableFocusTrap = lpLinkPicker && lpLinkPickerFocusTrap;
     const isLinkPickerEnabled = !!lpLinkPicker;
     return {
       title: intl.formatMessage(messages.card),
@@ -143,7 +137,6 @@ export const floatingToolbar = (cardOptions, featureFlags, platform, linkPickerO
       },
       items: generateToolbarItems(state, featureFlags, intl, providerFactory, cardOptions, platform, linkPickerOptions, pluginInjectionApi),
       scrollable: pluginState !== null && pluginState !== void 0 && pluginState.showLinkingToolbar ? false : true,
-      focusTrap: shouldEnableFocusTrap && (pluginState === null || pluginState === void 0 ? void 0 : pluginState.showLinkingToolbar),
       ...editLinkToolbarConfig(Boolean(pluginState === null || pluginState === void 0 ? void 0 : pluginState.showLinkingToolbar), isLinkPickerEnabled)
     };
   };

package/dist/es2019/ui/EditDatasourceButton.js

@@ -3,15 +3,13 @@ import { css, jsx } from '@emotion/react';
 import { cardMessages as messages } from '@atlaskit/editor-common/messages';
 import { FloatingToolbarButton as Button, FloatingToolbarSeparator as Separator, SmallerEditIcon } from '@atlaskit/editor-common/ui';
 import { canRenderDatasource, getDatasourceType } from '@atlaskit/editor-common/utils';
+import { Flex } from '@atlaskit/primitives';
 import { showDatasourceModal } from '../pm-plugins/actions';
 import { CardContextProvider } from './CardContextProvider';
 import { useFetchDatasourceInfo } from './useFetchDatasourceInfo';
 const buttonStyles = css({
   pointerEvents: 'auto'
 });
-const buttonWrapperStyles = css({
-  display: 'flex'
-});
 
 // Edit button in toolbar to open datasource modal. This button is shown for inline, block, and embed cards
 // if they can resolve into a datasource.
@@ -46,9 +44,7 @@ const EditDatasourceButtonWithCardContext = ({
       editorView.focus();
     }
   };
-  return jsx("div", {
-    css: buttonWrapperStyles
-  }, jsx(Button, {
+  return jsx(Flex, null, jsx(Button, {
     css: buttonStyles,
     title: intl.formatMessage(messages.datasourceTitle),
     icon: jsx(SmallerEditIcon, null),

package/dist/es2019/ui/HyperlinkToolbarAppearance.js

@@ -1,5 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { Component } from 'react';
+import { Flex } from '@atlaskit/primitives';
+import { EditDatasourceButton } from './EditDatasourceButton';
 import { LinkToolbarAppearance } from './LinkToolbarAppearance';
 // eslint-disable-next-line @repo/internal/react/no-class-components
 export class HyperlinkToolbarAppearance extends Component {
@@ -70,7 +72,13 @@ export class HyperlinkToolbarAppearance extends Component {
     if (!supportedUrlsMap.get(url)) {
       return null;
     }
-    return /*#__PURE__*/React.createElement(LinkToolbarAppearance, {
+    return /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(EditDatasourceButton, {
+      url: url,
+      intl: intl,
+      editorState: editorState,
+      editorView: editorView,
+      editorAnalyticsApi: editorAnalyticsApi
+    }), /*#__PURE__*/React.createElement(LinkToolbarAppearance, {
       key: "link-appearance",
       url: url,
       intl: intl,
@@ -81,6 +89,6 @@ export class HyperlinkToolbarAppearance extends Component {
       platform: platform,
       editorAnalyticsApi: editorAnalyticsApi,
       cardActions: cardActions
-    });
+    }));
   }
 }

package/dist/es2019/ui/InlineCardOverlay/index.js

@@ -0,0 +1,175 @@
+/** @jsx jsx */
+
+import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { css, jsx } from '@emotion/react';
+import { useIntl } from 'react-intl-next';
+import { browser } from '@atlaskit/editor-common/utils';
+import HipchatChevronDownIcon from '@atlaskit/icon/glyph/hipchat/chevron-down';
+import HipchatChevronUpIcon from '@atlaskit/icon/glyph/hipchat/chevron-up';
+import { N20A, N800 } from '@atlaskit/theme/colors';
+import { messages } from '../../messages';
+const PADDING_IN_PX = 2;
+const containerStyles = css({
+  position: 'relative'
+});
+const linkStyles = css({
+  color: "var(--ds-text, #172B4D)",
+  textDecoration: 'none'
+});
+const overlayStyles = css({
+  // Positioning
+  position: 'relative',
+  display: 'inline-flex',
+  flexWrap: 'nowrap',
+  alignItems: 'center',
+  alignSelf: 'stretch',
+  height: 'inherit',
+  lineHeight: 'initial',
+  width: 'max-content',
+  top: "var(--ds-space-0, 0)",
+  bottom: "var(--ds-space-0, 0)",
+  right: 3,
+  margin: `-1px ${"var(--ds-space-0, 0)"}`,
+  padding: "var(--ds-space-0, 0)",
+  // Styling
+  fontSize: 'inherit',
+  fontWeight: 'normal',
+  color: `var(--ds-text, ${N800})`,
+  background: `var(--ds-background-accent-gray-subtlest, ${N20A})`,
+  borderRadius: 3,
+  // inline card border of 4px - 1px
+
+  // Using `&` twice to increase specificity. (These are not nested styles.)
+  /* eslint-disable @atlaskit/design-system/no-nested-styles */
+  '&&:link': {
+    ...linkStyles
+  },
+  '&&:active': {
+    ...linkStyles
+  },
+  '&&:focus': {
+    ...linkStyles
+  },
+  '&&:hover': {
+    ...linkStyles
+  },
+  '&&:visited': {
+    ...linkStyles
+  },
+  /* eslint-enable @atlaskit/design-system/no-nested-styles */
+
+  // EDM-1717: box-shadow Safari fix bring load wrapper zIndex to 1
+  zIndex: 2,
+  // Fill lines, match heading and paragraph size
+  '::before': {
+    content: '" "',
+    display: 'inline-block',
+    verticalAlign: 'middle',
+    width: "var(--ds-space-0, 0)",
+    margin: "var(--ds-space-0, 0)",
+    padding: "var(--ds-space-0, 0)"
+  }
+});
+const safariOverlayStyles = css({
+  height: '1.1em',
+  paddingBottom: "var(--ds-space-025, 2px)",
+  right: 3
+});
+const textStyles = css({
+  paddingLeft: "var(--ds-space-050, 4px)"
+});
+const iconStyles = css({
+  // Position icon in the middle
+  display: 'inline-grid',
+  // We want to position the icon in the middle of large text type like heading 1
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  span: {
+    display: 'inline-grid'
+  }
+});
+const markerStyles = css({
+  height: "var(--ds-space-0, 0)",
+  width: "var(--ds-space-0, 0)",
+  margin: "var(--ds-space-0, 0)",
+  padding: "var(--ds-space-0, 0)"
+});
+const InlineCardOverlay = ({
+  children,
+  isToolbarOpen = false,
+  isVisible = false,
+  testId = 'inline-card-overlay',
+  url
+}) => {
+  const [showLabel, setShowLabel] = useState(true);
+  const [overlayWidth, setOverlayWidth] = useState(0);
+  const containerRef = useRef(null);
+  const markerRef = useRef(null);
+  const overlayRef = useRef(null);
+  const labelRef = useRef(null);
+  useLayoutEffect(() => {
+    if (!isVisible) {
+      // Reset to default state for width calculation when the component become visible.
+      setShowLabel(true);
+      return;
+    }
+    try {
+      var _containerRef$current, _containerRef$current2, _containerRef$current3, _markerRef$current$ge, _markerRef$current, _markerRef$current$ge2, _overlayRef$current$g, _overlayRef$current, _overlayRef$current$g2, _labelRef$current$get, _labelRef$current, _labelRef$current$get2;
+      // Get the width of the available space to display overlay
+      const start = (_containerRef$current = containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : (_containerRef$current3 = _containerRef$current2.getBoundingClientRect()) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.left) !== null && _containerRef$current !== void 0 ? _containerRef$current : 0;
+      const end = (_markerRef$current$ge = markerRef === null || markerRef === void 0 ? void 0 : (_markerRef$current = markerRef.current) === null || _markerRef$current === void 0 ? void 0 : (_markerRef$current$ge2 = _markerRef$current.getBoundingClientRect()) === null || _markerRef$current$ge2 === void 0 ? void 0 : _markerRef$current$ge2.left) !== null && _markerRef$current$ge !== void 0 ? _markerRef$current$ge : 0;
+      const availableWidth = end - start - PADDING_IN_PX;
+
+      // Get overlay width and label width
+      const overlayWidth = (_overlayRef$current$g = overlayRef === null || overlayRef === void 0 ? void 0 : (_overlayRef$current = overlayRef.current) === null || _overlayRef$current === void 0 ? void 0 : (_overlayRef$current$g2 = _overlayRef$current.getBoundingClientRect()) === null || _overlayRef$current$g2 === void 0 ? void 0 : _overlayRef$current$g2.width) !== null && _overlayRef$current$g !== void 0 ? _overlayRef$current$g : 0;
+
+      // Show label if there is enough space to display
+      const shouldShowLabel = availableWidth > 0 && overlayWidth > 0 ? availableWidth > overlayWidth : false;
+      setShowLabel(shouldShowLabel);
+
+      // We use relative positioning and need to set
+      // negative margin left (ltr) as the width of the overlay
+      // to make the overlay position on top of inline link.
+      const labelWidth = (_labelRef$current$get = labelRef === null || labelRef === void 0 ? void 0 : (_labelRef$current = labelRef.current) === null || _labelRef$current === void 0 ? void 0 : (_labelRef$current$get2 = _labelRef$current.getBoundingClientRect()) === null || _labelRef$current$get2 === void 0 ? void 0 : _labelRef$current$get2.width) !== null && _labelRef$current$get !== void 0 ? _labelRef$current$get : 0;
+      const newOverlayWidth = shouldShowLabel ? overlayWidth : overlayWidth - labelWidth;
+      setOverlayWidth(newOverlayWidth);
+    } catch {
+      // If something goes wrong, play it safe by hiding label so that
+      // the component does not look too janky.
+      setShowLabel(false);
+    }
+  }, [isVisible]);
+  const intl = useIntl();
+  const label = intl.formatMessage(messages.inlineOverlay);
+  const icon = useMemo(() => {
+    const IconComponent = isToolbarOpen ? HipchatChevronUpIcon : HipchatChevronDownIcon;
+    return jsx(IconComponent, {
+      label: label,
+      size: "small",
+      testId: `${testId}-${isToolbarOpen ? 'open' : 'close'}`
+    });
+  }, [isToolbarOpen, label, testId]);
+  return jsx("span", {
+    css: containerStyles,
+    ref: containerRef
+  }, children, isVisible && jsx(React.Fragment, null, jsx("span", {
+    "aria-hidden": "true",
+    css: markerStyles,
+    ref: markerRef
+  }), jsx("a", {
+    css: [overlayStyles, browser.safari && safariOverlayStyles],
+    style: {
+      marginLeft: -overlayWidth
+    },
+    "data-testid": testId,
+    href: url,
+    onClick: e => e.preventDefault(),
+    ref: overlayRef
+  }, showLabel && jsx("span", {
+    css: textStyles,
+    "data-testid": `${testId}-label`,
+    ref: labelRef
+  }, label), jsx("span", {
+    css: iconStyles
+  }, icon))));
+};
+export default InlineCardOverlay;

package/dist/es2019/ui/InlineCardOverlay/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es2019/ui/useFetchDatasourceInfo.js

@@ -1,5 +1,10 @@
 /** @jsx jsx */
 import { useEffect, useState } from 'react';
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+
 export const useFetchDatasourceInfo = ({
   isRegularCardNode,
   url,

package/dist/esm/messages.js

@@ -19,5 +19,10 @@ export var messages = defineMessages({
     id: 'fabric.editor.datasource.assetsObjects.description',
     defaultMessage: 'Insert objects from Assets in Jira Service Management with search and filtering',
     description: 'Description text displayed when selecting the type of data to include onto the page, in this case: JSM Assets objects'
+  },
+  inlineOverlay: {
+    id: 'fabric.editor.inlineOverlay',
+    defaultMessage: 'Change view',
+    description: 'An overlay shown when hover over inline smart link to inform user that they can change link view to card and/or embed.'
   }
 });

package/dist/esm/nodeviews/inlineCardWithAwareness.js

@@ -1,8 +1,10 @@
-import React, { memo, useCallback, useMemo } from 'react';
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { memo, useCallback, useMemo, useState } from 'react';
 import rafSchedule from 'raf-schd';
 import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
 import { Card as SmartCard } from '@atlaskit/smart-card';
 import { registerCard } from '../pm-plugins/actions';
+import InlineCardOverlay from '../ui/InlineCardOverlay';
 var InlineCard = function InlineCard(_ref) {
   var node = _ref.node,
     cardContext = _ref.cardContext,
@@ -16,6 +18,13 @@ var InlineCard = function InlineCard(_ref) {
   var _node$attrs = node.attrs,
     url = _node$attrs.url,
     data = _node$attrs.data;
+
+  // A complete show/hide logic for the overlay will be implemented
+  // in EDM-8239 and EDM-8241
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOverlayVisible = _useState2[0],
+    setIsOverlayVisible = _useState2[1];
   var onClick = function onClick() {};
   var onResolve = useCallback(function (data) {
     if (!getPos || typeof getPos === 'boolean') {
@@ -49,7 +58,16 @@ var InlineCard = function InlineCard(_ref) {
     });
   }, [onResolve]);
   var card = /*#__PURE__*/React.createElement("span", {
-    className: "card"
+    className: "card",
+    onMouseEnter: function onMouseEnter() {
+      return setIsOverlayVisible(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setIsOverlayVisible(false);
+    }
+  }, /*#__PURE__*/React.createElement(InlineCardOverlay, {
+    isVisible: isOverlayVisible,
+    url: url
   }, /*#__PURE__*/React.createElement(SmartCard, {
     key: url,
     url: url,
@@ -61,7 +79,7 @@ var InlineCard = function InlineCard(_ref) {
     onError: onError,
     inlinePreloaderStyle: useAlternativePreloader ? 'on-right-without-skeleton' : undefined,
     showServerActions: showServerActions
-  }));
+  })));
   // [WS-2307]: we only render card wrapped into a Provider when the value is ready,
   // otherwise if we got data, we can render the card directly since it doesn't need the Provider
   return cardContext && cardContext.value ? /*#__PURE__*/React.createElement(cardContext.Provider, {

package/dist/esm/toolbar.js

@@ -110,14 +110,8 @@ export var floatingToolbar = function floatingToolbar(cardOptions, featureFlags,
 
     // Applies padding override for when link picker is currently displayed
     var className = pluginState !== null && pluginState !== void 0 && pluginState.showLinkingToolbar ? FLOATING_TOOLBAR_LINKPICKER_CLASSNAME : undefined;
-
-    /**
-     * Enable focus trap only if feature flag is enabled AND for the new version of the picker
-     */
     var lpLinkPicker = featureFlags.lpLinkPicker,
-      lpLinkPickerFocusTrap = featureFlags.lpLinkPickerFocusTrap,
       preventPopupOverflow = featureFlags.preventPopupOverflow;
-    var shouldEnableFocusTrap = lpLinkPicker && lpLinkPickerFocusTrap;
     var isLinkPickerEnabled = !!lpLinkPicker;
     return _objectSpread(_objectSpread({
       title: intl.formatMessage(messages.card),
@@ -136,8 +130,7 @@ export var floatingToolbar = function floatingToolbar(cardOptions, featureFlags,
         return element;
       },
       items: generateToolbarItems(state, featureFlags, intl, providerFactory, cardOptions, platform, linkPickerOptions, pluginInjectionApi),
-      scrollable: pluginState !== null && pluginState !== void 0 && pluginState.showLinkingToolbar ? false : true,
-      focusTrap: shouldEnableFocusTrap && (pluginState === null || pluginState === void 0 ? void 0 : pluginState.showLinkingToolbar)
+      scrollable: pluginState !== null && pluginState !== void 0 && pluginState.showLinkingToolbar ? false : true
     }, editLinkToolbarConfig(Boolean(pluginState === null || pluginState === void 0 ? void 0 : pluginState.showLinkingToolbar), isLinkPickerEnabled));
   };
 };

package/dist/esm/ui/EditDatasourceButton.js

@@ -3,15 +3,13 @@ import { css, jsx } from '@emotion/react';
 import { cardMessages as messages } from '@atlaskit/editor-common/messages';
 import { FloatingToolbarButton as Button, FloatingToolbarSeparator as Separator, SmallerEditIcon } from '@atlaskit/editor-common/ui';
 import { canRenderDatasource, getDatasourceType } from '@atlaskit/editor-common/utils';
+import { Flex } from '@atlaskit/primitives';
 import { showDatasourceModal } from '../pm-plugins/actions';
 import { CardContextProvider } from './CardContextProvider';
 import { useFetchDatasourceInfo } from './useFetchDatasourceInfo';
 var buttonStyles = css({
   pointerEvents: 'auto'
 });
-var buttonWrapperStyles = css({
-  display: 'flex'
-});
 
 // Edit button in toolbar to open datasource modal. This button is shown for inline, block, and embed cards
 // if they can resolve into a datasource.
@@ -44,9 +42,7 @@ var EditDatasourceButtonWithCardContext = function EditDatasourceButtonWithCardC
       editorView.focus();
     }
   };
-  return jsx("div", {
-    css: buttonWrapperStyles
-  }, jsx(Button, {
+  return jsx(Flex, null, jsx(Button, {
     css: buttonStyles,
     title: intl.formatMessage(messages.datasourceTitle),
     icon: jsx(SmallerEditIcon, null),

package/dist/esm/ui/HyperlinkToolbarAppearance.js

@@ -10,6 +10,8 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 import React, { Component } from 'react';
+import { Flex } from '@atlaskit/primitives';
+import { EditDatasourceButton } from './EditDatasourceButton';
 import { LinkToolbarAppearance } from './LinkToolbarAppearance';
 // eslint-disable-next-line @repo/internal/react/no-class-components
 export var HyperlinkToolbarAppearance = /*#__PURE__*/function (_Component) {
@@ -145,7 +147,13 @@ export var HyperlinkToolbarAppearance = /*#__PURE__*/function (_Component) {
       if (!supportedUrlsMap.get(url)) {
         return null;
       }
-      return /*#__PURE__*/React.createElement(LinkToolbarAppearance, {
+      return /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(EditDatasourceButton, {
+        url: url,
+        intl: intl,
+        editorState: editorState,
+        editorView: editorView,
+        editorAnalyticsApi: editorAnalyticsApi
+      }), /*#__PURE__*/React.createElement(LinkToolbarAppearance, {
         key: "link-appearance",
         url: url,
         intl: intl,
@@ -156,7 +164,7 @@ export var HyperlinkToolbarAppearance = /*#__PURE__*/function (_Component) {
         platform: platform,
         editorAnalyticsApi: editorAnalyticsApi,
         cardActions: cardActions
-      });
+      }));
     }
   }]);
   return HyperlinkToolbarAppearance;

package/dist/esm/ui/InlineCardOverlay/index.js

@@ -0,0 +1,179 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/** @jsx jsx */
+
+import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { css, jsx } from '@emotion/react';
+import { useIntl } from 'react-intl-next';
+import { browser } from '@atlaskit/editor-common/utils';
+import HipchatChevronDownIcon from '@atlaskit/icon/glyph/hipchat/chevron-down';
+import HipchatChevronUpIcon from '@atlaskit/icon/glyph/hipchat/chevron-up';
+import { N20A, N800 } from '@atlaskit/theme/colors';
+import { messages } from '../../messages';
+var PADDING_IN_PX = 2;
+var containerStyles = css({
+  position: 'relative'
+});
+var linkStyles = css({
+  color: "var(--ds-text, #172B4D)",
+  textDecoration: 'none'
+});
+var overlayStyles = css({
+  // Positioning
+  position: 'relative',
+  display: 'inline-flex',
+  flexWrap: 'nowrap',
+  alignItems: 'center',
+  alignSelf: 'stretch',
+  height: 'inherit',
+  lineHeight: 'initial',
+  width: 'max-content',
+  top: "var(--ds-space-0, 0)",
+  bottom: "var(--ds-space-0, 0)",
+  right: 3,
+  margin: "-1px ".concat("var(--ds-space-0, 0)"),
+  padding: "var(--ds-space-0, 0)",
+  // Styling
+  fontSize: 'inherit',
+  fontWeight: 'normal',
+  color: "var(--ds-text, ".concat(N800, ")"),
+  background: "var(--ds-background-accent-gray-subtlest, ".concat(N20A, ")"),
+  borderRadius: 3,
+  // inline card border of 4px - 1px
+
+  // Using `&` twice to increase specificity. (These are not nested styles.)
+  /* eslint-disable @atlaskit/design-system/no-nested-styles */
+  '&&:link': _objectSpread({}, linkStyles),
+  '&&:active': _objectSpread({}, linkStyles),
+  '&&:focus': _objectSpread({}, linkStyles),
+  '&&:hover': _objectSpread({}, linkStyles),
+  '&&:visited': _objectSpread({}, linkStyles),
+  /* eslint-enable @atlaskit/design-system/no-nested-styles */
+
+  // EDM-1717: box-shadow Safari fix bring load wrapper zIndex to 1
+  zIndex: 2,
+  // Fill lines, match heading and paragraph size
+  '::before': {
+    content: '" "',
+    display: 'inline-block',
+    verticalAlign: 'middle',
+    width: "var(--ds-space-0, 0)",
+    margin: "var(--ds-space-0, 0)",
+    padding: "var(--ds-space-0, 0)"
+  }
+});
+var safariOverlayStyles = css({
+  height: '1.1em',
+  paddingBottom: "var(--ds-space-025, 2px)",
+  right: 3
+});
+var textStyles = css({
+  paddingLeft: "var(--ds-space-050, 4px)"
+});
+var iconStyles = css({
+  // Position icon in the middle
+  display: 'inline-grid',
+  // We want to position the icon in the middle of large text type like heading 1
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  span: {
+    display: 'inline-grid'
+  }
+});
+var markerStyles = css({
+  height: "var(--ds-space-0, 0)",
+  width: "var(--ds-space-0, 0)",
+  margin: "var(--ds-space-0, 0)",
+  padding: "var(--ds-space-0, 0)"
+});
+var InlineCardOverlay = function InlineCardOverlay(_ref) {
+  var children = _ref.children,
+    _ref$isToolbarOpen = _ref.isToolbarOpen,
+    isToolbarOpen = _ref$isToolbarOpen === void 0 ? false : _ref$isToolbarOpen,
+    _ref$isVisible = _ref.isVisible,
+    isVisible = _ref$isVisible === void 0 ? false : _ref$isVisible,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'inline-card-overlay' : _ref$testId,
+    url = _ref.url;
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    showLabel = _useState2[0],
+    setShowLabel = _useState2[1];
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    overlayWidth = _useState4[0],
+    setOverlayWidth = _useState4[1];
+  var containerRef = useRef(null);
+  var markerRef = useRef(null);
+  var overlayRef = useRef(null);
+  var labelRef = useRef(null);
+  useLayoutEffect(function () {
+    if (!isVisible) {
+      // Reset to default state for width calculation when the component become visible.
+      setShowLabel(true);
+      return;
+    }
+    try {
+      var _containerRef$current, _containerRef$current2, _markerRef$current$ge, _markerRef$current, _overlayRef$current$g, _overlayRef$current, _labelRef$current$get, _labelRef$current;
+      // Get the width of the available space to display overlay
+      var start = (_containerRef$current = containerRef === null || containerRef === void 0 || (_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 || (_containerRef$current2 = _containerRef$current2.getBoundingClientRect()) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.left) !== null && _containerRef$current !== void 0 ? _containerRef$current : 0;
+      var end = (_markerRef$current$ge = markerRef === null || markerRef === void 0 || (_markerRef$current = markerRef.current) === null || _markerRef$current === void 0 || (_markerRef$current = _markerRef$current.getBoundingClientRect()) === null || _markerRef$current === void 0 ? void 0 : _markerRef$current.left) !== null && _markerRef$current$ge !== void 0 ? _markerRef$current$ge : 0;
+      var availableWidth = end - start - PADDING_IN_PX;
+
+      // Get overlay width and label width
+      var _overlayWidth = (_overlayRef$current$g = overlayRef === null || overlayRef === void 0 || (_overlayRef$current = overlayRef.current) === null || _overlayRef$current === void 0 || (_overlayRef$current = _overlayRef$current.getBoundingClientRect()) === null || _overlayRef$current === void 0 ? void 0 : _overlayRef$current.width) !== null && _overlayRef$current$g !== void 0 ? _overlayRef$current$g : 0;
+
+      // Show label if there is enough space to display
+      var shouldShowLabel = availableWidth > 0 && _overlayWidth > 0 ? availableWidth > _overlayWidth : false;
+      setShowLabel(shouldShowLabel);
+
+      // We use relative positioning and need to set
+      // negative margin left (ltr) as the width of the overlay
+      // to make the overlay position on top of inline link.
+      var labelWidth = (_labelRef$current$get = labelRef === null || labelRef === void 0 || (_labelRef$current = labelRef.current) === null || _labelRef$current === void 0 || (_labelRef$current = _labelRef$current.getBoundingClientRect()) === null || _labelRef$current === void 0 ? void 0 : _labelRef$current.width) !== null && _labelRef$current$get !== void 0 ? _labelRef$current$get : 0;
+      var newOverlayWidth = shouldShowLabel ? _overlayWidth : _overlayWidth - labelWidth;
+      setOverlayWidth(newOverlayWidth);
+    } catch (_unused) {
+      // If something goes wrong, play it safe by hiding label so that
+      // the component does not look too janky.
+      setShowLabel(false);
+    }
+  }, [isVisible]);
+  var intl = useIntl();
+  var label = intl.formatMessage(messages.inlineOverlay);
+  var icon = useMemo(function () {
+    var IconComponent = isToolbarOpen ? HipchatChevronUpIcon : HipchatChevronDownIcon;
+    return jsx(IconComponent, {
+      label: label,
+      size: "small",
+      testId: "".concat(testId, "-").concat(isToolbarOpen ? 'open' : 'close')
+    });
+  }, [isToolbarOpen, label, testId]);
+  return jsx("span", {
+    css: containerStyles,
+    ref: containerRef
+  }, children, isVisible && jsx(React.Fragment, null, jsx("span", {
+    "aria-hidden": "true",
+    css: markerStyles,
+    ref: markerRef
+  }), jsx("a", {
+    css: [overlayStyles, browser.safari && safariOverlayStyles],
+    style: {
+      marginLeft: -overlayWidth
+    },
+    "data-testid": testId,
+    href: url,
+    onClick: function onClick(e) {
+      return e.preventDefault();
+    },
+    ref: overlayRef
+  }, showLabel && jsx("span", {
+    css: textStyles,
+    "data-testid": "".concat(testId, "-label"),
+    ref: labelRef
+  }, label), jsx("span", {
+    css: iconStyles
+  }, icon))));
+};
+export default InlineCardOverlay;

package/dist/esm/ui/InlineCardOverlay/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/ui/useFetchDatasourceInfo.js

@@ -3,6 +3,11 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 /** @jsx jsx */
 import { useEffect, useState } from 'react';
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+
 export var useFetchDatasourceInfo = function useFetchDatasourceInfo(_ref) {
   var isRegularCardNode = _ref.isRegularCardNode,
     url = _ref.url,

package/dist/types/messages.d.ts

@@ -19,4 +19,9 @@ export declare const messages: {
         defaultMessage: string;
         description: string;
     };
+    inlineOverlay: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
 };

package/dist/types/ui/HyperlinkToolbarAppearance.d.ts

@@ -1,12 +1,11 @@
 import { Component } from 'react';
-import { IntlShape } from 'react-intl-next';
+import type { IntlShape } from 'react-intl-next';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import { CardOptions } from '@atlaskit/editor-common/card';
-import type { CardPluginActions } from '@atlaskit/editor-common/card';
-import { CardProvider, ProviderFactory } from '@atlaskit/editor-common/provider-factory';
-import { EditorState } from '@atlaskit/editor-prosemirror/state';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
-import { CardPlatform } from '@atlaskit/smart-card';
+import type { CardOptions, CardPluginActions } from '@atlaskit/editor-common/card';
+import type { CardProvider, ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { CardPlatform } from '@atlaskit/smart-card';
 export interface HyperlinkToolbarAppearanceProps {
     intl: IntlShape;
     editorState: EditorState;

package/dist/types/ui/InlineCardOverlay/index.d.ts

@@ -0,0 +1,5 @@
+/** @jsx jsx */
+import type { FC } from 'react';
+import type { InlineCardOverlayProps } from './types';
+declare const InlineCardOverlay: FC<InlineCardOverlayProps>;
+export default InlineCardOverlay;

package/dist/types/ui/InlineCardOverlay/types.d.ts

@@ -0,0 +1,6 @@
+export type InlineCardOverlayProps = {
+    isToolbarOpen?: boolean;
+    isVisible?: boolean;
+    testId?: string;
+    url: string;
+};

package/dist/types-ts4.5/messages.d.ts

@@ -19,4 +19,9 @@ export declare const messages: {
         defaultMessage: string;
         description: string;
     };
+    inlineOverlay: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
 };

package/dist/types-ts4.5/ui/HyperlinkToolbarAppearance.d.ts

@@ -1,12 +1,11 @@
 import { Component } from 'react';
-import { IntlShape } from 'react-intl-next';
+import type { IntlShape } from 'react-intl-next';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import { CardOptions } from '@atlaskit/editor-common/card';
-import type { CardPluginActions } from '@atlaskit/editor-common/card';
-import { CardProvider, ProviderFactory } from '@atlaskit/editor-common/provider-factory';
-import { EditorState } from '@atlaskit/editor-prosemirror/state';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
-import { CardPlatform } from '@atlaskit/smart-card';
+import type { CardOptions, CardPluginActions } from '@atlaskit/editor-common/card';
+import type { CardProvider, ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { CardPlatform } from '@atlaskit/smart-card';
 export interface HyperlinkToolbarAppearanceProps {
     intl: IntlShape;
     editorState: EditorState;

package/dist/types-ts4.5/ui/InlineCardOverlay/index.d.ts

@@ -0,0 +1,5 @@
+/** @jsx jsx */
+import type { FC } from 'react';
+import type { InlineCardOverlayProps } from './types';
+declare const InlineCardOverlay: FC<InlineCardOverlayProps>;
+export default InlineCardOverlay;

package/dist/types-ts4.5/ui/InlineCardOverlay/types.d.ts

@@ -0,0 +1,6 @@
+export type InlineCardOverlayProps = {
+    isToolbarOpen?: boolean;
+    isVisible?: boolean;
+    testId?: string;
+    url: string;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-card",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "Card plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -47,9 +47,10 @@
     "@atlaskit/frontend-utilities": "^2.7.0",
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/link-analytics": "^8.3.0",
-    "@atlaskit/link-datasource": "^1.14.0",
+    "@atlaskit/link-datasource": "^1.15.0",
     "@atlaskit/linking-common": "^4.17.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
+    "@atlaskit/primitives": "^1.9.0",
     "@atlaskit/smart-card": "^26.42.0",
     "@atlaskit/theme": "^12.6.0",
     "@atlaskit/tokens": "^1.28.0",