@atlaskit/editor-plugin-media-insert 25.0.4 → 25.0.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 (5) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/cjs/ui/MediaInsertPicker.js +12 -9
  3. package/dist/es2019/ui/MediaInsertPicker.js +10 -9
  4. package/dist/esm/ui/MediaInsertPicker.js +12 -9
  5. package/package.json +7 -7
package/CHANGELOG.md CHANGED
@@ -1,5 +1,20 @@
1
1
  # @atlaskit/editor-plugin-media-insert
2
2
 
3
+ ## 25.0.6
4
+
5
+ ### Patch Changes
6
+
7
+ - [`7e9f79a61fe1b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7e9f79a61fe1b) -
8
+ [ux] Applies some refactors and renames to the work for media insert tab analytics, keeping the
9
+ element names more relevant to their functions, adds commentary, and cleans up duplicate code.
10
+ - Updated dependencies
11
+
12
+ ## 25.0.5
13
+
14
+ ### Patch Changes
15
+
16
+ - Updated dependencies
17
+
3
18
  ## 25.0.4
4
19
 
5
20
  ### Patch Changes
package/dist/cjs/ui/MediaInsertPicker.js CHANGED
@@ -49,7 +49,10 @@ var getNextTabIndexForKey = function getNextTabIndexForKey(currentTabIndex, tabC
49
49
  }
50
50
  return undefined;
51
51
  };
52
- var AnalyticsTab = function AnalyticsTab(_ref) {
52
+ var getLinkTabIndex = function getLinkTabIndex(registeredTabCount, isOnlyExternalLinks) {
53
+ return registeredTabCount + (isOnlyExternalLinks ? 0 : 1);
54
+ };
55
+ var TabWithAnalytics = function TabWithAnalytics(_ref) {
53
56
  var children = _ref.children,
54
57
  onSelectTabForAnalytics = _ref.onSelectTabForAnalytics,
55
58
  selectedTabIndex = _ref.selectedTabIndex,
@@ -161,6 +164,7 @@ var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_
161
164
  autofocusRef = _useUnholyAutofocus.autofocusRef,
162
165
  onPositionCalculated = _useUnholyAutofocus.onPositionCalculated;
163
166
  var tabCount = isMediaInsertTabWithAnalyticsEnabled ? registeredTabs.length + (isOnlyExternalLinks ? 1 : 2) : 0;
167
+ var linkTabIndex = isMediaInsertTabWithAnalyticsEnabled ? getLinkTabIndex(registeredTabs.length, isOnlyExternalLinks) : 0;
164
168
  var getTabAnalyticsMetadata = _react.default.useCallback(function (selectedTabIndex) {
165
169
  var registeredTab = registeredTabs[selectedTabIndex];
166
170
  if (registeredTab) {
@@ -176,7 +180,6 @@ var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_
176
180
  selectedTabIndex: selectedTabIndex
177
181
  };
178
182
  }
179
- var linkTabIndex = registeredTabs.length + (isOnlyExternalLinks ? 0 : 1);
180
183
  if (selectedTabIndex === linkTabIndex) {
181
184
  return {
182
185
  selectedTab: _analytics.MEDIA_INSERT_TAB.LINK,
@@ -187,7 +190,7 @@ var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_
187
190
  selectedTab: 'unknown',
188
191
  selectedTabIndex: selectedTabIndex
189
192
  };
190
- }, [isOnlyExternalLinks, registeredTabs]);
193
+ }, [isOnlyExternalLinks, linkTabIndex, registeredTabs]);
191
194
  var selectedTabAnalyticsMetadataRef = _react.default.useRef(getTabAnalyticsMetadata(0));
192
195
  var tabsAnalyticsContext = _react.default.useMemo(function () {
193
196
  return {
@@ -200,6 +203,9 @@ var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_
200
203
  selectedTabAnalyticsMetadataRef.current = getTabAnalyticsMetadata(selectedTabIndex);
201
204
  }, [getTabAnalyticsMetadata]);
202
205
  var hasDispatchedInitialTabViewedEventRef = _react.default.useRef(false);
206
+ // Atlaskit Tabs only calls `onChange` after the user changes tabs, so the
207
+ // initially opened tab needs its viewed analytics event dispatched from an
208
+ // effect. The ref keeps this to once per picker open without setting state.
203
209
  _react.default.useEffect(function () {
204
210
  if (!isMediaInsertTabWithAnalyticsEnabled || !isOpen) {
205
211
  hasDispatchedInitialTabViewedEventRef.current = false;
@@ -210,8 +216,6 @@ var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_
210
216
  }
211
217
  var selectedTabMetadata = getTabAnalyticsMetadata(0);
212
218
  selectedTabAnalyticsMetadataRef.current = selectedTabMetadata;
213
- // Atlaskit Tabs only calls `onChange` after the user changes tabs. Fire the
214
- // initial viewed event once per picker open so the first rendered tab is also tracked.
215
219
  var payload = {
216
220
  action: _analytics.ACTION.VIEWED,
217
221
  actionSubject: _analytics.ACTION_SUBJECT.PICKER,
@@ -278,7 +282,6 @@ var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_
278
282
  };
279
283
  };
280
284
  var fileTabTitle = (0, _expValEqualsNoExposure.expValEqualsNoExposure)('cc_page_experiences_editor_image_generation', 'isEnabled', true) ? intl.formatMessage(_messages.mediaInsertMessages.uploadTabTitle) : intl.formatMessage(_messages.mediaInsertMessages.fileTabTitle);
281
- var linkTabIndex = isMediaInsertTabWithAnalyticsEnabled ? registeredTabs.length + (isOnlyExternalLinks ? 0 : 1) : 0;
282
285
  return /*#__PURE__*/_react.default.createElement(PopupWithListeners, {
283
286
  ariaLabel: intl.formatMessage(_messages.mediaInsertMessages.mediaPickerPopupAriaLabel)
284
287
  // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
@@ -306,17 +309,17 @@ var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_
306
309
  }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
307
310
  paddingBlockEnd: "space.150"
308
311
  }, /*#__PURE__*/_react.default.createElement(_tabs.TabList, null, isMediaInsertTabWithAnalyticsEnabled && registeredTabs.map(function (tab, index) {
309
- return /*#__PURE__*/_react.default.createElement(AnalyticsTab, {
312
+ return /*#__PURE__*/_react.default.createElement(TabWithAnalytics, {
310
313
  key: tab.key,
311
314
  onSelectTabForAnalytics: setSelectedTabAnalyticsMetadata,
312
315
  selectedTabIndex: index,
313
316
  tabCount: tabCount
314
317
  }, tab.label);
315
- }), isMediaInsertTabWithAnalyticsEnabled && !isOnlyExternalLinks && /*#__PURE__*/_react.default.createElement(AnalyticsTab, {
318
+ }), isMediaInsertTabWithAnalyticsEnabled && !isOnlyExternalLinks && /*#__PURE__*/_react.default.createElement(TabWithAnalytics, {
316
319
  onSelectTabForAnalytics: setSelectedTabAnalyticsMetadata,
317
320
  selectedTabIndex: registeredTabs.length,
318
321
  tabCount: tabCount
319
- }, fileTabTitle), isMediaInsertTabWithAnalyticsEnabled && /*#__PURE__*/_react.default.createElement(AnalyticsTab, {
322
+ }, fileTabTitle), isMediaInsertTabWithAnalyticsEnabled && /*#__PURE__*/_react.default.createElement(TabWithAnalytics, {
320
323
  onSelectTabForAnalytics: setSelectedTabAnalyticsMetadata,
321
324
  selectedTabIndex: linkTabIndex,
322
325
  tabCount: tabCount
package/dist/es2019/ui/MediaInsertPicker.js CHANGED
@@ -35,7 +35,8 @@ const getNextTabIndexForKey = (currentTabIndex, tabCount, key) => {
35
35
  }
36
36
  return undefined;
37
37
  };
38
- const AnalyticsTab = ({
38
+ const getLinkTabIndex = (registeredTabCount, isOnlyExternalLinks) => registeredTabCount + (isOnlyExternalLinks ? 0 : 1);
39
+ const TabWithAnalytics = ({
39
40
  children,
40
41
  onSelectTabForAnalytics,
41
42
  selectedTabIndex,
@@ -151,6 +152,7 @@ export const MediaInsertPicker = ({
151
152
  onPositionCalculated
152
153
  } = useUnholyAutofocus();
153
154
  const tabCount = isMediaInsertTabWithAnalyticsEnabled ? registeredTabs.length + (isOnlyExternalLinks ? 1 : 2) : 0;
155
+ const linkTabIndex = isMediaInsertTabWithAnalyticsEnabled ? getLinkTabIndex(registeredTabs.length, isOnlyExternalLinks) : 0;
154
156
  const getTabAnalyticsMetadata = React.useCallback(selectedTabIndex => {
155
157
  const registeredTab = registeredTabs[selectedTabIndex];
156
158
  if (registeredTab) {
@@ -166,7 +168,6 @@ export const MediaInsertPicker = ({
166
168
  selectedTabIndex
167
169
  };
168
170
  }
169
- const linkTabIndex = registeredTabs.length + (isOnlyExternalLinks ? 0 : 1);
170
171
  if (selectedTabIndex === linkTabIndex) {
171
172
  return {
172
173
  selectedTab: MEDIA_INSERT_TAB.LINK,
@@ -177,7 +178,7 @@ export const MediaInsertPicker = ({
177
178
  selectedTab: 'unknown',
178
179
  selectedTabIndex
179
180
  };
180
- }, [isOnlyExternalLinks, registeredTabs]);
181
+ }, [isOnlyExternalLinks, linkTabIndex, registeredTabs]);
181
182
  const selectedTabAnalyticsMetadataRef = React.useRef(getTabAnalyticsMetadata(0));
182
183
  const tabsAnalyticsContext = React.useMemo(() => ({
183
184
  get source() {
@@ -188,6 +189,9 @@ export const MediaInsertPicker = ({
188
189
  selectedTabAnalyticsMetadataRef.current = getTabAnalyticsMetadata(selectedTabIndex);
189
190
  }, [getTabAnalyticsMetadata]);
190
191
  const hasDispatchedInitialTabViewedEventRef = React.useRef(false);
192
+ // Atlaskit Tabs only calls `onChange` after the user changes tabs, so the
193
+ // initially opened tab needs its viewed analytics event dispatched from an
194
+ // effect. The ref keeps this to once per picker open without setting state.
191
195
  React.useEffect(() => {
192
196
  if (!isMediaInsertTabWithAnalyticsEnabled || !isOpen) {
193
197
  hasDispatchedInitialTabViewedEventRef.current = false;
@@ -198,8 +202,6 @@ export const MediaInsertPicker = ({
198
202
  }
199
203
  const selectedTabMetadata = getTabAnalyticsMetadata(0);
200
204
  selectedTabAnalyticsMetadataRef.current = selectedTabMetadata;
201
- // Atlaskit Tabs only calls `onChange` after the user changes tabs. Fire the
202
- // initial viewed event once per picker open so the first rendered tab is also tracked.
203
205
  const payload = {
204
206
  action: ACTION.VIEWED,
205
207
  actionSubject: ACTION_SUBJECT.PICKER,
@@ -264,7 +266,6 @@ export const MediaInsertPicker = ({
264
266
  focusEditor();
265
267
  };
266
268
  const fileTabTitle = expValEqualsNoExposure('cc_page_experiences_editor_image_generation', 'isEnabled', true) ? intl.formatMessage(mediaInsertMessages.uploadTabTitle) : intl.formatMessage(mediaInsertMessages.fileTabTitle);
267
- const linkTabIndex = isMediaInsertTabWithAnalyticsEnabled ? registeredTabs.length + (isOnlyExternalLinks ? 0 : 1) : 0;
268
269
  return /*#__PURE__*/React.createElement(PopupWithListeners, {
269
270
  ariaLabel: intl.formatMessage(mediaInsertMessages.mediaPickerPopupAriaLabel)
270
271
  // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
@@ -290,16 +291,16 @@ export const MediaInsertPicker = ({
290
291
  onChange: isMediaInsertTabWithAnalyticsEnabled ? handleTabChange : undefined
291
292
  }, /*#__PURE__*/React.createElement(Box, {
292
293
  paddingBlockEnd: "space.150"
293
- }, /*#__PURE__*/React.createElement(TabList, null, isMediaInsertTabWithAnalyticsEnabled && registeredTabs.map((tab, index) => /*#__PURE__*/React.createElement(AnalyticsTab, {
294
+ }, /*#__PURE__*/React.createElement(TabList, null, isMediaInsertTabWithAnalyticsEnabled && registeredTabs.map((tab, index) => /*#__PURE__*/React.createElement(TabWithAnalytics, {
294
295
  key: tab.key,
295
296
  onSelectTabForAnalytics: setSelectedTabAnalyticsMetadata,
296
297
  selectedTabIndex: index,
297
298
  tabCount: tabCount
298
- }, tab.label)), isMediaInsertTabWithAnalyticsEnabled && !isOnlyExternalLinks && /*#__PURE__*/React.createElement(AnalyticsTab, {
299
+ }, tab.label)), isMediaInsertTabWithAnalyticsEnabled && !isOnlyExternalLinks && /*#__PURE__*/React.createElement(TabWithAnalytics, {
299
300
  onSelectTabForAnalytics: setSelectedTabAnalyticsMetadata,
300
301
  selectedTabIndex: registeredTabs.length,
301
302
  tabCount: tabCount
302
- }, fileTabTitle), isMediaInsertTabWithAnalyticsEnabled && /*#__PURE__*/React.createElement(AnalyticsTab, {
303
+ }, fileTabTitle), isMediaInsertTabWithAnalyticsEnabled && /*#__PURE__*/React.createElement(TabWithAnalytics, {
303
304
  onSelectTabForAnalytics: setSelectedTabAnalyticsMetadata,
304
305
  selectedTabIndex: linkTabIndex,
305
306
  tabCount: tabCount
package/dist/esm/ui/MediaInsertPicker.js CHANGED
@@ -40,7 +40,10 @@ var getNextTabIndexForKey = function getNextTabIndexForKey(currentTabIndex, tabC
40
40
  }
41
41
  return undefined;
42
42
  };
43
- var AnalyticsTab = function AnalyticsTab(_ref) {
43
+ var getLinkTabIndex = function getLinkTabIndex(registeredTabCount, isOnlyExternalLinks) {
44
+ return registeredTabCount + (isOnlyExternalLinks ? 0 : 1);
45
+ };
46
+ var TabWithAnalytics = function TabWithAnalytics(_ref) {
44
47
  var children = _ref.children,
45
48
  onSelectTabForAnalytics = _ref.onSelectTabForAnalytics,
46
49
  selectedTabIndex = _ref.selectedTabIndex,
@@ -152,6 +155,7 @@ export var MediaInsertPicker = function MediaInsertPicker(_ref3) {
152
155
  autofocusRef = _useUnholyAutofocus.autofocusRef,
153
156
  onPositionCalculated = _useUnholyAutofocus.onPositionCalculated;
154
157
  var tabCount = isMediaInsertTabWithAnalyticsEnabled ? registeredTabs.length + (isOnlyExternalLinks ? 1 : 2) : 0;
158
+ var linkTabIndex = isMediaInsertTabWithAnalyticsEnabled ? getLinkTabIndex(registeredTabs.length, isOnlyExternalLinks) : 0;
155
159
  var getTabAnalyticsMetadata = React.useCallback(function (selectedTabIndex) {
156
160
  var registeredTab = registeredTabs[selectedTabIndex];
157
161
  if (registeredTab) {
@@ -167,7 +171,6 @@ export var MediaInsertPicker = function MediaInsertPicker(_ref3) {
167
171
  selectedTabIndex: selectedTabIndex
168
172
  };
169
173
  }
170
- var linkTabIndex = registeredTabs.length + (isOnlyExternalLinks ? 0 : 1);
171
174
  if (selectedTabIndex === linkTabIndex) {
172
175
  return {
173
176
  selectedTab: MEDIA_INSERT_TAB.LINK,
@@ -178,7 +181,7 @@ export var MediaInsertPicker = function MediaInsertPicker(_ref3) {
178
181
  selectedTab: 'unknown',
179
182
  selectedTabIndex: selectedTabIndex
180
183
  };
181
- }, [isOnlyExternalLinks, registeredTabs]);
184
+ }, [isOnlyExternalLinks, linkTabIndex, registeredTabs]);
182
185
  var selectedTabAnalyticsMetadataRef = React.useRef(getTabAnalyticsMetadata(0));
183
186
  var tabsAnalyticsContext = React.useMemo(function () {
184
187
  return {
@@ -191,6 +194,9 @@ export var MediaInsertPicker = function MediaInsertPicker(_ref3) {
191
194
  selectedTabAnalyticsMetadataRef.current = getTabAnalyticsMetadata(selectedTabIndex);
192
195
  }, [getTabAnalyticsMetadata]);
193
196
  var hasDispatchedInitialTabViewedEventRef = React.useRef(false);
197
+ // Atlaskit Tabs only calls `onChange` after the user changes tabs, so the
198
+ // initially opened tab needs its viewed analytics event dispatched from an
199
+ // effect. The ref keeps this to once per picker open without setting state.
194
200
  React.useEffect(function () {
195
201
  if (!isMediaInsertTabWithAnalyticsEnabled || !isOpen) {
196
202
  hasDispatchedInitialTabViewedEventRef.current = false;
@@ -201,8 +207,6 @@ export var MediaInsertPicker = function MediaInsertPicker(_ref3) {
201
207
  }
202
208
  var selectedTabMetadata = getTabAnalyticsMetadata(0);
203
209
  selectedTabAnalyticsMetadataRef.current = selectedTabMetadata;
204
- // Atlaskit Tabs only calls `onChange` after the user changes tabs. Fire the
205
- // initial viewed event once per picker open so the first rendered tab is also tracked.
206
210
  var payload = {
207
211
  action: ACTION.VIEWED,
208
212
  actionSubject: ACTION_SUBJECT.PICKER,
@@ -269,7 +273,6 @@ export var MediaInsertPicker = function MediaInsertPicker(_ref3) {
269
273
  };
270
274
  };
271
275
  var fileTabTitle = expValEqualsNoExposure('cc_page_experiences_editor_image_generation', 'isEnabled', true) ? intl.formatMessage(mediaInsertMessages.uploadTabTitle) : intl.formatMessage(mediaInsertMessages.fileTabTitle);
272
- var linkTabIndex = isMediaInsertTabWithAnalyticsEnabled ? registeredTabs.length + (isOnlyExternalLinks ? 0 : 1) : 0;
273
276
  return /*#__PURE__*/React.createElement(PopupWithListeners, {
274
277
  ariaLabel: intl.formatMessage(mediaInsertMessages.mediaPickerPopupAriaLabel)
275
278
  // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
@@ -297,17 +300,17 @@ export var MediaInsertPicker = function MediaInsertPicker(_ref3) {
297
300
  }, /*#__PURE__*/React.createElement(Box, {
298
301
  paddingBlockEnd: "space.150"
299
302
  }, /*#__PURE__*/React.createElement(TabList, null, isMediaInsertTabWithAnalyticsEnabled && registeredTabs.map(function (tab, index) {
300
- return /*#__PURE__*/React.createElement(AnalyticsTab, {
303
+ return /*#__PURE__*/React.createElement(TabWithAnalytics, {
301
304
  key: tab.key,
302
305
  onSelectTabForAnalytics: setSelectedTabAnalyticsMetadata,
303
306
  selectedTabIndex: index,
304
307
  tabCount: tabCount
305
308
  }, tab.label);
306
- }), isMediaInsertTabWithAnalyticsEnabled && !isOnlyExternalLinks && /*#__PURE__*/React.createElement(AnalyticsTab, {
309
+ }), isMediaInsertTabWithAnalyticsEnabled && !isOnlyExternalLinks && /*#__PURE__*/React.createElement(TabWithAnalytics, {
307
310
  onSelectTabForAnalytics: setSelectedTabAnalyticsMetadata,
308
311
  selectedTabIndex: registeredTabs.length,
309
312
  tabCount: tabCount
310
- }, fileTabTitle), isMediaInsertTabWithAnalyticsEnabled && /*#__PURE__*/React.createElement(AnalyticsTab, {
313
+ }, fileTabTitle), isMediaInsertTabWithAnalyticsEnabled && /*#__PURE__*/React.createElement(TabWithAnalytics, {
311
314
  onSelectTabForAnalytics: setSelectedTabAnalyticsMetadata,
312
315
  selectedTabIndex: linkTabIndex,
313
316
  tabCount: tabCount
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-media-insert",
3
- "version": "25.0.4",
3
+ "version": "25.0.6",
4
4
  "description": "Media Insert plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -21,15 +21,15 @@
21
21
  ],
22
22
  "atlaskit:src": "src/index.ts",
23
23
  "dependencies": {
24
- "@atlaskit/adf-schema": "^55.2.0",
25
- "@atlaskit/button": "^24.0.0",
24
+ "@atlaskit/adf-schema": "^56.0.0",
25
+ "@atlaskit/button": "^24.1.0",
26
26
  "@atlaskit/editor-plugin-analytics": "^12.0.0",
27
- "@atlaskit/editor-plugin-media": "^14.0.0",
27
+ "@atlaskit/editor-plugin-media": "^14.1.0",
28
28
  "@atlaskit/editor-prosemirror": "^8.0.0",
29
29
  "@atlaskit/editor-shared-styles": "^4.0.0",
30
30
  "@atlaskit/form": "^16.0.0",
31
31
  "@atlaskit/icon": "^36.0.0",
32
- "@atlaskit/media-card": "^81.0.0",
32
+ "@atlaskit/media-card": "^81.1.0",
33
33
  "@atlaskit/media-client": "^37.0.0",
34
34
  "@atlaskit/media-client-react": "^6.0.0",
35
35
  "@atlaskit/media-picker": "^72.0.0",
@@ -38,11 +38,11 @@
38
38
  "@atlaskit/section-message": "^9.0.0",
39
39
  "@atlaskit/tabs": "^20.0.0",
40
40
  "@atlaskit/textfield": "^9.0.0",
41
- "@atlaskit/tmp-editor-statsig": "^108.0.0",
41
+ "@atlaskit/tmp-editor-statsig": "^108.4.0",
42
42
  "@babel/runtime": "^7.0.0"
43
43
  },
44
44
  "peerDependencies": {
45
- "@atlaskit/editor-common": "^116.3.0",
45
+ "@atlaskit/editor-common": "^116.4.0",
46
46
  "@atlaskit/tokens": "^14.0.0",
47
47
  "react": "^18.2.0",
48
48
  "react-dom": "^18.2.0",