@atlaskit/editor-plugin-synced-block 5.1.12 → 5.1.13

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 (12) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/afm-products/tsconfig.json +1 -1
  3. package/dist/cjs/ui/SyncedLocationDropdown.compiled.css +11 -3
  4. package/dist/cjs/ui/SyncedLocationDropdown.js +58 -31
  5. package/dist/cjs/ui/floating-toolbar.js +2 -1
  6. package/dist/es2019/ui/SyncedLocationDropdown.compiled.css +11 -3
  7. package/dist/es2019/ui/SyncedLocationDropdown.js +59 -30
  8. package/dist/es2019/ui/floating-toolbar.js +2 -1
  9. package/dist/esm/ui/SyncedLocationDropdown.compiled.css +11 -3
  10. package/dist/esm/ui/SyncedLocationDropdown.js +59 -32
  11. package/dist/esm/ui/floating-toolbar.js +2 -1
  12. package/package.json +8 -8
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @atlaskit/editor-plugin-synced-block
2
2
 
3
+ ## 5.1.13
4
+
5
+ ### Patch Changes
6
+
7
+ - [`7b1f7ff1a2235`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7b1f7ff1a2235) -
8
+ [ux] [EDITOR-4536] Update synced location dropdown UI
9
+ - Updated dependencies
10
+
3
11
  ## 5.1.12
4
12
 
5
13
  ### Patch Changes
