@atlaskit/editor-toolbar 0.19.12 → 0.19.13

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 (9) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/dist/cjs/ui/ToolbarDropdownMenu.js +12 -3
  3. package/dist/es2019/ui/ToolbarDropdownMenu.js +32 -21
  4. package/dist/esm/ui/ToolbarDropdownMenu.js +12 -3
  5. package/dist/types/ui/ToolbarDropdownMenu.d.ts +3 -2
  6. package/dist/types/ui/ToolbarTooltip.d.ts +1 -1
  7. package/dist/types-ts4.5/ui/ToolbarDropdownMenu.d.ts +3 -2
  8. package/dist/types-ts4.5/ui/ToolbarTooltip.d.ts +1 -1
  9. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,14 @@
1
1
  # @atlaskit/editor-toolbar
2
2
 
3
+ ## 0.19.13
4
+
5
+ ### Patch Changes
6
+
7
+ - [`38dee2c85c456`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/38dee2c85c456) -
8
+ [ux] [EDITOR-4486] render tooltips for ToolbarDropdownMenu using new TooltipComponent prop behind
9
+ platform_editor_hide_toolbar_tooltips_fix
10
+ - Updated dependencies
11
+
3
12
  ## 0.19.12
4
13
 
5
14
  ### Patch Changes
package/dist/cjs/ui/ToolbarDropdownMenu.js CHANGED
@@ -25,6 +25,7 @@ var styles = {
25
25
  };
26
26
  var ToolbarDropdownMenuContent = function ToolbarDropdownMenuContent(_ref) {
27
27
  var iconBefore = _ref.iconBefore,
28
+ tooltipComponent = _ref.tooltipComponent,
28
29
  children = _ref.children,
29
30
  isDisabled = _ref.isDisabled,
30
31
  id = _ref.id,
@@ -49,7 +50,7 @@ var ToolbarDropdownMenuContent = function ToolbarDropdownMenuContent(_ref) {
49
50
  }, [menuContext]);
