@atlaskit/smart-card 26.52.2 → 26.52.4

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 (112) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/dist/cjs/extractors/flexible/actions/index.js +1 -1
  3. package/dist/cjs/messages.js +5 -0
  4. package/dist/cjs/state/hooks/use-ai-summary/ai-summary-service/index.js +72 -102
  5. package/dist/cjs/utils/analytics/analytics.js +1 -1
  6. package/dist/cjs/view/FlexibleCard/components/actions/action/action-icon/index.js +23 -6
  7. package/dist/cjs/view/FlexibleCard/components/actions/action/action-stack-item/index.js +94 -0
  8. package/dist/cjs/view/FlexibleCard/components/actions/action/action-stack-item/types.js +5 -0
  9. package/dist/cjs/view/FlexibleCard/components/actions/action/index.js +36 -20
  10. package/dist/cjs/view/FlexibleCard/components/actions/delete-action/index.js +24 -0
  11. package/dist/cjs/view/FlexibleCard/components/actions/delete-action/types.js +5 -0
  12. package/dist/cjs/view/FlexibleCard/components/actions/edit-action/index.js +24 -0
  13. package/dist/cjs/view/FlexibleCard/components/actions/edit-action/types.js +5 -0
  14. package/dist/cjs/view/FlexibleCard/components/actions/index.js +15 -15
  15. package/dist/cjs/view/FlexibleCard/components/actions/preview-action/index.js +6 -2
  16. package/dist/cjs/view/FlexibleCard/components/actions/preview-action/preview-icon/index.js +19 -0
  17. package/dist/cjs/view/FlexibleCard/components/actions/utils.js +0 -22
  18. package/dist/cjs/view/FlexibleCard/components/blocks/action-block/index.js +72 -0
  19. package/dist/cjs/view/FlexibleCard/components/blocks/action-block/types.js +5 -0
  20. package/dist/cjs/view/FlexibleCard/components/blocks/index.js +8 -1
  21. package/dist/cjs/view/FlexibleCard/components/blocks/utils.js +6 -0
  22. package/dist/cjs/view/FlexibleCard/components/container/index.js +26 -5
  23. package/dist/cjs/view/FlexibleCard/components/utils.js +76 -8
  24. package/dist/cjs/view/HoverCard/components/views/resolved/index.js +2 -0
  25. package/dist/cjs/view/LinkUrl/index.js +1 -1
  26. package/dist/es2019/extractors/flexible/actions/index.js +2 -2
  27. package/dist/es2019/messages.js +5 -0
  28. package/dist/es2019/state/hooks/use-ai-summary/ai-summary-service/index.js +4 -4
  29. package/dist/es2019/utils/analytics/analytics.js +1 -1
  30. package/dist/es2019/view/FlexibleCard/components/actions/action/action-icon/index.js +21 -6
  31. package/dist/es2019/view/FlexibleCard/components/actions/action/action-stack-item/index.js +83 -0
  32. package/dist/es2019/view/FlexibleCard/components/actions/action/action-stack-item/types.js +1 -0
  33. package/dist/es2019/view/FlexibleCard/components/actions/action/index.js +34 -17
  34. package/dist/es2019/view/FlexibleCard/components/actions/delete-action/index.js +15 -0
  35. package/dist/es2019/view/FlexibleCard/components/actions/delete-action/types.js +1 -0
  36. package/dist/es2019/view/FlexibleCard/components/actions/edit-action/index.js +15 -0
  37. package/dist/es2019/view/FlexibleCard/components/actions/edit-action/types.js +1 -0
  38. package/dist/es2019/view/FlexibleCard/components/actions/index.js +2 -13
  39. package/dist/es2019/view/FlexibleCard/components/actions/preview-action/index.js +6 -2
  40. package/dist/es2019/view/FlexibleCard/components/actions/preview-action/preview-icon/index.js +10 -0
  41. package/dist/es2019/view/FlexibleCard/components/actions/utils.js +0 -24
  42. package/dist/es2019/view/FlexibleCard/components/blocks/action-block/index.js +61 -0
  43. package/dist/es2019/view/FlexibleCard/components/blocks/action-block/types.js +1 -0
  44. package/dist/es2019/view/FlexibleCard/components/blocks/index.js +2 -1
  45. package/dist/es2019/view/FlexibleCard/components/blocks/utils.js +6 -0
  46. package/dist/es2019/view/FlexibleCard/components/container/index.js +23 -24
  47. package/dist/es2019/view/FlexibleCard/components/utils.js +73 -38
  48. package/dist/es2019/view/HoverCard/components/views/resolved/index.js +3 -1
  49. package/dist/es2019/view/LinkUrl/index.js +1 -1
  50. package/dist/esm/extractors/flexible/actions/index.js +1 -1
  51. package/dist/esm/messages.js +5 -0
  52. package/dist/esm/state/hooks/use-ai-summary/ai-summary-service/index.js +72 -102
  53. package/dist/esm/utils/analytics/analytics.js +1 -1
  54. package/dist/esm/view/FlexibleCard/components/actions/action/action-icon/index.js +22 -6
  55. package/dist/esm/view/FlexibleCard/components/actions/action/action-stack-item/index.js +84 -0
  56. package/dist/esm/view/FlexibleCard/components/actions/action/action-stack-item/types.js +1 -0
  57. package/dist/esm/view/FlexibleCard/components/actions/action/index.js +35 -18
  58. package/dist/esm/view/FlexibleCard/components/actions/delete-action/index.js +17 -0
  59. package/dist/esm/view/FlexibleCard/components/actions/delete-action/types.js +1 -0
  60. package/dist/esm/view/FlexibleCard/components/actions/edit-action/index.js +17 -0
  61. package/dist/esm/view/FlexibleCard/components/actions/edit-action/types.js +1 -0
  62. package/dist/esm/view/FlexibleCard/components/actions/index.js +2 -13
  63. package/dist/esm/view/FlexibleCard/components/actions/preview-action/index.js +6 -2
  64. package/dist/esm/view/FlexibleCard/components/actions/preview-action/preview-icon/index.js +12 -0
  65. package/dist/esm/view/FlexibleCard/components/actions/utils.js +0 -22
  66. package/dist/esm/view/FlexibleCard/components/blocks/action-block/index.js +63 -0
  67. package/dist/esm/view/FlexibleCard/components/blocks/action-block/types.js +1 -0
  68. package/dist/esm/view/FlexibleCard/components/blocks/index.js +2 -1
  69. package/dist/esm/view/FlexibleCard/components/blocks/utils.js +6 -0
  70. package/dist/esm/view/FlexibleCard/components/container/index.js +26 -5
  71. package/dist/esm/view/FlexibleCard/components/utils.js +75 -7
  72. package/dist/esm/view/HoverCard/components/views/resolved/index.js +3 -1
  73. package/dist/esm/view/LinkUrl/index.js +1 -1
  74. package/dist/types/messages.d.ts +1 -1
  75. package/dist/types/state/hooks/use-ai-summary/ai-summary-service/index.d.ts +2 -2
  76. package/dist/types/state/hooks/use-ai-summary/ai-summary-service/types.d.ts +4 -4
  77. package/dist/types/view/FlexibleCard/components/actions/action/action-icon/types.d.ts +4 -3
  78. package/dist/types/view/FlexibleCard/components/actions/action/action-stack-item/index.d.ts +4 -0
  79. package/dist/types/view/FlexibleCard/components/actions/action/action-stack-item/types.d.ts +10 -0
  80. package/dist/types/view/FlexibleCard/components/actions/action/index.d.ts +3 -6
  81. package/dist/types/view/FlexibleCard/components/actions/action/types.d.ts +24 -16
  82. package/dist/types/view/FlexibleCard/components/actions/delete-action/index.d.ts +4 -0
  83. package/dist/types/view/FlexibleCard/components/actions/delete-action/types.d.ts +2 -0
  84. package/dist/types/view/FlexibleCard/components/actions/edit-action/index.d.ts +4 -0
  85. package/dist/types/view/FlexibleCard/components/actions/edit-action/types.d.ts +2 -0
  86. package/dist/types/view/FlexibleCard/components/actions/index.d.ts +2 -12
  87. package/dist/types/view/FlexibleCard/components/actions/preview-action/preview-icon/index.d.ts +4 -0
  88. package/dist/types/view/FlexibleCard/components/blocks/action-block/index.d.ts +4 -0
  89. package/dist/types/view/FlexibleCard/components/blocks/action-block/types.d.ts +17 -0
  90. package/dist/types/view/FlexibleCard/components/blocks/index.d.ts +1 -0
  91. package/dist/types/view/FlexibleCard/components/blocks/utils.d.ts +5 -0
  92. package/dist/types/view/FlexibleCard/components/utils.d.ts +11 -0
  93. package/dist/types-ts4.5/messages.d.ts +1 -1
  94. package/dist/types-ts4.5/state/hooks/use-ai-summary/ai-summary-service/index.d.ts +2 -2
  95. package/dist/types-ts4.5/state/hooks/use-ai-summary/ai-summary-service/types.d.ts +4 -4
  96. package/dist/types-ts4.5/view/FlexibleCard/components/actions/action/action-icon/types.d.ts +4 -3
  97. package/dist/types-ts4.5/view/FlexibleCard/components/actions/action/action-stack-item/index.d.ts +4 -0
  98. package/dist/types-ts4.5/view/FlexibleCard/components/actions/action/action-stack-item/types.d.ts +10 -0
  99. package/dist/types-ts4.5/view/FlexibleCard/components/actions/action/index.d.ts +3 -6
  100. package/dist/types-ts4.5/view/FlexibleCard/components/actions/action/types.d.ts +24 -16
  101. package/dist/types-ts4.5/view/FlexibleCard/components/actions/delete-action/index.d.ts +4 -0
  102. package/dist/types-ts4.5/view/FlexibleCard/components/actions/delete-action/types.d.ts +2 -0
  103. package/dist/types-ts4.5/view/FlexibleCard/components/actions/edit-action/index.d.ts +4 -0
  104. package/dist/types-ts4.5/view/FlexibleCard/components/actions/edit-action/types.d.ts +2 -0
  105. package/dist/types-ts4.5/view/FlexibleCard/components/actions/index.d.ts +2 -12
  106. package/dist/types-ts4.5/view/FlexibleCard/components/actions/preview-action/preview-icon/index.d.ts +4 -0
  107. package/dist/types-ts4.5/view/FlexibleCard/components/blocks/action-block/index.d.ts +4 -0
  108. package/dist/types-ts4.5/view/FlexibleCard/components/blocks/action-block/types.d.ts +17 -0
  109. package/dist/types-ts4.5/view/FlexibleCard/components/blocks/index.d.ts +1 -0
  110. package/dist/types-ts4.5/view/FlexibleCard/components/blocks/utils.d.ts +5 -0
  111. package/dist/types-ts4.5/view/FlexibleCard/components/utils.d.ts +11 -0
  112. package/package.json +4 -1
