@atlaskit/editor-plugin-media-insert 2.5.0 → 2.5.2

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 (6) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/cjs/hooks/use-unholy-autofocus.js +1 -1
  3. package/dist/cjs/ui/MediaInsertPicker.js +27 -13
  4. package/dist/es2019/ui/MediaInsertPicker.js +18 -3
  5. package/dist/esm/ui/MediaInsertPicker.js +27 -13
  6. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # @atlaskit/editor-plugin-media-insert
2
2
 
3
+ ## 2.5.2
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 2.5.1
10
+
11
+ ### Patch Changes
12
+
13
+ - [`45ce61e4e55b0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/45ce61e4e55b0) -
14
+ [ux] [ED-24844] Make tab panels in media insert popup non-focusable, instead users focus will go
15
+ to the first interactive element inside the tab panel
16
+
3
17
  ## 2.5.0
4
18
 
5
19
  ### Minor Changes
package/dist/cjs/hooks/use-unholy-autofocus.js CHANGED
@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.useUnholyAutofocus = void 0;
8
8
  var _react = _interopRequireWildcard(require("react"));
9
9
  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); }
10
- 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 && Object.prototype.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; }
10
+ 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; }
11
11
  /**
12
12
  * Autofocuses the first interactive element in the first tab panel
13
13
  * when the media picker is opened.
package/dist/cjs/ui/MediaInsertPicker.js CHANGED
@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
8
  exports.MediaInsertPicker = void 0;
9
+ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
9
10
  var _react = _interopRequireDefault(require("react"));
10
11
  var _reactIntlNext = require("react-intl-next");
11
12
  var _analytics = require("@atlaskit/editor-common/analytics");
@@ -22,7 +23,7 @@ var _LocalMedia = require("./LocalMedia");
22
23
  var _MediaFromURL = require("./MediaFromURL");
23
24
  var _MediaInsertWrapper = require("./MediaInsertWrapper");
24
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); }
25
- 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 && Object.prototype.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; }
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; }
26
27
  var PopupWithListeners = (0, _ui.withOuterListeners)(_ui.Popup);
27
28
  var getDomRefFromSelection = function getDomRefFromSelection(view, dispatchAnalyticsEvent) {
28
29
  try {
@@ -47,17 +48,30 @@ var getDomRefFromSelection = function getDomRefFromSelection(view, dispatchAnaly
47
48
  }
48
49
  }
49
50
  };
50
- var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_ref) {
51
+
52
+ /**
53
+ * A custom TabPanel that is non-focusable.
54
+ */
55
+ var CustomTabPanel = function CustomTabPanel(_ref) {
56
+ var children = _ref.children;
57
+ var tabPanelAttributes = (0, _tabs.useTabPanel)();
58
+ return /*#__PURE__*/_react.default.createElement(_primitives.Box, (0, _extends2.default)({
59
+ paddingBlockEnd: "space.150"
60
+ }, tabPanelAttributes, {
61
+ tabIndex: -1
62
+ }), children);
63
+ };
64
+ var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_ref2) {
51
65
  var _useSharedPluginState, _useSharedPluginState2;
52
- var api = _ref.api,
53
- editorView = _ref.editorView,
54
- dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
55
- popupsMountPoint = _ref.popupsMountPoint,
56
- popupsBoundariesElement = _ref.popupsBoundariesElement,
57
- popupsScrollableElement = _ref.popupsScrollableElement,
58
- _closeMediaInsertPicker = _ref.closeMediaInsertPicker,
59
- insertMediaSingle = _ref.insertMediaSingle,
60
- insertExternalMediaSingle = _ref.insertExternalMediaSingle;
66
+ var api = _ref2.api,
67
+ editorView = _ref2.editorView,
68
+ dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent,
69
+ popupsMountPoint = _ref2.popupsMountPoint,
70
+ popupsBoundariesElement = _ref2.popupsBoundariesElement,
71
+ popupsScrollableElement = _ref2.popupsScrollableElement,
72
+ _closeMediaInsertPicker = _ref2.closeMediaInsertPicker,
73
+ insertMediaSingle = _ref2.insertMediaSingle,
74
+ insertExternalMediaSingle = _ref2.insertExternalMediaSingle;
61
75
  var targetRef = getDomRefFromSelection(editorView, dispatchAnalyticsEvent);
62
76
  var isOpen = (_useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['mediaInsert'])) === null || _useSharedPluginState === void 0 || (_useSharedPluginState = _useSharedPluginState.mediaInsertState) === null || _useSharedPluginState === void 0 ? void 0 : _useSharedPluginState.isOpen;
63
77
  var mediaProvider = (_useSharedPluginState2 = (0, _hooks.useSharedPluginState)(api, ['media'])) === null || _useSharedPluginState2 === void 0 || (_useSharedPluginState2 = _useSharedPluginState2.mediaState) === null || _useSharedPluginState2 === void 0 ? void 0 : _useSharedPluginState2.mediaProvider;
@@ -109,7 +123,7 @@ var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_
109
123
  id: "media-insert-tab-navigation"
110
124
  }, /*#__PURE__*/_react.default.createElement(_primitives.Box, {
111
125
  paddingBlockEnd: "space.150"
112
- }, /*#__PURE__*/_react.default.createElement(_tabs.TabList, null, /*#__PURE__*/_react.default.createElement(_tabs.Tab, null, intl.formatMessage(_messages.mediaInsertMessages.fileTabTitle)), /*#__PURE__*/_react.default.createElement(_tabs.Tab, null, intl.formatMessage(_messages.mediaInsertMessages.linkTabTitle)))), /*#__PURE__*/_react.default.createElement(_tabs.TabPanel, null, /*#__PURE__*/_react.default.createElement(_LocalMedia.LocalMedia, {
126
+ }, /*#__PURE__*/_react.default.createElement(_tabs.TabList, null, /*#__PURE__*/_react.default.createElement(_tabs.Tab, null, intl.formatMessage(_messages.mediaInsertMessages.fileTabTitle)), /*#__PURE__*/_react.default.createElement(_tabs.Tab, null, intl.formatMessage(_messages.mediaInsertMessages.linkTabTitle)))), /*#__PURE__*/_react.default.createElement(CustomTabPanel, null, /*#__PURE__*/_react.default.createElement(_LocalMedia.LocalMedia, {
113
127
  ref: autofocusRef,
114
128
  mediaProvider: mediaProvider,
115
129
  insertMediaSingle: insertMediaSingle,
@@ -118,7 +132,7 @@ var MediaInsertPicker = exports.MediaInsertPicker = function MediaInsertPicker(_
118
132
  focusEditor();
119
133
  },
120
134
  dispatchAnalyticsEvent: dispatchAnalyticsEvent
121
- })), /*#__PURE__*/_react.default.createElement(_tabs.TabPanel, null, /*#__PURE__*/_react.default.createElement(_MediaFromURL.MediaFromURL, {
135
+ })), /*#__PURE__*/_react.default.createElement(CustomTabPanel, null, /*#__PURE__*/_react.default.createElement(_MediaFromURL.MediaFromURL, {
122
136
  mediaProvider: mediaProvider,
123
137
  dispatchAnalyticsEvent: dispatchAnalyticsEvent,
124
138
  closeMediaInsertPicker: function closeMediaInsertPicker() {
package/dist/es2019/ui/MediaInsertPicker.js CHANGED
@@ -1,3 +1,4 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
1
2
  import React from 'react';
2
3
  import { useIntl } from 'react-intl-next';
3
4
  import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
@@ -7,7 +8,7 @@ import { Popup, withOuterListeners } from '@atlaskit/editor-common/ui';
7
8
  import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
8
9
  import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
9
10
  import { Box } from '@atlaskit/primitives';
10
- import Tabs, { Tab, TabList, TabPanel } from '@atlaskit/tabs';
11
+ import Tabs, { Tab, TabList, useTabPanel } from '@atlaskit/tabs';
11
12
  import { useFocusEditor } from '../hooks/use-focus-editor';
12
13
  import { useUnholyAutofocus } from '../hooks/use-unholy-autofocus';
13
14
  import { LocalMedia } from './LocalMedia';
@@ -37,6 +38,20 @@ const getDomRefFromSelection = (view, dispatchAnalyticsEvent) => {
37
38
  }
38
39
  }
39
40
  };
41
+
42
+ /**
43
+ * A custom TabPanel that is non-focusable.
44
+ */
45
+ const CustomTabPanel = ({
46
+ children
47
+ }) => {
48
+ const tabPanelAttributes = useTabPanel();
49
+ return /*#__PURE__*/React.createElement(Box, _extends({
50
+ paddingBlockEnd: "space.150"
51
+ }, tabPanelAttributes, {
52
+ tabIndex: -1
53
+ }), children);
54
+ };
40
55
  export const MediaInsertPicker = ({
41
56
  api,
42
57
  editorView,
@@ -99,7 +114,7 @@ export const MediaInsertPicker = ({
99
114
  id: "media-insert-tab-navigation"
100
115
  }, /*#__PURE__*/React.createElement(Box, {
101
116
  paddingBlockEnd: "space.150"
102
- }, /*#__PURE__*/React.createElement(TabList, null, /*#__PURE__*/React.createElement(Tab, null, intl.formatMessage(mediaInsertMessages.fileTabTitle)), /*#__PURE__*/React.createElement(Tab, null, intl.formatMessage(mediaInsertMessages.linkTabTitle)))), /*#__PURE__*/React.createElement(TabPanel, null, /*#__PURE__*/React.createElement(LocalMedia, {
117
+ }, /*#__PURE__*/React.createElement(TabList, null, /*#__PURE__*/React.createElement(Tab, null, intl.formatMessage(mediaInsertMessages.fileTabTitle)), /*#__PURE__*/React.createElement(Tab, null, intl.formatMessage(mediaInsertMessages.linkTabTitle)))), /*#__PURE__*/React.createElement(CustomTabPanel, null, /*#__PURE__*/React.createElement(LocalMedia, {
103
118
  ref: autofocusRef,
104
119
  mediaProvider: mediaProvider,
105
120
  insertMediaSingle: insertMediaSingle,
@@ -108,7 +123,7 @@ export const MediaInsertPicker = ({
108
123
  focusEditor();
109
124
  },
110
125
  dispatchAnalyticsEvent: dispatchAnalyticsEvent
111
- })), /*#__PURE__*/React.createElement(TabPanel, null, /*#__PURE__*/React.createElement(MediaFromURL, {
126
+ })), /*#__PURE__*/React.createElement(CustomTabPanel, null, /*#__PURE__*/React.createElement(MediaFromURL, {
112
127
  mediaProvider: mediaProvider,
113
128
  dispatchAnalyticsEvent: dispatchAnalyticsEvent,
114
129
  closeMediaInsertPicker: () => {
package/dist/esm/ui/MediaInsertPicker.js CHANGED
@@ -1,3 +1,4 @@
1
+ import _extends from "@babel/runtime/helpers/extends";
1
2
  import React from 'react';
2
3
  import { useIntl } from 'react-intl-next';
3
4
  import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
@@ -7,7 +8,7 @@ import { Popup, withOuterListeners } from '@atlaskit/editor-common/ui';
7
8
  import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
8
9
  import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
9
10
  import { Box } from '@atlaskit/primitives';
10
- import Tabs, { Tab, TabList, TabPanel } from '@atlaskit/tabs';
11
+ import Tabs, { Tab, TabList, useTabPanel } from '@atlaskit/tabs';
11
12
  import { useFocusEditor } from '../hooks/use-focus-editor';
12
13
  import { useUnholyAutofocus } from '../hooks/use-unholy-autofocus';
13
14
  import { LocalMedia } from './LocalMedia';
@@ -37,17 +38,30 @@ var getDomRefFromSelection = function getDomRefFromSelection(view, dispatchAnaly
37
38
  }
38
39
  }
39
40
  };
40
- export var MediaInsertPicker = function MediaInsertPicker(_ref) {
41
+
42
+ /**
43
+ * A custom TabPanel that is non-focusable.
44
+ */
45
+ var CustomTabPanel = function CustomTabPanel(_ref) {
46
+ var children = _ref.children;
47
+ var tabPanelAttributes = useTabPanel();
48
+ return /*#__PURE__*/React.createElement(Box, _extends({
49
+ paddingBlockEnd: "space.150"
50
+ }, tabPanelAttributes, {
51
+ tabIndex: -1
52
+ }), children);
53
+ };
54
+ export var MediaInsertPicker = function MediaInsertPicker(_ref2) {
41
55
  var _useSharedPluginState, _useSharedPluginState2;
42
- var api = _ref.api,
43
- editorView = _ref.editorView,
44
- dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
45
- popupsMountPoint = _ref.popupsMountPoint,
46
- popupsBoundariesElement = _ref.popupsBoundariesElement,
47
- popupsScrollableElement = _ref.popupsScrollableElement,
48
- _closeMediaInsertPicker = _ref.closeMediaInsertPicker,
49
- insertMediaSingle = _ref.insertMediaSingle,
50
- insertExternalMediaSingle = _ref.insertExternalMediaSingle;
56
+ var api = _ref2.api,
57
+ editorView = _ref2.editorView,
58
+ dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent,
59
+ popupsMountPoint = _ref2.popupsMountPoint,
60
+ popupsBoundariesElement = _ref2.popupsBoundariesElement,
61
+ popupsScrollableElement = _ref2.popupsScrollableElement,
62
+ _closeMediaInsertPicker = _ref2.closeMediaInsertPicker,
63
+ insertMediaSingle = _ref2.insertMediaSingle,
64
+ insertExternalMediaSingle = _ref2.insertExternalMediaSingle;
51
65
  var targetRef = getDomRefFromSelection(editorView, dispatchAnalyticsEvent);
52
66
  var isOpen = (_useSharedPluginState = useSharedPluginState(api, ['mediaInsert'])) === null || _useSharedPluginState === void 0 || (_useSharedPluginState = _useSharedPluginState.mediaInsertState) === null || _useSharedPluginState === void 0 ? void 0 : _useSharedPluginState.isOpen;
53
67
  var mediaProvider = (_useSharedPluginState2 = useSharedPluginState(api, ['media'])) === null || _useSharedPluginState2 === void 0 || (_useSharedPluginState2 = _useSharedPluginState2.mediaState) === null || _useSharedPluginState2 === void 0 ? void 0 : _useSharedPluginState2.mediaProvider;
@@ -99,7 +113,7 @@ export var MediaInsertPicker = function MediaInsertPicker(_ref) {
99
113
  id: "media-insert-tab-navigation"
100
114
  }, /*#__PURE__*/React.createElement(Box, {
101
115
  paddingBlockEnd: "space.150"
102
- }, /*#__PURE__*/React.createElement(TabList, null, /*#__PURE__*/React.createElement(Tab, null, intl.formatMessage(mediaInsertMessages.fileTabTitle)), /*#__PURE__*/React.createElement(Tab, null, intl.formatMessage(mediaInsertMessages.linkTabTitle)))), /*#__PURE__*/React.createElement(TabPanel, null, /*#__PURE__*/React.createElement(LocalMedia, {
116
+ }, /*#__PURE__*/React.createElement(TabList, null, /*#__PURE__*/React.createElement(Tab, null, intl.formatMessage(mediaInsertMessages.fileTabTitle)), /*#__PURE__*/React.createElement(Tab, null, intl.formatMessage(mediaInsertMessages.linkTabTitle)))), /*#__PURE__*/React.createElement(CustomTabPanel, null, /*#__PURE__*/React.createElement(LocalMedia, {
103
117
  ref: autofocusRef,
104
118
  mediaProvider: mediaProvider,
105
119
  insertMediaSingle: insertMediaSingle,
@@ -108,7 +122,7 @@ export var MediaInsertPicker = function MediaInsertPicker(_ref) {
108
122
  focusEditor();
109
123
  },
110
124
  dispatchAnalyticsEvent: dispatchAnalyticsEvent
111
- })), /*#__PURE__*/React.createElement(TabPanel, null, /*#__PURE__*/React.createElement(MediaFromURL, {
125
+ })), /*#__PURE__*/React.createElement(CustomTabPanel, null, /*#__PURE__*/React.createElement(MediaFromURL, {
112
126
  mediaProvider: mediaProvider,
113
127
  dispatchAnalyticsEvent: dispatchAnalyticsEvent,
114
128
  closeMediaInsertPicker: function closeMediaInsertPicker() {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-media-insert",
3
- "version": "2.5.0",
3
+ "version": "2.5.2",
4
4
  "description": "Media Insert plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -24,7 +24,7 @@
24
24
  },
25
25
  "dependencies": {
26
26
  "@atlaskit/button": "^20.1.0",
27
- "@atlaskit/editor-common": "^88.13.0",
27
+ "@atlaskit/editor-common": "^89.0.0",
28
28
  "@atlaskit/editor-plugin-analytics": "^1.8.0",
29
29
  "@atlaskit/editor-plugin-media": "^1.31.0",
30
30
  "@atlaskit/editor-prosemirror": "5.0.1",