@atlaskit/editor-plugin-card 5.3.5 → 5.3.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/dist/cjs/ui/AwarenessWrapper/index.js +2 -2
  3. package/dist/cjs/ui/OpenButtonOverlay/index.js +28 -4
  4. package/dist/es2019/ui/AwarenessWrapper/index.js +2 -2
  5. package/dist/es2019/ui/OpenButtonOverlay/index.js +21 -4
  6. package/dist/esm/ui/AwarenessWrapper/index.js +2 -2
  7. package/dist/esm/ui/OpenButtonOverlay/index.js +25 -4
  8. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,14 @@
1
1
  # @atlaskit/editor-plugin-card
2
2
 
3
+ ## 5.3.6
4
+
5
+ ### Patch Changes
6
+
7
+ - [#129581](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/129581)
8
+ [`28d3a33252273`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/28d3a33252273) -
9
+ [ux] Update open button on short link
10
+ - Updated dependencies
11
+
3
12
  ## 5.3.5
4
13
 
5
14
  ### Patch Changes
package/dist/cjs/ui/AwarenessWrapper/index.js CHANGED
@@ -102,7 +102,7 @@ var AwarenessWrapper = exports.AwarenessWrapper = function AwarenessWrapper(_ref
102
102
  }, [shouldShowLinkOverlay, children, isSelected, isResolvedViewRendered, isInserted, isHovered, url, handleOverlayChange]);
103
103
  var cardWithOpenButtonOverlay = (0, _react.useMemo)(function () {
104
104
  return (0, _react2.jsx)(_OpenButtonOverlay.default, {
105
- isVisible: isHovered,
105
+ isVisible: isResolvedViewRendered && isHovered,
106
106
  onMouseEnter: function onMouseEnter() {
107
107
  return handleOverlayChange(true);
108
108
  },
@@ -111,7 +111,7 @@ var AwarenessWrapper = exports.AwarenessWrapper = function AwarenessWrapper(_ref
111
111
  },
112
112
  url: url
113
113
  }, children);
114
- }, [children, isHovered, url, handleOverlayChange]);
114
+ }, [children, isHovered, url, handleOverlayChange, isResolvedViewRendered]);
115
115
  return (0, _react.useMemo)(function () {
116
116
  var _cardContext$value;
117
117
  return (
package/dist/cjs/ui/OpenButtonOverlay/index.js CHANGED
@@ -1,13 +1,15 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ var _typeof = require("@babel/runtime/helpers/typeof");
4
5
  Object.defineProperty(exports, "__esModule", {
5
6
  value: true
6
7
  });
7
8
  exports.default = void 0;
8
9
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
10
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
9
11
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
10
- var _react = _interopRequireDefault(require("react"));
12
+ var _react = _interopRequireWildcard(require("react"));
11
13
  var _react2 = require("@emotion/react");
12
14
  var _new = require("@atlaskit/button/new");
13
15
  var _linkExternal = _interopRequireDefault(require("@atlaskit/icon/core/link-external"));
@@ -20,6 +22,8 @@ var _excluded = ["children", "isVisible", "url"];
20
22
  */
21
23
  // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
22
24
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
25
+ 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); }
26
+ 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; }
23
27
  var containerStyles = (0, _react2.css)({
24
28
  position: 'relative'
25
29
  });
@@ -39,9 +43,10 @@ var overlayStyles = (0, _react2.css)({
39
43
  zIndex: 2,
40
44
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
41
45
  a: {
42
- padding: "var(--ds-border-width, 1px)".concat(" ", "var(--ds-space-050, 4px)", " 0")
46
+ padding: "var(--ds-border-width, 1px)".concat(" ", "var(--ds-space-050, 4px)", " 0 ", "var(--ds-space-025, 2px)")
43
47
  }
44
48
  });
49
+ var MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY = 45;
45
50
  var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
46
51
  var children = _ref.children,
47
52
  _ref$isVisible = _ref.isVisible,
@@ -50,17 +55,36 @@ var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
50
55
  props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
51
56
  // TODO: ED-26961 - add translation
52
57
  var label = 'Open';
58
+ var containerRef = (0, _react.useRef)(null);
59
+ var openButtonRef = (0, _react.useRef)(null);
60
+ var _useState = (0, _react.useState)(true),
61
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
62
+ showLabel = _useState2[0],
63
+ setShowLabel = _useState2[1];
53
64
  var handleDoubleClick = function handleDoubleClick() {
54
65
  // Double click opens the link in a new tab
55
66
  window.open(url, '_blank');
56
67
  };