50
51
  return /*#__PURE__*/_react.default.createElement(_dropdownMenu.default, {
51
52
  trigger: function trigger(triggerProps) {
52
- return /*#__PURE__*/_react.default.createElement(_ToolbarButton.ToolbarButton, {
53
+ var toolbarButton = /*#__PURE__*/_react.default.createElement(_ToolbarButton.ToolbarButton, {
53
54
  ref: triggerProps.triggerRef,
54
55
  isSelected: triggerProps.isSelected,
55
56
  "aria-expanded": triggerProps['aria-expanded'],
@@ -68,6 +69,12 @@ var ToolbarDropdownMenuContent = function ToolbarDropdownMenuContent(_ref) {
68
69
  isDisabled: isDisabled,
69
70
  label: label
70
71
  });
72
+ if (tooltipComponent && (0, _expValEquals.expValEquals)('platform_editor_hide_toolbar_tooltips_fix', 'isEnabled', true)) {
73
+ return /*#__PURE__*/_react.default.cloneElement(tooltipComponent, {
74
+ children: toolbarButton
75
+ });
76
+ }
77
+ return toolbarButton;
71
78
  },
72
79
  onOpenChange: handleOpenChange,
73
80
  isOpen: menuContext === null || menuContext === void 0 ? void 0 : menuContext.isOpen
@@ -84,14 +91,16 @@ var ToolbarDropdownMenu = exports.ToolbarDropdownMenu = function ToolbarDropdown
84
91
  hasSectionMargin = _ref2$hasSectionMargi === void 0 ? true : _ref2$hasSectionMargi,
85
92
  _ref2$enableMaxHeight = _ref2.enableMaxHeight,
86
93
  enableMaxHeight = _ref2$enableMaxHeight === void 0 ? false : _ref2$enableMaxHeight,
87
- onClick = _ref2.onClick;
94
+ onClick = _ref2.onClick,
95
+ tooltipComponent = _ref2.tooltipComponent;
88
96
  return /*#__PURE__*/_react.default.createElement(ToolbarDropdownMenuContent, {
89
97
  iconBefore: iconBefore,
90
98
  isDisabled: isDisabled,
91
99
  id: (0, _expValEquals.expValEquals)('platform_editor_renderer_toolbar_updates', 'isEnabled', true) ? id : undefined,
92
100
  testId: testId,
93
101
  label: label,
94
- onClick: onClick
102
+ onClick: onClick,
103
+ tooltipComponent: (0, _expValEquals.expValEquals)('platform_editor_hide_toolbar_tooltips_fix', 'isEnabled', true) ? tooltipComponent : undefined
95
104
  }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
96
105
  xcss: (0, _react2.cx)(hasSectionMargin && styles.sectionMargin, enableMaxHeight && styles.scrollContainer, styles.firstSectionSeparator),
97
106
  "data-toolbar-component": "menu"
package/dist/es2019/ui/ToolbarDropdownMenu.js CHANGED
@@ -16,6 +16,7 @@ const styles = {
16
16
  };
17
17
  const ToolbarDropdownMenuContent = ({
18
18
  iconBefore,
19
+ tooltipComponent,
19
20
  children,
20
21
  isDisabled,
21
22
  id,
@@ -41,25 +42,33 @@ const ToolbarDropdownMenuContent = ({
41
42
  }
42
43
  }, [menuContext]);
43
44
  return /*#__PURE__*/React.createElement(DropdownMenu, {
44
- trigger: triggerProps => /*#__PURE__*/React.createElement(ToolbarButton, {
45
- ref: triggerProps.triggerRef,
46
- isSelected: triggerProps.isSelected,
47
- "aria-expanded": triggerProps['aria-expanded'],
48
- "aria-haspopup": triggerProps['aria-haspopup'],
49
- "aria-controls": triggerProps['aria-controls'],
50
- onBlur: triggerProps.onBlur,
51
- onClick: e => {
52
- onClick && onClick(e, !(menuContext !== null && menuContext !== void 0 && menuContext.isOpen));
53
- handleClick(e);
54
- triggerProps.onClick && triggerProps.onClick(e);
55
- },
56
- onFocus: triggerProps.onFocus,
57
- id: expValEquals('platform_editor_renderer_toolbar_updates', 'isEnabled', true) ? id : undefined,
58
- testId: testId,
59
- iconBefore: iconBefore,
60
- isDisabled: isDisabled,
61
- label: label
62
- }),
45
+ trigger: triggerProps => {
46
+ const toolbarButton = /*#__PURE__*/React.createElement(ToolbarButton, {
47
+ ref: triggerProps.triggerRef,
48
+ isSelected: triggerProps.isSelected,
49
+ "aria-expanded": triggerProps['aria-expanded'],
50
+ "aria-haspopup": triggerProps['aria-haspopup'],
51
+ "aria-controls": triggerProps['aria-controls'],
52
+ onBlur: triggerProps.onBlur,
53
+ onClick: e => {
54
+ onClick && onClick(e, !(menuContext !== null && menuContext !== void 0 && menuContext.isOpen));
55
+ handleClick(e);
56
+ triggerProps.onClick && triggerProps.onClick(e);
57
+ },
58
+ onFocus: triggerProps.onFocus,
59
+ id: expValEquals('platform_editor_renderer_toolbar_updates', 'isEnabled', true) ? id : undefined,
60
+ testId: testId,
61
+ iconBefore: iconBefore,
62
+ isDisabled: isDisabled,
63
+ label: label
64
+ });
65
+ if (tooltipComponent && expValEquals('platform_editor_hide_toolbar_tooltips_fix', 'isEnabled', true)) {
66
+ return /*#__PURE__*/React.cloneElement(tooltipComponent, {
67
+ children: toolbarButton
68
+ });
69
+ }
70
+ return toolbarButton;
71
+ },
63
72
  onOpenChange: handleOpenChange,
64
73
  isOpen: menuContext === null || menuContext === void 0 ? void 0 : menuContext.isOpen
65
74
  }, children);
@@ -73,7 +82,8 @@ export const ToolbarDropdownMenu = ({
73
82
  label,
74
83
  hasSectionMargin = true,
75
84
  enableMaxHeight = false,
76
- onClick
85
+ onClick,
86
+ tooltipComponent
77
87
  }) => {
78
88
  return /*#__PURE__*/React.createElement(ToolbarDropdownMenuContent, {
79
89
  iconBefore: iconBefore,
@@ -81,7 +91,8 @@ export const ToolbarDropdownMenu = ({
81
91
  id: expValEquals('platform_editor_renderer_toolbar_updates', 'isEnabled', true) ? id : undefined,
82
92
  testId: testId,
83
93
  label: label,
84
- onClick: onClick
94
+ onClick: onClick,
95
+ tooltipComponent: expValEquals('platform_editor_hide_toolbar_tooltips_fix', 'isEnabled', true) ? tooltipComponent : undefined
85
96
  }, /*#__PURE__*/React.createElement(Box, {
86
97
  xcss: cx(hasSectionMargin && styles.sectionMargin, enableMaxHeight && styles.scrollContainer, styles.firstSectionSeparator),
87
98
  "data-toolbar-component": "menu"
package/dist/esm/ui/ToolbarDropdownMenu.js CHANGED
@@ -16,6 +16,7 @@ var styles = {
16
16
  };
17
17
  var ToolbarDropdownMenuContent = function ToolbarDropdownMenuContent(_ref) {
18
18
  var iconBefore = _ref.iconBefore,
19
+ tooltipComponent = _ref.tooltipComponent,
19
20
  children = _ref.children,
20
21
  isDisabled = _ref.isDisabled,
21
22
  id = _ref.id,
@@ -40,7 +41,7 @@ var ToolbarDropdownMenuContent = function ToolbarDropdownMenuContent(_ref) {
40
41
  }, [menuContext]);
41
42
  return /*#__PURE__*/React.createElement(DropdownMenu, {
42
43
  trigger: function trigger(triggerProps) {
43
- return /*#__PURE__*/React.createElement(ToolbarButton, {
44
+ var toolbarButton = /*#__PURE__*/React.createElement(ToolbarButton, {
44
45
  ref: triggerProps.triggerRef,
45
46
  isSelected: triggerProps.isSelected,
46
47
  "aria-expanded": triggerProps['aria-expanded'],
@@ -59,6 +60,12 @@ var ToolbarDropdownMenuContent = function ToolbarDropdownMenuContent(_ref) {
59
60
  isDisabled: isDisabled,
60
61
  label: label
61
62
  });
63
+ if (tooltipComponent && expValEquals('platform_editor_hide_toolbar_tooltips_fix', 'isEnabled', true)) {
64
+ return /*#__PURE__*/React.cloneElement(tooltipComponent, {
65
+ children: toolbarButton
66
+ });
67
+ }
68
+ return toolbarButton;
62
69
  },
63
70
  onOpenChange: handleOpenChange,
64
71
  isOpen: menuContext === null || menuContext === void 0 ? void 0 : menuContext.isOpen
@@ -75,14 +82,16 @@ export var ToolbarDropdownMenu = function ToolbarDropdownMenu(_ref2) {
75
82
  hasSectionMargin = _ref2$hasSectionMargi === void 0 ? true : _ref2$hasSectionMargi,
76
83
  _ref2$enableMaxHeight = _ref2.enableMaxHeight,
77
84
  enableMaxHeight = _ref2$enableMaxHeight === void 0 ? false : _ref2$enableMaxHeight,
78
- onClick = _ref2.onClick;
85
+ onClick = _ref2.onClick,
86
+ tooltipComponent = _ref2.tooltipComponent;
79
87
  return /*#__PURE__*/React.createElement(ToolbarDropdownMenuContent, {
80
88
  iconBefore: iconBefore,
81
89
  isDisabled: isDisabled,
82
90
  id: expValEquals('platform_editor_renderer_toolbar_updates', 'isEnabled', true) ? id : undefined,
83
91
  testId: testId,
84
92
  label: label,
85
- onClick: onClick
93
+ onClick: onClick,
94
+ tooltipComponent: expValEquals('platform_editor_hide_toolbar_tooltips_fix', 'isEnabled', true) ? tooltipComponent : undefined
86
95
  }, /*#__PURE__*/React.createElement(Box, {
87
96
  xcss: cx(hasSectionMargin && styles.sectionMargin, enableMaxHeight && styles.scrollContainer, styles.firstSectionSeparator),
88
97
  "data-toolbar-component": "menu"
package/dist/types/ui/ToolbarDropdownMenu.d.ts CHANGED
@@ -6,7 +6,7 @@ import React, { type ReactNode } from 'react';
6
6
  type ToolbarDropdownMenuProps = {
7
7
  children?: ReactNode;
8
8
  /**
9
- * Enforeces a max height of 320px for menus - when menu is larger a scroll is introduced
9
+ * Enforces a max height of 320px for menus - when menu is larger a scroll is introduced
10
10
  */
11
11
  enableMaxHeight?: boolean;
12
12
  /**
@@ -19,6 +19,7 @@ type ToolbarDropdownMenuProps = {
19
19
  label?: string;
20
20
  onClick?: (event: React.MouseEvent<HTMLButtonElement>, isOpen: boolean) => void;
21
21
  testId?: string;
22
+ tooltipComponent?: React.ReactNode;
22
23
  };
23
- export declare const ToolbarDropdownMenu: ({ iconBefore, children, isDisabled, id, testId, label, hasSectionMargin, enableMaxHeight, onClick, }: ToolbarDropdownMenuProps) => JSX.Element;
24
+ export declare const ToolbarDropdownMenu: ({ iconBefore, children, isDisabled, id, testId, label, hasSectionMargin, enableMaxHeight, onClick, tooltipComponent, }: ToolbarDropdownMenuProps) => JSX.Element;
24
25
  export {};
package/dist/types/ui/ToolbarTooltip.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
  import type { PositionType } from '@atlaskit/tooltip';
3
3
  type ToolbarTooltipProps = {
4
- children: React.ReactNode;
4
+ children?: React.ReactNode;
5
5
  content: React.ReactNode;
6
6
  delay?: number;
7
7
  position?: PositionType;
package/dist/types-ts4.5/ui/ToolbarDropdownMenu.d.ts CHANGED
@@ -6,7 +6,7 @@ import React, { type ReactNode } from 'react';
6
6
  type ToolbarDropdownMenuProps = {
7
7
  children?: ReactNode;
8
8
  /**
9
- * Enforeces a max height of 320px for menus - when menu is larger a scroll is introduced
9
+ * Enforces a max height of 320px for menus - when menu is larger a scroll is introduced
10
10
  */
11
11
  enableMaxHeight?: boolean;
12
12
  /**
@@ -19,6 +19,7 @@ type ToolbarDropdownMenuProps = {
19
19
  label?: string;
20
20
  onClick?: (event: React.MouseEvent<HTMLButtonElement>, isOpen: boolean) => void;
21
21
  testId?: string;
22
+ tooltipComponent?: React.ReactNode;
22
23
  };
23
- export declare const ToolbarDropdownMenu: ({ iconBefore, children, isDisabled, id, testId, label, hasSectionMargin, enableMaxHeight, onClick, }: ToolbarDropdownMenuProps) => JSX.Element;
24
+ export declare const ToolbarDropdownMenu: ({ iconBefore, children, isDisabled, id, testId, label, hasSectionMargin, enableMaxHeight, onClick, tooltipComponent, }: ToolbarDropdownMenuProps) => JSX.Element;
24
25
  export {};
package/dist/types-ts4.5/ui/ToolbarTooltip.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
  import type { PositionType } from '@atlaskit/tooltip';
3
3
  type ToolbarTooltipProps = {
4
- children: React.ReactNode;
4
+ children?: React.ReactNode;
5
5
  content: React.ReactNode;
6
6
  delay?: number;
7
7
  position?: PositionType;
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "publishConfig": {
4
4
  "registry": "https://registry.npmjs.org/"
5
5
  },
6
- "version": "0.19.12",
6
+ "version": "0.19.13",
7
7
  "description": "Common UI for Toolbars across the platform",
8
8
  "atlassian": {
9
9
  "team": "Editor: Jenga",
@@ -30,7 +30,7 @@
30
30
  "@atlaskit/platform-feature-flags": "^1.1.0",
31
31
  "@atlaskit/popup": "^4.13.0",
32
32
  "@atlaskit/primitives": "^18.0.0",
33
- "@atlaskit/tmp-editor-statsig": "^17.10.0",
33
+ "@atlaskit/tmp-editor-statsig": "^17.13.0",
34
34
  "@atlaskit/tokens": "^11.0.0",
35
35
  "@atlaskit/tooltip": "^20.14.0",
36
36
  "@babel/runtime": "^7.0.0",