@atlaskit/editor-plugin-card 7.1.0 → 7.2.0

package/dist/esm/ui/{OpenButtonOverlay → HoverLinkOverlay}/index.js

@@ -12,6 +12,7 @@ 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';
@@ -58,19 +59,22 @@ 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 OpenButtonOverlay = function OpenButtonOverlay(_ref) {
+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;
+    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 = formatMessage(cardMessages.openButtonTitle);
+  var label = showPanelButton ? formatMessage(cardMessages.panelButtonTitle) : formatMessage(cardMessages.openButtonTitle);
   var containerRef = useRef(null);
-  var openButtonRef = useRef(null);
+  var hoverLinkButtonRef = useRef(null);
   var hiddenTextRef = useRef(null);
   var _useState = useState(true),
     _useState2 = _slicedToArray(_useState, 2),
@@ -82,12 +86,12 @@ var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
     setHovered = _useState4[1];
   var openTextWidthRef = useRef(null);
   useLayoutEffect(function () {
-    var _containerRef$current, _openButtonRef$curren;
+    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 = (_openButtonRef$curren = openButtonRef.current) === null || _openButtonRef$curren === void 0 ? void 0 : _openButtonRef$curren.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) {
@@ -122,13 +126,19 @@ var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
     }
   };
   var handleDoubleClick = function handleDoubleClick() {
-    sendVisitLinkAnalytics(INPUT_METHOD.DOUBLE_CLICK);
+    if (!showPanelButton) {
+      sendVisitLinkAnalytics(INPUT_METHOD.DOUBLE_CLICK);
 
-    // Double click opens the link in a new tab
-    window.open(url, '_blank');
+      // Double click opens the link in a new tab
+      window.open(url, '_blank');
+    }
   };
-  var handleClick = function handleClick() {
-    sendVisitLinkAnalytics(INPUT_METHOD.BUTTON);
+  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
@@ -150,7 +160,7 @@ var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
       size: "small",
       maxLines: 1
     }, label)), isHovered && jsx(Anchor, {
-      ref: openButtonRef,
+      ref: hoverLinkButtonRef,
       xcss: linkStyles,
       href: url,
       target: "_blank",
@@ -161,7 +171,9 @@ var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
     }, jsx(Box, {
       xcss: iconWrapperStyles,
       "data-inlinecard-button-overlay": "icon-wrapper-line-height"
-    }, jsx(LinkExternalIcon, {
+    }, showPanelButton ? jsx(PanelRightIcon, {
+      label: ""
+    }) : jsx(LinkExternalIcon, {
       label: ""
     })), showLabel && jsx(Text, {
       size: "small",
@@ -170,4 +182,4 @@ var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
     }, label)))
   );
 };
-export default OpenButtonOverlay;
+export default HoverLinkOverlay;

package/dist/types/nodeviews/inlineCard.d.ts

