@atlaskit/editor-plugin-card 5.3.5 → 5.4.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/editor-plugin-card
 
+## 5.4.0
+
+### Minor Changes
+
+- [#129544](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/129544)
+  [`2c661f18440df`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2c661f18440df) -
+  [ux] Rebranded the term Issue to Work item as part of issue terminology refresh
+
+### Patch Changes
+
+- Updated dependencies
+
+## 5.3.6
+
+### Patch Changes
+
+- [#129581](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/129581)
+  [`28d3a33252273`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/28d3a33252273) -
+  [ux] Update open button on short link
+- Updated dependencies
+
 ## 5.3.5
 
 ### Patch Changes

package/dist/cjs/cardPlugin.js

@@ -13,6 +13,7 @@ var _messages = require("@atlaskit/editor-common/messages");
 var _quickInsert = require("@atlaskit/editor-common/quick-insert");
 var _utils = require("@atlaskit/editor-common/utils");
 var _linkDatasource = require("@atlaskit/link-datasource");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _blockCard = require("./nodeviews/toDOM-fixes/blockCard");
 var _embedCard = require("./nodeviews/toDOM-fixes/embedCard");
 var _inlineCard = require("./nodeviews/toDOM-fixes/inlineCard");
@@ -177,8 +178,8 @@ var cardPlugin = exports.cardPlugin = function cardPlugin(_ref) {
         }
         quickInsertArray.push({
           id: 'datasource',
-          title: formatMessage(_messages.cardMessages.datasourceJiraIssue),
-          description: formatMessage(_messages.cardMessages.datasourceJiraIssueDescription),
+          title: formatMessage((0, _platformFeatureFlags.fg)('confluence-issue-terminology-refresh') ? _messages.cardMessages.datasourceJiraIssueIssueTermRefresh : _messages.cardMessages.datasourceJiraIssue),
+          description: formatMessage((0, _platformFeatureFlags.fg)('confluence-issue-terminology-refresh') ? _messages.cardMessages.datasourceJiraIssueDescriptionIssueTermRefresh : _messages.cardMessages.datasourceJiraIssueDescription),
           isDisabledOffline: true,
           categories: ['external-content', 'development'],
           keywords: ['jira'],

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

@@ -102,7 +102,7 @@ var AwarenessWrapper = exports.AwarenessWrapper = function AwarenessWrapper(_ref
   }, [shouldShowLinkOverlay, children, isSelected, isResolvedViewRendered, isInserted, isHovered, url, handleOverlayChange]);
   var cardWithOpenButtonOverlay = (0, _react.useMemo)(function () {
     return (0, _react2.jsx)(_OpenButtonOverlay.default, {
-      isVisible: isHovered,
+      isVisible: isResolvedViewRendered && isHovered,
       onMouseEnter: function onMouseEnter() {
         return handleOverlayChange(true);
       },
@@ -111,7 +111,7 @@ var AwarenessWrapper = exports.AwarenessWrapper = function AwarenessWrapper(_ref
       },
       url: url
     }, children);
-  }, [children, isHovered, url, handleOverlayChange]);
+  }, [children, isHovered, url, handleOverlayChange, isResolvedViewRendered]);
   return (0, _react.useMemo)(function () {
     var _cardContext$value;
     return (

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

@@ -1,13 +1,15 @@
 "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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _new = require("@atlaskit/button/new");
 var _linkExternal = _interopRequireDefault(require("@atlaskit/icon/core/link-external"));
@@ -20,6 +22,8 @@ var _excluded = ["children", "isVisible", "url"];
  */
 // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var containerStyles = (0, _react2.css)({
   position: 'relative'
 });
@@ -39,9 +43,10 @@ var overlayStyles = (0, _react2.css)({
   zIndex: 2,
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   a: {
-    padding: "var(--ds-border-width, 1px)".concat(" ", "var(--ds-space-050, 4px)", " 0")
+    padding: "var(--ds-border-width, 1px)".concat(" ", "var(--ds-space-050, 4px)", " 0 ", "var(--ds-space-025, 2px)")
   }
 });
+var MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY = 45;
 var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
   var children = _ref.children,
     _ref$isVisible = _ref.isVisible,
@@ -50,17 +55,36 @@ var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   // TODO: ED-26961 - add translation
   var label = 'Open';
+  var containerRef = (0, _react.useRef)(null);
+  var openButtonRef = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(true),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    showLabel = _useState2[0],
+    setShowLabel = _useState2[1];
   var handleDoubleClick = function handleDoubleClick() {
     // Double click opens the link in a new tab
     window.open(url, '_blank');
   };
+  (0, _react.useLayoutEffect)(function () {
+    var _containerRef$current, _openButtonRef$curren;
+    if (!isVisible) {
+      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 canShowLabel = cardWidth && openButtonWidth ? cardWidth - openButtonWidth > MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY : true;
+    setShowLabel(canShowLabel);
+  }, [isVisible]);
   return (
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading, jsx-a11y/no-static-element-interactions
-    (0, _react2.jsx)("span", (0, _extends2.default)({}, props, {
+    (0, _react2.jsx)("span", (0, _extends2.default)({
+      ref: containerRef
+    }, props, {
       css: containerStyles,
       onDoubleClick: handleDoubleClick
     }), children, isVisible && (0, _react2.jsx)("div", {
+      ref: openButtonRef,
       css: [overlayStyles]
     }, (0, _react2.jsx)(_new.LinkButton, {
       spacing: "compact",
@@ -68,7 +92,7 @@ var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
       target: "_blank",
       iconBefore: _linkExternal.default,
       appearance: "default"
-    }, label)))
+    }, showLabel ? label : '')))
   );
 };
 var _default = exports.default = OpenButtonOverlay;

package/dist/es2019/cardPlugin.js

@@ -3,6 +3,7 @@ import { cardMessages as messages } from '@atlaskit/editor-common/messages';
 import { IconDatasourceAssetsObjects, IconDatasourceConfluenceSearch, IconDatasourceJiraIssue } from '@atlaskit/editor-common/quick-insert';
 import { canRenderDatasource } from '@atlaskit/editor-common/utils';
 import { ASSETS_LIST_OF_LINKS_DATASOURCE_ID, CONFLUENCE_SEARCH_DATASOURCE_ID } from '@atlaskit/link-datasource';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { blockCardSpecWithFixedToDOM } from './nodeviews/toDOM-fixes/blockCard';
 import { embedCardSpecWithFixedToDOM } from './nodeviews/toDOM-fixes/embedCard';
 import { inlineCardSpecWithFixedToDOM } from './nodeviews/toDOM-fixes/inlineCard';
@@ -156,8 +157,8 @@ export const cardPlugin = ({
         }
         quickInsertArray.push({
           id: 'datasource',
-          title: formatMessage(messages.datasourceJiraIssue),
-          description: formatMessage(messages.datasourceJiraIssueDescription),
+          title: formatMessage(fg('confluence-issue-terminology-refresh') ? messages.datasourceJiraIssueIssueTermRefresh : messages.datasourceJiraIssue),
+          description: formatMessage(fg('confluence-issue-terminology-refresh') ? messages.datasourceJiraIssueDescriptionIssueTermRefresh : messages.datasourceJiraIssueDescription),
           isDisabledOffline: true,
           categories: ['external-content', 'development'],
           keywords: ['jira'],

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

@@ -88,12 +88,12 @@ export const AwarenessWrapper = ({
   }, [shouldShowLinkOverlay, children, isSelected, isResolvedViewRendered, isInserted, isHovered, url, handleOverlayChange]);
   const cardWithOpenButtonOverlay = useMemo(() => {
     return jsx(OpenButtonOverlay, {
-      isVisible: isHovered,
+      isVisible: isResolvedViewRendered && isHovered,
       onMouseEnter: () => handleOverlayChange(true),
       onMouseLeave: () => handleOverlayChange(false),
       url: url
     }, children);
-  }, [children, isHovered, url, handleOverlayChange]);
+  }, [children, isHovered, url, handleOverlayChange, isResolvedViewRendered]);
   return useMemo(() => {
     var _cardContext$value;
     return (

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

@@ -5,7 +5,7 @@ import _extends from "@babel/runtime/helpers/extends";
  * @jsxRuntime classic
  * @jsx jsx
  */
-import React from 'react';
+import React, { useLayoutEffect, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
@@ -30,9 +30,10 @@ const overlayStyles = css({
   zIndex: 2,
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   a: {
-    padding: `${"var(--ds-border-width, 1px)"} ${"var(--ds-space-050, 4px)"} 0`
+    padding: `${"var(--ds-border-width, 1px)"} ${"var(--ds-space-050, 4px)"} 0 ${"var(--ds-space-025, 2px)"}`
   }
 });
+const MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY = 45;
 const OpenButtonOverlay = ({
   children,
   isVisible = false,
@@ -41,17 +42,33 @@ const OpenButtonOverlay = ({
 }) => {
   // TODO: ED-26961 - add translation
   const label = 'Open';
+  const containerRef = useRef(null);
+  const openButtonRef = useRef(null);
+  const [showLabel, setShowLabel] = useState(true);
   const handleDoubleClick = () => {
     // Double click opens the link in a new tab
     window.open(url, '_blank');
   };
+  useLayoutEffect(() => {
+    var _containerRef$current, _openButtonRef$curren;
+    if (!isVisible) {
+      return;
+    }
+    const cardWidth = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.offsetWidth;
+    const openButtonWidth = (_openButtonRef$curren = openButtonRef.current) === null || _openButtonRef$curren === void 0 ? void 0 : _openButtonRef$curren.offsetWidth;
+    const canShowLabel = cardWidth && openButtonWidth ? cardWidth - openButtonWidth > MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY : true;
+    setShowLabel(canShowLabel);
+  }, [isVisible]);
   return (
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading, jsx-a11y/no-static-element-interactions
-    jsx("span", _extends({}, props, {
+    jsx("span", _extends({
+      ref: containerRef
+    }, props, {
       css: containerStyles,
       onDoubleClick: handleDoubleClick
     }), children, isVisible && jsx("div", {
+      ref: openButtonRef,
       css: [overlayStyles]
     }, jsx(LinkButton, {
       spacing: "compact",
@@ -59,7 +76,7 @@ const OpenButtonOverlay = ({
       target: "_blank",
       iconBefore: LinkExternalIcon,
       appearance: "default"
-    }, label)))
+    }, showLabel ? label : '')))
   );
 };
 export default OpenButtonOverlay;

package/dist/esm/cardPlugin.js

@@ -8,6 +8,7 @@ import { cardMessages as messages } from '@atlaskit/editor-common/messages';
 import { IconDatasourceAssetsObjects, IconDatasourceConfluenceSearch, IconDatasourceJiraIssue } from '@atlaskit/editor-common/quick-insert';
 import { canRenderDatasource } from '@atlaskit/editor-common/utils';
 import { ASSETS_LIST_OF_LINKS_DATASOURCE_ID, CONFLUENCE_SEARCH_DATASOURCE_ID } from '@atlaskit/link-datasource';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { blockCardSpecWithFixedToDOM } from './nodeviews/toDOM-fixes/blockCard';
 import { embedCardSpecWithFixedToDOM } from './nodeviews/toDOM-fixes/embedCard';
 import { inlineCardSpecWithFixedToDOM } from './nodeviews/toDOM-fixes/inlineCard';
@@ -171,8 +172,8 @@ export var cardPlugin = function cardPlugin(_ref) {
         }
         quickInsertArray.push({
           id: 'datasource',
-          title: formatMessage(messages.datasourceJiraIssue),
-          description: formatMessage(messages.datasourceJiraIssueDescription),
+          title: formatMessage(fg('confluence-issue-terminology-refresh') ? messages.datasourceJiraIssueIssueTermRefresh : messages.datasourceJiraIssue),
+          description: formatMessage(fg('confluence-issue-terminology-refresh') ? messages.datasourceJiraIssueDescriptionIssueTermRefresh : messages.datasourceJiraIssueDescription),
           isDisabledOffline: true,
           categories: ['external-content', 'development'],
           keywords: ['jira'],

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

@@ -94,7 +94,7 @@ export var AwarenessWrapper = function AwarenessWrapper(_ref) {
   }, [shouldShowLinkOverlay, children, isSelected, isResolvedViewRendered, isInserted, isHovered, url, handleOverlayChange]);
   var cardWithOpenButtonOverlay = useMemo(function () {
     return jsx(OpenButtonOverlay, {
-      isVisible: isHovered,
+      isVisible: isResolvedViewRendered && isHovered,
       onMouseEnter: function onMouseEnter() {
         return handleOverlayChange(true);
       },
@@ -103,7 +103,7 @@ export var AwarenessWrapper = function AwarenessWrapper(_ref) {
       },
       url: url
     }, children);
-  }, [children, isHovered, url, handleOverlayChange]);
+  }, [children, isHovered, url, handleOverlayChange, isResolvedViewRendered]);
   return useMemo(function () {
     var _cardContext$value;
     return (

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

@@ -1,4 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "isVisible", "url"];
 /* eslint-disable @atlaskit/design-system/no-nested-styles */
@@ -7,7 +8,7 @@ var _excluded = ["children", "isVisible", "url"];
  * @jsxRuntime classic
  * @jsx jsx
  */
-import React from 'react';
+import React, { useLayoutEffect, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
@@ -32,9 +33,10 @@ var overlayStyles = css({
   zIndex: 2,
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   a: {
-    padding: "var(--ds-border-width, 1px)".concat(" ", "var(--ds-space-050, 4px)", " 0")
+    padding: "var(--ds-border-width, 1px)".concat(" ", "var(--ds-space-050, 4px)", " 0 ", "var(--ds-space-025, 2px)")
   }
 });
+var MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY = 45;
 var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
   var children = _ref.children,
     _ref$isVisible = _ref.isVisible,
@@ -43,17 +45,36 @@ var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
     props = _objectWithoutProperties(_ref, _excluded);
   // TODO: ED-26961 - add translation
   var label = 'Open';
+  var containerRef = useRef(null);
+  var openButtonRef = useRef(null);
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    showLabel = _useState2[0],
+    setShowLabel = _useState2[1];
   var handleDoubleClick = function handleDoubleClick() {
     // Double click opens the link in a new tab
     window.open(url, '_blank');
   };
+  useLayoutEffect(function () {
+    var _containerRef$current, _openButtonRef$curren;
+    if (!isVisible) {
+      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 canShowLabel = cardWidth && openButtonWidth ? cardWidth - openButtonWidth > MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY : true;
+    setShowLabel(canShowLabel);
+  }, [isVisible]);
   return (
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading, jsx-a11y/no-static-element-interactions
-    jsx("span", _extends({}, props, {
+    jsx("span", _extends({
+      ref: containerRef
+    }, props, {
       css: containerStyles,
       onDoubleClick: handleDoubleClick
     }), children, isVisible && jsx("div", {
+      ref: openButtonRef,
       css: [overlayStyles]
     }, jsx(LinkButton, {
       spacing: "compact",
@@ -61,7 +82,7 @@ var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
       target: "_blank",
       iconBefore: LinkExternalIcon,
       appearance: "default"
-    }, label)))
+    }, showLabel ? label : '')))
   );
 };
 export default OpenButtonOverlay;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-card",
-	"version": "5.3.5",
+	"version": "5.4.0",
 	"description": "Card plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -37,7 +37,7 @@
 		"@atlaskit/analytics-next": "^11.0.0",
 		"@atlaskit/button": "^21.1.0",
 		"@atlaskit/custom-steps": "^0.11.0",
-		"@atlaskit/editor-common": "^102.10.0",
+		"@atlaskit/editor-common": "^102.12.0",
 		"@atlaskit/editor-plugin-analytics": "^2.2.0",
 		"@atlaskit/editor-plugin-base": "^2.3.0",
 		"@atlaskit/editor-plugin-connectivity": "^2.0.0",
@@ -45,7 +45,7 @@
 		"@atlaskit/editor-plugin-editor-disabled": "^2.0.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^3.0.0",
 		"@atlaskit/editor-plugin-feature-flags": "^1.3.0",
-		"@atlaskit/editor-plugin-floating-toolbar": "^3.2.0",
+		"@atlaskit/editor-plugin-floating-toolbar": "^3.3.0",
 		"@atlaskit/editor-plugin-grid": "^2.0.0",
 		"@atlaskit/editor-plugin-width": "^3.0.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
@@ -54,12 +54,12 @@
 		"@atlaskit/icon": "^25.0.0",
 		"@atlaskit/link-analytics": "^9.1.0",
 		"@atlaskit/link-client-extension": "^4.0.0",
-		"@atlaskit/link-datasource": "^4.0.0",
+		"@atlaskit/link-datasource": "^4.1.0",
 		"@atlaskit/linking-common": "^8.0.0",
 		"@atlaskit/linking-types": "^9.6.0",
 		"@atlaskit/menu": "^3.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/primitives": "^14.1.0",
+		"@atlaskit/primitives": "^14.2.0",
 		"@atlaskit/smart-card": "^36.0.0",
 		"@atlaskit/theme": "^18.0.0",
 		"@atlaskit/tmp-editor-statsig": "^4.1.0",
@@ -142,6 +142,9 @@
 		},
 		"platform_editor_lego__inline_node_virtualization": {
 			"type": "boolean"
+		},
+		"confluence-issue-terminology-refresh": {
+			"type": "boolean"
 		}
 	},
 	"stricter": {