68
+ (0, _react.useLayoutEffect)(function () {
69
+ var _containerRef$current, _openButtonRef$curren;
70
+ if (!isVisible) {
71
+ return;
72
+ }
73
+ var cardWidth = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.offsetWidth;
74
+ var openButtonWidth = (_openButtonRef$curren = openButtonRef.current) === null || _openButtonRef$curren === void 0 ? void 0 : _openButtonRef$curren.offsetWidth;
75
+ var canShowLabel = cardWidth && openButtonWidth ? cardWidth - openButtonWidth > MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY : true;
76
+ setShowLabel(canShowLabel);
77
+ }, [isVisible]);
57
78
  return (
58
79
  // Ignored via go/ees005
59
80
  // eslint-disable-next-line react/jsx-props-no-spreading, jsx-a11y/no-static-element-interactions
60
- (0, _react2.jsx)("span", (0, _extends2.default)({}, props, {
81
+ (0, _react2.jsx)("span", (0, _extends2.default)({
82
+ ref: containerRef
83
+ }, props, {
61
84
  css: containerStyles,
62
85
  onDoubleClick: handleDoubleClick
63
86
  }), children, isVisible && (0, _react2.jsx)("div", {
87
+ ref: openButtonRef,
64
88
  css: [overlayStyles]
65
89
  }, (0, _react2.jsx)(_new.LinkButton, {
66
90
  spacing: "compact",
@@ -68,7 +92,7 @@ var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
68
92
  target: "_blank",
69
93
  iconBefore: _linkExternal.default,
70
94
  appearance: "default"
71
- }, label)))
95
+ }, showLabel ? label : '')))
72
96
  );
73
97
  };
74
98
  var _default = exports.default = OpenButtonOverlay;
package/dist/es2019/ui/AwarenessWrapper/index.js CHANGED
@@ -88,12 +88,12 @@ export const AwarenessWrapper = ({
88
88
  }, [shouldShowLinkOverlay, children, isSelected, isResolvedViewRendered, isInserted, isHovered, url, handleOverlayChange]);
