@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 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.3",
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.1.0",
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",