@@ -5,7 +5,7 @@ import type { Decoration, EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { SmartCardProps } from './genericCard';
 import { type InlineCardWithAwarenessProps } from './inlineCardWithAwareness';
 export declare const InlineCard: React.MemoExoticComponent<({ node, cardContext, actionOptions, useAlternativePreloader, view, getPos, onClick: propsOnClick, onResolve: onRes, isHovered, showHoverPreview, hoverPreviewOptions, isPageSSRed, pluginInjectionApi, }: SmartCardProps) => React.JSX.Element | null>;
-export type InlineCardNodeViewProps = Pick<SmartCardProps, 'useAlternativePreloader' | 'actionOptions' | 'allowEmbeds' | 'allowBlockCards' | 'enableInlineUpgradeFeatures' | 'pluginInjectionApi' | 'onClickCallback' | '__livePage' | 'isPageSSRed' | 'CompetitorPrompt'>;
+export type InlineCardNodeViewProps = Pick<SmartCardProps, 'useAlternativePreloader' | 'actionOptions' | 'allowEmbeds' | 'allowBlockCards' | 'enableInlineUpgradeFeatures' | 'pluginInjectionApi' | 'onClickCallback' | 'isPageSSRed' | 'CompetitorPrompt'>;
 /**
  *
  * @param props

package/dist/types/pm-plugins/main.d.ts

@@ -2,6 +2,4 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { ExtractInjectionAPI, PMPluginFactoryParams } from '@atlaskit/editor-common/types';
 import type { cardPlugin } from '../index';
 import type { CardPluginOptions, CardPluginState } from '../types';
-export declare const ALLOW_EVENTS_CLASSNAME = "card-plugin-element-allow-events";
-export declare const stopEvent: (event: Event) => boolean;
 export declare const createPlugin: (options: CardPluginOptions, pluginInjectionApi: ExtractInjectionAPI<typeof cardPlugin> | undefined) => (pmPluginFactoryParams: PMPluginFactoryParams) => SafePlugin<CardPluginState>;

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

@@ -0,0 +1,9 @@
+/**
+ * @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/{OpenButtonOverlay → HoverLinkOverlay}/types.d.ts

@@ -2,10 +2,12 @@
 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 OpenButtonOverlayProps = React.HTMLAttributes<HTMLSpanElement> & {
+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/ui/datasourceErrorBoundary.d.ts

@@ -20,5 +20,5 @@ export declare class DatasourceErrorBoundary extends React.Component<DatasourceE
         error: Error | APIError;
     };
     componentDidCatch(error: Error | APIError): void;
-    render(): string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
+    render(): string | number | boolean | React.JSX.Element | Iterable<React.ReactNode> | null | undefined;
 }

package/dist/types-ts4.5/nodeviews/inlineCard.d.ts

@@ -5,7 +5,7 @@ import type { Decoration, EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { SmartCardProps } from './genericCard';
 import { type InlineCardWithAwarenessProps } from './inlineCardWithAwareness';
 export declare const InlineCard: React.MemoExoticComponent<({ node, cardContext, actionOptions, useAlternativePreloader, view, getPos, onClick: propsOnClick, onResolve: onRes, isHovered, showHoverPreview, hoverPreviewOptions, isPageSSRed, pluginInjectionApi, }: SmartCardProps) => React.JSX.Element | null>;
-export type InlineCardNodeViewProps = Pick<SmartCardProps, 'useAlternativePreloader' | 'actionOptions' | 'allowEmbeds' | 'allowBlockCards' | 'enableInlineUpgradeFeatures' | 'pluginInjectionApi' | 'onClickCallback' | '__livePage' | 'isPageSSRed' | 'CompetitorPrompt'>;
+export type InlineCardNodeViewProps = Pick<SmartCardProps, 'useAlternativePreloader' | 'actionOptions' | 'allowEmbeds' | 'allowBlockCards' | 'enableInlineUpgradeFeatures' | 'pluginInjectionApi' | 'onClickCallback' | 'isPageSSRed' | 'CompetitorPrompt'>;
 /**
  *
  * @param props

package/dist/types-ts4.5/pm-plugins/main.d.ts

@@ -2,6 +2,4 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { ExtractInjectionAPI, PMPluginFactoryParams } from '@atlaskit/editor-common/types';
 import type { cardPlugin } from '../index';
 import type { CardPluginOptions, CardPluginState } from '../types';
-export declare const ALLOW_EVENTS_CLASSNAME = "card-plugin-element-allow-events";
-export declare const stopEvent: (event: Event) => boolean;
 export declare const createPlugin: (options: CardPluginOptions, pluginInjectionApi: ExtractInjectionAPI<typeof cardPlugin> | undefined) => (pmPluginFactoryParams: PMPluginFactoryParams) => SafePlugin<CardPluginState>;

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

@@ -0,0 +1,9 @@
+/**
+ * @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/{OpenButtonOverlay → HoverLinkOverlay}/types.d.ts

@@ -2,10 +2,12 @@
 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 OpenButtonOverlayProps = React.HTMLAttributes<HTMLSpanElement> & {
+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/datasourceErrorBoundary.d.ts

@@ -20,5 +20,5 @@ export declare class DatasourceErrorBoundary extends React.Component<DatasourceE
         error: Error | APIError;
     };
     componentDidCatch(error: Error | APIError): void;
-    render(): string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
+    render(): string | number | boolean | React.JSX.Element | Iterable<React.ReactNode> | null | undefined;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-card",
-	"version": "7.1.0",
+	"version": "7.2.0",
 	"description": "Card plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -49,7 +49,7 @@
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.5.0",
 		"@atlaskit/frontend-utilities": "^3.1.0",
-		"@atlaskit/icon": "^27.5.0",
+		"@atlaskit/icon": "^27.6.0",
 		"@atlaskit/link": "^3.2.0",
 		"@atlaskit/link-analytics": "^10.0.0",
 		"@atlaskit/link-client-extension": "^5.0.0",
@@ -59,9 +59,9 @@
 		"@atlaskit/menu": "^8.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^14.10.0",
-		"@atlaskit/smart-card": "^40.4.0",
+		"@atlaskit/smart-card": "^40.5.0",
 		"@atlaskit/theme": "^19.0.0",
-		"@atlaskit/tmp-editor-statsig": "^9.9.0",
+		"@atlaskit/tmp-editor-statsig": "^9.10.0",
 		"@atlaskit/tokens": "^5.6.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -71,7 +71,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^107.9.0",
+		"@atlaskit/editor-common": "^107.11.0",
 		"@atlaskit/link-provider": "^3.4.0",
 		"react": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
@@ -116,9 +116,6 @@
 		"editor_inline_comments_paste_insert_nodes": {
 			"type": "boolean"
 		},
-		"linking_platform_smart_links_in_live_pages": {
-			"type": "boolean"
-		},
 		"confluence-issue-terminology-refresh": {
 			"type": "boolean"
 		},

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

@@ -1,171 +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 _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
-
-// 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 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

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

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

@@ -1,148 +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 { 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';
-// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
-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/esm/ui/OpenButtonOverlay/types.js

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