89
89
  const cardWithOpenButtonOverlay = useMemo(() => {
90
90
  return jsx(OpenButtonOverlay, {
91
- isVisible: isHovered,
91
+ isVisible: isResolvedViewRendered && isHovered,
92
92
  onMouseEnter: () => handleOverlayChange(true),
93
93
  onMouseLeave: () => handleOverlayChange(false),
94
94
  url: url
95
95
  }, children);
96
- }, [children, isHovered, url, handleOverlayChange]);
96
+ }, [children, isHovered, url, handleOverlayChange, isResolvedViewRendered]);
97
97
  return useMemo(() => {
98
98
  var _cardContext$value;
99
99
  return (
package/dist/es2019/ui/OpenButtonOverlay/index.js CHANGED
@@ -5,7 +5,7 @@ import _extends from "@babel/runtime/helpers/extends";
5
5
  * @jsxRuntime classic
6
6
  * @jsx jsx
7
7
  */
8
- import React from 'react';
8
+ import React, { useLayoutEffect, useRef, useState } from 'react';
9
9
  import { css, jsx } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
10
10
 
11
11
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
@@ -30,9 +30,10 @@ const overlayStyles = css({
30
30
  zIndex: 2,
31
31
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
32
32
  a: {
33
- padding: `${"var(--ds-border-width, 1px)"} ${"var(--ds-space-050, 4px)"} 0`
33
+ padding: `${"var(--ds-border-width, 1px)"} ${"var(--ds-space-050, 4px)"} 0 ${"var(--ds-space-025, 2px)"}`
34
34
  }
35
35
  });
36
+ const MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY = 45;
36
37
  const OpenButtonOverlay = ({
37
38
  children,
38
39
  isVisible = false,
@@ -41,17 +42,33 @@ const OpenButtonOverlay = ({
41
42
  }) => {
42
43
  // TODO: ED-26961 - add translation
43
44
  const label = 'Open';
45
+ const containerRef = useRef(null);
46
+ const openButtonRef = useRef(null);
47
+ const [showLabel, setShowLabel] = useState(true);
44
48
  const handleDoubleClick = () => {
45
49
  // Double click opens the link in a new tab
46
50
  window.open(url, '_blank');
47
51
  };
52
+ useLayoutEffect(() => {
53
+ var _containerRef$current, _openButtonRef$curren;
54
+ if (!isVisible) {
55
+ return;
56
+ }
57
+ const cardWidth = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.offsetWidth;
58
+ const openButtonWidth = (_openButtonRef$curren = openButtonRef.current) === null || _openButtonRef$curren === void 0 ? void 0 : _openButtonRef$curren.offsetWidth;
59
+ const canShowLabel = cardWidth && openButtonWidth ? cardWidth - openButtonWidth > MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY : true;
60
+ setShowLabel(canShowLabel);
61
+ }, [isVisible]);
48
62
  return (
49
63
  // Ignored via go/ees005
50
64
  // eslint-disable-next-line react/jsx-props-no-spreading, jsx-a11y/no-static-element-interactions
51
- jsx("span", _extends({}, props, {
65
+ jsx("span", _extends({
66
+ ref: containerRef
67
+ }, props, {
52
68
  css: containerStyles,
53
69
  onDoubleClick: handleDoubleClick
54
70
  }), children, isVisible && jsx("div", {
71
+ ref: openButtonRef,
55
72
  css: [overlayStyles]
56
73
  }, jsx(LinkButton, {
57
74
  spacing: "compact",
@@ -59,7 +76,7 @@ const OpenButtonOverlay = ({
59
76
  target: "_blank",
60
77
  iconBefore: LinkExternalIcon,
61
78
  appearance: "default"
62
- }, label)))
79
+ }, showLabel ? label : '')))
63
80
  );
64
81
  };
65
82
  export default OpenButtonOverlay;
package/dist/esm/ui/AwarenessWrapper/index.js CHANGED
@@ -94,7 +94,7 @@ export var AwarenessWrapper = function AwarenessWrapper(_ref) {
94
94
  }, [shouldShowLinkOverlay, children, isSelected, isResolvedViewRendered, isInserted, isHovered, url, handleOverlayChange]);
95
95
  var cardWithOpenButtonOverlay = useMemo(function () {
96
96
  return jsx(OpenButtonOverlay, {
97
- isVisible: isHovered,
97
+ isVisible: isResolvedViewRendered && isHovered,
98
98
  onMouseEnter: function onMouseEnter() {
99
99
  return handleOverlayChange(true);
100
100
  },
@@ -103,7 +103,7 @@ export var AwarenessWrapper = function AwarenessWrapper(_ref) {
103
103
  },
104
104
  url: url
105
105
  }, children);
106
- }, [children, isHovered, url, handleOverlayChange]);
106
+ }, [children, isHovered, url, handleOverlayChange, isResolvedViewRendered]);
107
107
  return useMemo(function () {
108
108
  var _cardContext$value;
109
109
  return (
package/dist/esm/ui/OpenButtonOverlay/index.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
+ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
3
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
3
4
  var _excluded = ["children", "isVisible", "url"];
4
5
  /* eslint-disable @atlaskit/design-system/no-nested-styles */
@@ -7,7 +8,7 @@ var _excluded = ["children", "isVisible", "url"];
7
8
  * @jsxRuntime classic
8
9
  * @jsx jsx
9
10
  */
10
- import React from 'react';
11
+ import React, { useLayoutEffect, useRef, useState } from 'react';
11
12
  import { css, jsx } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
12
13
 
13
14
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
@@ -32,9 +33,10 @@ var overlayStyles = css({
32
33
  zIndex: 2,
33
34
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
34
35
  a: {
35
- padding: "var(--ds-border-width, 1px)".concat(" ", "var(--ds-space-050, 4px)", " 0")
36
+ padding: "var(--ds-border-width, 1px)".concat(" ", "var(--ds-space-050, 4px)", " 0 ", "var(--ds-space-025, 2px)")
36
37
  }
37
38
  });
39
+ var MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY = 45;
38
40
  var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
39
41
  var children = _ref.children,
40
42
  _ref$isVisible = _ref.isVisible,
@@ -43,17 +45,36 @@ var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
43
45
  props = _objectWithoutProperties(_ref, _excluded);
44
46
  // TODO: ED-26961 - add translation
45
47
  var label = 'Open';
48
+ var containerRef = useRef(null);
49
+ var openButtonRef = useRef(null);
50
+ var _useState = useState(true),
51
+ _useState2 = _slicedToArray(_useState, 2),
52
+ showLabel = _useState2[0],
53
+ setShowLabel = _useState2[1];
46
54
  var handleDoubleClick = function handleDoubleClick() {
47
55
  // Double click opens the link in a new tab
48
56
  window.open(url, '_blank');
49
57
  };
58
+ useLayoutEffect(function () {
59
+ var _containerRef$current, _openButtonRef$curren;
60
+ if (!isVisible) {
61
+ return;
62
+ }
63
+ var cardWidth = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.offsetWidth;
64
+ var openButtonWidth = (_openButtonRef$curren = openButtonRef.current) === null || _openButtonRef$curren === void 0 ? void 0 : _openButtonRef$curren.offsetWidth;
65
+ var canShowLabel = cardWidth && openButtonWidth ? cardWidth - openButtonWidth > MIN_AVAILABLE_SPACE_WITH_LABEL_OVERLAY : true;
66
+ setShowLabel(canShowLabel);
67
+ }, [isVisible]);
50
68
  return (
51
69
  // Ignored via go/ees005
52
70
  // eslint-disable-next-line react/jsx-props-no-spreading, jsx-a11y/no-static-element-interactions
53
- jsx("span", _extends({}, props, {
71
+ jsx("span", _extends({
72
+ ref: containerRef
73
+ }, props, {
54
74
  css: containerStyles,
55
75
  onDoubleClick: handleDoubleClick
56
76
  }), children, isVisible && jsx("div", {
77
+ ref: openButtonRef,
57
78
  css: [overlayStyles]
58
79
  }, jsx(LinkButton, {
59
80
  spacing: "compact",
@@ -61,7 +82,7 @@ var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
61
82
  target: "_blank",
62
83
  iconBefore: LinkExternalIcon,
63
84
  appearance: "default"
64
- }, label)))
85
+ }, showLabel ? label : '')))
65
86
  );
66
87
  };
67
88
  export default OpenButtonOverlay;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-card",
3
- "version": "5.3.5",
3
+ "version": "5.3.6",
4
4
  "description": "Card plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -37,7 +37,7 @@
37
37
  "@atlaskit/analytics-next": "^11.0.0",
38
38
  "@atlaskit/button": "^21.1.0",
39
39
  "@atlaskit/custom-steps": "^0.11.0",
40
- "@atlaskit/editor-common": "^102.10.0",
40
+ "@atlaskit/editor-common": "^102.11.0",
41
41
  "@atlaskit/editor-plugin-analytics": "^2.2.0",
42
42
  "@atlaskit/editor-plugin-base": "^2.3.0",
43
43
  "@atlaskit/editor-plugin-connectivity": "^2.0.0",
@@ -45,7 +45,7 @@
45
45
  "@atlaskit/editor-plugin-editor-disabled": "^2.0.0",
46
46
  "@atlaskit/editor-plugin-editor-viewmode": "^3.0.0",
47
47
  "@atlaskit/editor-plugin-feature-flags": "^1.3.0",
48
- "@atlaskit/editor-plugin-floating-toolbar": "^3.2.0",
48
+ "@atlaskit/editor-plugin-floating-toolbar": "^3.3.0",
49
49
  "@atlaskit/editor-plugin-grid": "^2.0.0",
50
50
  "@atlaskit/editor-plugin-width": "^3.0.0",
51
51
  "@atlaskit/editor-prosemirror": "7.0.0",
@@ -54,12 +54,12 @@
54
54
  "@atlaskit/icon": "^25.0.0",
55
55
  "@atlaskit/link-analytics": "^9.1.0",
56
56
  "@atlaskit/link-client-extension": "^4.0.0",
57
- "@atlaskit/link-datasource": "^4.0.0",
57
+ "@atlaskit/link-datasource": "^4.1.0",
58
58
  "@atlaskit/linking-common": "^8.0.0",
59
59
  "@atlaskit/linking-types": "^9.6.0",
60
60
  "@atlaskit/menu": "^3.1.0",
61
61
  "@atlaskit/platform-feature-flags": "^1.1.0",
62
- "@atlaskit/primitives": "^14.1.0",
62
+ "@atlaskit/primitives": "^14.2.0",
63
63
  "@atlaskit/smart-card": "^36.0.0",
64
64
  "@atlaskit/theme": "^18.0.0",
65
65
  "@atlaskit/tmp-editor-statsig": "^4.1.0",