@@ -255,6 +255,11 @@ export var messages = defineMessages({
255
255
  defaultMessage: 'Owned by {context}',
256
256
  description: 'Indicates the person or entity that owns or maintains the resource.'
257
257
  },
258
+ preview_description: {
259
+ id: 'fabric.linking.preview_description.nonfinal',
260
+ defaultMessage: 'Open a full screen preview of this link',
261
+ description: 'Description on what Preview does'
262
+ },
258
263
  preview_improved: {
259
264
  id: 'fabric.linking.preview_improved',
260
265
  defaultMessage: 'Open preview',
@@ -22,49 +22,44 @@ export var AISummaryService = /*#__PURE__*/function () {
22
22
  status: 'ready'
23
23
  });
24
24
  _defineProperty(this, "subscribedStateSetters", new Set());
25
- _defineProperty(this, "fetchStream", /*#__PURE__*/function () {
26
- var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(summaryStyle) {
27
- var payload, options, path, requestUrl, response;
28
- return _regeneratorRuntime.wrap(function _callee$(_context) {
29
- while (1) switch (_context.prev = _context.next) {
30
- case 0:
31
- payload = {
32
- recipient_agent_named_id: 'summary_agent',
33
- agent_input_context: {
34
- content_url: _this.url,
35
- content_ari: _this.ari,
36
- summary_style: summaryStyle,
37
- summary_output_mimetype: 'text/markdown'
38
- }
39
- };
40
- options = {
41
- method: 'POST',
42
- headers: _this.config.headers,
43
- body: JSON.stringify(payload)
44
- };
45
- path = 'chat/v1/invoke_agent/stream';
46
- requestUrl = addPath(_this.config.baseUrl, path);
47
- _context.next = 6;
48
- return fetch(requestUrl, options);
49
- case 6:
50
- response = _context.sent;
51
- if (!(!response.ok || response.status >= 400)) {
52
- _context.next = 11;
53
- break;
25
+ _defineProperty(this, "fetchStream", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
26
+ var payload, options, path, requestUrl, response;
27
+ return _regeneratorRuntime.wrap(function _callee$(_context) {
28
+ while (1) switch (_context.prev = _context.next) {
29
+ case 0:
30
+ payload = {
31
+ recipient_agent_named_id: 'summary_agent',
32
+ agent_input_context: {
33
+ content_url: _this.url,
34
+ content_ari: _this.ari,
35
+ prompt_id: 'smart_links',
36
+ summary_output_mimetype: 'text/markdown'
54
37
  }
55
- throw new Error("Status: ".concat(response.status, "\n URL: ").concat(_this.url, "\n StatusText ").concat(response.statusText));
56
- case 11:
57
- return _context.abrupt("return", readStream(response));
58
- case 12:
59
- case "end":
60
- return _context.stop();
61
- }
62
- }, _callee);
63
- }));
64
- return function (_x) {
65
- return _ref.apply(this, arguments);
66
- };
67
- }());
38
+ };
39
+ options = {
40
+ method: 'POST',
41
+ headers: _this.config.headers,
42
+ body: JSON.stringify(payload)
43
+ };
44
+ path = 'chat/v1/invoke_agent/stream';
45
+ requestUrl = addPath(_this.config.baseUrl, path);
46
+ _context.next = 6;
47
+ return fetch(requestUrl, options);
48
+ case 6:
49
+ response = _context.sent;
50
+ if (!(!response.ok || response.status >= 400)) {
51
+ _context.next = 11;
52
+ break;
53
+ }
54
+ throw new Error("Status: ".concat(response.status, "\n URL: ").concat(_this.url, "\n StatusText ").concat(response.statusText));
55
+ case 11:
56
+ return _context.abrupt("return", readStream(response));
57
+ case 12:
58
+ case "end":
59
+ return _context.stop();
60
+ }
61
+ }, _callee);
62
+ })));
68
63
  var defaultConfig = {
69
64
  baseUrl: '/gateway/api/assist',
70
65
  headers: {
@@ -88,35 +83,10 @@ export var AISummaryService = /*#__PURE__*/function () {
88
83
  key: "summariseUrl",
89
84
  value: function () {
90
85
  var _summariseUrl = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
91
- var summaryStyle,
92
- _iterator2,
93
- _step2,
94
- _subscriber,
95
- id,
96
- _this$onStart,
97
- _this$onSuccess,
98
- stream,
99
- bufferContent,
100
- _iteratorAbruptCompletion,
101
- _didIteratorError,
102
- _iteratorError,
103
- _iterator,
104
- _step,
105
- chunk,
106
- _iterator3,
107
- _step3,
108
- subscriber,
109
- _chunk$message,
110
- _this$onError,
111
- message,
112
- _iterator4,
113
- _step4,
114
- _subscriber2,
115
- _args2 = arguments;
86
+ var _iterator2, _step2, _subscriber, id, _this$onStart, _this$onSuccess, stream, bufferContent, _iteratorAbruptCompletion, _didIteratorError, _iteratorError, _iterator, _step, chunk, _iterator3, _step3, subscriber, _chunk$message, _this$onError, message, _iterator4, _step4, _subscriber2;
116
87
  return _regeneratorRuntime.wrap(function _callee2$(_context2) {
117
88
  while (1) switch (_context2.prev = _context2.next) {
118
89
  case 0:
119
- summaryStyle = _args2.length > 0 && _args2[0] !== undefined ? _args2[0] : 'medium';
120
90
  this.state = {
121
91
  status: 'loading',
122
92
  content: ''
@@ -133,23 +103,23 @@ export var AISummaryService = /*#__PURE__*/function () {
133
103
  _iterator2.f();
134
104
  }
135
105
  id = uuid();
136
- _context2.prev = 5;
106
+ _context2.prev = 4;
137
107
  (_this$onStart = this.onStart) === null || _this$onStart === void 0 || _this$onStart.call(this, id);
138
- _context2.next = 9;
139
- return this.fetchStream(summaryStyle);
140
- case 9:
108
+ _context2.next = 8;
109
+ return this.fetchStream();
110
+ case 8:
141
111
  stream = _context2.sent;
142
112
  bufferContent = '';
143
113
  _iteratorAbruptCompletion = false;
144
114
  _didIteratorError = false;
145
- _context2.prev = 13;
115
+ _context2.prev = 12;
146
116
  _iterator = _asyncIterator(stream);
147
- case 15:
148
- _context2.next = 17;
117
+ case 14:
118
+ _context2.next = 16;
149
119
  return _iterator.next();
150
- case 17:
120
+ case 16:
151
121
  if (!(_iteratorAbruptCompletion = !(_step = _context2.sent).done)) {
152
- _context2.next = 26;
122
+ _context2.next = 25;
153
123
  break;
154
124
  }
155
125
  chunk = _step.value;
@@ -175,53 +145,53 @@ export var AISummaryService = /*#__PURE__*/function () {
175
145
  bufferContent = chunk.message.message.content;
176
146
  }
177
147
  if (!(chunk.type === 'ERROR')) {
178
- _context2.next = 23;
148
+ _context2.next = 22;
179
149
  break;
180
150
  }
181
151
  throw new Error(chunk === null || chunk === void 0 || (_chunk$message = chunk.message) === null || _chunk$message === void 0 ? void 0 : _chunk$message.message_template);
182
- case 23:
152
+ case 22:
183
153
  _iteratorAbruptCompletion = false;
184
- _context2.next = 15;
154
+ _context2.next = 14;
185
155
  break;
186
- case 26:
187
- _context2.next = 32;
156
+ case 25:
157
+ _context2.next = 31;
188
158
  break;
189
- case 28:
190
- _context2.prev = 28;
191
- _context2.t0 = _context2["catch"](13);
159
+ case 27:
160
+ _context2.prev = 27;
161
+ _context2.t0 = _context2["catch"](12);
192
162
  _didIteratorError = true;
193
163
  _iteratorError = _context2.t0;
194
- case 32:
164
+ case 31:
165
+ _context2.prev = 31;
195
166
  _context2.prev = 32;
196
- _context2.prev = 33;
197
167
  if (!(_iteratorAbruptCompletion && _iterator.return != null)) {
198
- _context2.next = 37;
168
+ _context2.next = 36;
199
169
  break;
200
170
  }
201
- _context2.next = 37;
171
+ _context2.next = 36;
202
172
  return _iterator.return();
203
- case 37:
204
- _context2.prev = 37;
173
+ case 36:
174
+ _context2.prev = 36;
205
175
  if (!_didIteratorError) {
206
- _context2.next = 40;
176
+ _context2.next = 39;
207
177
  break;
208
178
  }
209
179
  throw _iteratorError;
180
+ case 39:
181
+ return _context2.finish(36);
210
182
  case 40:
211
- return _context2.finish(37);
183
+ return _context2.finish(31);
212
184
  case 41:
213
- return _context2.finish(32);
214
- case 42:
215
185
  (_this$onSuccess = this.onSuccess) === null || _this$onSuccess === void 0 || _this$onSuccess.call(this, id);
216
186
  this.state = {
217
187
  status: 'done',
218
188
  content: bufferContent
219
189
  };
220
- _context2.next = 51;
190
+ _context2.next = 50;
221
191
  break;
222
- case 46:
223
- _context2.prev = 46;
224
- _context2.t1 = _context2["catch"](5);
192
+ case 45:
193
+ _context2.prev = 45;
194
+ _context2.t1 = _context2["catch"](4);
225
195
  message = _context2.t1 instanceof Error && this.isExpectedError(_context2.t1.message) ? _context2.t1.message : 'UNEXPECTED';
226
196
  (_this$onError = this.onError) === null || _this$onError === void 0 || _this$onError.call(this, id, message);
227
197
  this.state = {
@@ -229,7 +199,7 @@ export var AISummaryService = /*#__PURE__*/function () {
229
199
  content: '',
230
200
  error: message
231
201
  };
232
- case 51:
202
+ case 50:
233
203
  _iterator4 = _createForOfIteratorHelper(this.subscribedStateSetters);
234
204
  try {
235
205
  for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
@@ -241,11 +211,11 @@ export var AISummaryService = /*#__PURE__*/function () {
241
211
  } finally {
242
212
  _iterator4.f();
243
213
  }
244
- case 53:
214
+ case 52:
245
215
  case "end":
246
216
  return _context2.stop();
247
217
  }
248
- }, _callee2, this, [[5, 46], [13, 28, 32, 42], [33,, 37, 41]]);
218
+ }, _callee2, this, [[4, 45], [12, 27, 31, 41], [32,, 36, 40]]);
249
219
  }));
250
220
  function summariseUrl() {
251
221
  return _summariseUrl.apply(this, arguments);
@@ -15,7 +15,7 @@ export var ANALYTICS_CHANNEL = 'media';
15
15
  export var context = {
16
16
  componentName: 'smart-cards',
17
17
  packageName: "@atlaskit/smart-card",
18
- packageVersion: "26.52.2"
18
+ packageVersion: "26.52.4"
19
19
  };
20
20
  export var TrackQuickActionType = /*#__PURE__*/function (TrackQuickActionType) {
21
21
  TrackQuickActionType["StatusUpdate"] = "StatusUpdate";
@@ -1,5 +1,3 @@
1
- import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
2
- var _templateObject;
3
1
  /** @jsx jsx */
4
2
  import React from 'react';
5
3
  import { css, jsx } from '@emotion/react';
@@ -16,16 +14,34 @@ var getIconWidth = function getIconWidth(size) {
16
14
  return '1rem';
17
15
  }
18
16
  };
19
- var getIconStyles = function getIconStyles(size, isDisabled) {
20
- return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n color: ", ";\n ", ";\n"])), isDisabled ? "var(--ds-text-disabled, #6B778C)" : "var(--ds-icon, #44546F)", getIconSizeStyles(getIconWidth(size)));
17
+ var getIconStyles = function getIconStyles(isDisabled) {
18
+ return css({
19
+ color: isDisabled ? "var(--ds-text-disabled, #6B778C)" : "var(--ds-icon, #44546F)"
20
+ });
21
21
  };
22
+ var backgroundStyles = css({
23
+ backgroundColor: "var(--ds-background-brand-subtlest, #E9F2FF)",
24
+ borderRadius: "var(--ds-border-radius-050, 2px)",
25
+ color: "var(--ds-icon-brand, #0C66E4)",
26
+ display: 'inline-block',
27
+ lineHeight: 0,
28
+ padding: "var(--ds-space-025, 2px)",
29
+ 'span,svg,img': {
30
+ lineHeight: 0
31
+ },
32
+ // Use !important to win over `style` prop specificity in DS Spinner. :(
33
+ circle: {
34
+ stroke: "var(--ds-icon-brand, #0C66E4)".concat(" !important")
35
+ }
36
+ });
22
37
  var ActionIcon = function ActionIcon(_ref) {
23
38
  var size = _ref.size,
24
39
  testId = _ref.testId,
25
40
  icon = _ref.icon,
26
- isDisabled = _ref.isDisabled;
41
+ isDisabled = _ref.isDisabled,
42
+ showBackground = _ref.showBackground;
27
43
  return jsx("span", {
28
- css: getIconStyles(size, isDisabled),
44
+ css: [getIconStyles(isDisabled), getIconSizeStyles(getIconWidth(size)), showBackground && backgroundStyles],
29
45
  "data-testid": "".concat(testId, "-icon")
30
46
  }, icon);
31
47
  };
@@ -0,0 +1,84 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
2
+ import { Box, Inline, xcss } from '@atlaskit/primitives';
3
+ import Spinner from '@atlaskit/spinner';
4
+ import Tooltip from '@atlaskit/tooltip';
5
+ import React, { useCallback } from 'react';
6
+ import { getPrimitivesInlineSpaceBySize } from '../../../utils';
7
+ import ActionIcon from '../action-icon';
8
+ var buttonStyles = xcss({
9
+ all: 'unset',
10
+ padding: 'space.050',
11
+ width: '100%',
12
+ ':focus:not(:focus-visible)': {
13
+ outline: 'none'
14
+ },
15
+ ':focus': {
16
+ outlineColor: 'color.border.focused',
17
+ // xcss outlineOffset does not support space.negative.025
18
+ // @ts-ignore-next-line TS2322: Type "var(--ds-space-negative-025)" is not assignable to type
19
+ outlineOffset: "var(--ds-space-negative-025, -2px)",
20
+ outlineStyle: 'solid',
21
+ outlineWidth: 'border.width.outline'
22
+ },
23
+ ':hover': {
24
+ backgroundColor: 'color.background.neutral.subtle.hovered'
25
+ },
26
+ ':active': {
27
+ backgroundColor: 'color.background.neutral.subtle.pressed'
28
+ }
29
+ });
30
+ var contentStyles = xcss({
31
+ color: 'color.text',
32
+ // Replace with font token once it becomes stable (currently alpha)
33
+ // font: 'font.body.small',
34
+ fontSize: '12px',
35
+ fontStyle: 'normal',
36
+ fontWeight: '400',
37
+ lineHeight: '20px'
38
+ });
39
+ var ActionStackItem = function ActionStackItem(_ref) {
40
+ var content = _ref.content,
41
+ iconOption = _ref.icon,
42
+ isDisabled = _ref.isDisabled,
43
+ isLoading = _ref.isLoading,
44
+ onClickCallback = _ref.onClick,
45
+ size = _ref.size,
46
+ spaceOption = _ref.space,
47
+ testId = _ref.testId,
48
+ tooltipMessage = _ref.tooltipMessage,
49
+ xcss = _ref.xcss;
50
+ var space = spaceOption !== null && spaceOption !== void 0 ? spaceOption : getPrimitivesInlineSpaceBySize(size);
51
+ var onClick = useCallback(function () {
52
+ if (!isDisabled && !isLoading && onClickCallback) {
53
+ onClickCallback();
54
+ }
55
+ }, [isDisabled, isLoading, onClickCallback]);
56
+ var icon = iconOption && isLoading ? /*#__PURE__*/React.createElement(ActionIcon, {
57
+ icon: /*#__PURE__*/React.createElement(Spinner, {
58
+ testId: "".concat(testId, "-loading")
59
+ }),
60
+ showBackground: true,
61
+ size: size
62
+ }) : iconOption;
63
+
64
+ // Replace Box with Pressable once it becomes stable (currently beta)
65
+ return /*#__PURE__*/React.createElement(Tooltip, {
66
+ content: tooltipMessage || content,
67
+ hideTooltipOnMouseDown: true
68
+ }, function (tooltipProps) {
69
+ return /*#__PURE__*/React.createElement(Box, _extends({
70
+ as: "button",
71
+ xcss: [buttonStyles, xcss]
72
+ }, tooltipProps, {
73
+ onClick: onClick
74
+ }), /*#__PURE__*/React.createElement(Inline, {
75
+ alignBlock: "center",
76
+ grow: "fill",
77
+ space: space,
78
+ testId: testId
79
+ }, icon, /*#__PURE__*/React.createElement(Box, {
80
+ xcss: contentStyles
81
+ }, content)));
82
+ });
83
+ };
84
+ export default ActionStackItem;
@@ -1,7 +1,8 @@
1
1
  /** @jsx jsx */
2
- import React from 'react';
2
+
3
3
  import { jsx } from '@emotion/react';
4
4
  import { SmartLinkSize } from '../../../../../constants';
5
+ import ActionStackItem from './action-stack-item';
5
6
  import ActionButton from './action-button';
6
7
  import ActionDropdownItem from './action-dropdown-item';
7
8
  import ActionIcon from './action-icon';
@@ -10,12 +11,10 @@ import ActionIcon from './action-icon';
10
11
  * A base action that can be triggered with an on click.
11
12
  * @internal
12
13
  * @param {ActionProps} ActionProps - The props necessary for the Action.
13
- * @see DeleteAction
14
- * @see EditAction
15
- * @see CustomAction
16
14
  */
17
15
  var Action = function Action(_ref) {
18
- var _ref$appearance = _ref.appearance,
16
+ var as = _ref.as,
17
+ _ref$appearance = _ref.appearance,
19
18
  appearance = _ref$appearance === void 0 ? 'subtle' : _ref$appearance,
20
19
  content = _ref.content,
21
20
  _ref$isLoading = _ref.isLoading,
@@ -28,44 +27,62 @@ var Action = function Action(_ref) {
28
27
  icon = _ref.icon,
29
28
  _ref$iconPosition = _ref.iconPosition,
30
29
  iconPosition = _ref$iconPosition === void 0 ? 'before' : _ref$iconPosition,
30
+ spaceInline = _ref.spaceInline,
31
31
  tooltipMessage = _ref.tooltipMessage,
32
+ xcss = _ref.xcss,
32
33
  asDropDownItem = _ref.asDropDownItem,
33
34
  overrideCss = _ref.overrideCss,
34
35
  isDisabled = _ref.isDisabled;
35
36
  if (!onClick) {
36
37
  return null;
37
38
  }
39
+ var isStackItem = as === 'stack-item';
40
+ var isDropdownItem = as === 'dropdown-item' || asDropDownItem;
38
41
  var actionIcon = icon && jsx(ActionIcon, {
39
42
  isDisabled: isDisabled,
40
43
  icon: icon,
41
44
  size: size,
45
+ showBackground: isStackItem,
42
46
  testId: testId
43
47
  });
44
48
  var iconBefore = icon && iconPosition === 'before' ? actionIcon : undefined;
45
49
  var iconAfter = icon && iconPosition === 'after' ? actionIcon : undefined;
46
- if (asDropDownItem) {
47
- return jsx(ActionDropdownItem, {
50
+ if (isStackItem) {
51
+ return jsx(ActionStackItem, {
48
52
  content: content,
49
- iconAfter: iconAfter,
50
- iconBefore: iconBefore,
53
+ icon: actionIcon,
54
+ space: spaceInline,
55
+ isDisabled: isDisabled,
51
56
  isLoading: isLoading,
52
57
  onClick: onClick,
53
- testId: testId
58
+ size: size,
59
+ testId: testId,
60
+ tooltipMessage: tooltipMessage || content,
61
+ xcss: xcss
54
62
  });
55
- } else {
56
- return jsx(ActionButton, {
57
- appearance: appearance,
63
+ }
64
+ if (isDropdownItem) {
65
+ return jsx(ActionDropdownItem, {
58
66
  content: content,
59
67
  iconAfter: iconAfter,
60
68
  iconBefore: iconBefore,
61
69
  isLoading: isLoading,
62
70
  onClick: onClick,
63
- overrideCss: overrideCss,
64
- size: size,
65
- testId: testId,
66
- tooltipMessage: tooltipMessage || content,
67
- isDisabled: isDisabled
71
+ testId: testId
68
72
  });
69
73
  }
74
+ return jsx(ActionButton, {
75
+ appearance: appearance,
76
+ content: content,
77
+ iconAfter: iconAfter,
78
+ iconBefore: iconBefore,
79
+ isLoading: isLoading,
80
+ onClick: onClick,
81
+ overrideCss: overrideCss,
82
+ size: size,
83
+ testId: testId,
84
+ tooltipMessage: tooltipMessage || content,
85
+ isDisabled: isDisabled
86
+ });
70
87
  };
71
88
  export default Action;
@@ -0,0 +1,17 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
2
+ import React from 'react';
3
+ import Action from '../action';
4
+ import { messages } from '../../../../../messages';
5
+ import { FormattedMessage } from 'react-intl-next';
6
+ import CrossIcon from '@atlaskit/icon/glyph/cross';
7
+ var DeleteAction = function DeleteAction(props) {
8
+ return /*#__PURE__*/React.createElement(Action, _extends({
9
+ content: /*#__PURE__*/React.createElement(FormattedMessage, messages.delete),
10
+ icon: /*#__PURE__*/React.createElement(CrossIcon, {
11
+ label: "Delete"
12
+ }),
13
+ testId: "smart-action-delete-action",
14
+ tooltipMessage: /*#__PURE__*/React.createElement(FormattedMessage, messages.delete)
15
+ }, props));
16
+ };
17
+ export default DeleteAction;
@@ -0,0 +1,17 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
2
+ import React from 'react';
3
+ import Action from '../action';
4
+ import { messages } from '../../../../../messages';
5
+ import { FormattedMessage } from 'react-intl-next';
6
+ import EditIcon from '@atlaskit/icon/glyph/edit';
7
+ var EditAction = function EditAction(props) {
8
+ return /*#__PURE__*/React.createElement(Action, _extends({
9
+ content: /*#__PURE__*/React.createElement(FormattedMessage, messages.edit),
10
+ icon: /*#__PURE__*/React.createElement(EditIcon, {
11
+ label: "Edit"
12
+ }),
13
+ testId: "smart-action-edit-action",
14
+ tooltipMessage: /*#__PURE__*/React.createElement(FormattedMessage, messages.edit)
15
+ }, props));
16
+ };
17
+ export default EditAction;
@@ -3,19 +3,8 @@ import { createDataAction, createUIAction } from './utils';
3
3
  export { default as FollowAction } from './follow-action';
4
4
  export { default as PreviewAction } from './preview-action';
5
5
  export { default as DownloadAction } from './download-action';
6
-
7
- /**
8
- * Creates a DeleteAction component. Accepts default ActionProps, but defaults
9
- * the icon to a cross icon.
10
- * @see Action
11
- */
12
- export var DeleteAction = createUIAction(ActionName.DeleteAction);
13
- /**
14
- * Creates a EditAction component. Accepts default ActionProps, but defaults
15
- * the icon to an edit (pencil) icon.
16
- * @see Action
17
- */
18
- export var EditAction = createUIAction(ActionName.EditAction);
6
+ export { default as EditAction } from './edit-action';
7
+ export { default as DeleteAction } from './delete-action';
19
8
 
20
9
  /**
21
10
  * Creates a ViewAction component. Accepts default ViewActionProps, and defaults
@@ -15,6 +15,7 @@ import { useFlexibleUiAnalyticsContext, useFlexibleUiContext } from '../../../..
15
15
  import useInvokeClientAction from '../../../../../state/hooks/use-invoke-client-action';
16
16
  import { openEmbedModalWithFlexibleUiIcon } from '../../utils';
17
17
  import Action from '../action';
18
+ import PreviewIcon from './preview-icon';
18
19
  var PreviewAction = function PreviewAction(_ref) {
19
20
  var _context$actions;
20
21
  var onClickCallback = _ref.onClick,
@@ -60,14 +61,17 @@ var PreviewAction = function PreviewAction(_ref) {
60
61
  onClickCallback();
61
62
  }
62
63
  }, [analytics, data, invoke, onClickCallback]);
64
+ var isStackItem = props.as === 'stack-item';
65
+ var Icon = isStackItem ? PreviewIcon : VidFullScreenOnIcon;
66
+ var tooltipMessage = isStackItem ? messages.preview_description : messages.preview_improved;
63
67
  return data ? /*#__PURE__*/React.createElement(Action, _extends({
64
68
  content: /*#__PURE__*/React.createElement(FormattedMessage, messages.preview_improved),
65
- icon: /*#__PURE__*/React.createElement(VidFullScreenOnIcon, {
69
+ icon: /*#__PURE__*/React.createElement(Icon, {
66
70
  label: "Open preview"
67
71
  }),
68
72
  onClick: onClick,
69
73
  testId: "smart-action-preview-action",
70
- tooltipMessage: /*#__PURE__*/React.createElement(FormattedMessage, messages.preview_improved)
74
+ tooltipMessage: /*#__PURE__*/React.createElement(FormattedMessage, tooltipMessage)
71
75
  }, data, props)) : null;
72
76
  };
73
77
  export default PreviewAction;
@@ -0,0 +1,12 @@
1
+ import EditorExpandIcon from '@atlaskit/icon/glyph/editor/expand';
2
+ import { Box, xcss } from '@atlaskit/primitives';
3
+ import React from 'react';
4
+ var iconStyles = xcss({
5
+ transform: 'rotate(-45deg)'
6
+ });
7
+ var PreviewIcon = function PreviewIcon(props) {
8
+ return /*#__PURE__*/React.createElement(Box, {
9
+ xcss: iconStyles
10
+ }, /*#__PURE__*/React.createElement(EditorExpandIcon, props));
11
+ };
12
+ export default PreviewIcon;
@@ -10,33 +10,11 @@ import React, { useContext } from 'react';
10
10
  import Action from './action';
11
11
  import { FormattedMessage } from 'react-intl-next';
12
12
  import { messages } from '../../../../messages';
13
- import CrossIcon from '@atlaskit/icon/glyph/cross';
14
- import EditIcon from '@atlaskit/icon/glyph/edit';
15
13
  import ViewAction from './action/view-action';
16
14
  import ShortcutIcon from '@atlaskit/icon/glyph/shortcut';
17
15
  var actionMappings = (_actionMappings = {}, _defineProperty(_actionMappings, ActionName.CustomAction, {
18
16
  component: Action,
19
17
  props: {}
20
- }), _defineProperty(_actionMappings, ActionName.DeleteAction, {
21
- component: Action,
22
- props: {
23
- testId: 'smart-action-delete-action',
24
- content: /*#__PURE__*/React.createElement(FormattedMessage, messages.delete),
25
- icon: /*#__PURE__*/React.createElement(CrossIcon, {
26
- label: "Delete"
27
- }),
28
- tooltipMessage: /*#__PURE__*/React.createElement(FormattedMessage, messages.delete)
29
- }
30
- }), _defineProperty(_actionMappings, ActionName.EditAction, {
31
- component: Action,
32
- props: {
33
- testId: 'smart-action-edit-action',
34
- content: /*#__PURE__*/React.createElement(FormattedMessage, messages.edit),
35
- icon: /*#__PURE__*/React.createElement(EditIcon, {
36
- label: "Edit"
37
- }),
38
- tooltipMessage: /*#__PURE__*/React.createElement(FormattedMessage, messages.edit)
39
- }
40
18
  }), _defineProperty(_actionMappings, ActionName.ViewAction, {
41
19
  component: ViewAction,
42
20
  props: {