@atlaskit/editor-plugin-card 7.2.2 → 7.2.3

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/editor-plugin-card
 
+## 7.2.3
+
+### Patch Changes
+
+- [#190588](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/190588)
+  [`b22e308cfd320`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b22e308cfd320) -
+  Replace experiment key platform_editor_useSharedPluginStateSelector with
+  platform_editor_useSharedPluginStateWithSelector
+- Updated dependencies
+
 ## 7.2.2
 
 ### Patch Changes

package/dist/cjs/nodeviews/inlineCardWithAwareness.js

@@ -9,6 +9,7 @@ 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 _ui = require("@atlaskit/editor-common/ui");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _smartCard = require("@atlaskit/smart-card");
@@ -16,7 +17,6 @@ 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 _HoverLinkOverlay = _interopRequireDefault(require("../ui/HoverLinkOverlay"));
 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) {
@@ -97,10 +97,10 @@ var InlineCardWithAwareness = exports.InlineCardWithAwareness = /*#__PURE__*/(0,
   var showHoverPreview = floatingToolbarNode !== node && (0, _platformFeatureFlags.fg)('platform_editor_preview_panel_linking');
   var innerCardWithOpenButtonOverlay = (0, _react.useMemo)(function () {
     var _pluginInjectionApi$a;
-    return /*#__PURE__*/_react.default.createElement(_HoverLinkOverlay.default, {
+    return /*#__PURE__*/_react.default.createElement(_ui.HoverLinkOverlay, {
       isVisible: isResolvedViewRendered,
       url: node.attrs.url,
-      editorAppearance: editorAppearance,
+      compactPadding: editorAppearance === 'comment' || editorAppearance === 'chromeless',
       editorAnalyticsApi: pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions,
       view: view
     }, /*#__PURE__*/_react.default.createElement(_inlineCard.InlineCard, {
@@ -164,10 +164,10 @@ var InlineCardWithAwareness = exports.InlineCardWithAwareness = /*#__PURE__*/(0,
           });
         }
       };
-      var innerCardWithPanelButtonOverlay = /*#__PURE__*/_react.default.createElement(_HoverLinkOverlay.default, {
+      var innerCardWithPanelButtonOverlay = /*#__PURE__*/_react.default.createElement(_ui.HoverLinkOverlay, {
         isVisible: isResolvedViewRendered,
         url: node.attrs.url,
-        editorAppearance: editorAppearance,
+        compactPadding: editorAppearance === 'comment' || editorAppearance === 'chromeless',
         editorAnalyticsApi: pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions,
         view: view,
         showPanelButton: !!isPanelAvailable,

package/dist/cjs/ui/DatasourceModal/ModalWithState.js

@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _linkDatasource = require("@atlaskit/link-datasource");
 var _linkProvider = require("@atlaskit/link-provider");
-var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _datasourceErrorBoundary = require("../datasourceErrorBoundary");
 var _index = require("./index");
 var selector = function selector(states) {
@@ -39,7 +39,7 @@ var ModalWithState = function ModalWithState(_ref) {
     cardState = _useSharedState.cardState,
     showDatasourceModal = _useSharedState.showDatasourceModal,
     datasourceModalType = _useSharedState.datasourceModalType;
-  if (!cardState && (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)) {
+  if (!cardState && (0, _expValEquals.expValEquals)('platform_editor_usesharedpluginstatewithselector', 'isEnabled', false)) {
     return null;
   }
   if (!showDatasourceModal || !datasourceModalType) {

package/dist/es2019/nodeviews/inlineCardWithAwareness.js

@@ -1,5 +1,6 @@
 import React, { memo, useCallback, useMemo, useState } from 'react';
 import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { HoverLinkOverlay } from '@atlaskit/editor-common/ui';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { getObjectAri, getObjectName, getObjectIconUrl } from '@atlaskit/smart-card';
@@ -7,7 +8,6 @@ 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 HoverLinkOverlay from '../ui/HoverLinkOverlay';
 import { InlineCard } from './inlineCard';
 const selector = states => {
   var _states$editorViewMod, _states$selectionStat;
@@ -80,7 +80,7 @@ export const InlineCardWithAwareness = /*#__PURE__*/memo(({
     return /*#__PURE__*/React.createElement(HoverLinkOverlay, {
       isVisible: isResolvedViewRendered,
       url: node.attrs.url,
-      editorAppearance: editorAppearance,
+      compactPadding: editorAppearance === 'comment' || editorAppearance === 'chromeless',
       editorAnalyticsApi: pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions,
       view: view
     }, /*#__PURE__*/React.createElement(InlineCard, {
@@ -145,7 +145,7 @@ export const InlineCardWithAwareness = /*#__PURE__*/memo(({
       const innerCardWithPanelButtonOverlay = /*#__PURE__*/React.createElement(HoverLinkOverlay, {
         isVisible: isResolvedViewRendered,
         url: node.attrs.url,
-        editorAppearance: editorAppearance,
+        compactPadding: editorAppearance === 'comment' || editorAppearance === 'chromeless',
         editorAnalyticsApi: pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions,
         view: view,
         showPanelButton: !!isPanelAvailable,

package/dist/es2019/ui/DatasourceModal/ModalWithState.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { ASSETS_LIST_OF_LINKS_DATASOURCE_ID, AssetsConfigModal, CONFLUENCE_SEARCH_DATASOURCE_ID, ConfluenceSearchConfigModal, JIRA_LIST_OF_LINKS_DATASOURCE_ID, JiraIssuesConfigModal } from '@atlaskit/link-datasource';
 import { EditorSmartCardProviderValueGuard, useSmartLinkContext } from '@atlaskit/link-provider';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { DatasourceErrorBoundary } from '../datasourceErrorBoundary';
 import { DatasourceModal } from './index';
 const selector = states => {
@@ -35,7 +35,7 @@ const ModalWithState = ({
     showDatasourceModal,
     datasourceModalType
   } = useSharedState(api);
-  if (!cardState && editorExperiment('platform_editor_usesharedpluginstateselector', false)) {
+  if (!cardState && expValEquals('platform_editor_usesharedpluginstatewithselector', 'isEnabled', false)) {
     return null;
   }
   if (!showDatasourceModal || !datasourceModalType) {

package/dist/esm/nodeviews/inlineCardWithAwareness.js

@@ -1,6 +1,7 @@
 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 { HoverLinkOverlay } from '@atlaskit/editor-common/ui';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { getObjectAri, getObjectName, getObjectIconUrl } from '@atlaskit/smart-card';
@@ -8,7 +9,6 @@ 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 HoverLinkOverlay from '../ui/HoverLinkOverlay';
 import { InlineCard } from './inlineCard';
 var selector = function selector(states) {
   var _states$editorViewMod, _states$selectionStat;
@@ -91,7 +91,7 @@ export var InlineCardWithAwareness = /*#__PURE__*/memo(function (_ref) {
     return /*#__PURE__*/React.createElement(HoverLinkOverlay, {
       isVisible: isResolvedViewRendered,
       url: node.attrs.url,
-      editorAppearance: editorAppearance,
+      compactPadding: editorAppearance === 'comment' || editorAppearance === 'chromeless',
       editorAnalyticsApi: pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions,
       view: view
     }, /*#__PURE__*/React.createElement(InlineCard, {
@@ -158,7 +158,7 @@ export var InlineCardWithAwareness = /*#__PURE__*/memo(function (_ref) {
       var innerCardWithPanelButtonOverlay = /*#__PURE__*/React.createElement(HoverLinkOverlay, {
         isVisible: isResolvedViewRendered,
         url: node.attrs.url,
-        editorAppearance: editorAppearance,
+        compactPadding: editorAppearance === 'comment' || editorAppearance === 'chromeless',
         editorAnalyticsApi: pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a2 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a2 === void 0 ? void 0 : _pluginInjectionApi$a2.actions,
         view: view,
         showPanelButton: !!isPanelAvailable,

package/dist/esm/ui/DatasourceModal/ModalWithState.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { ASSETS_LIST_OF_LINKS_DATASOURCE_ID, AssetsConfigModal, CONFLUENCE_SEARCH_DATASOURCE_ID, ConfluenceSearchConfigModal, JIRA_LIST_OF_LINKS_DATASOURCE_ID, JiraIssuesConfigModal } from '@atlaskit/link-datasource';
 import { EditorSmartCardProviderValueGuard, useSmartLinkContext } from '@atlaskit/link-provider';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { DatasourceErrorBoundary } from '../datasourceErrorBoundary';
 import { DatasourceModal } from './index';
 var selector = function selector(states) {
@@ -32,7 +32,7 @@ var ModalWithState = function ModalWithState(_ref) {
     cardState = _useSharedState.cardState,
     showDatasourceModal = _useSharedState.showDatasourceModal,
     datasourceModalType = _useSharedState.datasourceModalType;
-  if (!cardState && editorExperiment('platform_editor_usesharedpluginstateselector', false)) {
+  if (!cardState && expValEquals('platform_editor_usesharedpluginstatewithselector', 'isEnabled', false)) {
     return null;
   }
   if (!showDatasourceModal || !datasourceModalType) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-card",
-	"version": "7.2.2",
+	"version": "7.2.3",
 	"description": "Card plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -53,7 +53,7 @@
 		"@atlaskit/link": "^3.2.0",
 		"@atlaskit/link-analytics": "^10.0.0",
 		"@atlaskit/link-client-extension": "^5.0.0",
-		"@atlaskit/link-datasource": "^4.14.0",
+		"@atlaskit/link-datasource": "^4.15.0",
 		"@atlaskit/linking-common": "^9.2.0",
 		"@atlaskit/linking-types": "^14.0.0",
 		"@atlaskit/menu": "^8.0.0",
@@ -62,7 +62,7 @@
 		"@atlaskit/primitives": "^14.10.0",
 		"@atlaskit/smart-card": "^40.5.0",
 		"@atlaskit/theme": "^19.0.0",
-		"@atlaskit/tmp-editor-statsig": "^9.12.0",
+		"@atlaskit/tmp-editor-statsig": "^9.14.0",
 		"@atlaskit/tokens": "^5.6.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",

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

@@ -1,199 +0,0 @@
-"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 _analytics = require("@atlaskit/editor-common/analytics");
-var _messages = require("@atlaskit/editor-common/messages");
-var _linkExternal = _interopRequireDefault(require("@atlaskit/icon/core/link-external"));
-var _panelRight = _interopRequireDefault(require("@atlaskit/icon/core/panel-right"));
-var _primitives = require("@atlaskit/primitives");
-var _toolbar = require("../toolbar");
-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
-
-// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
-
-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 linkStyles = (0, _primitives.xcss)({
-  position: 'absolute',
-  left: 'space.025',
-  top: '-1px',
-  display: 'inline-flex',
-  alignItems: 'center',
-  verticalAlign: 'middle',
-  paddingBlock: 'space.025',
-  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_OPEN_TEXT_WIDTH = 28; // Default open text width in English
-
-var HoverLinkOverlay = function HoverLinkOverlay(_ref) {
-  var children = _ref.children,
-    _ref$isVisible = _ref.isVisible,
-    isVisible = _ref$isVisible === void 0 ? false : _ref$isVisible,
-    url = _ref.url,
-    editorAppearance = _ref.editorAppearance,
-    editorAnalyticsApi = _ref.editorAnalyticsApi,
-    view = _ref.view,
-    onClick = _ref.onClick,
-    _ref$showPanelButton = _ref.showPanelButton,
-    showPanelButton = _ref$showPanelButton === void 0 ? false : _ref$showPanelButton;
-  var _useIntl = (0, _reactIntlNext.useIntl)(),
-    formatMessage = _useIntl.formatMessage;
-  var label = showPanelButton ? formatMessage(_messages.cardMessages.panelButtonTitle) : formatMessage(_messages.cardMessages.openButtonTitle);
-  var containerRef = (0, _react.useRef)(null);
-  var hoverLinkButtonRef = (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 openTextWidthRef = (0, _react.useRef)(null);
-  (0, _react.useLayoutEffect)(function () {
-    var _containerRef$current, _hoverLinkButtonRef$c;
-    if (!isVisible || !isHovered) {
-      return;
-    }
-    var cardWidth = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.offsetWidth;
-    var openButtonWidth = (_hoverLinkButtonRef$c = hoverLinkButtonRef.current) === null || _hoverLinkButtonRef$c === void 0 ? void 0 : _hoverLinkButtonRef$c.offsetWidth;
-
-    // Get the hidden text width
-    if (!openTextWidthRef.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';
-        openTextWidthRef.current = hiddenText.offsetWidth;
-
-        // Reset the hiddenText's display property
-        hiddenText.style.display = 'none';
-        hiddenText.style.visibility = 'inherit';
-      } else {
-        openTextWidthRef.current = DEFAULT_OPEN_TEXT_WIDTH;
-      }
-    }
-    if (!cardWidth || !openButtonWidth) {
-      return;
-    }
-    var openTextWidth = openTextWidthRef.current || DEFAULT_OPEN_TEXT_WIDTH;
-    var canShowLabel = cardWidth - openTextWidth > MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY + ICON_WIDTH;
-    setShowLabel(canShowLabel);
-  }, [isVisible, isHovered]);
-  var handleOverlayChange = function handleOverlayChange(isHovered) {
-    setHovered(isHovered);
-  };
-  var sendVisitLinkAnalytics = function sendVisitLinkAnalytics(inputMethod) {
-    if (editorAnalyticsApi && view) {
-      (0, _toolbar.visitCardLinkAnalytics)(editorAnalyticsApi, inputMethod)(view.state, view.dispatch);
-    }
-  };
-  var handleDoubleClick = function handleDoubleClick() {
-    if (!showPanelButton) {
-      sendVisitLinkAnalytics(_analytics.INPUT_METHOD.DOUBLE_CLICK);
-
-      // Double click opens the link in a new tab
-      window.open(url, '_blank');
-    }
-  };
-  var handleClick = function handleClick(event) {
-    if (showPanelButton && onClick) {
-      onClick(event);
-    } else {
-      sendVisitLinkAnalytics(_analytics.INPUT_METHOD.BUTTON);
-    }
-  };
-  return (
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    (0, _react2.jsx)("span", {
-      ref: containerRef,
-      css: containerStyles,
-      onDoubleClick: handleDoubleClick,
-      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.Anchor, {
-      ref: hoverLinkButtonRef,
-      xcss: linkStyles,
-      href: url,
-      target: "_blank",
-      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"
-    }, showPanelButton ? (0, _react2.jsx)(_panelRight.default, {
-      label: ""
-    }) : (0, _react2.jsx)(_linkExternal.default, {
-      label: ""
-    })), showLabel && (0, _react2.jsx)(_primitives.Text, {
-      size: "small",
-      color: "color.text.subtle",
-      maxLines: 1
-    }, label)))
-  );
-};
-var _default = exports.default = HoverLinkOverlay;

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

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

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

@@ -1,174 +0,0 @@
-/* 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 { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-import { cardMessages } from '@atlaskit/editor-common/messages';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import LinkExternalIcon from '@atlaskit/icon/core/link-external';
-import PanelRightIcon from '@atlaskit/icon/core/panel-right';
-// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
-import { Anchor, Box, Text, xcss } from '@atlaskit/primitives';
-import { visitCardLinkAnalytics } from '../toolbar';
-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 linkStyles = xcss({
-  position: 'absolute',
-  left: 'space.025',
-  top: '-1px',
-  display: 'inline-flex',
-  alignItems: 'center',
-  verticalAlign: 'middle',
-  paddingBlock: 'space.025',
-  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_OPEN_TEXT_WIDTH = 28; // Default open text width in English
-
-const HoverLinkOverlay = ({
-  children,
-  isVisible = false,
-  url,
-  editorAppearance,
-  editorAnalyticsApi,
-  view,
-  onClick,
-  showPanelButton = false
-}) => {
-  const {
-    formatMessage
-  } = useIntl();
-  const label = showPanelButton ? formatMessage(cardMessages.panelButtonTitle) : formatMessage(cardMessages.openButtonTitle);
-  const containerRef = useRef(null);
-  const hoverLinkButtonRef = useRef(null);
-  const hiddenTextRef = useRef(null);
-  const [showLabel, setShowLabel] = useState(true);
-  const [isHovered, setHovered] = useState(false);
-  const openTextWidthRef = useRef(null);
-  useLayoutEffect(() => {
-    var _containerRef$current, _hoverLinkButtonRef$c;
-    if (!isVisible || !isHovered) {
-      return;
-    }
-    const cardWidth = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.offsetWidth;
-    const openButtonWidth = (_hoverLinkButtonRef$c = hoverLinkButtonRef.current) === null || _hoverLinkButtonRef$c === void 0 ? void 0 : _hoverLinkButtonRef$c.offsetWidth;
-
-    // Get the hidden text width
-    if (!openTextWidthRef.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';
-        openTextWidthRef.current = hiddenText.offsetWidth;
-
-        // Reset the hiddenText's display property
-        hiddenText.style.display = 'none';
-        hiddenText.style.visibility = 'inherit';
-      } else {
-        openTextWidthRef.current = DEFAULT_OPEN_TEXT_WIDTH;
-      }
-    }
-    if (!cardWidth || !openButtonWidth) {
-      return;
-    }
-    const openTextWidth = openTextWidthRef.current || DEFAULT_OPEN_TEXT_WIDTH;
-    const canShowLabel = cardWidth - openTextWidth > MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY + ICON_WIDTH;
-    setShowLabel(canShowLabel);
-  }, [isVisible, isHovered]);
-  const handleOverlayChange = isHovered => {
-    setHovered(isHovered);
-  };
-  const sendVisitLinkAnalytics = inputMethod => {
-    if (editorAnalyticsApi && view) {
-      visitCardLinkAnalytics(editorAnalyticsApi, inputMethod)(view.state, view.dispatch);
-    }
-  };
-  const handleDoubleClick = () => {
-    if (!showPanelButton) {
-      sendVisitLinkAnalytics(INPUT_METHOD.DOUBLE_CLICK);
-
-      // Double click opens the link in a new tab
-      window.open(url, '_blank');
-    }
-  };
-  const handleClick = event => {
-    if (showPanelButton && onClick) {
-      onClick(event);
-    } else {
-      sendVisitLinkAnalytics(INPUT_METHOD.BUTTON);
-    }
-  };
-  return (
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    jsx("span", {
-      ref: containerRef,
-      css: containerStyles,
-      onDoubleClick: handleDoubleClick,
-      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(Anchor, {
-      ref: hoverLinkButtonRef,
-      xcss: linkStyles,
-      href: url,
-      target: "_blank",
-      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"
-    }, showPanelButton ? jsx(PanelRightIcon, {
-      label: ""
-    }) : jsx(LinkExternalIcon, {
-      label: ""
-    })), showLabel && jsx(Text, {
-      size: "small",
-      color: "color.text.subtle",
-      maxLines: 1
-    }, label)))
-  );
-};
-export default HoverLinkOverlay;

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

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

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

@@ -1,185 +0,0 @@
-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 { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-import { cardMessages } from '@atlaskit/editor-common/messages';
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import LinkExternalIcon from '@atlaskit/icon/core/link-external';
-import PanelRightIcon from '@atlaskit/icon/core/panel-right';
-// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
-import { Anchor, Box, Text, xcss } from '@atlaskit/primitives';
-import { visitCardLinkAnalytics } from '../toolbar';
-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 linkStyles = xcss({
-  position: 'absolute',
-  left: 'space.025',
-  top: '-1px',
-  display: 'inline-flex',
-  alignItems: 'center',
-  verticalAlign: 'middle',
-  paddingBlock: 'space.025',
-  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_OPEN_TEXT_WIDTH = 28; // Default open text width in English
-
-var HoverLinkOverlay = function HoverLinkOverlay(_ref) {
-  var children = _ref.children,
-    _ref$isVisible = _ref.isVisible,
-    isVisible = _ref$isVisible === void 0 ? false : _ref$isVisible,
-    url = _ref.url,
-    editorAppearance = _ref.editorAppearance,
-    editorAnalyticsApi = _ref.editorAnalyticsApi,
-    view = _ref.view,
-    onClick = _ref.onClick,
-    _ref$showPanelButton = _ref.showPanelButton,
-    showPanelButton = _ref$showPanelButton === void 0 ? false : _ref$showPanelButton;
-  var _useIntl = useIntl(),
-    formatMessage = _useIntl.formatMessage;
-  var label = showPanelButton ? formatMessage(cardMessages.panelButtonTitle) : formatMessage(cardMessages.openButtonTitle);
-  var containerRef = useRef(null);
-  var hoverLinkButtonRef = 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 openTextWidthRef = useRef(null);
-  useLayoutEffect(function () {
-    var _containerRef$current, _hoverLinkButtonRef$c;
-    if (!isVisible || !isHovered) {
-      return;
-    }
-    var cardWidth = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.offsetWidth;
-    var openButtonWidth = (_hoverLinkButtonRef$c = hoverLinkButtonRef.current) === null || _hoverLinkButtonRef$c === void 0 ? void 0 : _hoverLinkButtonRef$c.offsetWidth;
-
-    // Get the hidden text width
-    if (!openTextWidthRef.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';
-        openTextWidthRef.current = hiddenText.offsetWidth;
-
-        // Reset the hiddenText's display property
-        hiddenText.style.display = 'none';
-        hiddenText.style.visibility = 'inherit';
-      } else {
-        openTextWidthRef.current = DEFAULT_OPEN_TEXT_WIDTH;
-      }
-    }
-    if (!cardWidth || !openButtonWidth) {
-      return;
-    }
-    var openTextWidth = openTextWidthRef.current || DEFAULT_OPEN_TEXT_WIDTH;
-    var canShowLabel = cardWidth - openTextWidth > MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY + ICON_WIDTH;
-    setShowLabel(canShowLabel);
-  }, [isVisible, isHovered]);
-  var handleOverlayChange = function handleOverlayChange(isHovered) {
-    setHovered(isHovered);
-  };
-  var sendVisitLinkAnalytics = function sendVisitLinkAnalytics(inputMethod) {
-    if (editorAnalyticsApi && view) {
-      visitCardLinkAnalytics(editorAnalyticsApi, inputMethod)(view.state, view.dispatch);
-    }
-  };
-  var handleDoubleClick = function handleDoubleClick() {
-    if (!showPanelButton) {
-      sendVisitLinkAnalytics(INPUT_METHOD.DOUBLE_CLICK);
-
-      // Double click opens the link in a new tab
-      window.open(url, '_blank');
-    }
-  };
-  var handleClick = function handleClick(event) {
-    if (showPanelButton && onClick) {
-      onClick(event);
-    } else {
-      sendVisitLinkAnalytics(INPUT_METHOD.BUTTON);
-    }
-  };
-  return (
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    jsx("span", {
-      ref: containerRef,
-      css: containerStyles,
-      onDoubleClick: handleDoubleClick,
-      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(Anchor, {
-      ref: hoverLinkButtonRef,
-      xcss: linkStyles,
-      href: url,
-      target: "_blank",
-      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"
-    }, showPanelButton ? jsx(PanelRightIcon, {
-      label: ""
-    }) : jsx(LinkExternalIcon, {
-      label: ""
-    })), showLabel && jsx(Text, {
-      size: "small",
-      color: "color.text.subtle",
-      maxLines: 1
-    }, label)))
-  );
-};
-export default HoverLinkOverlay;

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

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

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

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

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

@@ -1,13 +0,0 @@
-/// <reference types="react" />
-import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import type { EditorAppearance } from '@atlaskit/editor-common/types';
-import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-export type HoverLinkOverlayProps = React.HTMLAttributes<HTMLSpanElement> & {
-    isVisible?: boolean;
-    url: string;
-    editorAppearance?: EditorAppearance;
-    editorAnalyticsApi?: EditorAnalyticsAPI;
-    view?: EditorView;
-    onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
-    showPanelButton?: boolean;
-};

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

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

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

@@ -1,13 +0,0 @@
-/// <reference types="react" />
-import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import type { EditorAppearance } from '@atlaskit/editor-common/types';
-import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-export type HoverLinkOverlayProps = React.HTMLAttributes<HTMLSpanElement> & {
-    isVisible?: boolean;
-    url: string;
-    editorAppearance?: EditorAppearance;
-    editorAnalyticsApi?: EditorAnalyticsAPI;
-    view?: EditorView;
-    onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
-    showPanelButton?: boolean;
-};