@atlaskit/editor-toolbar 0.6.3 → 0.7.1
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 +21 -0
- package/dist/cjs/ui/ColorPalette/index.js +1 -2
- package/dist/cjs/ui/ToolbarDropdownMenu.js +7 -3
- package/dist/es2019/ui/ColorPalette/index.js +1 -2
- package/dist/es2019/ui/ToolbarDropdownMenu.js +7 -3
- package/dist/esm/ui/ColorPalette/index.js +1 -2
- package/dist/esm/ui/ToolbarDropdownMenu.js +7 -3
- package/dist/types/ui/ToolbarDropdownMenu.d.ts +2 -1
- package/dist/types-ts4.5/ui/ToolbarDropdownMenu.d.ts +2 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,26 @@
|
|
|
1
1
|
# @atlaskit/editor-toolbar
|
|
2
2
|
|
|
3
|
+
## 0.7.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`5ad508732d50d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5ad508732d50d) -
|
|
8
|
+
[ux] ED-28783 [Responsiveness] Update AI improve description toolbar button on editor and fix
|
|
9
|
+
focus issue on ColorPalette
|
|
10
|
+
- Updated dependencies
|
|
11
|
+
|
|
12
|
+
## 0.7.0
|
|
13
|
+
|
|
14
|
+
### Minor Changes
|
|
15
|
+
|
|
16
|
+
- [`50976babce55d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/50976babce55d) -
|
|
17
|
+
Add new 'onClick' to dropdown menu, hook up new toolbar api to regsiter components on selection
|
|
18
|
+
change, add new safeRegistry method to replace existing objects
|
|
19
|
+
|
|
20
|
+
### Patch Changes
|
|
21
|
+
|
|
22
|
+
- Updated dependencies
|
|
23
|
+
|
|
3
24
|
## 0.6.3
|
|
4
25
|
|
|
5
26
|
### Patch Changes
|
|
@@ -308,8 +308,7 @@ var ColorPalette = function ColorPalette(_ref) {
|
|
|
308
308
|
checkMarkColor: getCheckMarkColor(value, useIconToken),
|
|
309
309
|
hexToPaletteColor: hexToPaletteColor,
|
|
310
310
|
decorator: decorator,
|
|
311
|
-
tabIndex: shouldBeFocusable ? 0 : -1
|
|
312
|
-
autoFocus: isSelectedColor && rowIndex === selectedRowIndex && colIndex === selectedColumnIndex
|
|
311
|
+
tabIndex: shouldBeFocusable ? 0 : -1
|
|
313
312
|
});
|
|
314
313
|
}));
|
|
315
314
|
})) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, colorsPerRow.map(function (row) {
|
|
@@ -28,7 +28,8 @@ var ToolbarDropdownMenuContent = function ToolbarDropdownMenuContent(_ref) {
|
|
|
28
28
|
children = _ref.children,
|
|
29
29
|
isDisabled = _ref.isDisabled,
|
|
30
30
|
testId = _ref.testId,
|
|
31
|
-
label = _ref.label
|
|
31
|
+
label = _ref.label,
|
|
32
|
+
_onClick = _ref.onClick;
|
|
32
33
|
var _useToolbarUI = (0, _uiContext.useToolbarUI)(),
|
|
33
34
|
onDropdownOpenChanged = _useToolbarUI.onDropdownOpenChanged;
|
|
34
35
|
var menuContext = (0, _ToolbarDropdownMenuContext.useToolbarDropdownMenu)();
|
|
@@ -57,6 +58,7 @@ var ToolbarDropdownMenuContent = function ToolbarDropdownMenuContent(_ref) {
|
|
|
57
58
|
onClick: function onClick(e) {
|
|
58
59
|
handleClick();
|
|
59
60
|
triggerProps.onClick && triggerProps.onClick(e);
|
|
61
|
+
_onClick && _onClick(e);
|
|
60
62
|
},
|
|
61
63
|
onFocus: triggerProps.onFocus,
|
|
62
64
|
testId: testId,
|
|
@@ -78,13 +80,15 @@ var ToolbarDropdownMenu = exports.ToolbarDropdownMenu = function ToolbarDropdown
|
|
|
78
80
|
_ref2$hasSectionMargi = _ref2.hasSectionMargin,
|
|
79
81
|
hasSectionMargin = _ref2$hasSectionMargi === void 0 ? true : _ref2$hasSectionMargi,
|
|
80
82
|
_ref2$enableMaxHeight = _ref2.enableMaxHeight,
|
|
81
|
-
enableMaxHeight = _ref2$enableMaxHeight === void 0 ? false : _ref2$enableMaxHeight
|
|
83
|
+
enableMaxHeight = _ref2$enableMaxHeight === void 0 ? false : _ref2$enableMaxHeight,
|
|
84
|
+
onClick = _ref2.onClick;
|
|
82
85
|
if ((0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_patch_1', 'isEnabled', true)) {
|
|
83
86
|
return /*#__PURE__*/_react.default.createElement(ToolbarDropdownMenuContent, {
|
|
84
87
|
iconBefore: iconBefore,
|
|
85
88
|
isDisabled: isDisabled,
|
|
86
89
|
testId: testId,
|
|
87
|
-
label: label
|
|
90
|
+
label: label,
|
|
91
|
+
onClick: onClick
|
|
88
92
|
}, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
|
|
89
93
|
xcss: (0, _react2.cx)(hasSectionMargin && styles.sectionMargin, enableMaxHeight && styles.scrollContainer, (0, _expValEquals.expValEquals)('platform_editor_toolbar_migrate_loom', 'isEnabled', true) && styles.firstSectionSeparator)
|
|
90
94
|
}, children));
|
|
@@ -303,8 +303,7 @@ const ColorPalette = ({
|
|
|
303
303
|
checkMarkColor: getCheckMarkColor(value, useIconToken),
|
|
304
304
|
hexToPaletteColor: hexToPaletteColor,
|
|
305
305
|
decorator: decorator,
|
|
306
|
-
tabIndex: shouldBeFocusable ? 0 : -1
|
|
307
|
-
autoFocus: isSelectedColor && rowIndex === selectedRowIndex && colIndex === selectedColumnIndex
|
|
306
|
+
tabIndex: shouldBeFocusable ? 0 : -1
|
|
308
307
|
});
|
|
309
308
|
})))) : /*#__PURE__*/React.createElement(React.Fragment, null, colorsPerRow.map(row => /*#__PURE__*/React.createElement(Box, {
|
|
310
309
|
xcss: styles.paletteWrapper,
|
|
@@ -19,7 +19,8 @@ const ToolbarDropdownMenuContent = ({
|
|
|
19
19
|
children,
|
|
20
20
|
isDisabled,
|
|
21
21
|
testId,
|
|
22
|
-
label
|
|
22
|
+
label,
|
|
23
|
+
onClick
|
|
23
24
|
}) => {
|
|
24
25
|
const {
|
|
25
26
|
onDropdownOpenChanged
|
|
@@ -49,6 +50,7 @@ const ToolbarDropdownMenuContent = ({
|
|
|
49
50
|
onClick: e => {
|
|
50
51
|
handleClick();
|
|
51
52
|
triggerProps.onClick && triggerProps.onClick(e);
|
|
53
|
+
onClick && onClick(e);
|
|
52
54
|
},
|
|
53
55
|
onFocus: triggerProps.onFocus,
|
|
54
56
|
testId: testId,
|
|
@@ -67,14 +69,16 @@ export const ToolbarDropdownMenu = ({
|
|
|
67
69
|
testId,
|
|
68
70
|
label,
|
|
69
71
|
hasSectionMargin = true,
|
|
70
|
-
enableMaxHeight = false
|
|
72
|
+
enableMaxHeight = false,
|
|
73
|
+
onClick
|
|
71
74
|
}) => {
|
|
72
75
|
if (expValEquals('platform_editor_toolbar_aifc_patch_1', 'isEnabled', true)) {
|
|
73
76
|
return /*#__PURE__*/React.createElement(ToolbarDropdownMenuContent, {
|
|
74
77
|
iconBefore: iconBefore,
|
|
75
78
|
isDisabled: isDisabled,
|
|
76
79
|
testId: testId,
|
|
77
|
-
label: label
|
|
80
|
+
label: label,
|
|
81
|
+
onClick: onClick
|
|
78
82
|
}, /*#__PURE__*/React.createElement(Box, {
|
|
79
83
|
xcss: cx(hasSectionMargin && styles.sectionMargin, enableMaxHeight && styles.scrollContainer, expValEquals('platform_editor_toolbar_migrate_loom', 'isEnabled', true) && styles.firstSectionSeparator)
|
|
80
84
|
}, children));
|
|
@@ -299,8 +299,7 @@ var ColorPalette = function ColorPalette(_ref) {
|
|
|
299
299
|
checkMarkColor: getCheckMarkColor(value, useIconToken),
|
|
300
300
|
hexToPaletteColor: hexToPaletteColor,
|
|
301
301
|
decorator: decorator,
|
|
302
|
-
tabIndex: shouldBeFocusable ? 0 : -1
|
|
303
|
-
autoFocus: isSelectedColor && rowIndex === selectedRowIndex && colIndex === selectedColumnIndex
|
|
302
|
+
tabIndex: shouldBeFocusable ? 0 : -1
|
|
304
303
|
});
|
|
305
304
|
}));
|
|
306
305
|
})) : /*#__PURE__*/React.createElement(React.Fragment, null, colorsPerRow.map(function (row) {
|
|
@@ -19,7 +19,8 @@ var ToolbarDropdownMenuContent = function ToolbarDropdownMenuContent(_ref) {
|
|
|
19
19
|
children = _ref.children,
|
|
20
20
|
isDisabled = _ref.isDisabled,
|
|
21
21
|
testId = _ref.testId,
|
|
22
|
-
label = _ref.label
|
|
22
|
+
label = _ref.label,
|
|
23
|
+
_onClick = _ref.onClick;
|
|
23
24
|
var _useToolbarUI = useToolbarUI(),
|
|
24
25
|
onDropdownOpenChanged = _useToolbarUI.onDropdownOpenChanged;
|
|
25
26
|
var menuContext = useToolbarDropdownMenu();
|
|
@@ -48,6 +49,7 @@ var ToolbarDropdownMenuContent = function ToolbarDropdownMenuContent(_ref) {
|
|
|
48
49
|
onClick: function onClick(e) {
|
|
49
50
|
handleClick();
|
|
50
51
|
triggerProps.onClick && triggerProps.onClick(e);
|
|
52
|
+
_onClick && _onClick(e);
|
|
51
53
|
},
|
|
52
54
|
onFocus: triggerProps.onFocus,
|
|
53
55
|
testId: testId,
|
|
@@ -69,13 +71,15 @@ export var ToolbarDropdownMenu = function ToolbarDropdownMenu(_ref2) {
|
|
|
69
71
|
_ref2$hasSectionMargi = _ref2.hasSectionMargin,
|
|
70
72
|
hasSectionMargin = _ref2$hasSectionMargi === void 0 ? true : _ref2$hasSectionMargi,
|
|
71
73
|
_ref2$enableMaxHeight = _ref2.enableMaxHeight,
|
|
72
|
-
enableMaxHeight = _ref2$enableMaxHeight === void 0 ? false : _ref2$enableMaxHeight
|
|
74
|
+
enableMaxHeight = _ref2$enableMaxHeight === void 0 ? false : _ref2$enableMaxHeight,
|
|
75
|
+
onClick = _ref2.onClick;
|
|
73
76
|
if (expValEquals('platform_editor_toolbar_aifc_patch_1', 'isEnabled', true)) {
|
|
74
77
|
return /*#__PURE__*/React.createElement(ToolbarDropdownMenuContent, {
|
|
75
78
|
iconBefore: iconBefore,
|
|
76
79
|
isDisabled: isDisabled,
|
|
77
80
|
testId: testId,
|
|
78
|
-
label: label
|
|
81
|
+
label: label,
|
|
82
|
+
onClick: onClick
|
|
79
83
|
}, /*#__PURE__*/React.createElement(Box, {
|
|
80
84
|
xcss: cx(hasSectionMargin && styles.sectionMargin, enableMaxHeight && styles.scrollContainer, expValEquals('platform_editor_toolbar_migrate_loom', 'isEnabled', true) && styles.firstSectionSeparator)
|
|
81
85
|
}, children));
|
|
@@ -16,7 +16,8 @@ type ToolbarDropdownMenuProps = {
|
|
|
16
16
|
iconBefore: React.ReactNode;
|
|
17
17
|
isDisabled?: boolean;
|
|
18
18
|
label?: string;
|
|
19
|
+
onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
|
|
19
20
|
testId?: string;
|
|
20
21
|
};
|
|
21
|
-
export declare const ToolbarDropdownMenu: ({ iconBefore, children, isDisabled, testId, label, hasSectionMargin, enableMaxHeight, }: ToolbarDropdownMenuProps) => JSX.Element;
|
|
22
|
+
export declare const ToolbarDropdownMenu: ({ iconBefore, children, isDisabled, testId, label, hasSectionMargin, enableMaxHeight, onClick, }: ToolbarDropdownMenuProps) => JSX.Element;
|
|
22
23
|
export {};
|
|
@@ -16,7 +16,8 @@ type ToolbarDropdownMenuProps = {
|
|
|
16
16
|
iconBefore: React.ReactNode;
|
|
17
17
|
isDisabled?: boolean;
|
|
18
18
|
label?: string;
|
|
19
|
+
onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
|
|
19
20
|
testId?: string;
|
|
20
21
|
};
|
|
21
|
-
export declare const ToolbarDropdownMenu: ({ iconBefore, children, isDisabled, testId, label, hasSectionMargin, enableMaxHeight, }: ToolbarDropdownMenuProps) => JSX.Element;
|
|
22
|
+
export declare const ToolbarDropdownMenu: ({ iconBefore, children, isDisabled, testId, label, hasSectionMargin, enableMaxHeight, onClick, }: ToolbarDropdownMenuProps) => JSX.Element;
|
|
22
23
|
export {};
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"publishConfig": {
|
|
4
4
|
"registry": "https://registry.npmjs.org/"
|
|
5
5
|
},
|
|
6
|
-
"version": "0.
|
|
6
|
+
"version": "0.7.1",
|
|
7
7
|
"description": "Common UI for Toolbars across the platform",
|
|
8
8
|
"atlassian": {
|
|
9
9
|
"team": "Editor: Jenga",
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
"@atlaskit/platform-feature-flags-react": "^0.3.0",
|
|
32
32
|
"@atlaskit/popup": "^4.3.0",
|
|
33
33
|
"@atlaskit/primitives": "^14.12.0",
|
|
34
|
-
"@atlaskit/tmp-editor-statsig": "^12.
|
|
34
|
+
"@atlaskit/tmp-editor-statsig": "^12.2.0",
|
|
35
35
|
"@atlaskit/tokens": "^6.1.0",
|
|
36
36
|
"@atlaskit/tooltip": "^20.4.0",
|
|
37
37
|
"@babel/runtime": "^7.0.0",
|