@atlaskit/editor-plugin-card 7.0.6 → 7.0.8

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-card
 
+## 7.0.8
+
+### Patch Changes
+
+- Updated dependencies
+
+## 7.0.7
+
+### Patch Changes
+
+- [#183772](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/183772)
+  [`8b2280a6cd32a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8b2280a6cd32a) -
+  [ux] ED-28391: Added panel hover button for jira in edit mode"
+- Updated dependencies
+
 ## 7.0.6
 
 ### Patch Changes

package/dist/cjs/nodeviews/inlineCardWithAwareness.js

@@ -9,11 +9,14 @@ exports.InlineCardWithAwareness = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _hooks = require("@atlaskit/editor-common/hooks");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _smartCard = require("@atlaskit/smart-card");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _actions = require("../pm-plugins/actions");
 var _pluginKey = require("../pm-plugins/plugin-key");
 var _AwarenessWrapper = require("../ui/AwarenessWrapper");
 var _OpenButtonOverlay = _interopRequireDefault(require("../ui/OpenButtonOverlay"));
+var _PanelButtonOverlay = _interopRequireDefault(require("../ui/PanelButtonOverlay"));
 var _inlineCard = require("./inlineCard");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var selector = function selector(states) {
@@ -128,6 +131,48 @@ var InlineCardWithAwareness = exports.InlineCardWithAwareness = /*#__PURE__*/(0,
     return (mode === 'edit' || editorAppearance === 'comment' || shouldShowOpenButtonOverlayInChomeless) && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1');
   }, [mode, editorAppearance]);
   var innerCard = shouldShowOpenButtonOverlay ? innerCardWithOpenButtonOverlay : innerCardOriginal;
+  if ((0, _platformFeatureFlags.fg)('platform_editor_preview_panel_linking')) {
+    var _cardContext$value;
+    var cardState = cardContext === null || cardContext === void 0 || (_cardContext$value = cardContext.value) === null || _cardContext$value === void 0 || (_cardContext$value = _cardContext$value.store) === null || _cardContext$value === void 0 ? void 0 : _cardContext$value.getState()[node.attrs.url];
+    if (cardState) {
+      var _cardContext$value2, _cardContext$value2$i, _cardContext$value3;
+      var ari = (0, _smartCard.getObjectAri)(cardState.details);
+      var name = (0, _smartCard.getObjectName)(cardState.details);
+      var iconUrl = (0, _smartCard.getObjectIconUrl)(cardState.details);
+      var isPanelAvailable = ari && (cardContext === null || cardContext === void 0 || (_cardContext$value2 = cardContext.value) === null || _cardContext$value2 === void 0 || (_cardContext$value2$i = _cardContext$value2.isPreviewPanelAvailable) === null || _cardContext$value2$i === void 0 ? void 0 : _cardContext$value2$i.call(_cardContext$value2, {
+        ari: ari
+      }));
+      var openPreviewPanel = cardContext === null || cardContext === void 0 || (_cardContext$value3 = cardContext.value) === null || _cardContext$value3 === void 0 ? void 0 : _cardContext$value3.openPreviewPanel;
+      var handleOpenGlancePanelClick = function handleOpenGlancePanelClick() {
+        if (openPreviewPanel && isPanelAvailable) {
+          openPreviewPanel({
+            url: node.attrs.url,
+            ari: ari,
+            name: name || '',
+            iconUrl: iconUrl
+          });
+        }
+      };
+      var innerCardWithPanelButtonOverlay = /*#__PURE__*/_react.default.createElement(_PanelButtonOverlay.default, {
+        isVisible: isResolvedViewRendered,
+        editorAppearance: editorAppearance,
+        onClick: handleOpenGlancePanelClick
+      }, /*#__PURE__*/_react.default.createElement(_inlineCard.InlineCard, {
+        node: node,
+        view: view,
+        getPos: getPos,
+        useAlternativePreloader: useAlternativePreloader,
+        actionOptions: actionOptions,
+        onResolve: onResolve,
+        onClick: onClick,
+        cardContext: cardContext,
+        isHovered: isHovered,
+        isPageSSRed: isPageSSRed,
+        pluginInjectionApi: pluginInjectionApi
+      }));
+      innerCard = isPanelAvailable && openPreviewPanel ? innerCardWithPanelButtonOverlay : innerCard;
+    }
+  }
   var getPosFunction = typeof getPos === 'function' ? getPos : undefined;
   var placeholderUniqId = (getPosFunction === null || getPosFunction === void 0 ? void 0 : getPosFunction()) || 0;
   return isOverlayEnabled || isPulseEnabled ? /*#__PURE__*/_react.default.createElement(_AwarenessWrapper.AwarenessWrapper, {

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

@@ -9,6 +9,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _analyticsNext = require("@atlaskit/analytics-next");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _utils = require("../../pm-plugins/utils");
 var _useLinkUpgradeDiscoverability = _interopRequireDefault(require("../hooks/useLinkUpgradeDiscoverability"));
@@ -32,7 +33,7 @@ var loaderWrapperStyles = (0, _react2.css)({
   }
 });
 var AwarenessWrapper = exports.AwarenessWrapper = function AwarenessWrapper(_ref) {
-  var _cardContext$value2;
+  var _cardContext$value, _cardContext$value3;
   var cardContext = _ref.cardContext,
     children = _ref.children,
     getPos = _ref.getPos,
@@ -84,8 +85,10 @@ var AwarenessWrapper = exports.AwarenessWrapper = function AwarenessWrapper(_ref
     setIsHovered(isHovered);
     setOverlayHoveredStyles(isHovered);
   }, [setOverlayHoveredStyles]);
+  var isPreviewPanelAvailable = cardContext === null || cardContext === void 0 || (_cardContext$value = cardContext.value) === null || _cardContext$value === void 0 ? void 0 : _cardContext$value.isPreviewPanelAvailable;
+  var shouldShowGlancePanel = (isPreviewPanelAvailable || false) && (0, _platformFeatureFlags.fg)('platform_editor_preview_panel_linking');
   var cardWithOverlay = (0, _react.useMemo)(function () {
-    if (shouldShowLinkOverlay && !(0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
+    if (shouldShowLinkOverlay && !shouldShowGlancePanel && !(0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
       return (0, _react2.jsx)(_InlineCardOverlay.default, {
         isSelected: isSelected,
         isVisible: isResolvedViewRendered && (isInserted || isHovered || isSelected),
@@ -99,11 +102,11 @@ var AwarenessWrapper = exports.AwarenessWrapper = function AwarenessWrapper(_ref
       }, children);
     }
     return children;
-  }, [shouldShowLinkOverlay, children, isSelected, isResolvedViewRendered, isInserted, isHovered, url, handleOverlayChange]);
+  }, [shouldShowLinkOverlay, children, isSelected, isResolvedViewRendered, isInserted, isHovered, url, handleOverlayChange, shouldShowGlancePanel]);
   var isInline = appearance === 'inline';
   var placeholderUniqId = linkPosition || 0;
   return (0, _react.useMemo)(function () {
-    var _cardContext$value;
+    var _cardContext$value2;
     return (0, _react2.jsx)("span", {
       css: shouldShowLinkPulse && loaderWrapperStyles
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -114,7 +117,7 @@ var AwarenessWrapper = exports.AwarenessWrapper = function AwarenessWrapper(_ref
       "data-ssr-placeholder-replace": "awareness-wrapper-".concat(placeholderUniqId)
     }, (0, _react2.jsx)(_analyticsNext.AnalyticsContext, {
       data: {
-        attributes: (0, _utils.getResolvedAttributesFromStore)(url, 'inline', cardContext === null || cardContext === void 0 || (_cardContext$value = cardContext.value) === null || _cardContext$value === void 0 ? void 0 : _cardContext$value.store)
+        attributes: (0, _utils.getResolvedAttributesFromStore)(url, 'inline', cardContext === null || cardContext === void 0 || (_cardContext$value2 = cardContext.value) === null || _cardContext$value2 === void 0 ? void 0 : _cardContext$value2.store)
       }
     }, (0, _react2.jsx)(_Pulse.DiscoveryPulse, {
       localStorageKey: _localStorage.LOCAL_STORAGE_DISCOVERY_KEY_SMART_LINK,
@@ -124,5 +127,5 @@ var AwarenessWrapper = exports.AwarenessWrapper = function AwarenessWrapper(_ref
       testId: "link-discovery-pulse",
       isInline: isInline
     }, cardWithOverlay)));
-  }, [shouldShowLinkPulse, url, cardContext === null || cardContext === void 0 || (_cardContext$value2 = cardContext.value) === null || _cardContext$value2 === void 0 ? void 0 : _cardContext$value2.store, isResolvedViewRendered, cardWithOverlay, isInline, placeholderUniqId]);
+  }, [shouldShowLinkPulse, url, cardContext === null || cardContext === void 0 || (_cardContext$value3 = cardContext.value) === null || _cardContext$value3 === void 0 ? void 0 : _cardContext$value3.store, isResolvedViewRendered, cardWithOverlay, isInline, placeholderUniqId]);
 };

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

@@ -0,0 +1,169 @@
+"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 _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
+var _messages = require("@atlaskit/editor-common/messages");
+var _panelRight = _interopRequireDefault(require("@atlaskit/icon/core/panel-right"));
+var _primitives = require("@atlaskit/primitives");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+/* eslint-disable @atlaskit/design-system/no-nested-styles */
+/* eslint-disable @atlaskit/design-system/prefer-primitives */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var containerStyles = (0, _react2.css)({
+  position: 'relative'
+});
+var iconWrapperStyles = (0, _primitives.xcss)({
+  display: 'inline-flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  height: '17px',
+  width: '17px'
+});
+var hiddenTextStyle = (0, _react2.css)({
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+  position: 'absolute',
+  visibility: 'hidden'
+});
+var iconAndLabelWrapperStyles = (0, _primitives.xcss)({
+  position: 'absolute',
+  left: 'space.025',
+  top: '-1px',
+  cursor: 'pointer',
+  display: 'inline-flex',
+  alignItems: 'center',
+  verticalAlign: 'middle',
+  paddingInline: 'space.050',
+  gap: 'space.025',
+  overflow: 'hidden',
+  zIndex: 'card',
+  backgroundColor: 'color.background.accent.gray.subtlest',
+  borderRadius: "var(--ds-border-radius, 3px)",
+  color: 'color.text.subtle',
+  textDecoration: 'none',
+  whiteSpace: 'nowrap',
+  ':hover': {
+    backgroundColor: 'elevation.surface.hovered',
+    color: 'color.text.subtle',
+    textDecoration: 'none'
+  }
+});
+var MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY = 45;
+var ICON_WIDTH = 16;
+var DEFAULT_PANEL_TEXT_WIDTH = 28; // Default panel text width in English
+
+var PanelButtonOverlay = function PanelButtonOverlay(_ref) {
+  var children = _ref.children,
+    _ref$isVisible = _ref.isVisible,
+    isVisible = _ref$isVisible === void 0 ? false : _ref$isVisible,
+    editorAppearance = _ref.editorAppearance,
+    onClick = _ref.onClick;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var label = formatMessage(_messages.cardMessages.panelButtonTitle);
+  var containerRef = (0, _react.useRef)(null);
+  var panelButtonRef = (0, _react.useRef)(null);
+  var hiddenTextRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(true),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    showLabel = _useState2[0],
+    setShowLabel = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    isHovered = _useState4[0],
+    setHovered = _useState4[1];
+  var panelTextWidthRef = (0, _react.useRef)(null);
+  (0, _react.useLayoutEffect)(function () {
+    var _containerRef$current, _panelButtonRef$curre;
+    if (!isVisible || !isHovered) {
+      return;
+    }
+    var cardWidth = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.offsetWidth;
+    var panelButtonWidth = (_panelButtonRef$curre = panelButtonRef.current) === null || _panelButtonRef$curre === void 0 ? void 0 : _panelButtonRef$curre.offsetWidth;
+
+    // Get the hidden text width
+    if (!panelTextWidthRef.current) {
+      var hiddenText = hiddenTextRef.current;
+      if (hiddenText) {
+        // Measure the width of the hidden text
+        // Temporarily make the element visible to measure its width
+        hiddenText.style.visibility = 'hidden';
+        hiddenText.style.display = 'inline';
+        panelTextWidthRef.current = hiddenText.offsetWidth;
+
+        // Reset the hiddenText's display property
+        hiddenText.style.display = 'none';
+        hiddenText.style.visibility = 'inherit';
+      } else {
+        panelTextWidthRef.current = DEFAULT_PANEL_TEXT_WIDTH;
+      }
+    }
+    if (!cardWidth || !panelButtonWidth) {
+      return;
+    }
+    var panelTextWidth = panelTextWidthRef.current || DEFAULT_PANEL_TEXT_WIDTH;
+    var canShowLabel = cardWidth - panelTextWidth > MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY + ICON_WIDTH;
+    setShowLabel(canShowLabel);
+  }, [isVisible, isHovered]);
+  var handleOverlayChange = function handleOverlayChange(isHovered) {
+    setHovered(isHovered);
+  };
+  var handleClick = function handleClick() {
+    if (onClick) {
+      onClick();
+    }
+  };
+  return (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    (0, _react2.jsx)("span", {
+      ref: containerRef,
+      css: containerStyles,
+      onMouseEnter: function onMouseEnter() {
+        return handleOverlayChange(true);
+      },
+      onMouseLeave: function onMouseLeave() {
+        return handleOverlayChange(false);
+      }
+    }, children, (0, _react2.jsx)("span", {
+      css: hiddenTextStyle,
+      "aria-hidden": "true"
+    }, (0, _react2.jsx)(_primitives.Text, {
+      ref: hiddenTextRef,
+      size: "small",
+      maxLines: 1
+    }, label)), isHovered && (0, _react2.jsx)(_primitives.Pressable, {
+      ref: panelButtonRef,
+      xcss: iconAndLabelWrapperStyles,
+      style: {
+        paddingBlock: editorAppearance === 'comment' || editorAppearance === 'chromeless' ? '1px' : "var(--ds-space-025, 2px)"
+      },
+      onClick: handleClick
+    }, (0, _react2.jsx)(_primitives.Box, {
+      xcss: iconWrapperStyles,
+      "data-inlinecard-button-overlay": "icon-wrapper-line-height"
+    }, (0, _react2.jsx)(_panelRight.default, {
+      label: ""
+    })), showLabel && (0, _react2.jsx)(_primitives.Text, {
+      size: "small",
+      color: "color.text.subtle",
+      maxLines: 1
+    }, label)))
+  );
+};
+var _default = exports.default = PanelButtonOverlay;

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

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

package/dist/es2019/nodeviews/inlineCardWithAwareness.js

@@ -1,10 +1,13 @@
 import React, { memo, useCallback, useMemo, useState } from 'react';
 import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { getObjectAri, getObjectName, getObjectIconUrl } from '@atlaskit/smart-card';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { registerRemoveOverlay } from '../pm-plugins/actions';
 import { pluginKey } from '../pm-plugins/plugin-key';
 import { AwarenessWrapper } from '../ui/AwarenessWrapper';
 import OpenButtonOverlay from '../ui/OpenButtonOverlay';
+import PanelButtonOverlay from '../ui/PanelButtonOverlay';
 import { InlineCard } from './inlineCard';
 const selector = states => {
   var _states$editorViewMod;
@@ -105,7 +108,49 @@ export const InlineCardWithAwareness = /*#__PURE__*/memo(({
     const shouldShowOpenButtonOverlayInChomeless = editorAppearance === 'chromeless';
     return (mode === 'edit' || editorAppearance === 'comment' || shouldShowOpenButtonOverlayInChomeless) && editorExperiment('platform_editor_controls', 'variant1');
   }, [mode, editorAppearance]);
-  const innerCard = shouldShowOpenButtonOverlay ? innerCardWithOpenButtonOverlay : innerCardOriginal;
+  let innerCard = shouldShowOpenButtonOverlay ? innerCardWithOpenButtonOverlay : innerCardOriginal;
+  if (fg('platform_editor_preview_panel_linking')) {
+    var _cardContext$value, _cardContext$value$st;
+    const cardState = cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$value = cardContext.value) === null || _cardContext$value === void 0 ? void 0 : (_cardContext$value$st = _cardContext$value.store) === null || _cardContext$value$st === void 0 ? void 0 : _cardContext$value$st.getState()[node.attrs.url];
+    if (cardState) {
+      var _cardContext$value2, _cardContext$value2$i, _cardContext$value3;
+      const ari = getObjectAri(cardState.details);
+      const name = getObjectName(cardState.details);
+      const iconUrl = getObjectIconUrl(cardState.details);
+      const isPanelAvailable = ari && (cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$value2 = cardContext.value) === null || _cardContext$value2 === void 0 ? void 0 : (_cardContext$value2$i = _cardContext$value2.isPreviewPanelAvailable) === null || _cardContext$value2$i === void 0 ? void 0 : _cardContext$value2$i.call(_cardContext$value2, {
+        ari
+      }));
+      const openPreviewPanel = cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$value3 = cardContext.value) === null || _cardContext$value3 === void 0 ? void 0 : _cardContext$value3.openPreviewPanel;
+      const handleOpenGlancePanelClick = () => {
+        if (openPreviewPanel && isPanelAvailable) {
+          openPreviewPanel({
+            url: node.attrs.url,
+            ari,
+            name: name || '',
+            iconUrl
+          });
+        }
+      };
+      const innerCardWithPanelButtonOverlay = /*#__PURE__*/React.createElement(PanelButtonOverlay, {
+        isVisible: isResolvedViewRendered,
+        editorAppearance: editorAppearance,
+        onClick: handleOpenGlancePanelClick
+      }, /*#__PURE__*/React.createElement(InlineCard, {
+        node: node,
+        view: view,
+        getPos: getPos,
+        useAlternativePreloader: useAlternativePreloader,
+        actionOptions: actionOptions,
+        onResolve: onResolve,
+        onClick: onClick,
+        cardContext: cardContext,
+        isHovered: isHovered,
+        isPageSSRed: isPageSSRed,
+        pluginInjectionApi: pluginInjectionApi
+      }));
+      innerCard = isPanelAvailable && openPreviewPanel ? innerCardWithPanelButtonOverlay : innerCard;
+    }
+  }
   const getPosFunction = typeof getPos === 'function' ? getPos : undefined;
   const placeholderUniqId = (getPosFunction === null || getPosFunction === void 0 ? void 0 : getPosFunction()) || 0;
   return isOverlayEnabled || isPulseEnabled ? /*#__PURE__*/React.createElement(AwarenessWrapper, {

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

@@ -7,6 +7,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { getResolvedAttributesFromStore } from '../../pm-plugins/utils';
 import useLinkUpgradeDiscoverability from '../hooks/useLinkUpgradeDiscoverability';
@@ -37,7 +38,7 @@ export const AwarenessWrapper = ({
   url,
   appearance
 }) => {
-  var _cardContext$value2;
+  var _cardContext$value, _cardContext$value3;
   const [isHovered, setIsHovered] = useState(false);
   const linkPosition = useMemo(() => {
     if (!getPos || typeof getPos === 'boolean') {
@@ -74,8 +75,10 @@ export const AwarenessWrapper = ({
     setIsHovered(isHovered);
     setOverlayHoveredStyles(isHovered);
   }, [setOverlayHoveredStyles]);
+  const isPreviewPanelAvailable = cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$value = cardContext.value) === null || _cardContext$value === void 0 ? void 0 : _cardContext$value.isPreviewPanelAvailable;
+  const shouldShowGlancePanel = (isPreviewPanelAvailable || false) && fg('platform_editor_preview_panel_linking');
   const cardWithOverlay = useMemo(() => {
-    if (shouldShowLinkOverlay && !editorExperiment('platform_editor_controls', 'variant1')) {
+    if (shouldShowLinkOverlay && !shouldShowGlancePanel && !editorExperiment('platform_editor_controls', 'variant1')) {
       return jsx(InlineCardOverlay, {
         isSelected: isSelected,
         isVisible: isResolvedViewRendered && (isInserted || isHovered || isSelected),
@@ -85,11 +88,11 @@ export const AwarenessWrapper = ({
       }, children);
     }
     return children;
-  }, [shouldShowLinkOverlay, children, isSelected, isResolvedViewRendered, isInserted, isHovered, url, handleOverlayChange]);
+  }, [shouldShowLinkOverlay, children, isSelected, isResolvedViewRendered, isInserted, isHovered, url, handleOverlayChange, shouldShowGlancePanel]);
   const isInline = appearance === 'inline';
   const placeholderUniqId = linkPosition || 0;
   return useMemo(() => {
-    var _cardContext$value;
+    var _cardContext$value2;
     return jsx("span", {
       css: shouldShowLinkPulse && loaderWrapperStyles
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -100,7 +103,7 @@ export const AwarenessWrapper = ({
       "data-ssr-placeholder-replace": `awareness-wrapper-${placeholderUniqId}`
     }, jsx(AnalyticsContext, {
       data: {
-        attributes: getResolvedAttributesFromStore(url, 'inline', cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$value = cardContext.value) === null || _cardContext$value === void 0 ? void 0 : _cardContext$value.store)
+        attributes: getResolvedAttributesFromStore(url, 'inline', cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$value2 = cardContext.value) === null || _cardContext$value2 === void 0 ? void 0 : _cardContext$value2.store)
       }
     }, jsx(DiscoveryPulse, {
       localStorageKey: LOCAL_STORAGE_DISCOVERY_KEY_SMART_LINK,
@@ -110,5 +113,5 @@ export const AwarenessWrapper = ({
       testId: "link-discovery-pulse",
       isInline: isInline
     }, cardWithOverlay)));
-  }, [shouldShowLinkPulse, url, cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$value2 = cardContext.value) === null || _cardContext$value2 === void 0 ? void 0 : _cardContext$value2.store, isResolvedViewRendered, cardWithOverlay, isInline, placeholderUniqId]);
+  }, [shouldShowLinkPulse, url, cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$value3 = cardContext.value) === null || _cardContext$value3 === void 0 ? void 0 : _cardContext$value3.store, isResolvedViewRendered, cardWithOverlay, isInline, placeholderUniqId]);
 };

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

@@ -0,0 +1,147 @@
+/* eslint-disable @atlaskit/design-system/no-nested-styles */
+/* eslint-disable @atlaskit/design-system/prefer-primitives */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+import React, { useLayoutEffect, useRef, useState } from 'react';
+import { css, jsx } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
+import { useIntl } from 'react-intl-next';
+import { cardMessages } from '@atlaskit/editor-common/messages';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import PanelRightIcon from '@atlaskit/icon/core/panel-right';
+import { Box, Pressable, Text, xcss } from '@atlaskit/primitives';
+const containerStyles = css({
+  position: 'relative'
+});
+const iconWrapperStyles = xcss({
+  display: 'inline-flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  height: '17px',
+  width: '17px'
+});
+const hiddenTextStyle = css({
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+  position: 'absolute',
+  visibility: 'hidden'
+});
+const iconAndLabelWrapperStyles = xcss({
+  position: 'absolute',
+  left: 'space.025',
+  top: '-1px',
+  cursor: 'pointer',
+  display: 'inline-flex',
+  alignItems: 'center',
+  verticalAlign: 'middle',
+  paddingInline: 'space.050',
+  gap: 'space.025',
+  overflow: 'hidden',
+  zIndex: 'card',
+  backgroundColor: 'color.background.accent.gray.subtlest',
+  borderRadius: "var(--ds-border-radius, 3px)",
+  color: 'color.text.subtle',
+  textDecoration: 'none',
+  whiteSpace: 'nowrap',
+  ':hover': {
+    backgroundColor: 'elevation.surface.hovered',
+    color: 'color.text.subtle',
+    textDecoration: 'none'
+  }
+});
+const MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY = 45;
+const ICON_WIDTH = 16;
+const DEFAULT_PANEL_TEXT_WIDTH = 28; // Default panel text width in English
+
+const PanelButtonOverlay = ({
+  children,
+  isVisible = false,
+  editorAppearance,
+  onClick
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const label = formatMessage(cardMessages.panelButtonTitle);
+  const containerRef = useRef(null);
+  const panelButtonRef = useRef(null);
+  const hiddenTextRef = useRef(null);
+  const [showLabel, setShowLabel] = useState(true);
+  const [isHovered, setHovered] = useState(false);
+  const panelTextWidthRef = useRef(null);
+  useLayoutEffect(() => {
+    var _containerRef$current, _panelButtonRef$curre;
+    if (!isVisible || !isHovered) {
+      return;
+    }
+    const cardWidth = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.offsetWidth;
+    const panelButtonWidth = (_panelButtonRef$curre = panelButtonRef.current) === null || _panelButtonRef$curre === void 0 ? void 0 : _panelButtonRef$curre.offsetWidth;
+
+    // Get the hidden text width
+    if (!panelTextWidthRef.current) {
+      const hiddenText = hiddenTextRef.current;
+      if (hiddenText) {
+        // Measure the width of the hidden text
+        // Temporarily make the element visible to measure its width
+        hiddenText.style.visibility = 'hidden';
+        hiddenText.style.display = 'inline';
+        panelTextWidthRef.current = hiddenText.offsetWidth;
+
+        // Reset the hiddenText's display property
+        hiddenText.style.display = 'none';
+        hiddenText.style.visibility = 'inherit';
+      } else {
+        panelTextWidthRef.current = DEFAULT_PANEL_TEXT_WIDTH;
+      }
+    }
+    if (!cardWidth || !panelButtonWidth) {
+      return;
+    }
+    const panelTextWidth = panelTextWidthRef.current || DEFAULT_PANEL_TEXT_WIDTH;
+    const canShowLabel = cardWidth - panelTextWidth > MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY + ICON_WIDTH;
+    setShowLabel(canShowLabel);
+  }, [isVisible, isHovered]);
+  const handleOverlayChange = isHovered => {
+    setHovered(isHovered);
+  };
+  const handleClick = () => {
+    if (onClick) {
+      onClick();
+    }
+  };
+  return (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    jsx("span", {
+      ref: containerRef,
+      css: containerStyles,
+      onMouseEnter: () => handleOverlayChange(true),
+      onMouseLeave: () => handleOverlayChange(false)
+    }, children, jsx("span", {
+      css: hiddenTextStyle,
+      "aria-hidden": "true"
+    }, jsx(Text, {
+      ref: hiddenTextRef,
+      size: "small",
+      maxLines: 1
+    }, label)), isHovered && jsx(Pressable, {
+      ref: panelButtonRef,
+      xcss: iconAndLabelWrapperStyles,
+      style: {
+        paddingBlock: editorAppearance === 'comment' || editorAppearance === 'chromeless' ? '1px' : "var(--ds-space-025, 2px)"
+      },
+      onClick: handleClick
+    }, jsx(Box, {
+      xcss: iconWrapperStyles,
+      "data-inlinecard-button-overlay": "icon-wrapper-line-height"
+    }, jsx(PanelRightIcon, {
+      label: ""
+    })), showLabel && jsx(Text, {
+      size: "small",
+      color: "color.text.subtle",
+      maxLines: 1
+    }, label)))
+  );
+};
+export default PanelButtonOverlay;

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

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

package/dist/esm/nodeviews/inlineCardWithAwareness.js

@@ -1,11 +1,14 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { memo, useCallback, useMemo, useState } from 'react';
 import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { getObjectAri, getObjectName, getObjectIconUrl } from '@atlaskit/smart-card';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { registerRemoveOverlay } from '../pm-plugins/actions';
 import { pluginKey } from '../pm-plugins/plugin-key';
 import { AwarenessWrapper } from '../ui/AwarenessWrapper';
 import OpenButtonOverlay from '../ui/OpenButtonOverlay';
+import PanelButtonOverlay from '../ui/PanelButtonOverlay';
 import { InlineCard } from './inlineCard';
 var selector = function selector(states) {
   var _states$editorViewMod;
@@ -119,6 +122,48 @@ export var InlineCardWithAwareness = /*#__PURE__*/memo(function (_ref) {
     return (mode === 'edit' || editorAppearance === 'comment' || shouldShowOpenButtonOverlayInChomeless) && editorExperiment('platform_editor_controls', 'variant1');
   }, [mode, editorAppearance]);
   var innerCard = shouldShowOpenButtonOverlay ? innerCardWithOpenButtonOverlay : innerCardOriginal;
+  if (fg('platform_editor_preview_panel_linking')) {
+    var _cardContext$value;
+    var cardState = cardContext === null || cardContext === void 0 || (_cardContext$value = cardContext.value) === null || _cardContext$value === void 0 || (_cardContext$value = _cardContext$value.store) === null || _cardContext$value === void 0 ? void 0 : _cardContext$value.getState()[node.attrs.url];
+    if (cardState) {
+      var _cardContext$value2, _cardContext$value2$i, _cardContext$value3;
+      var ari = getObjectAri(cardState.details);
+      var name = getObjectName(cardState.details);
+      var iconUrl = getObjectIconUrl(cardState.details);
+      var isPanelAvailable = ari && (cardContext === null || cardContext === void 0 || (_cardContext$value2 = cardContext.value) === null || _cardContext$value2 === void 0 || (_cardContext$value2$i = _cardContext$value2.isPreviewPanelAvailable) === null || _cardContext$value2$i === void 0 ? void 0 : _cardContext$value2$i.call(_cardContext$value2, {
+        ari: ari
+      }));
+      var openPreviewPanel = cardContext === null || cardContext === void 0 || (_cardContext$value3 = cardContext.value) === null || _cardContext$value3 === void 0 ? void 0 : _cardContext$value3.openPreviewPanel;
+      var handleOpenGlancePanelClick = function handleOpenGlancePanelClick() {
+        if (openPreviewPanel && isPanelAvailable) {
+          openPreviewPanel({
+            url: node.attrs.url,
+            ari: ari,
+            name: name || '',
+            iconUrl: iconUrl
+          });
+        }
+      };
+      var innerCardWithPanelButtonOverlay = /*#__PURE__*/React.createElement(PanelButtonOverlay, {
+        isVisible: isResolvedViewRendered,
+        editorAppearance: editorAppearance,
+        onClick: handleOpenGlancePanelClick
+      }, /*#__PURE__*/React.createElement(InlineCard, {
+        node: node,
+        view: view,
+        getPos: getPos,
+        useAlternativePreloader: useAlternativePreloader,
+        actionOptions: actionOptions,
+        onResolve: onResolve,
+        onClick: onClick,
+        cardContext: cardContext,
+        isHovered: isHovered,
+        isPageSSRed: isPageSSRed,
+        pluginInjectionApi: pluginInjectionApi
+      }));
+      innerCard = isPanelAvailable && openPreviewPanel ? innerCardWithPanelButtonOverlay : innerCard;
+    }
+  }
   var getPosFunction = typeof getPos === 'function' ? getPos : undefined;
   var placeholderUniqId = (getPosFunction === null || getPosFunction === void 0 ? void 0 : getPosFunction()) || 0;
   return isOverlayEnabled || isPulseEnabled ? /*#__PURE__*/React.createElement(AwarenessWrapper, {

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

@@ -8,6 +8,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { getResolvedAttributesFromStore } from '../../pm-plugins/utils';
 import useLinkUpgradeDiscoverability from '../hooks/useLinkUpgradeDiscoverability';
@@ -24,7 +25,7 @@ var loaderWrapperStyles = css({
   }
 });
 export var AwarenessWrapper = function AwarenessWrapper(_ref) {
-  var _cardContext$value2;
+  var _cardContext$value, _cardContext$value3;
   var cardContext = _ref.cardContext,
     children = _ref.children,
     getPos = _ref.getPos,
@@ -76,8 +77,10 @@ export var AwarenessWrapper = function AwarenessWrapper(_ref) {
     setIsHovered(isHovered);
     setOverlayHoveredStyles(isHovered);
   }, [setOverlayHoveredStyles]);
+  var isPreviewPanelAvailable = cardContext === null || cardContext === void 0 || (_cardContext$value = cardContext.value) === null || _cardContext$value === void 0 ? void 0 : _cardContext$value.isPreviewPanelAvailable;
+  var shouldShowGlancePanel = (isPreviewPanelAvailable || false) && fg('platform_editor_preview_panel_linking');
   var cardWithOverlay = useMemo(function () {
-    if (shouldShowLinkOverlay && !editorExperiment('platform_editor_controls', 'variant1')) {
+    if (shouldShowLinkOverlay && !shouldShowGlancePanel && !editorExperiment('platform_editor_controls', 'variant1')) {
       return jsx(InlineCardOverlay, {
         isSelected: isSelected,
         isVisible: isResolvedViewRendered && (isInserted || isHovered || isSelected),
@@ -91,11 +94,11 @@ export var AwarenessWrapper = function AwarenessWrapper(_ref) {
       }, children);
     }
     return children;
-  }, [shouldShowLinkOverlay, children, isSelected, isResolvedViewRendered, isInserted, isHovered, url, handleOverlayChange]);
+  }, [shouldShowLinkOverlay, children, isSelected, isResolvedViewRendered, isInserted, isHovered, url, handleOverlayChange, shouldShowGlancePanel]);
   var isInline = appearance === 'inline';
   var placeholderUniqId = linkPosition || 0;
   return useMemo(function () {
-    var _cardContext$value;
+    var _cardContext$value2;
     return jsx("span", {
       css: shouldShowLinkPulse && loaderWrapperStyles
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -106,7 +109,7 @@ export var AwarenessWrapper = function AwarenessWrapper(_ref) {
       "data-ssr-placeholder-replace": "awareness-wrapper-".concat(placeholderUniqId)
     }, jsx(AnalyticsContext, {
       data: {
-        attributes: getResolvedAttributesFromStore(url, 'inline', cardContext === null || cardContext === void 0 || (_cardContext$value = cardContext.value) === null || _cardContext$value === void 0 ? void 0 : _cardContext$value.store)
+        attributes: getResolvedAttributesFromStore(url, 'inline', cardContext === null || cardContext === void 0 || (_cardContext$value2 = cardContext.value) === null || _cardContext$value2 === void 0 ? void 0 : _cardContext$value2.store)
       }
     }, jsx(DiscoveryPulse, {
       localStorageKey: LOCAL_STORAGE_DISCOVERY_KEY_SMART_LINK,
@@ -116,5 +119,5 @@ export var AwarenessWrapper = function AwarenessWrapper(_ref) {
       testId: "link-discovery-pulse",
       isInline: isInline
     }, cardWithOverlay)));
-  }, [shouldShowLinkPulse, url, cardContext === null || cardContext === void 0 || (_cardContext$value2 = cardContext.value) === null || _cardContext$value2 === void 0 ? void 0 : _cardContext$value2.store, isResolvedViewRendered, cardWithOverlay, isInline, placeholderUniqId]);
+  }, [shouldShowLinkPulse, url, cardContext === null || cardContext === void 0 || (_cardContext$value3 = cardContext.value) === null || _cardContext$value3 === void 0 ? void 0 : _cardContext$value3.store, isResolvedViewRendered, cardWithOverlay, isInline, placeholderUniqId]);
 };

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

@@ -0,0 +1,157 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/* eslint-disable @atlaskit/design-system/no-nested-styles */
+/* eslint-disable @atlaskit/design-system/prefer-primitives */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+import React, { useLayoutEffect, useRef, useState } from 'react';
+import { css, jsx } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
+import { useIntl } from 'react-intl-next';
+import { cardMessages } from '@atlaskit/editor-common/messages';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import PanelRightIcon from '@atlaskit/icon/core/panel-right';
+import { Box, Pressable, Text, xcss } from '@atlaskit/primitives';
+var containerStyles = css({
+  position: 'relative'
+});
+var iconWrapperStyles = xcss({
+  display: 'inline-flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  height: '17px',
+  width: '17px'
+});
+var hiddenTextStyle = css({
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+  position: 'absolute',
+  visibility: 'hidden'
+});
+var iconAndLabelWrapperStyles = xcss({
+  position: 'absolute',
+  left: 'space.025',
+  top: '-1px',
+  cursor: 'pointer',
+  display: 'inline-flex',
+  alignItems: 'center',
+  verticalAlign: 'middle',
+  paddingInline: 'space.050',
+  gap: 'space.025',
+  overflow: 'hidden',
+  zIndex: 'card',
+  backgroundColor: 'color.background.accent.gray.subtlest',
+  borderRadius: "var(--ds-border-radius, 3px)",
+  color: 'color.text.subtle',
+  textDecoration: 'none',
+  whiteSpace: 'nowrap',
+  ':hover': {
+    backgroundColor: 'elevation.surface.hovered',
+    color: 'color.text.subtle',
+    textDecoration: 'none'
+  }
+});
+var MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY = 45;
+var ICON_WIDTH = 16;
+var DEFAULT_PANEL_TEXT_WIDTH = 28; // Default panel text width in English
+
+var PanelButtonOverlay = function PanelButtonOverlay(_ref) {
+  var children = _ref.children,
+    _ref$isVisible = _ref.isVisible,
+    isVisible = _ref$isVisible === void 0 ? false : _ref$isVisible,
+    editorAppearance = _ref.editorAppearance,
+    onClick = _ref.onClick;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var label = formatMessage(cardMessages.panelButtonTitle);
+  var containerRef = useRef(null);
+  var panelButtonRef = useRef(null);
+  var hiddenTextRef = useRef(null);
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    showLabel = _useState2[0],
+    setShowLabel = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isHovered = _useState4[0],
+    setHovered = _useState4[1];
+  var panelTextWidthRef = useRef(null);
+  useLayoutEffect(function () {
+    var _containerRef$current, _panelButtonRef$curre;
+    if (!isVisible || !isHovered) {
+      return;
+    }
+    var cardWidth = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.offsetWidth;
+    var panelButtonWidth = (_panelButtonRef$curre = panelButtonRef.current) === null || _panelButtonRef$curre === void 0 ? void 0 : _panelButtonRef$curre.offsetWidth;
+
+    // Get the hidden text width
+    if (!panelTextWidthRef.current) {
+      var hiddenText = hiddenTextRef.current;
+      if (hiddenText) {
+        // Measure the width of the hidden text
+        // Temporarily make the element visible to measure its width
+        hiddenText.style.visibility = 'hidden';
+        hiddenText.style.display = 'inline';
+        panelTextWidthRef.current = hiddenText.offsetWidth;
+
+        // Reset the hiddenText's display property
+        hiddenText.style.display = 'none';
+        hiddenText.style.visibility = 'inherit';
+      } else {
+        panelTextWidthRef.current = DEFAULT_PANEL_TEXT_WIDTH;
+      }
+    }
+    if (!cardWidth || !panelButtonWidth) {
+      return;
+    }
+    var panelTextWidth = panelTextWidthRef.current || DEFAULT_PANEL_TEXT_WIDTH;
+    var canShowLabel = cardWidth - panelTextWidth > MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY + ICON_WIDTH;
+    setShowLabel(canShowLabel);
+  }, [isVisible, isHovered]);
+  var handleOverlayChange = function handleOverlayChange(isHovered) {
+    setHovered(isHovered);
+  };
+  var handleClick = function handleClick() {
+    if (onClick) {
+      onClick();
+    }
+  };
+  return (
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    jsx("span", {
+      ref: containerRef,
+      css: containerStyles,
+      onMouseEnter: function onMouseEnter() {
+        return handleOverlayChange(true);
+      },
+      onMouseLeave: function onMouseLeave() {
+        return handleOverlayChange(false);
+      }
+    }, children, jsx("span", {
+      css: hiddenTextStyle,
+      "aria-hidden": "true"
+    }, jsx(Text, {
+      ref: hiddenTextRef,
+      size: "small",
+      maxLines: 1
+    }, label)), isHovered && jsx(Pressable, {
+      ref: panelButtonRef,
+      xcss: iconAndLabelWrapperStyles,
+      style: {
+        paddingBlock: editorAppearance === 'comment' || editorAppearance === 'chromeless' ? '1px' : "var(--ds-space-025, 2px)"
+      },
+      onClick: handleClick
+    }, jsx(Box, {
+      xcss: iconWrapperStyles,
+      "data-inlinecard-button-overlay": "icon-wrapper-line-height"
+    }, jsx(PanelRightIcon, {
+      label: ""
+    })), showLabel && jsx(Text, {
+      size: "small",
+      color: "color.text.subtle",
+      maxLines: 1
+    }, label)))
+  );
+};
+export default PanelButtonOverlay;

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

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

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

@@ -0,0 +1,9 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+import { jsx } from '@emotion/react';
+import type { PanelButtonOverlayProps } from '../PanelButtonOverlay/types';
+declare const PanelButtonOverlay: ({ children, isVisible, editorAppearance, onClick, }: React.PropsWithChildren<PanelButtonOverlayProps>) => jsx.JSX.Element;
+export default PanelButtonOverlay;

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { EditorAppearance } from '@atlaskit/editor-common/types';
+export type PanelButtonOverlayProps = React.HTMLAttributes<HTMLSpanElement> & {
+    isVisible?: boolean;
+    editorAppearance?: EditorAppearance;
+    onClick?: () => void;
+};

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

@@ -0,0 +1,9 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+import { jsx } from '@emotion/react';
+import type { PanelButtonOverlayProps } from '../PanelButtonOverlay/types';
+declare const PanelButtonOverlay: ({ children, isVisible, editorAppearance, onClick, }: React.PropsWithChildren<PanelButtonOverlayProps>) => jsx.JSX.Element;
+export default PanelButtonOverlay;

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { EditorAppearance } from '@atlaskit/editor-common/types';
+export type PanelButtonOverlayProps = React.HTMLAttributes<HTMLSpanElement> & {
+    isVisible?: boolean;
+    editorAppearance?: EditorAppearance;
+    onClick?: () => void;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-card",
-	"version": "7.0.6",
+	"version": "7.0.8",
 	"description": "Card plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -47,7 +47,7 @@
 		"@atlaskit/editor-plugin-grid": "^3.0.0",
 		"@atlaskit/editor-plugin-width": "^4.0.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
-		"@atlaskit/editor-shared-styles": "^3.4.0",
+		"@atlaskit/editor-shared-styles": "^3.5.0",
 		"@atlaskit/frontend-utilities": "^3.1.0",
 		"@atlaskit/icon": "^27.3.0",
 		"@atlaskit/link": "^3.2.0",
@@ -55,13 +55,13 @@
 		"@atlaskit/link-client-extension": "^5.0.0",
 		"@atlaskit/link-datasource": "^4.13.0",
 		"@atlaskit/linking-common": "^9.1.0",
-		"@atlaskit/linking-types": "^13.0.0",
+		"@atlaskit/linking-types": "^14.0.0",
 		"@atlaskit/menu": "^8.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^14.10.0",
-		"@atlaskit/smart-card": "^40.2.0",
+		"@atlaskit/smart-card": "^40.3.0",
 		"@atlaskit/theme": "^19.0.0",
-		"@atlaskit/tmp-editor-statsig": "^9.7.0",
+		"@atlaskit/tmp-editor-statsig": "^9.8.0",
 		"@atlaskit/tokens": "^5.5.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -134,6 +134,9 @@
 		"platform_editor_cards_maxcallstackfix": {
 			"type": "boolean"
 		},
+		"platform_editor_preview_panel_linking": {
+			"type": "boolean"
+		},
 		"platform_editor_controls_patch_13": {
 			"type": "boolean"
 		},