package/afm-products/tsconfig.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "extends": "../../../../tsconfig.entry-points.products.json",
2
+ "extends": "../../../../tsconfig.local-consumption.json",
3
3
  "compilerOptions": {
4
4
  "target": "es5",
5
5
  "outDir": "../../../../../tsDist/@atlaskit__editor-plugin-synced-block/app",
package/dist/cjs/ui/SyncedLocationDropdown.compiled.css CHANGED
@@ -1,13 +1,17 @@
1
1
 
2
+ ._2rkol0p1{border-radius:var(--ds-radius-tile,25%)}
3
+ ._y44vfmxe{animation:kgnpaw5 .7s ease-in-out}
2
4
  ._1mour5cr{margin-block:var(--ds-space-negative-050,-4px)}
3
5
  ._1rjcv77o{padding-block:var(--ds-space-025,2px)}
4
6
  ._ku9g126e [data-ds--menu--heading-item]{margin-block:var(--ds-space-050,4px)!important}._18bk1rpy [data-ds--menu--heading-item]{color:var(--ds-text-subtlest,#6b6e76)}
5
7
  ._18m915vq{overflow-y:hidden}
6
8
  ._18m91wug{overflow-y:auto}
7
9
  ._1bah1h6o{justify-content:center}
10
+ ._1bsb19n7{width:106px}
8
11
  ._1bsb1osq{width:100%}
9
- ._1bsb96ou{width:327px}
12
+ ._1bsbgktf{width:20px}
10
13
  ._1bsbo8uj{width:235px}
14
+ ._1bsbsmdz{width:342px}
11
15
  ._1bto1l2s{text-overflow:ellipsis}
12
16
  ._1e0c1txw{display:flex}
13
17
  ._1hmsglyw{text-decoration-line:none}
@@ -15,12 +19,16 @@
15
19
  ._1tkeqkoa{min-height:9pc}
16
20
  ._1ul91wqb{min-width:60px}
17
21
  ._1wpz1fhb{align-self:stretch}
22
+ ._2ll012x7 a>span{column-gap:var(--ds-space-075,6px)}
18
23
  ._4bfu1r31{text-decoration-color:currentColor}
19
24
  ._4cvr1h6o{align-items:center}
20
- ._ahbq1b66{margin-inline-start:var(--ds-space-050,4px)}
25
+ ._4t3igktf{height:20px}
26
+ ._ahbq12x7{margin-inline-start:var(--ds-space-075,6px)}
21
27
  ._ajmmnqa1{text-decoration-style:solid}
28
+ ._bfhki8nm{background-color:var(--ds-background-neutral,#0515240f)}
22
29
  ._c71lko4j{max-height:19pc}
23
30
  ._o5721q9c{white-space:nowrap}
24
31
  ._syaz1rpy{color:var(--ds-text-subtlest,#6b6e76)}
25
32
  ._syazazsu{color:var(--ds-text-subtle,#505258)}
26
- ._y3gn1h6o{text-align:center}
33
+ ._y3gn1h6o{text-align:center}
34
+ @keyframes kgnpaw5{0%{opacity:0}to{opacity:1}}
package/dist/cjs/ui/SyncedLocationDropdown.js CHANGED
@@ -23,33 +23,42 @@ var _icon = require("@atlaskit/icon");
23
23
  var _pageLiveDoc = _interopRequireDefault(require("@atlaskit/icon-lab/core/page-live-doc"));
24
24
  var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/chevron-down"));
25
25
  var _page = _interopRequireDefault(require("@atlaskit/icon/core/page"));
26
+ var _quotationMark = _interopRequireDefault(require("@atlaskit/icon/core/quotation-mark"));
26
27
  var _statusError = _interopRequireDefault(require("@atlaskit/icon/core/status-error"));
27
28
  var _logo = require("@atlaskit/logo");
28
29
  var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
29
30
  var _compiled = require("@atlaskit/primitives/compiled");
30
31
  var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
32
+ var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
31
33
  var _excluded = ["triggerRef"];
32
34
  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); }
33
35
  function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
34
36
  function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
35
37
  function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
38
+ var fadeIn = null;
36
39
  var headingStyles = null;
40
+ var dropdownItemStyles = null;
41
+
42
+ // logo icon does not fit in ADS IconTile, hence we need custom styles to match with other icons
43
+ var logoTileStyles = null;
37
44
  var styles = {
38
45
  title: "_1reo15vq _18m915vq _syazazsu _1bto1l2s _o5721q9c",
39
46
  note: "_syaz1rpy _o5721q9c",
40
- lozenge: "_ahbq1b66 _1ul91wqb",
47
+ lozenge: "_ahbq12x7 _1ul91wqb",
41
48
  noResultsContainer: "_1bsbo8uj _y3gn1h6o",
42
- dropdownContent: "_1rjcv77o _1bsb96ou _1tkeqkoa _c71lko4j _1e0c1txw _1bah1h6o _4cvr1h6o",
43
- contentContainer: "_1bsb1osq _1wpz1fhb _18m91wug",
49
+ dropdownContent: "_1rjcv77o _1bsbsmdz _1tkeqkoa _c71lko4j _1e0c1txw _1bah1h6o _4cvr1h6o",
50
+ contentContainer: "_y44vfmxe _1bsb1osq _1wpz1fhb _18m91wug",
44
51
  errorContainer: "_1bsbo8uj _1e0c1txw",
45
52
  errorIcon: "_1mour5cr",
46
- learnMoreLink: "_4bfu1r31 _1hmsglyw _ajmmnqa1"
53
+ learnMoreLink: "_4bfu1r31 _1hmsglyw _ajmmnqa1",
54
+ requestAccess: "_1bsb19n7 _o5721q9c _ahbq12x7 _syaz1rpy"
47
55
  };
48
56
  var ItemTitle = function ItemTitle(_ref) {
49
57
  var title = _ref.title,
50
58
  formatMessage = _ref.formatMessage,
51
59
  onSamePage = _ref.onSamePage,
52
- isSource = _ref.isSource;
60
+ isSource = _ref.isSource,
61
+ hasAccess = _ref.hasAccess;
53
62
  return /*#__PURE__*/React.createElement(_compiled.Inline, null, /*#__PURE__*/React.createElement(_compiled.Box, {
54
63
  as: "span",
55
64
  xcss: styles.title
@@ -59,37 +68,48 @@ var ItemTitle = function ItemTitle(_ref) {
59
68
  }, "\xA0- ", formatMessage(_messages.syncBlockMessages.syncedLocationDropdownTitleNote)), isSource && /*#__PURE__*/React.createElement(_compiled.Box, {
60
69
  as: "span",
61
70
  xcss: styles.lozenge
62
- }, /*#__PURE__*/React.createElement(_lozenge.default, null, formatMessage(_messages.syncBlockMessages.syncedLocationDropdownSourceLozenge))));
71
+ }, /*#__PURE__*/React.createElement(_lozenge.default, null, formatMessage(_messages.syncBlockMessages.syncedLocationDropdownSourceLozenge))), !hasAccess && /*#__PURE__*/React.createElement(_compiled.Box, {
72
+ as: "span",
73
+ xcss: styles.requestAccess
74
+ }, formatMessage(_messages.syncBlockMessages.syncedLocationDropdownRequestAccess)));
75
+ };
76
+ var productIconMap = {
77
+ 'confluence-page': _logo.ConfluenceIcon,
78
+ 'jira-work-item': _logo.JiraIcon
79
+ };
80
+ var subTypeIconMap = {
81
+ live: _pageLiveDoc.default,
82
+ page: _page.default,
83
+ blogpost: _quotationMark.default
84
+ };
85
+ var getSubTypeIcon = function getSubTypeIcon(subType) {
86
+ return subType && subType in subTypeIconMap ? subTypeIconMap[subType] : _page.default;
63
87
  };
64
- var Logo = function Logo(_ref2) {
88
+ var ProductIcon = function ProductIcon(_ref2) {
89
+ var _productIconMap$produ;
65
90
  var product = _ref2.product;
66
- switch (product) {
67
- case 'confluence-page':
68
- return /*#__PURE__*/React.createElement(_logo.ConfluenceIcon, {
69
- size: "xsmall"
70
- });
71
- case 'jira-work-item':
72
- return /*#__PURE__*/React.createElement(_logo.JiraIcon, {
73
- size: "xsmall"
74
- });
75
- default:
76
- return null;
77
- }
91
+ var ProductIcon = product ? (_productIconMap$produ = productIconMap[product]) !== null && _productIconMap$produ !== void 0 ? _productIconMap$produ : _logo.AtlassianIcon : _logo.AtlassianIcon;
92
+ return /*#__PURE__*/React.createElement("span", {
93
+ className: (0, _runtime.ax)(["_2rkol0p1 _bfhki8nm _1bsbgktf _4t3igktf _1e0c1txw _4cvr1h6o _1bah1h6o"])
94
+ }, /*#__PURE__*/React.createElement(ProductIcon, {
95
+ size: "xxsmall",
96
+ appearance: "neutral"
97
+ }));
78
98
  };
79
99
  var ItemIcon = function ItemIcon(_ref3) {
80
100
  var reference = _ref3.reference;
81
101
  var hasAccess = reference.hasAccess,
82
102
  subType = reference.subType;
83
- var icon = hasAccess ? subType ? _pageLiveDoc.default : _page.default : function () {
84
- return /*#__PURE__*/React.createElement(Logo, {
85
- product: reference.productType
103
+ if (hasAccess) {
104
+ return /*#__PURE__*/React.createElement(_icon.IconTile, {
105
+ icon: getSubTypeIcon(subType),
106
+ label: "",
107
+ appearance: 'gray',
108
+ size: "xsmall"
86
109
  });
87
- };
88
- return /*#__PURE__*/React.createElement(_icon.IconTile, {
89
- icon: icon,
90
- label: "",
91
- appearance: hasAccess ? 'grayBold' : 'gray',
92
- size: "xsmall"
110
+ }
111
+ return /*#__PURE__*/React.createElement(ProductIcon, {
112
+ product: reference.productType
93
113
  });
94
114
  };
95
115
  var processReferenceData = exports.processReferenceData = function processReferenceData(referenceData, intl) {
@@ -242,18 +262,25 @@ var DropdownContent = function DropdownContent(_ref7) {
242
262
  count: "".concat(referenceData.length > 99 ? '99+' : referenceData.length)
243
263
  })
244
264
  }, referenceData.map(function (reference) {
245
- return /*#__PURE__*/React.createElement(_dropdownMenu.DropdownItem, {
265
+ return /*#__PURE__*/React.createElement("div", {
266
+ key: reference.title,
267
+ className: (0, _runtime.ax)(["_2ll012x7"])
268
+ }, /*#__PURE__*/React.createElement(_tooltip.default, {
269
+ content: reference.title || reference.url || ''
270
+ }, /*#__PURE__*/React.createElement(_dropdownMenu.DropdownItem, {
246
271
  elemBefore: /*#__PURE__*/React.createElement(ItemIcon, {
247
272
  reference: reference
248
273
  }),
249
274
  href: reference.url,
275
+ target: "_blank",
250
276
  key: reference.title
251
277
  }, /*#__PURE__*/React.createElement(ItemTitle, {
252
278
  title: reference.title || reference.url || '',
253
279
  formatMessage: formatMessage,
254
280
  onSamePage: reference.onSamePage,
255
- isSource: reference.isSource
256
- }));
281
+ isSource: reference.isSource,
282
+ hasAccess: reference.hasAccess
283
+ }))));
257
284
  })));
258
285
  } else {
259
286
  return /*#__PURE__*/React.createElement(NoResultScreen, {
package/dist/cjs/ui/floating-toolbar.js CHANGED
@@ -30,6 +30,7 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(stat
30
30
  }
31
31
  var syncBlockInstance = syncBlockStore.referenceManager.getFromCache(syncBlockObject.node.attrs.resourceId);
32
32
  var isUnsyncedBlock = (syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.error) === _editorSyncedBlockProvider.SyncBlockError.NotFound;
33
+ var isErroredBlock = syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.error;
33
34
  var bodiedSyncBlock = state.schema.nodes.bodiedSyncBlock;
34
35
  var isBodiedSyncBlock = (0, _utils2.isBodiedSyncBlockNode)(syncBlockObject.node, bodiedSyncBlock);
35
36
  var _syncBlockObject$node = syncBlockObject.node.attrs,
@@ -57,7 +58,7 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(stat
57
58
  }, hoverDecorationProps(nodeType, _consts.akEditorSelectedNodeClassName));
58
59
  items.push(deleteButton);
59
60
  } else {
60
- if ((0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding')) {
61
+ if (!isErroredBlock && (0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding')) {
61
62
  var syncedLocation = {
62
63
  type: 'custom',
63
64
  fallback: [],
package/dist/es2019/ui/SyncedLocationDropdown.compiled.css CHANGED
@@ -1,13 +1,17 @@
1
1
 
2
+ ._2rkol0p1{border-radius:var(--ds-radius-tile,25%)}
3
+ ._y44vfmxe{animation:kgnpaw5 .7s ease-in-out}
2
4
  ._1mour5cr{margin-block:var(--ds-space-negative-050,-4px)}
3
5
  ._1rjcv77o{padding-block:var(--ds-space-025,2px)}
4
6
  ._ku9g126e [data-ds--menu--heading-item]{margin-block:var(--ds-space-050,4px)!important}._18bk1rpy [data-ds--menu--heading-item]{color:var(--ds-text-subtlest,#6b6e76)}
5
7
  ._18m915vq{overflow-y:hidden}
6
8
  ._18m91wug{overflow-y:auto}
7
9
  ._1bah1h6o{justify-content:center}
10
+ ._1bsb19n7{width:106px}
8
11
  ._1bsb1osq{width:100%}
9
- ._1bsb96ou{width:327px}
12
+ ._1bsbgktf{width:20px}
10
13
  ._1bsbo8uj{width:235px}
14
+ ._1bsbsmdz{width:342px}
11
15
  ._1bto1l2s{text-overflow:ellipsis}
12
16
  ._1e0c1txw{display:flex}
13
17
  ._1hmsglyw{text-decoration-line:none}
@@ -15,12 +19,16 @@
15
19
  ._1tkeqkoa{min-height:9pc}
16
20
  ._1ul91wqb{min-width:60px}
17
21
  ._1wpz1fhb{align-self:stretch}
22
+ ._2ll012x7 a>span{column-gap:var(--ds-space-075,6px)}
18
23
  ._4bfu1r31{text-decoration-color:currentColor}
19
24
  ._4cvr1h6o{align-items:center}
20
- ._ahbq1b66{margin-inline-start:var(--ds-space-050,4px)}
25
+ ._4t3igktf{height:20px}
26
+ ._ahbq12x7{margin-inline-start:var(--ds-space-075,6px)}
21
27
  ._ajmmnqa1{text-decoration-style:solid}
28
+ ._bfhki8nm{background-color:var(--ds-background-neutral,#0515240f)}
22
29
  ._c71lko4j{max-height:19pc}
23
30
  ._o5721q9c{white-space:nowrap}
24
31
  ._syaz1rpy{color:var(--ds-text-subtlest,#6b6e76)}
25
32
  ._syazazsu{color:var(--ds-text-subtle,#505258)}
26
- ._y3gn1h6o{text-align:center}
33
+ ._y3gn1h6o{text-align:center}
34
+ @keyframes kgnpaw5{0%{opacity:0}to{opacity:1}}
package/dist/es2019/ui/SyncedLocationDropdown.js CHANGED
@@ -11,28 +11,37 @@ import { IconTile } from '@atlaskit/icon';
11
11
  import PageLiveDocIcon from '@atlaskit/icon-lab/core/page-live-doc';
12
12
  import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
13
13
  import PageIcon from '@atlaskit/icon/core/page';
14
+ import QuotationMarkIcon from '@atlaskit/icon/core/quotation-mark';
14
15
  import StatusErrorIcon from '@atlaskit/icon/core/status-error';
15
- import { ConfluenceIcon, JiraIcon } from '@atlaskit/logo';
16
+ import { ConfluenceIcon, JiraIcon, AtlassianIcon } from '@atlaskit/logo';
16
17
  import Lozenge from '@atlaskit/lozenge';
17
18
  import { Box, Text, Inline, Anchor, Stack } from '@atlaskit/primitives/compiled';
18
19
  import Spinner from '@atlaskit/spinner';
20
+ import Tooltip from '@atlaskit/tooltip';
21
+ const fadeIn = null;
19
22
  const headingStyles = null;
23
+ const dropdownItemStyles = null;
24
+
25
+ // logo icon does not fit in ADS IconTile, hence we need custom styles to match with other icons
26
+ const logoTileStyles = null;
20
27
  const styles = {
21
28
  title: "_1reo15vq _18m915vq _syazazsu _1bto1l2s _o5721q9c",
22
29
  note: "_syaz1rpy _o5721q9c",
23
- lozenge: "_ahbq1b66 _1ul91wqb",
30
+ lozenge: "_ahbq12x7 _1ul91wqb",
24
31
  noResultsContainer: "_1bsbo8uj _y3gn1h6o",
25
- dropdownContent: "_1rjcv77o _1bsb96ou _1tkeqkoa _c71lko4j _1e0c1txw _1bah1h6o _4cvr1h6o",
26
- contentContainer: "_1bsb1osq _1wpz1fhb _18m91wug",
32
+ dropdownContent: "_1rjcv77o _1bsbsmdz _1tkeqkoa _c71lko4j _1e0c1txw _1bah1h6o _4cvr1h6o",
33
+ contentContainer: "_y44vfmxe _1bsb1osq _1wpz1fhb _18m91wug",
27
34
  errorContainer: "_1bsbo8uj _1e0c1txw",
28
35
  errorIcon: "_1mour5cr",
29
- learnMoreLink: "_4bfu1r31 _1hmsglyw _ajmmnqa1"
36
+ learnMoreLink: "_4bfu1r31 _1hmsglyw _ajmmnqa1",
37
+ requestAccess: "_1bsb19n7 _o5721q9c _ahbq12x7 _syaz1rpy"
30
38
  };
31
39
  const ItemTitle = ({
32
40
  title,
33
41
  formatMessage,
34
42
  onSamePage,
35
- isSource
43
+ isSource,
44
+ hasAccess
36
45
  }) => {
37
46
  return /*#__PURE__*/React.createElement(Inline, null, /*#__PURE__*/React.createElement(Box, {
38
47
  as: "span",
@@ -43,23 +52,34 @@ const ItemTitle = ({
43
52
  }, "\xA0- ", formatMessage(messages.syncedLocationDropdownTitleNote)), isSource && /*#__PURE__*/React.createElement(Box, {
44
53
  as: "span",
45
54
  xcss: styles.lozenge
46
- }, /*#__PURE__*/React.createElement(Lozenge, null, formatMessage(messages.syncedLocationDropdownSourceLozenge))));
55
+ }, /*#__PURE__*/React.createElement(Lozenge, null, formatMessage(messages.syncedLocationDropdownSourceLozenge))), !hasAccess && /*#__PURE__*/React.createElement(Box, {
56
+ as: "span",
57
+ xcss: styles.requestAccess
58
+ }, formatMessage(messages.syncedLocationDropdownRequestAccess)));
59
+ };
60
+ const productIconMap = {
61
+ 'confluence-page': ConfluenceIcon,
62
+ 'jira-work-item': JiraIcon
63
+ };
64
+ const subTypeIconMap = {
65
+ live: PageLiveDocIcon,
66
+ page: PageIcon,
67
+ blogpost: QuotationMarkIcon
68
+ };
69
+ const getSubTypeIcon = subType => {
70
+ return subType && subType in subTypeIconMap ? subTypeIconMap[subType] : PageIcon;
47
71
  };
48
- const Logo = ({
72
+ const ProductIcon = ({
49
73
  product
50
74
  }) => {
51
- switch (product) {
52
- case 'confluence-page':
53
- return /*#__PURE__*/React.createElement(ConfluenceIcon, {
54
- size: "xsmall"
55
- });
56
- case 'jira-work-item':
57
- return /*#__PURE__*/React.createElement(JiraIcon, {
58
- size: "xsmall"
59
- });
60
- default:
61
- return null;
62
- }
75
+ var _productIconMap$produ;
76
+ const ProductIcon = product ? (_productIconMap$produ = productIconMap[product]) !== null && _productIconMap$produ !== void 0 ? _productIconMap$produ : AtlassianIcon : AtlassianIcon;
77
+ return /*#__PURE__*/React.createElement("span", {
78
+ className: ax(["_2rkol0p1 _bfhki8nm _1bsbgktf _4t3igktf _1e0c1txw _4cvr1h6o _1bah1h6o"])
79
+ }, /*#__PURE__*/React.createElement(ProductIcon, {
80
+ size: "xxsmall",
81
+ appearance: "neutral"
82
+ }));
63
83
  };
64
84
  const ItemIcon = ({
65
85
  reference
@@ -68,15 +88,17 @@ const ItemIcon = ({
68
88
  hasAccess,
69
89
  subType
70
90
  } = reference;
71
- const icon = hasAccess ? subType ? PageLiveDocIcon : PageIcon : () => /*#__PURE__*/React.createElement(Logo, {
91
+ if (hasAccess) {
92
+ return /*#__PURE__*/React.createElement(IconTile, {
93
+ icon: getSubTypeIcon(subType),
94
+ label: "",
95
+ appearance: 'gray',
96
+ size: "xsmall"
97
+ });
98
+ }
99
+ return /*#__PURE__*/React.createElement(ProductIcon, {
72
100
  product: reference.productType
73
101
  });
74
- return /*#__PURE__*/React.createElement(IconTile, {
75
- icon: icon,
76
- label: "",
77
- appearance: hasAccess ? 'grayBold' : 'gray',
78
- size: "xsmall"
79
- });
80
102
  };
81
103
  export const processReferenceData = (referenceData, intl) => {
82
104
  const {
@@ -193,18 +215,25 @@ const DropdownContent = ({
193
215
  title: formatMessage(messages.syncedLocationDropdownHeading, {
194
216
  count: `${referenceData.length > 99 ? '99+' : referenceData.length}`
195
217
  })
196
- }, referenceData.map(reference => /*#__PURE__*/React.createElement(DropdownItem, {
218
+ }, referenceData.map(reference => /*#__PURE__*/React.createElement("div", {
219
+ key: reference.title,
220
+ className: ax(["_2ll012x7"])
221
+ }, /*#__PURE__*/React.createElement(Tooltip, {
222
+ content: reference.title || reference.url || ''
223
+ }, /*#__PURE__*/React.createElement(DropdownItem, {
197
224
  elemBefore: /*#__PURE__*/React.createElement(ItemIcon, {
198
225
  reference: reference
199
226
  }),
200
227
  href: reference.url,
228
+ target: "_blank",
201
229
  key: reference.title
202
230
  }, /*#__PURE__*/React.createElement(ItemTitle, {
203
231
  title: reference.title || reference.url || '',
204
232
  formatMessage: formatMessage,
205
233
  onSamePage: reference.onSamePage,
206
- isSource: reference.isSource
207
- })))));
234
+ isSource: reference.isSource,
235
+ hasAccess: reference.hasAccess
236
+ })))))));
208
237
  } else {
209
238
  return /*#__PURE__*/React.createElement(NoResultScreen, {
210
239
  formatMessage: formatMessage
package/dist/es2019/ui/floating-toolbar.js CHANGED
@@ -18,6 +18,7 @@ export const getToolbarConfig = (state, intl, api, syncBlockStore) => {
18
18
  }
19
19
  const syncBlockInstance = syncBlockStore.referenceManager.getFromCache(syncBlockObject.node.attrs.resourceId);
20
20
  const isUnsyncedBlock = (syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.error) === SyncBlockError.NotFound;
21
+ const isErroredBlock = syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.error;
21
22
  const {
22
23
  schema: {
23
24
  nodes: {
@@ -53,7 +54,7 @@ export const getToolbarConfig = (state, intl, api, syncBlockStore) => {
53
54
  };
54
55
  items.push(deleteButton);
55
56
  } else {
56
- if (fg('platform_synced_block_dogfooding')) {
57
+ if (!isErroredBlock && fg('platform_synced_block_dogfooding')) {
57
58
  const syncedLocation = {
58
59
  type: 'custom',
59
60
  fallback: [],
package/dist/esm/ui/SyncedLocationDropdown.compiled.css CHANGED
@@ -1,13 +1,17 @@
1
1
 
2
+ ._2rkol0p1{border-radius:var(--ds-radius-tile,25%)}
3
+ ._y44vfmxe{animation:kgnpaw5 .7s ease-in-out}
2
4
  ._1mour5cr{margin-block:var(--ds-space-negative-050,-4px)}
3
5
  ._1rjcv77o{padding-block:var(--ds-space-025,2px)}
4
6
  ._ku9g126e [data-ds--menu--heading-item]{margin-block:var(--ds-space-050,4px)!important}._18bk1rpy [data-ds--menu--heading-item]{color:var(--ds-text-subtlest,#6b6e76)}
5
7
  ._18m915vq{overflow-y:hidden}
6
8
  ._18m91wug{overflow-y:auto}
7
9
  ._1bah1h6o{justify-content:center}
10
+ ._1bsb19n7{width:106px}
8
11
  ._1bsb1osq{width:100%}
9
- ._1bsb96ou{width:327px}
12
+ ._1bsbgktf{width:20px}
10
13
  ._1bsbo8uj{width:235px}
14
+ ._1bsbsmdz{width:342px}
11
15
  ._1bto1l2s{text-overflow:ellipsis}
12
16
  ._1e0c1txw{display:flex}
13
17
  ._1hmsglyw{text-decoration-line:none}
@@ -15,12 +19,16 @@
15
19
  ._1tkeqkoa{min-height:9pc}
16
20
  ._1ul91wqb{min-width:60px}
17
21
  ._1wpz1fhb{align-self:stretch}
22
+ ._2ll012x7 a>span{column-gap:var(--ds-space-075,6px)}
18
23
  ._4bfu1r31{text-decoration-color:currentColor}
19
24
  ._4cvr1h6o{align-items:center}
20
- ._ahbq1b66{margin-inline-start:var(--ds-space-050,4px)}
25
+ ._4t3igktf{height:20px}
26
+ ._ahbq12x7{margin-inline-start:var(--ds-space-075,6px)}
21
27
  ._ajmmnqa1{text-decoration-style:solid}
28
+ ._bfhki8nm{background-color:var(--ds-background-neutral,#0515240f)}
22
29
  ._c71lko4j{max-height:19pc}
23
30
  ._o5721q9c{white-space:nowrap}
24
31
  ._syaz1rpy{color:var(--ds-text-subtlest,#6b6e76)}
25
32
  ._syazazsu{color:var(--ds-text-subtle,#505258)}
26
- ._y3gn1h6o{text-align:center}
33
+ ._y3gn1h6o{text-align:center}
34
+ @keyframes kgnpaw5{0%{opacity:0}to{opacity:1}}
package/dist/esm/ui/SyncedLocationDropdown.js CHANGED
@@ -19,28 +19,37 @@ import { IconTile } from '@atlaskit/icon';
19
19
  import PageLiveDocIcon from '@atlaskit/icon-lab/core/page-live-doc';
20
20
  import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
21
21
  import PageIcon from '@atlaskit/icon/core/page';
22
+ import QuotationMarkIcon from '@atlaskit/icon/core/quotation-mark';
22
23
  import StatusErrorIcon from '@atlaskit/icon/core/status-error';
23
- import { ConfluenceIcon, JiraIcon } from '@atlaskit/logo';
24
+ import { ConfluenceIcon, JiraIcon, AtlassianIcon } from '@atlaskit/logo';
24
25
  import Lozenge from '@atlaskit/lozenge';
25
26
  import { Box, Text, Inline, Anchor, Stack } from '@atlaskit/primitives/compiled';
26
27
  import Spinner from '@atlaskit/spinner';
28
+ import Tooltip from '@atlaskit/tooltip';
29
+ var fadeIn = null;
27
30
  var headingStyles = null;
31
+ var dropdownItemStyles = null;
32
+
33
+ // logo icon does not fit in ADS IconTile, hence we need custom styles to match with other icons
34
+ var logoTileStyles = null;
28
35
  var styles = {
29
36
  title: "_1reo15vq _18m915vq _syazazsu _1bto1l2s _o5721q9c",
30
37
  note: "_syaz1rpy _o5721q9c",
31
- lozenge: "_ahbq1b66 _1ul91wqb",
38
+ lozenge: "_ahbq12x7 _1ul91wqb",
32
39
  noResultsContainer: "_1bsbo8uj _y3gn1h6o",
33
- dropdownContent: "_1rjcv77o _1bsb96ou _1tkeqkoa _c71lko4j _1e0c1txw _1bah1h6o _4cvr1h6o",
34
- contentContainer: "_1bsb1osq _1wpz1fhb _18m91wug",
40
+ dropdownContent: "_1rjcv77o _1bsbsmdz _1tkeqkoa _c71lko4j _1e0c1txw _1bah1h6o _4cvr1h6o",
41
+ contentContainer: "_y44vfmxe _1bsb1osq _1wpz1fhb _18m91wug",
35
42
  errorContainer: "_1bsbo8uj _1e0c1txw",
36
43
  errorIcon: "_1mour5cr",
37
- learnMoreLink: "_4bfu1r31 _1hmsglyw _ajmmnqa1"
44
+ learnMoreLink: "_4bfu1r31 _1hmsglyw _ajmmnqa1",
45
+ requestAccess: "_1bsb19n7 _o5721q9c _ahbq12x7 _syaz1rpy"
38
46
  };
39
47
  var ItemTitle = function ItemTitle(_ref) {
40
48
  var title = _ref.title,
41
49
  formatMessage = _ref.formatMessage,
42
50
  onSamePage = _ref.onSamePage,
43
- isSource = _ref.isSource;
51
+ isSource = _ref.isSource,
52
+ hasAccess = _ref.hasAccess;
44
53
  return /*#__PURE__*/React.createElement(Inline, null, /*#__PURE__*/React.createElement(Box, {
45
54
  as: "span",
46
55
  xcss: styles.title
@@ -50,37 +59,48 @@ var ItemTitle = function ItemTitle(_ref) {
50
59
  }, "\xA0- ", formatMessage(messages.syncedLocationDropdownTitleNote)), isSource && /*#__PURE__*/React.createElement(Box, {
51
60
  as: "span",
52
61
  xcss: styles.lozenge
53
- }, /*#__PURE__*/React.createElement(Lozenge, null, formatMessage(messages.syncedLocationDropdownSourceLozenge))));
62
+ }, /*#__PURE__*/React.createElement(Lozenge, null, formatMessage(messages.syncedLocationDropdownSourceLozenge))), !hasAccess && /*#__PURE__*/React.createElement(Box, {
63
+ as: "span",
64
+ xcss: styles.requestAccess
65
+ }, formatMessage(messages.syncedLocationDropdownRequestAccess)));
66
+ };
67
+ var productIconMap = {
68
+ 'confluence-page': ConfluenceIcon,
69
+ 'jira-work-item': JiraIcon
70
+ };
71
+ var subTypeIconMap = {
72
+ live: PageLiveDocIcon,
73
+ page: PageIcon,
74
+ blogpost: QuotationMarkIcon
54
75
  };
55
- var Logo = function Logo(_ref2) {
76
+ var getSubTypeIcon = function getSubTypeIcon(subType) {
77
+ return subType && subType in subTypeIconMap ? subTypeIconMap[subType] : PageIcon;
78
+ };
79
+ var ProductIcon = function ProductIcon(_ref2) {
80
+ var _productIconMap$produ;
56
81
  var product = _ref2.product;
57
- switch (product) {
58
- case 'confluence-page':
59
- return /*#__PURE__*/React.createElement(ConfluenceIcon, {
60
- size: "xsmall"
61
- });
62
- case 'jira-work-item':
63
- return /*#__PURE__*/React.createElement(JiraIcon, {
64
- size: "xsmall"
65
- });
66
- default:
67
- return null;
68
- }
82
+ var ProductIcon = product ? (_productIconMap$produ = productIconMap[product]) !== null && _productIconMap$produ !== void 0 ? _productIconMap$produ : AtlassianIcon : AtlassianIcon;
83
+ return /*#__PURE__*/React.createElement("span", {
84
+ className: ax(["_2rkol0p1 _bfhki8nm _1bsbgktf _4t3igktf _1e0c1txw _4cvr1h6o _1bah1h6o"])
85
+ }, /*#__PURE__*/React.createElement(ProductIcon, {
86
+ size: "xxsmall",
87
+ appearance: "neutral"
88
+ }));
69
89
  };
70
90
  var ItemIcon = function ItemIcon(_ref3) {
71
91
  var reference = _ref3.reference;
72
92
  var hasAccess = reference.hasAccess,
73
93
  subType = reference.subType;
74
- var icon = hasAccess ? subType ? PageLiveDocIcon : PageIcon : function () {
75
- return /*#__PURE__*/React.createElement(Logo, {
76
- product: reference.productType
94
+ if (hasAccess) {
95
+ return /*#__PURE__*/React.createElement(IconTile, {
96
+ icon: getSubTypeIcon(subType),
97
+ label: "",
98
+ appearance: 'gray',
99
+ size: "xsmall"
77
100
  });
78
- };
79
- return /*#__PURE__*/React.createElement(IconTile, {
80
- icon: icon,
81
- label: "",
82
- appearance: hasAccess ? 'grayBold' : 'gray',
83
- size: "xsmall"
101
+ }
102
+ return /*#__PURE__*/React.createElement(ProductIcon, {
103
+ product: reference.productType
84
104
  });
85
105
  };
86
106
  export var processReferenceData = function processReferenceData(referenceData, intl) {
@@ -233,18 +253,25 @@ var DropdownContent = function DropdownContent(_ref7) {
233
253
  count: "".concat(referenceData.length > 99 ? '99+' : referenceData.length)
234
254
  })
235
255
  }, referenceData.map(function (reference) {
236
- return /*#__PURE__*/React.createElement(DropdownItem, {
256
+ return /*#__PURE__*/React.createElement("div", {
257
+ key: reference.title,
258
+ className: ax(["_2ll012x7"])
259
+ }, /*#__PURE__*/React.createElement(Tooltip, {
260
+ content: reference.title || reference.url || ''
261
+ }, /*#__PURE__*/React.createElement(DropdownItem, {
237
262
  elemBefore: /*#__PURE__*/React.createElement(ItemIcon, {
238
263
  reference: reference
239
264
  }),
240
265
  href: reference.url,
266
+ target: "_blank",
241
267
  key: reference.title
242
268
  }, /*#__PURE__*/React.createElement(ItemTitle, {
243
269
  title: reference.title || reference.url || '',
244
270
  formatMessage: formatMessage,
245
271
  onSamePage: reference.onSamePage,
246
- isSource: reference.isSource
247
- }));
272
+ isSource: reference.isSource,
273
+ hasAccess: reference.hasAccess
274
+ }))));
248
275
  })));
249
276
  } else {
250
277
  return /*#__PURE__*/React.createElement(NoResultScreen, {
package/dist/esm/ui/floating-toolbar.js CHANGED
@@ -21,6 +21,7 @@ export var getToolbarConfig = function getToolbarConfig(state, intl, api, syncBl
21
21
  }
22
22
  var syncBlockInstance = syncBlockStore.referenceManager.getFromCache(syncBlockObject.node.attrs.resourceId);
23
23
  var isUnsyncedBlock = (syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.error) === SyncBlockError.NotFound;
24
+ var isErroredBlock = syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.error;
24
25
  var bodiedSyncBlock = state.schema.nodes.bodiedSyncBlock;
25
26
  var isBodiedSyncBlock = isBodiedSyncBlockNode(syncBlockObject.node, bodiedSyncBlock);
26
27
  var _syncBlockObject$node = syncBlockObject.node.attrs,
@@ -48,7 +49,7 @@ export var getToolbarConfig = function getToolbarConfig(state, intl, api, syncBl
48
49
  }, hoverDecorationProps(nodeType, akEditorSelectedNodeClassName));
49
50
  items.push(deleteButton);
50
51
  } else {
51
- if (fg('platform_synced_block_dogfooding')) {
52
+ if (!isErroredBlock && fg('platform_synced_block_dogfooding')) {
52
53
  var syncedLocation = {
53
54
  type: 'custom',
54
55
  fallback: [],
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-synced-block",
3
- "version": "5.1.12",
3
+ "version": "5.1.13",
4
4
  "description": "SyncedBlock plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -29,8 +29,8 @@
29
29
  "atlaskit:src": "src/index.ts",
30
30
  "dependencies": {
31
31
  "@atlaskit/adf-schema": "^51.5.0",
32
- "@atlaskit/button": "23.9.3",
33
- "@atlaskit/dropdown-menu": "16.4.1",
32
+ "@atlaskit/button": "23.9.4",
33
+ "@atlaskit/dropdown-menu": "16.4.2",
34
34
  "@atlaskit/editor-json-transformer": "^8.31.0",
35
35
  "@atlaskit/editor-plugin-analytics": "^7.0.0",
36
36
  "@atlaskit/editor-plugin-block-menu": "^6.0.0",
@@ -40,20 +40,20 @@
40
40
  "@atlaskit/editor-plugin-selection": "^7.0.0",
41
41
  "@atlaskit/editor-prosemirror": "^7.2.0",
42
42
  "@atlaskit/editor-shared-styles": "^3.10.0",
43
- "@atlaskit/editor-synced-block-provider": "^3.6.0",
43
+ "@atlaskit/editor-synced-block-provider": "^3.8.0",
44
44
  "@atlaskit/editor-tables": "^2.9.0",
45
45
  "@atlaskit/editor-toolbar": "^0.19.0",
46
46
  "@atlaskit/flag": "^17.8.0",
47
- "@atlaskit/icon": "29.4.1",
47
+ "@atlaskit/icon": "29.4.2",
48
48
  "@atlaskit/icon-lab": "^5.14.0",
49
49
  "@atlaskit/logo": "^19.10.0",
50
50
  "@atlaskit/lozenge": "^13.3.0",
51
51
  "@atlaskit/modal-dialog": "^14.10.0",
52
52
  "@atlaskit/platform-feature-flags": "^1.1.0",
53
53
  "@atlaskit/primitives": "^17.1.0",
54
- "@atlaskit/spinner": "19.0.8",
55
- "@atlaskit/tmp-editor-statsig": "^16.22.0",
56
- "@atlaskit/tokens": "9.1.2",
54
+ "@atlaskit/spinner": "19.0.9",
55
+ "@atlaskit/tmp-editor-statsig": "^16.23.0",
56
+ "@atlaskit/tokens": "10.0.0",
57
57
  "@atlaskit/tooltip": "^20.14.0",
58
58
  "@atlaskit/visually-hidden": "^3.0.0",
59
59
  "@babel/runtime": "^7.0.0",