@atlaskit/editor-toolbar 2.4.16 → 2.5.0
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
CHANGED
|
@@ -1,5 +1,23 @@
|
|
|
1
1
|
# @atlaskit/editor-toolbar
|
|
2
2
|
|
|
3
|
+
## 2.5.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [`85c7571a0f48b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/85c7571a0f48b) -
|
|
8
|
+
Return focus to the editor after selecting a text style (e.g. a heading) from the toolbar Text
|
|
9
|
+
styles dropdown, so typing continues immediately instead of focus staying on the trigger button.
|
|
10
|
+
The Text styles dropdown now renders inline via `shouldRenderToParent`, which stops the popup
|
|
11
|
+
focus-trap from returning focus to the trigger on close. `ToolbarDropdownMenu` gains an opt-in
|
|
12
|
+
`shouldRenderToParent` prop so only the Text styles menu is affected. Gated behind the
|
|
13
|
+
`platform_editor_return_focus_after_text_styles` feature flag.
|
|
14
|
+
|
|
15
|
+
## 2.4.17
|
|
16
|
+
|
|
17
|
+
### Patch Changes
|
|
18
|
+
|
|
19
|
+
- Updated dependencies
|
|
20
|
+
|
|
3
21
|
## 2.4.16
|
|
4
22
|
|
|
5
23
|
### Patch Changes
|
|
@@ -31,7 +31,8 @@ var ToolbarDropdownMenuContent = function ToolbarDropdownMenuContent(_ref) {
|
|
|
31
31
|
id = _ref.id,
|
|
32
32
|
testId = _ref.testId,
|
|
33
33
|
label = _ref.label,
|
|
34
|
-
_onClick = _ref.onClick
|
|
34
|
+
_onClick = _ref.onClick,
|
|
35
|
+
shouldRenderToParent = _ref.shouldRenderToParent;
|
|
35
36
|
var _useToolbarUI = (0, _uiContext.useToolbarUI)(),
|
|
36
37
|
onDropdownOpenChanged = _useToolbarUI.onDropdownOpenChanged;
|
|
37
38
|
var menuContext = (0, _ToolbarDropdownMenuContext.useToolbarDropdownMenu)();
|
|
@@ -80,7 +81,8 @@ var ToolbarDropdownMenuContent = function ToolbarDropdownMenuContent(_ref) {
|
|
|
80
81
|
return toolbarButton;
|
|
81
82
|
},
|
|
82
83
|
onOpenChange: handleOpenChange,
|
|
83
|
-
isOpen: menuContext === null || menuContext === void 0 ? void 0 : menuContext.isOpen
|
|
84
|
+
isOpen: menuContext === null || menuContext === void 0 ? void 0 : menuContext.isOpen,
|
|
85
|
+
shouldRenderToParent: shouldRenderToParent ? true : undefined
|
|
84
86
|
}, children);
|
|
85
87
|
};
|
|
86
88
|
var ToolbarDropdownMenu = exports.ToolbarDropdownMenu = function ToolbarDropdownMenu(_ref2) {
|
|
@@ -95,7 +97,8 @@ var ToolbarDropdownMenu = exports.ToolbarDropdownMenu = function ToolbarDropdown
|
|
|
95
97
|
_ref2$enableMaxHeight = _ref2.enableMaxHeight,
|
|
96
98
|
enableMaxHeight = _ref2$enableMaxHeight === void 0 ? false : _ref2$enableMaxHeight,
|
|
97
99
|
onClick = _ref2.onClick,
|
|
98
|
-
tooltipComponent = _ref2.tooltipComponent
|
|
100
|
+
tooltipComponent = _ref2.tooltipComponent,
|
|
101
|
+
shouldRenderToParent = _ref2.shouldRenderToParent;
|
|
99
102
|
return /*#__PURE__*/_react.default.createElement(ToolbarDropdownMenuContent, {
|
|
100
103
|
iconBefore: iconBefore,
|
|
101
104
|
isDisabled: isDisabled,
|
|
@@ -103,7 +106,8 @@ var ToolbarDropdownMenu = exports.ToolbarDropdownMenu = function ToolbarDropdown
|
|
|
103
106
|
testId: testId,
|
|
104
107
|
label: label,
|
|
105
108
|
onClick: onClick,
|
|
106
|
-
tooltipComponent: tooltipComponent
|
|
109
|
+
tooltipComponent: tooltipComponent,
|
|
110
|
+
shouldRenderToParent: shouldRenderToParent
|
|
107
111
|
}, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
|
|
108
112
|
xcss: (0, _react2.cx)(hasSectionMargin && styles.sectionMargin, enableMaxHeight && styles.scrollContainer, styles.firstSectionSeparator),
|
|
109
113
|
"data-toolbar-component": "menu"
|
|
@@ -22,7 +22,8 @@ const ToolbarDropdownMenuContent = ({
|
|
|
22
22
|
id,
|
|
23
23
|
testId,
|
|
24
24
|
label,
|
|
25
|
-
onClick
|
|
25
|
+
onClick,
|
|
26
|
+
shouldRenderToParent
|
|
26
27
|
}) => {
|
|
27
28
|
const {
|
|
28
29
|
onDropdownOpenChanged
|
|
@@ -73,7 +74,8 @@ const ToolbarDropdownMenuContent = ({
|
|
|
73
74
|
return toolbarButton;
|
|
74
75
|
},
|
|
75
76
|
onOpenChange: handleOpenChange,
|
|
76
|
-
isOpen: menuContext === null || menuContext === void 0 ? void 0 : menuContext.isOpen
|
|
77
|
+
isOpen: menuContext === null || menuContext === void 0 ? void 0 : menuContext.isOpen,
|
|
78
|
+
shouldRenderToParent: shouldRenderToParent ? true : undefined
|
|
77
79
|
}, children);
|
|
78
80
|
};
|
|
79
81
|
export const ToolbarDropdownMenu = ({
|
|
@@ -86,7 +88,8 @@ export const ToolbarDropdownMenu = ({
|
|
|
86
88
|
hasSectionMargin = true,
|
|
87
89
|
enableMaxHeight = false,
|
|
88
90
|
onClick,
|
|
89
|
-
tooltipComponent
|
|
91
|
+
tooltipComponent,
|
|
92
|
+
shouldRenderToParent
|
|
90
93
|
}) => {
|
|
91
94
|
return /*#__PURE__*/React.createElement(ToolbarDropdownMenuContent, {
|
|
92
95
|
iconBefore: iconBefore,
|
|
@@ -95,7 +98,8 @@ export const ToolbarDropdownMenu = ({
|
|
|
95
98
|
testId: testId,
|
|
96
99
|
label: label,
|
|
97
100
|
onClick: onClick,
|
|
98
|
-
tooltipComponent: tooltipComponent
|
|
101
|
+
tooltipComponent: tooltipComponent,
|
|
102
|
+
shouldRenderToParent: shouldRenderToParent
|
|
99
103
|
}, /*#__PURE__*/React.createElement(Box, {
|
|
100
104
|
xcss: cx(hasSectionMargin && styles.sectionMargin, enableMaxHeight && styles.scrollContainer, styles.firstSectionSeparator),
|
|
101
105
|
"data-toolbar-component": "menu"
|
|
@@ -22,7 +22,8 @@ var ToolbarDropdownMenuContent = function ToolbarDropdownMenuContent(_ref) {
|
|
|
22
22
|
id = _ref.id,
|
|
23
23
|
testId = _ref.testId,
|
|
24
24
|
label = _ref.label,
|
|
25
|
-
_onClick = _ref.onClick
|
|
25
|
+
_onClick = _ref.onClick,
|
|
26
|
+
shouldRenderToParent = _ref.shouldRenderToParent;
|
|
26
27
|
var _useToolbarUI = useToolbarUI(),
|
|
27
28
|
onDropdownOpenChanged = _useToolbarUI.onDropdownOpenChanged;
|
|
28
29
|
var menuContext = useToolbarDropdownMenu();
|
|
@@ -71,7 +72,8 @@ var ToolbarDropdownMenuContent = function ToolbarDropdownMenuContent(_ref) {
|
|
|
71
72
|
return toolbarButton;
|
|
72
73
|
},
|
|
73
74
|
onOpenChange: handleOpenChange,
|
|
74
|
-
isOpen: menuContext === null || menuContext === void 0 ? void 0 : menuContext.isOpen
|
|
75
|
+
isOpen: menuContext === null || menuContext === void 0 ? void 0 : menuContext.isOpen,
|
|
76
|
+
shouldRenderToParent: shouldRenderToParent ? true : undefined
|
|
75
77
|
}, children);
|
|
76
78
|
};
|
|
77
79
|
export var ToolbarDropdownMenu = function ToolbarDropdownMenu(_ref2) {
|
|
@@ -86,7 +88,8 @@ export var ToolbarDropdownMenu = function ToolbarDropdownMenu(_ref2) {
|
|
|
86
88
|
_ref2$enableMaxHeight = _ref2.enableMaxHeight,
|
|
87
89
|
enableMaxHeight = _ref2$enableMaxHeight === void 0 ? false : _ref2$enableMaxHeight,
|
|
88
90
|
onClick = _ref2.onClick,
|
|
89
|
-
tooltipComponent = _ref2.tooltipComponent
|
|
91
|
+
tooltipComponent = _ref2.tooltipComponent,
|
|
92
|
+
shouldRenderToParent = _ref2.shouldRenderToParent;
|
|
90
93
|
return /*#__PURE__*/React.createElement(ToolbarDropdownMenuContent, {
|
|
91
94
|
iconBefore: iconBefore,
|
|
92
95
|
isDisabled: isDisabled,
|
|
@@ -94,7 +97,8 @@ export var ToolbarDropdownMenu = function ToolbarDropdownMenu(_ref2) {
|
|
|
94
97
|
testId: testId,
|
|
95
98
|
label: label,
|
|
96
99
|
onClick: onClick,
|
|
97
|
-
tooltipComponent: tooltipComponent
|
|
100
|
+
tooltipComponent: tooltipComponent,
|
|
101
|
+
shouldRenderToParent: shouldRenderToParent
|
|
98
102
|
}, /*#__PURE__*/React.createElement(Box, {
|
|
99
103
|
xcss: cx(hasSectionMargin && styles.sectionMargin, enableMaxHeight && styles.scrollContainer, styles.firstSectionSeparator),
|
|
100
104
|
"data-toolbar-component": "menu"
|
|
@@ -19,8 +19,15 @@ type ToolbarDropdownMenuProps = {
|
|
|
19
19
|
isDisabled?: boolean;
|
|
20
20
|
label?: string;
|
|
21
21
|
onClick?: (event: React.MouseEvent<HTMLButtonElement>, isOpen: boolean) => void;
|
|
22
|
+
/**
|
|
23
|
+
* Renders the dropdown menu inline (into its parent) rather than into a portal. This opts the
|
|
24
|
+
* menu out of the popup focus-trap's return-focus-to-trigger behaviour on close, which lets
|
|
25
|
+
* focus return to the editor after selecting an item. Opt-in per menu to avoid changing the
|
|
26
|
+
* rendering of every toolbar dropdown.
|
|
27
|
+
*/
|
|
28
|
+
shouldRenderToParent?: boolean;
|
|
22
29
|
testId?: string;
|
|
23
30
|
tooltipComponent?: React.ReactNode;
|
|
24
31
|
};
|
|
25
|
-
export declare const ToolbarDropdownMenu: ({ iconBefore, children, isDisabled, id, testId, label, hasSectionMargin, enableMaxHeight, onClick, tooltipComponent, }: ToolbarDropdownMenuProps) => JSX.Element;
|
|
32
|
+
export declare const ToolbarDropdownMenu: ({ iconBefore, children, isDisabled, id, testId, label, hasSectionMargin, enableMaxHeight, onClick, tooltipComponent, shouldRenderToParent, }: ToolbarDropdownMenuProps) => JSX.Element;
|
|
26
33
|
export {};
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"publishConfig": {
|
|
4
4
|
"registry": "https://registry.npmjs.org/"
|
|
5
5
|
},
|
|
6
|
-
"version": "2.
|
|
6
|
+
"version": "2.5.0",
|
|
7
7
|
"description": "Common UI for Toolbars across the platform",
|
|
8
8
|
"atlassian": {
|
|
9
9
|
"react-compiler": {
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
"@atlaskit/popup": "^6.0.0",
|
|
40
40
|
"@atlaskit/primitives": "^22.2.0",
|
|
41
41
|
"@atlaskit/react-compiler-gating": "^0.2.0",
|
|
42
|
-
"@atlaskit/tmp-editor-statsig": "^
|
|
42
|
+
"@atlaskit/tmp-editor-statsig": "^152.0.0",
|
|
43
43
|
"@atlaskit/tokens": "^16.7.0",
|
|
44
44
|
"@atlaskit/tooltip": "^24.0.0",
|
|
45
45
|
"@babel/runtime": "^7.0.0",
|