@atlaskit/editor-core 187.47.6 → 187.47.9
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.
- package/CHANGELOG.md +6 -0
- package/dist/cjs/plugins/alignment/ui/ToolbarAlignment/index.js +8 -20
- package/dist/cjs/plugins/floating-toolbar/ui/Dropdown.js +4 -4
- package/dist/cjs/plugins/text-color/ui/ToolbarTextColor/index.js +1 -2
- package/dist/cjs/version-wrapper.js +1 -1
- package/dist/es2019/plugins/alignment/ui/ToolbarAlignment/index.js +9 -19
- package/dist/es2019/plugins/floating-toolbar/ui/Dropdown.js +5 -5
- package/dist/es2019/plugins/text-color/ui/ToolbarTextColor/index.js +1 -1
- package/dist/es2019/version-wrapper.js +1 -1
- package/dist/esm/plugins/alignment/ui/ToolbarAlignment/index.js +9 -21
- package/dist/esm/plugins/floating-toolbar/ui/Dropdown.js +5 -5
- package/dist/esm/plugins/text-color/ui/ToolbarTextColor/index.js +1 -1
- package/dist/esm/version-wrapper.js +1 -1
- package/dist/types/plugins/alignment/ui/ToolbarAlignment/index.d.ts +0 -1
- package/dist/types-ts4.5/plugins/alignment/ui/ToolbarAlignment/index.d.ts +0 -1
- package/package.json +1 -1
- package/dist/cjs/ui/Dropdown/index.js +0 -9
- package/dist/es2019/ui/Dropdown/index.js +0 -2
- package/dist/esm/ui/Dropdown/index.js +0 -2
- package/dist/types/ui/Dropdown/index.d.ts +0 -3
- package/dist/types-ts4.5/ui/Dropdown/index.d.ts +0 -3
package/CHANGELOG.md
CHANGED
|
@@ -23,8 +23,6 @@ var _styles = require("./styles");
|
|
|
23
23
|
var _styles2 = require("@atlaskit/editor-common/styles");
|
|
24
24
|
var _iconMap = require("./icon-map");
|
|
25
25
|
var _messages = require("./messages");
|
|
26
|
-
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
27
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
28
26
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
|
|
29
27
|
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /** @jsx jsx */
|
|
30
28
|
var AlignmentToolbar = /*#__PURE__*/function (_React$Component) {
|
|
@@ -39,8 +37,7 @@ var AlignmentToolbar = /*#__PURE__*/function (_React$Component) {
|
|
|
39
37
|
_this = _super.call.apply(_super, [this].concat(args));
|
|
40
38
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "toolbarItemRef", /*#__PURE__*/_react.default.createRef());
|
|
41
39
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
|
|
42
|
-
isOpen: false
|
|
43
|
-
isOpenedByKeyboard: false
|
|
40
|
+
isOpen: false
|
|
44
41
|
});
|
|
45
42
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "changeAlignment", function (align, togglePopup) {
|
|
46
43
|
if (togglePopup) {
|
|
@@ -50,16 +47,14 @@ var AlignmentToolbar = /*#__PURE__*/function (_React$Component) {
|
|
|
50
47
|
});
|
|
51
48
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "toggleOpen", function () {
|
|
52
49
|
_this.setState({
|
|
53
|
-
isOpen: !_this.state.isOpen
|
|
54
|
-
isOpenedByKeyboard: false
|
|
50
|
+
isOpen: !_this.state.isOpen
|
|
55
51
|
});
|
|
56
52
|
});
|
|
57
53
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "toggleOpenByKeyboard", function (event) {
|
|
58
54
|
if (event.key === 'Enter' || event.key === ' ') {
|
|
59
55
|
event.preventDefault();
|
|
60
56
|
_this.setState({
|
|
61
|
-
isOpen: !_this.state.isOpen
|
|
62
|
-
isOpenedByKeyboard: true
|
|
57
|
+
isOpen: !_this.state.isOpen
|
|
63
58
|
});
|
|
64
59
|
}
|
|
65
60
|
});
|
|
@@ -85,9 +80,7 @@ var AlignmentToolbar = /*#__PURE__*/function (_React$Component) {
|
|
|
85
80
|
key: "render",
|
|
86
81
|
value: function render() {
|
|
87
82
|
var _this2 = this;
|
|
88
|
-
var
|
|
89
|
-
isOpen = _this$state.isOpen,
|
|
90
|
-
isOpenedByKeyboard = _this$state.isOpenedByKeyboard;
|
|
83
|
+
var isOpen = this.state.isOpen;
|
|
91
84
|
var _this$props = this.props,
|
|
92
85
|
popupsMountPoint = _this$props.popupsMountPoint,
|
|
93
86
|
popupsBoundariesElement = _this$props.popupsBoundariesElement,
|
|
@@ -104,14 +97,6 @@ var AlignmentToolbar = /*#__PURE__*/function (_React$Component) {
|
|
|
104
97
|
boundariesElement: popupsBoundariesElement,
|
|
105
98
|
scrollableElement: popupsScrollableElement,
|
|
106
99
|
isOpen: isOpen,
|
|
107
|
-
shouldFocusFirstItem: function shouldFocusFirstItem() {
|
|
108
|
-
if (isOpenedByKeyboard) {
|
|
109
|
-
_this2.setState(_objectSpread(_objectSpread({}, _this2.state), {}, {
|
|
110
|
-
isOpenedByKeyboard: false
|
|
111
|
-
}));
|
|
112
|
-
}
|
|
113
|
-
return isOpenedByKeyboard;
|
|
114
|
-
},
|
|
115
100
|
onOpenChange: function onOpenChange(_ref) {
|
|
116
101
|
var isOpen = _ref.isOpen;
|
|
117
102
|
_this2.setState({
|
|
@@ -127,6 +112,9 @@ var AlignmentToolbar = /*#__PURE__*/function (_React$Component) {
|
|
|
127
112
|
}
|
|
128
113
|
},
|
|
129
114
|
handleEscapeKeydown: this.hideOnEscape,
|
|
115
|
+
arrowKeyNavigationProviderOptions: {
|
|
116
|
+
type: _uiMenu.ArrowKeyNavigationType.MENU
|
|
117
|
+
},
|
|
130
118
|
fitWidth: 112,
|
|
131
119
|
fitHeight: 80,
|
|
132
120
|
closeOnTab: true,
|
|
@@ -165,7 +153,7 @@ var AlignmentToolbar = /*#__PURE__*/function (_React$Component) {
|
|
|
165
153
|
key: "componentDidUpdate",
|
|
166
154
|
value: function componentDidUpdate(prevProps) {
|
|
167
155
|
var _this3 = this;
|
|
168
|
-
if (this.state.isOpen
|
|
156
|
+
if (this.state.isOpen) {
|
|
169
157
|
// by triggering the keyboard event with a setTimeout, we ensure that the tooltip
|
|
170
158
|
// associated with the alignment button doesn't render until the next render cycle
|
|
171
159
|
// where the popup will be correctly positioned and the relative position of the tooltip
|
|
@@ -120,7 +120,6 @@ var Dropdown = /*#__PURE__*/function (_Component) {
|
|
|
120
120
|
tooltip = _this$props2.tooltip,
|
|
121
121
|
buttonTestId = _this$props2.buttonTestId,
|
|
122
122
|
dropdownWidth = _this$props2.dropdownWidth,
|
|
123
|
-
editorView = _this$props2.editorView,
|
|
124
123
|
dropdownListId = _this$props2.dropdownListId,
|
|
125
124
|
alignDropdownWithToolbar = _this$props2.alignDropdownWithToolbar;
|
|
126
125
|
var trigger;
|
|
@@ -164,7 +163,6 @@ var Dropdown = /*#__PURE__*/function (_Component) {
|
|
|
164
163
|
var fitWidth = Array.isArray(options) ? dropdownWidth || _DropdownMenu.menuItemDimensions.width : options.width;
|
|
165
164
|
var fitHeight = Array.isArray(options) ? options.length * _DropdownMenu.menuItemDimensions.height + _DropdownMenu.itemSpacing * 2 : options.height;
|
|
166
165
|
return (0, _react2.jsx)(_uiMenu.DropdownContainer, {
|
|
167
|
-
ref: this.triggerRef,
|
|
168
166
|
mountTo: mountPoint,
|
|
169
167
|
boundariesElement: boundariesElement,
|
|
170
168
|
scrollableElement: scrollableElement,
|
|
@@ -175,9 +173,11 @@ var Dropdown = /*#__PURE__*/function (_Component) {
|
|
|
175
173
|
fitWidth: fitWidth + fitTolerance,
|
|
176
174
|
fitHeight: fitHeight + fitTolerance,
|
|
177
175
|
trigger: trigger,
|
|
178
|
-
editorView: editorView,
|
|
179
176
|
dropdownListId: dropdownListId,
|
|
180
|
-
alignDropdownWithParentElement: alignDropdownWithToolbar
|
|
177
|
+
alignDropdownWithParentElement: alignDropdownWithToolbar,
|
|
178
|
+
arrowKeyNavigationProviderOptions: {
|
|
179
|
+
type: _uiMenu.ArrowKeyNavigationType.MENU
|
|
180
|
+
}
|
|
181
181
|
}, Array.isArray(options) ? this.renderArrayOptions(options) : options.render({
|
|
182
182
|
hide: this.hide,
|
|
183
183
|
dispatchCommand: dispatchCommand
|
|
@@ -22,7 +22,6 @@ var _editorPalette = require("@atlaskit/editor-palette");
|
|
|
22
22
|
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
23
23
|
var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
|
|
24
24
|
var _ColorPalette = _interopRequireWildcard(require("../../../../ui/ColorPalette"));
|
|
25
|
-
var _Dropdown = _interopRequireDefault(require("../../../../ui/Dropdown"));
|
|
26
25
|
var _styles = require("../../../../ui/styles");
|
|
27
26
|
var _styles2 = require("@atlaskit/editor-common/styles");
|
|
28
27
|
var _ToolbarButton = _interopRequireWildcard(require("../../../../ui/ToolbarButton"));
|
|
@@ -185,7 +184,7 @@ var ToolbarTextColor = /*#__PURE__*/function (_React$Component) {
|
|
|
185
184
|
selectedColumnIndex = _getSelectedRowAndCol.selectedColumnIndex;
|
|
186
185
|
return (0, _react2.jsx)("span", {
|
|
187
186
|
css: _styles2.wrapperStyle
|
|
188
|
-
}, (0, _react2.jsx)(
|
|
187
|
+
}, (0, _react2.jsx)(_uiMenu.DropdownContainer, {
|
|
189
188
|
mountTo: popupsMountPoint,
|
|
190
189
|
boundariesElement: popupsBoundariesElement,
|
|
191
190
|
scrollableElement: popupsScrollableElement,
|
|
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.version = exports.nextMajorVersion = exports.name = void 0;
|
|
7
7
|
var name = "@atlaskit/editor-core";
|
|
8
8
|
exports.name = name;
|
|
9
|
-
var version = "187.47.
|
|
9
|
+
var version = "187.47.9";
|
|
10
10
|
exports.version = version;
|
|
11
11
|
var nextMajorVersion = function nextMajorVersion() {
|
|
12
12
|
return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
|
|
@@ -5,7 +5,7 @@ import { jsx } from '@emotion/react';
|
|
|
5
5
|
import { injectIntl } from 'react-intl-next';
|
|
6
6
|
import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
|
|
7
7
|
import ToolbarButton from '../../../../ui/ToolbarButton';
|
|
8
|
-
import { DropdownContainer as Dropdown } from '@atlaskit/editor-common/ui-menu';
|
|
8
|
+
import { ArrowKeyNavigationType, DropdownContainer as Dropdown } from '@atlaskit/editor-common/ui-menu';
|
|
9
9
|
import Alignment from '../../../../ui/Alignment';
|
|
10
10
|
import { expandIconWrapper, triggerWrapper, wrapper } from './styles';
|
|
11
11
|
import { separatorStyles } from '@atlaskit/editor-common/styles';
|
|
@@ -16,8 +16,7 @@ export class AlignmentToolbar extends React.Component {
|
|
|
16
16
|
super(...args);
|
|
17
17
|
_defineProperty(this, "toolbarItemRef", /*#__PURE__*/React.createRef());
|
|
18
18
|
_defineProperty(this, "state", {
|
|
19
|
-
isOpen: false
|
|
20
|
-
isOpenedByKeyboard: false
|
|
19
|
+
isOpen: false
|
|
21
20
|
});
|
|
22
21
|
_defineProperty(this, "changeAlignment", (align, togglePopup) => {
|
|
23
22
|
if (togglePopup) {
|
|
@@ -27,16 +26,14 @@ export class AlignmentToolbar extends React.Component {
|
|
|
27
26
|
});
|
|
28
27
|
_defineProperty(this, "toggleOpen", () => {
|
|
29
28
|
this.setState({
|
|
30
|
-
isOpen: !this.state.isOpen
|
|
31
|
-
isOpenedByKeyboard: false
|
|
29
|
+
isOpen: !this.state.isOpen
|
|
32
30
|
});
|
|
33
31
|
});
|
|
34
32
|
_defineProperty(this, "toggleOpenByKeyboard", event => {
|
|
35
33
|
if (event.key === 'Enter' || event.key === ' ') {
|
|
36
34
|
event.preventDefault();
|
|
37
35
|
this.setState({
|
|
38
|
-
isOpen: !this.state.isOpen
|
|
39
|
-
isOpenedByKeyboard: true
|
|
36
|
+
isOpen: !this.state.isOpen
|
|
40
37
|
});
|
|
41
38
|
}
|
|
42
39
|
});
|
|
@@ -59,8 +56,7 @@ export class AlignmentToolbar extends React.Component {
|
|
|
59
56
|
}
|
|
60
57
|
render() {
|
|
61
58
|
const {
|
|
62
|
-
isOpen
|
|
63
|
-
isOpenedByKeyboard
|
|
59
|
+
isOpen
|
|
64
60
|
} = this.state;
|
|
65
61
|
const {
|
|
66
62
|
popupsMountPoint,
|
|
@@ -79,15 +75,6 @@ export class AlignmentToolbar extends React.Component {
|
|
|
79
75
|
boundariesElement: popupsBoundariesElement,
|
|
80
76
|
scrollableElement: popupsScrollableElement,
|
|
81
77
|
isOpen: isOpen,
|
|
82
|
-
shouldFocusFirstItem: () => {
|
|
83
|
-
if (isOpenedByKeyboard) {
|
|
84
|
-
this.setState({
|
|
85
|
-
...this.state,
|
|
86
|
-
isOpenedByKeyboard: false
|
|
87
|
-
});
|
|
88
|
-
}
|
|
89
|
-
return isOpenedByKeyboard;
|
|
90
|
-
},
|
|
91
78
|
onOpenChange: ({
|
|
92
79
|
isOpen
|
|
93
80
|
}) => {
|
|
@@ -104,6 +91,9 @@ export class AlignmentToolbar extends React.Component {
|
|
|
104
91
|
}
|
|
105
92
|
},
|
|
106
93
|
handleEscapeKeydown: this.hideOnEscape,
|
|
94
|
+
arrowKeyNavigationProviderOptions: {
|
|
95
|
+
type: ArrowKeyNavigationType.MENU
|
|
96
|
+
},
|
|
107
97
|
fitWidth: 112,
|
|
108
98
|
fitHeight: 80,
|
|
109
99
|
closeOnTab: true,
|
|
@@ -137,7 +127,7 @@ export class AlignmentToolbar extends React.Component {
|
|
|
137
127
|
}));
|
|
138
128
|
}
|
|
139
129
|
componentDidUpdate(prevProps) {
|
|
140
|
-
if (this.state.isOpen
|
|
130
|
+
if (this.state.isOpen) {
|
|
141
131
|
// by triggering the keyboard event with a setTimeout, we ensure that the tooltip
|
|
142
132
|
// associated with the alignment button doesn't render until the next render cycle
|
|
143
133
|
// where the popup will be correctly positioned and the relative position of the tooltip
|
|
@@ -4,7 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
|
4
4
|
import React, { Component } from 'react';
|
|
5
5
|
import { css, jsx } from '@emotion/react';
|
|
6
6
|
import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
|
|
7
|
-
import { DropdownContainer as UiDropdown } from '@atlaskit/editor-common/ui-menu';
|
|
7
|
+
import { ArrowKeyNavigationType, DropdownContainer as UiDropdown } from '@atlaskit/editor-common/ui-menu';
|
|
8
8
|
import { FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
|
|
9
9
|
import DropdownMenu, { itemSpacing, menuItemDimensions } from './DropdownMenu';
|
|
10
10
|
const dropdownExpandContainer = css`
|
|
@@ -96,7 +96,6 @@ export default class Dropdown extends Component {
|
|
|
96
96
|
tooltip,
|
|
97
97
|
buttonTestId,
|
|
98
98
|
dropdownWidth,
|
|
99
|
-
editorView,
|
|
100
99
|
dropdownListId,
|
|
101
100
|
alignDropdownWithToolbar
|
|
102
101
|
} = this.props;
|
|
@@ -141,7 +140,6 @@ export default class Dropdown extends Component {
|
|
|
141
140
|
const fitWidth = Array.isArray(options) ? dropdownWidth || menuItemDimensions.width : options.width;
|
|
142
141
|
const fitHeight = Array.isArray(options) ? options.length * menuItemDimensions.height + itemSpacing * 2 : options.height;
|
|
143
142
|
return jsx(UiDropdown, {
|
|
144
|
-
ref: this.triggerRef,
|
|
145
143
|
mountTo: mountPoint,
|
|
146
144
|
boundariesElement: boundariesElement,
|
|
147
145
|
scrollableElement: scrollableElement,
|
|
@@ -152,9 +150,11 @@ export default class Dropdown extends Component {
|
|
|
152
150
|
fitWidth: fitWidth + fitTolerance,
|
|
153
151
|
fitHeight: fitHeight + fitTolerance,
|
|
154
152
|
trigger: trigger,
|
|
155
|
-
editorView: editorView,
|
|
156
153
|
dropdownListId: dropdownListId,
|
|
157
|
-
alignDropdownWithParentElement: alignDropdownWithToolbar
|
|
154
|
+
alignDropdownWithParentElement: alignDropdownWithToolbar,
|
|
155
|
+
arrowKeyNavigationProviderOptions: {
|
|
156
|
+
type: ArrowKeyNavigationType.MENU
|
|
157
|
+
}
|
|
158
158
|
}, Array.isArray(options) ? this.renderArrayOptions(options) : options.render({
|
|
159
159
|
hide: this.hide,
|
|
160
160
|
dispatchCommand
|
|
@@ -9,7 +9,7 @@ import { hexToEditorTextPaletteColor } from '@atlaskit/editor-palette';
|
|
|
9
9
|
import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
|
|
10
10
|
import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
|
|
11
11
|
import ColorPalette, { textPaletteTooltipMessages } from '../../../../ui/ColorPalette';
|
|
12
|
-
import Dropdown from '
|
|
12
|
+
import { DropdownContainer as Dropdown } from '@atlaskit/editor-common/ui-menu';
|
|
13
13
|
import { expandIconWrapperStyle } from '../../../../ui/styles';
|
|
14
14
|
import { wrapperStyle, separatorStyles, triggerWrapperStyles } from '@atlaskit/editor-common/styles';
|
|
15
15
|
import ToolbarButton, { TOOLBAR_BUTTON } from '../../../../ui/ToolbarButton';
|
|
@@ -5,8 +5,6 @@ import _inherits from "@babel/runtime/helpers/inherits";
|
|
|
5
5
|
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
|
|
6
6
|
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
|
7
7
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
8
|
-
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
9
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
10
8
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
11
9
|
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
12
10
|
/** @jsx jsx */
|
|
@@ -15,7 +13,7 @@ import { jsx } from '@emotion/react';
|
|
|
15
13
|
import { injectIntl } from 'react-intl-next';
|
|
16
14
|
import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
|
|
17
15
|
import ToolbarButton from '../../../../ui/ToolbarButton';
|
|
18
|
-
import { DropdownContainer as Dropdown } from '@atlaskit/editor-common/ui-menu';
|
|
16
|
+
import { ArrowKeyNavigationType, DropdownContainer as Dropdown } from '@atlaskit/editor-common/ui-menu';
|
|
19
17
|
import Alignment from '../../../../ui/Alignment';
|
|
20
18
|
import { expandIconWrapper, triggerWrapper, wrapper } from './styles';
|
|
21
19
|
import { separatorStyles } from '@atlaskit/editor-common/styles';
|
|
@@ -33,8 +31,7 @@ export var AlignmentToolbar = /*#__PURE__*/function (_React$Component) {
|
|
|
33
31
|
_this = _super.call.apply(_super, [this].concat(args));
|
|
34
32
|
_defineProperty(_assertThisInitialized(_this), "toolbarItemRef", /*#__PURE__*/React.createRef());
|
|
35
33
|
_defineProperty(_assertThisInitialized(_this), "state", {
|
|
36
|
-
isOpen: false
|
|
37
|
-
isOpenedByKeyboard: false
|
|
34
|
+
isOpen: false
|
|
38
35
|
});
|
|
39
36
|
_defineProperty(_assertThisInitialized(_this), "changeAlignment", function (align, togglePopup) {
|
|
40
37
|
if (togglePopup) {
|
|
@@ -44,16 +41,14 @@ export var AlignmentToolbar = /*#__PURE__*/function (_React$Component) {
|
|
|
44
41
|
});
|
|
45
42
|
_defineProperty(_assertThisInitialized(_this), "toggleOpen", function () {
|
|
46
43
|
_this.setState({
|
|
47
|
-
isOpen: !_this.state.isOpen
|
|
48
|
-
isOpenedByKeyboard: false
|
|
44
|
+
isOpen: !_this.state.isOpen
|
|
49
45
|
});
|
|
50
46
|
});
|
|
51
47
|
_defineProperty(_assertThisInitialized(_this), "toggleOpenByKeyboard", function (event) {
|
|
52
48
|
if (event.key === 'Enter' || event.key === ' ') {
|
|
53
49
|
event.preventDefault();
|
|
54
50
|
_this.setState({
|
|
55
|
-
isOpen: !_this.state.isOpen
|
|
56
|
-
isOpenedByKeyboard: true
|
|
51
|
+
isOpen: !_this.state.isOpen
|
|
57
52
|
});
|
|
58
53
|
}
|
|
59
54
|
});
|
|
@@ -79,9 +74,7 @@ export var AlignmentToolbar = /*#__PURE__*/function (_React$Component) {
|
|
|
79
74
|
key: "render",
|
|
80
75
|
value: function render() {
|
|
81
76
|
var _this2 = this;
|
|
82
|
-
var
|
|
83
|
-
isOpen = _this$state.isOpen,
|
|
84
|
-
isOpenedByKeyboard = _this$state.isOpenedByKeyboard;
|
|
77
|
+
var isOpen = this.state.isOpen;
|
|
85
78
|
var _this$props = this.props,
|
|
86
79
|
popupsMountPoint = _this$props.popupsMountPoint,
|
|
87
80
|
popupsBoundariesElement = _this$props.popupsBoundariesElement,
|
|
@@ -98,14 +91,6 @@ export var AlignmentToolbar = /*#__PURE__*/function (_React$Component) {
|
|
|
98
91
|
boundariesElement: popupsBoundariesElement,
|
|
99
92
|
scrollableElement: popupsScrollableElement,
|
|
100
93
|
isOpen: isOpen,
|
|
101
|
-
shouldFocusFirstItem: function shouldFocusFirstItem() {
|
|
102
|
-
if (isOpenedByKeyboard) {
|
|
103
|
-
_this2.setState(_objectSpread(_objectSpread({}, _this2.state), {}, {
|
|
104
|
-
isOpenedByKeyboard: false
|
|
105
|
-
}));
|
|
106
|
-
}
|
|
107
|
-
return isOpenedByKeyboard;
|
|
108
|
-
},
|
|
109
94
|
onOpenChange: function onOpenChange(_ref) {
|
|
110
95
|
var isOpen = _ref.isOpen;
|
|
111
96
|
_this2.setState({
|
|
@@ -121,6 +106,9 @@ export var AlignmentToolbar = /*#__PURE__*/function (_React$Component) {
|
|
|
121
106
|
}
|
|
122
107
|
},
|
|
123
108
|
handleEscapeKeydown: this.hideOnEscape,
|
|
109
|
+
arrowKeyNavigationProviderOptions: {
|
|
110
|
+
type: ArrowKeyNavigationType.MENU
|
|
111
|
+
},
|
|
124
112
|
fitWidth: 112,
|
|
125
113
|
fitHeight: 80,
|
|
126
114
|
closeOnTab: true,
|
|
@@ -159,7 +147,7 @@ export var AlignmentToolbar = /*#__PURE__*/function (_React$Component) {
|
|
|
159
147
|
key: "componentDidUpdate",
|
|
160
148
|
value: function componentDidUpdate(prevProps) {
|
|
161
149
|
var _this3 = this;
|
|
162
|
-
if (this.state.isOpen
|
|
150
|
+
if (this.state.isOpen) {
|
|
163
151
|
// by triggering the keyboard event with a setTimeout, we ensure that the tooltip
|
|
164
152
|
// associated with the alignment button doesn't render until the next render cycle
|
|
165
153
|
// where the popup will be correctly positioned and the relative position of the tooltip
|
|
@@ -16,7 +16,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
|
|
|
16
16
|
import React, { Component } from 'react';
|
|
17
17
|
import { css, jsx } from '@emotion/react';
|
|
18
18
|
import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
|
|
19
|
-
import { DropdownContainer as UiDropdown } from '@atlaskit/editor-common/ui-menu';
|
|
19
|
+
import { ArrowKeyNavigationType, DropdownContainer as UiDropdown } from '@atlaskit/editor-common/ui-menu';
|
|
20
20
|
import { FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
|
|
21
21
|
import DropdownMenu, { itemSpacing, menuItemDimensions } from './DropdownMenu';
|
|
22
22
|
var dropdownExpandContainer = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n margin: 0px ", ";\n"])), "var(--ds-space-negative-050, -4px)");
|
|
@@ -111,7 +111,6 @@ var Dropdown = /*#__PURE__*/function (_Component) {
|
|
|
111
111
|
tooltip = _this$props2.tooltip,
|
|
112
112
|
buttonTestId = _this$props2.buttonTestId,
|
|
113
113
|
dropdownWidth = _this$props2.dropdownWidth,
|
|
114
|
-
editorView = _this$props2.editorView,
|
|
115
114
|
dropdownListId = _this$props2.dropdownListId,
|
|
116
115
|
alignDropdownWithToolbar = _this$props2.alignDropdownWithToolbar;
|
|
117
116
|
var trigger;
|
|
@@ -155,7 +154,6 @@ var Dropdown = /*#__PURE__*/function (_Component) {
|
|
|
155
154
|
var fitWidth = Array.isArray(options) ? dropdownWidth || menuItemDimensions.width : options.width;
|
|
156
155
|
var fitHeight = Array.isArray(options) ? options.length * menuItemDimensions.height + itemSpacing * 2 : options.height;
|
|
157
156
|
return jsx(UiDropdown, {
|
|
158
|
-
ref: this.triggerRef,
|
|
159
157
|
mountTo: mountPoint,
|
|
160
158
|
boundariesElement: boundariesElement,
|
|
161
159
|
scrollableElement: scrollableElement,
|
|
@@ -166,9 +164,11 @@ var Dropdown = /*#__PURE__*/function (_Component) {
|
|
|
166
164
|
fitWidth: fitWidth + fitTolerance,
|
|
167
165
|
fitHeight: fitHeight + fitTolerance,
|
|
168
166
|
trigger: trigger,
|
|
169
|
-
editorView: editorView,
|
|
170
167
|
dropdownListId: dropdownListId,
|
|
171
|
-
alignDropdownWithParentElement: alignDropdownWithToolbar
|
|
168
|
+
alignDropdownWithParentElement: alignDropdownWithToolbar,
|
|
169
|
+
arrowKeyNavigationProviderOptions: {
|
|
170
|
+
type: ArrowKeyNavigationType.MENU
|
|
171
|
+
}
|
|
172
172
|
}, Array.isArray(options) ? this.renderArrayOptions(options) : options.render({
|
|
173
173
|
hide: this.hide,
|
|
174
174
|
dispatchCommand: dispatchCommand
|
|
@@ -19,7 +19,7 @@ import { hexToEditorTextPaletteColor } from '@atlaskit/editor-palette';
|
|
|
19
19
|
import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
|
|
20
20
|
import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
|
|
21
21
|
import ColorPalette, { textPaletteTooltipMessages } from '../../../../ui/ColorPalette';
|
|
22
|
-
import Dropdown from '
|
|
22
|
+
import { DropdownContainer as Dropdown } from '@atlaskit/editor-common/ui-menu';
|
|
23
23
|
import { expandIconWrapperStyle } from '../../../../ui/styles';
|
|
24
24
|
import { wrapperStyle, separatorStyles, triggerWrapperStyles } from '@atlaskit/editor-common/styles';
|
|
25
25
|
import ToolbarButton, { TOOLBAR_BUTTON } from '../../../../ui/ToolbarButton';
|
|
@@ -5,7 +5,6 @@ import type { WrappedComponentProps } from 'react-intl-next';
|
|
|
5
5
|
import type { AlignmentPluginState, AlignmentState } from '../../pm-plugins/types';
|
|
6
6
|
export interface State {
|
|
7
7
|
isOpen: boolean;
|
|
8
|
-
isOpenedByKeyboard: boolean;
|
|
9
8
|
}
|
|
10
9
|
export interface Props {
|
|
11
10
|
pluginState: AlignmentPluginState;
|
|
@@ -5,7 +5,6 @@ import type { WrappedComponentProps } from 'react-intl-next';
|
|
|
5
5
|
import type { AlignmentPluginState, AlignmentState } from '../../pm-plugins/types';
|
|
6
6
|
export interface State {
|
|
7
7
|
isOpen: boolean;
|
|
8
|
-
isOpenedByKeyboard: boolean;
|
|
9
8
|
}
|
|
10
9
|
export interface Props {
|
|
11
10
|
pluginState: AlignmentPluginState;
|
package/package.json
CHANGED