@atlaskit/editor-plugin-text-color 3.2.2 → 3.2.4

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 (19) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/cjs/ui/TextColorHighlightMenu.js +6 -6
  3. package/dist/cjs/ui/TextColorMenuItem.js +3 -3
  4. package/dist/cjs/ui/TextMenuSection.compiled.css +2 -0
  5. package/dist/cjs/ui/TextMenuSection.js +29 -0
  6. package/dist/cjs/ui/toolbar-components.js +9 -1
  7. package/dist/es2019/ui/TextColorHighlightMenu.js +7 -7
  8. package/dist/es2019/ui/TextColorMenuItem.js +3 -4
  9. package/dist/es2019/ui/TextMenuSection.compiled.css +2 -0
  10. package/dist/es2019/ui/TextMenuSection.js +21 -0
  11. package/dist/es2019/ui/toolbar-components.js +9 -2
  12. package/dist/esm/ui/TextColorHighlightMenu.js +7 -7
  13. package/dist/esm/ui/TextColorMenuItem.js +3 -3
  14. package/dist/esm/ui/TextMenuSection.compiled.css +2 -0
  15. package/dist/esm/ui/TextMenuSection.js +22 -0
  16. package/dist/esm/ui/toolbar-components.js +10 -2
  17. package/dist/types/ui/TextMenuSection.d.ts +7 -0
  18. package/dist/types-ts4.5/ui/TextMenuSection.d.ts +7 -0
  19. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # @atlaskit/editor-plugin-text-color
2
2
 
3
+ ## 3.2.4
4
+
5
+ ### Patch Changes
6
+
7
+ - [`36e649e4988d3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/36e649e4988d3) -
8
+ [ux] ED-29072 close all menus on nested menu item clicked
9
+ - Updated dependencies
10
+
11
+ ## 3.2.3
12
+
13
+ ### Patch Changes
14
+
15
+ - [`51f3f2db61f6e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/51f3f2db61f6e) -
16
+ Update toolbar config across plugins
17
+ - Updated dependencies
18
+
3
19
  ## 3.2.2
4
20
 
5
21
  ### Patch Changes
package/dist/cjs/ui/TextColorHighlightMenu.js CHANGED
@@ -39,7 +39,7 @@ var TextColorHighlightMenu = exports.TextColorHighlightMenu = function TextColor
39
39
  var highlightColorIcon = highlightColor ? highlightColor : (0, _editorToolbar.getContrastingBackgroundColor)(iconColor);
40
40
  return (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_patch_1', 'isEnabled', true) ? /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarTooltip, {
41
41
  content: formatMessage(isHighlightPluginExisted ? _messages.textColorMessages.textColorHighlightTooltip : _messages.textColorMessages.textColorTooltip)
42
- }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownMenu, {
42
+ }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownMenuProvider, null, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownMenu, {
43
43
  iconBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarColorSwatch, {
44
44
  highlightColor: highlightColorIcon
45
45
  }, /*#__PURE__*/_react.default.createElement(_editorToolbar.TextColorIcon, {
@@ -53,14 +53,14 @@ var TextColorHighlightMenu = exports.TextColorHighlightMenu = function TextColor
53
53
  isDisabled: isTextColorDisabled,
54
54
  testId: "text-color-highlight-menu",
55
55
  hasSectionMargin: false
56
- }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
56
+ }, (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) ? children : /*#__PURE__*/_react.default.createElement(_compiled.Box, {
57
57
  xcss: styles.menu
58
- }, children))) : /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownMenu, {
58
+ }, children)))) : /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownMenu, {
59
59
  iconBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarColorSwatch, {
60
- highlightColor: highlightColor || ''
60
+ highlightColor: highlightColorIcon
61
61
  }, /*#__PURE__*/_react.default.createElement(_editorToolbar.TextColorIcon, {
62
62
  label: formatMessage(_messages.textColorMessages.textColorTooltip),
63
- iconColor: textColor || "var(--ds-text-accent-magenta, #943D73)",
63
+ iconColor: iconColor,
64
64
  shouldRecommendSmallIcon: true,
65
65
  size: 'small',
66
66
  isDisabled: isTextColorDisabled,
@@ -69,7 +69,7 @@ var TextColorHighlightMenu = exports.TextColorHighlightMenu = function TextColor
69
69
  isDisabled: isTextColorDisabled,
70
70
  testId: "text-color-highlight-menu",
71
71
  hasSectionMargin: false
72
- }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
72
+ }, (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) ? children : /*#__PURE__*/_react.default.createElement(_compiled.Box, {
73
73
  xcss: styles.menu
74
74
  }, children));
75
75
  };
package/dist/cjs/ui/TextColorMenuItem.js CHANGED
@@ -43,8 +43,8 @@ function TextColorMenuItem(_ref) {
43
43
  },
44
44
  state = _ref2.state,
45
45
  dispatch = _ref2.dispatch;
46
- var _useToolbarDropdownMe = (0, _editorToolbar.useToolbarDropdownMenu)(),
47
- closeMenu = _useToolbarDropdownMe.closeMenu;
46
+ var context = (0, _editorToolbar.useToolbarDropdownMenu)();
47
+ var closeMenu = context === null || context === void 0 ? void 0 : context.closeMenu;
48
48
  var handleTextColorChange = (0, _react.useCallback)(function (color) {
49
49
  var _api$textColor;
50
50
  if (!state || !dispatch) {
@@ -52,7 +52,7 @@ function TextColorMenuItem(_ref) {
52
52
  }
53
53
  if (api !== null && api !== void 0 && (_api$textColor = api.textColor) !== null && _api$textColor !== void 0 && (_api$textColor = _api$textColor.actions) !== null && _api$textColor !== void 0 && _api$textColor.changeColor) {
54
54
  api.textColor.actions.changeColor(color, (0, _toolbar.getInputMethodFromParentKeys)(parents))(state, dispatch);
55
- closeMenu();
55
+ closeMenu === null || closeMenu === void 0 || closeMenu();
56
56
  }
57
57
  }, [api, state, dispatch, closeMenu, parents]);
58
58
  var _useIntl = (0, _reactIntlNext.useIntl)(),
package/dist/cjs/ui/TextMenuSection.compiled.css ADDED
@@ -0,0 +1,2 @@
1
+ ._18zru2gc{padding-inline:var(--ds-space-100,8px)}
2
+ ._1rjcv77o{padding-block:var(--ds-space-025,2px)}
package/dist/cjs/ui/TextMenuSection.js ADDED
@@ -0,0 +1,29 @@
1
+ /* TextMenuSection.tsx generated by @compiled/babel-plugin v0.36.1 */
2
+ "use strict";
3
+
4
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.TextMenuSection = void 0;
9
+ require("./TextMenuSection.compiled.css");
10
+ var _runtime = require("@compiled/react/runtime");
11
+ var _react = _interopRequireDefault(require("react"));
12
+ var _toolbar = require("@atlaskit/editor-common/toolbar");
13
+ var _editorToolbar = require("@atlaskit/editor-toolbar");
14
+ var _compiled = require("@atlaskit/primitives/compiled");
15
+ var styles = {
16
+ menu: "_1rjcv77o _18zru2gc"
17
+ };
18
+ var TextMenuSection = exports.TextMenuSection = function TextMenuSection(_ref) {
19
+ var children = _ref.children,
20
+ parents = _ref.parents;
21
+ var hasSeparator = parents.some(function (parent) {
22
+ return parent.key === _toolbar.TEXT_COLLAPSED_MENU.key;
23
+ });
24
+ return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, {
25
+ hasSeparator: hasSeparator
26
+ }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
27
+ xcss: styles.menu
28
+ }, children));
29
+ };
package/dist/cjs/ui/toolbar-components.js CHANGED
@@ -5,11 +5,14 @@ Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
7
  exports.getToolbarComponents = void 0;
8
+ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
8
9
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
10
  var _react = _interopRequireDefault(require("react"));
10
11
  var _toolbar = require("@atlaskit/editor-common/toolbar");
12
+ var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
11
13
  var _TextColorHighlightMenu = require("./TextColorHighlightMenu");
12
14
  var _TextColorMenuItem = require("./TextColorMenuItem");
15
+ var _TextMenuSection = require("./TextMenuSection");
13
16
  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; }
14
17
  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; }
15
18
  var getToolbarComponents = exports.getToolbarComponents = function getToolbarComponents(api) {
@@ -30,7 +33,12 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
30
33
  }), _objectSpread(_objectSpread({}, _toolbar.TEXT_COLOR_HIGHLIGHT_MENU_SECTION), {}, {
31
34
  parents: [_objectSpread(_objectSpread({}, _toolbar.TEXT_COLOR_HIGHLIGHT_MENU), {}, {
32
35
  rank: _toolbar.TEXT_COLOR_HIGHLIGHT_MENU_RANK[_toolbar.TEXT_COLOR_HIGHLIGHT_MENU_SECTION.key]
33
- })]
36
+ })].concat((0, _toConsumableArray2.default)((0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) ? [{
37
+ type: _toolbar.TEXT_COLLAPSED_MENU.type,
38
+ key: _toolbar.TEXT_COLLAPSED_MENU.key,
39
+ rank: _toolbar.TEXT_COLLAPSED_MENU_RANK[_toolbar.TEXT_COLOR_HIGHLIGHT_MENU_SECTION.key]
40
+ }] : [])),
41
+ component: (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) ? _TextMenuSection.TextMenuSection : undefined
34
42
  }), _objectSpread(_objectSpread({}, _toolbar.TEXT_COLOR_MENU_ITEM), {}, {
35
43
  parents: [_objectSpread(_objectSpread({}, _toolbar.TEXT_COLOR_HIGHLIGHT_MENU_SECTION), {}, {
36
44
  rank: _toolbar.TEXT_COLOR_HIGHLIGHT_MENU_SECTION_RANK[_toolbar.TEXT_COLOR_MENU_ITEM.key]
package/dist/es2019/ui/TextColorHighlightMenu.js CHANGED
@@ -6,7 +6,7 @@ import { useIntl } from 'react-intl-next';
6
6
  import { textColorMessages as messages } from '@atlaskit/editor-common/messages';
7
7
  import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
8
8
  import { hexToEditorTextPaletteColor } from '@atlaskit/editor-palette';
9
- import { TextColorIcon, ToolbarColorSwatch, ToolbarDropdownMenu, ToolbarTooltip, getContrastingBackgroundColor } from '@atlaskit/editor-toolbar';
9
+ import { TextColorIcon, ToolbarColorSwatch, ToolbarDropdownMenu, ToolbarDropdownMenuProvider, ToolbarTooltip, getContrastingBackgroundColor } from '@atlaskit/editor-toolbar';
10
10
  import { Box } from '@atlaskit/primitives/compiled';
11
11
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
12
12
  const styles = {
@@ -34,7 +34,7 @@ export const TextColorHighlightMenu = ({
34
34
  const highlightColorIcon = highlightColor ? highlightColor : getContrastingBackgroundColor(iconColor);
35
35
  return expValEquals('platform_editor_toolbar_aifc_patch_1', 'isEnabled', true) ? /*#__PURE__*/React.createElement(ToolbarTooltip, {
36
36
  content: formatMessage(isHighlightPluginExisted ? messages.textColorHighlightTooltip : messages.textColorTooltip)
37
- }, /*#__PURE__*/React.createElement(ToolbarDropdownMenu, {
37
+ }, /*#__PURE__*/React.createElement(ToolbarDropdownMenuProvider, null, /*#__PURE__*/React.createElement(ToolbarDropdownMenu, {
38
38
  iconBefore: /*#__PURE__*/React.createElement(ToolbarColorSwatch, {
39
39
  highlightColor: highlightColorIcon
40
40
  }, /*#__PURE__*/React.createElement(TextColorIcon, {
@@ -48,14 +48,14 @@ export const TextColorHighlightMenu = ({
48
48
  isDisabled: isTextColorDisabled,
49
49
  testId: "text-color-highlight-menu",
50
50
  hasSectionMargin: false
51
- }, /*#__PURE__*/React.createElement(Box, {
51
+ }, expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) ? children : /*#__PURE__*/React.createElement(Box, {
52
52
  xcss: styles.menu
53
- }, children))) : /*#__PURE__*/React.createElement(ToolbarDropdownMenu, {
53
+ }, children)))) : /*#__PURE__*/React.createElement(ToolbarDropdownMenu, {
54
54
  iconBefore: /*#__PURE__*/React.createElement(ToolbarColorSwatch, {
55
- highlightColor: highlightColor || ''
55
+ highlightColor: highlightColorIcon
56
56
  }, /*#__PURE__*/React.createElement(TextColorIcon, {
57
57
  label: formatMessage(messages.textColorTooltip),
58
- iconColor: textColor || "var(--ds-text-accent-magenta, #943D73)",
58
+ iconColor: iconColor,
59
59
  shouldRecommendSmallIcon: true,
60
60
  size: 'small',
61
61
  isDisabled: isTextColorDisabled,
@@ -64,7 +64,7 @@ export const TextColorHighlightMenu = ({
64
64
  isDisabled: isTextColorDisabled,
65
65
  testId: "text-color-highlight-menu",
66
66
  hasSectionMargin: false
67
- }, /*#__PURE__*/React.createElement(Box, {
67
+ }, expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) ? children : /*#__PURE__*/React.createElement(Box, {
68
68
  xcss: styles.menu
69
69
  }, children));
70
70
  };
package/dist/es2019/ui/TextColorMenuItem.js CHANGED
@@ -39,9 +39,8 @@ export function TextColorMenuItem({
39
39
  state: null,
40
40
  dispatch: null
41
41
  };
42
- const {
43
- closeMenu
44
- } = useToolbarDropdownMenu();
42
+ const context = useToolbarDropdownMenu();
43
+ const closeMenu = context === null || context === void 0 ? void 0 : context.closeMenu;
45
44
  const handleTextColorChange = useCallback(color => {
46
45
  var _api$textColor, _api$textColor$action;
47
46
  if (!state || !dispatch) {
@@ -49,7 +48,7 @@ export function TextColorMenuItem({
49
48
  }
50
49
  if (api !== null && api !== void 0 && (_api$textColor = api.textColor) !== null && _api$textColor !== void 0 && (_api$textColor$action = _api$textColor.actions) !== null && _api$textColor$action !== void 0 && _api$textColor$action.changeColor) {
51
50
  api.textColor.actions.changeColor(color, getInputMethodFromParentKeys(parents))(state, dispatch);
52
- closeMenu();
51
+ closeMenu === null || closeMenu === void 0 ? void 0 : closeMenu();
53
52
  }
54
53
  }, [api, state, dispatch, closeMenu, parents]);
55
54
  const {
package/dist/es2019/ui/TextMenuSection.compiled.css ADDED
@@ -0,0 +1,2 @@
1
+ ._18zru2gc{padding-inline:var(--ds-space-100,8px)}
2
+ ._1rjcv77o{padding-block:var(--ds-space-025,2px)}
package/dist/es2019/ui/TextMenuSection.js ADDED
@@ -0,0 +1,21 @@
1
+ /* TextMenuSection.tsx generated by @compiled/babel-plugin v0.36.1 */
2
+ import "./TextMenuSection.compiled.css";
3
+ import { ax, ix } from "@compiled/react/runtime";
4
+ import React from 'react';
5
+ import { TEXT_COLLAPSED_MENU } from '@atlaskit/editor-common/toolbar';
6
+ import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
7
+ import { Box } from '@atlaskit/primitives/compiled';
8
+ const styles = {
9
+ menu: "_1rjcv77o _18zru2gc"
10
+ };
11
+ export const TextMenuSection = ({
12
+ children,
13
+ parents
14
+ }) => {
15
+ const hasSeparator = parents.some(parent => parent.key === TEXT_COLLAPSED_MENU.key);
16
+ return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
17
+ hasSeparator: hasSeparator
18
+ }, /*#__PURE__*/React.createElement(Box, {
19
+ xcss: styles.menu
20
+ }, children));
21
+ };
package/dist/es2019/ui/toolbar-components.js CHANGED
@@ -1,7 +1,9 @@
1
1
  import React from 'react';
2
- import { TEXT_SECTION, TEXT_SECTION_RANK, TEXT_COLOR_HIGHLIGHT_GROUP, TEXT_COLOR_HIGHLIGHT_MENU, TEXT_COLOR_HIGHLIGHT_MENU_SECTION, TEXT_COLOR_MENU_ITEM, TEXT_COLOR_HIGHLIGHT_MENU_SECTION_RANK, TEXT_COLOR_HIGHLIGHT_GROUP_RANK, TEXT_COLOR_HIGHLIGHT_MENU_RANK } from '@atlaskit/editor-common/toolbar';
2
+ import { TEXT_SECTION, TEXT_SECTION_RANK, TEXT_COLOR_HIGHLIGHT_GROUP, TEXT_COLOR_HIGHLIGHT_MENU, TEXT_COLOR_HIGHLIGHT_MENU_SECTION, TEXT_COLOR_MENU_ITEM, TEXT_COLOR_HIGHLIGHT_MENU_SECTION_RANK, TEXT_COLOR_HIGHLIGHT_GROUP_RANK, TEXT_COLOR_HIGHLIGHT_MENU_RANK, TEXT_COLLAPSED_MENU_RANK, TEXT_COLLAPSED_MENU } from '@atlaskit/editor-common/toolbar';
3
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
3
4
  import { TextColorHighlightMenu } from './TextColorHighlightMenu';
4
5
  import { TextColorMenuItem } from './TextColorMenuItem';
6
+ import { TextMenuSection } from './TextMenuSection';
5
7
  export const getToolbarComponents = api => {
6
8
  return [{
7
9
  ...TEXT_COLOR_HIGHLIGHT_GROUP,
@@ -25,7 +27,12 @@ export const getToolbarComponents = api => {
25
27
  parents: [{
26
28
  ...TEXT_COLOR_HIGHLIGHT_MENU,
27
29
  rank: TEXT_COLOR_HIGHLIGHT_MENU_RANK[TEXT_COLOR_HIGHLIGHT_MENU_SECTION.key]
28
- }]
30
+ }, ...(expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) ? [{
31
+ type: TEXT_COLLAPSED_MENU.type,
32
+ key: TEXT_COLLAPSED_MENU.key,
33
+ rank: TEXT_COLLAPSED_MENU_RANK[TEXT_COLOR_HIGHLIGHT_MENU_SECTION.key]
34
+ }] : [])],
35
+ component: expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) ? TextMenuSection : undefined
29
36
  }, {
30
37
  ...TEXT_COLOR_MENU_ITEM,
31
38
  parents: [{
package/dist/esm/ui/TextColorHighlightMenu.js CHANGED
@@ -6,7 +6,7 @@ import { useIntl } from 'react-intl-next';
6
6
  import { textColorMessages as messages } from '@atlaskit/editor-common/messages';
7
7
  import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
8
8
  import { hexToEditorTextPaletteColor } from '@atlaskit/editor-palette';
9
- import { TextColorIcon, ToolbarColorSwatch, ToolbarDropdownMenu, ToolbarTooltip, getContrastingBackgroundColor } from '@atlaskit/editor-toolbar';
9
+ import { TextColorIcon, ToolbarColorSwatch, ToolbarDropdownMenu, ToolbarDropdownMenuProvider, ToolbarTooltip, getContrastingBackgroundColor } from '@atlaskit/editor-toolbar';
10
10
  import { Box } from '@atlaskit/primitives/compiled';
11
11
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
12
12
  var styles = {
@@ -32,7 +32,7 @@ export var TextColorHighlightMenu = function TextColorHighlightMenu(_ref) {
32
32
  var highlightColorIcon = highlightColor ? highlightColor : getContrastingBackgroundColor(iconColor);
33
33
  return expValEquals('platform_editor_toolbar_aifc_patch_1', 'isEnabled', true) ? /*#__PURE__*/React.createElement(ToolbarTooltip, {
34
34
  content: formatMessage(isHighlightPluginExisted ? messages.textColorHighlightTooltip : messages.textColorTooltip)
35
- }, /*#__PURE__*/React.createElement(ToolbarDropdownMenu, {
35
+ }, /*#__PURE__*/React.createElement(ToolbarDropdownMenuProvider, null, /*#__PURE__*/React.createElement(ToolbarDropdownMenu, {
36
36
  iconBefore: /*#__PURE__*/React.createElement(ToolbarColorSwatch, {
37
37
  highlightColor: highlightColorIcon
38
38
  }, /*#__PURE__*/React.createElement(TextColorIcon, {
@@ -46,14 +46,14 @@ export var TextColorHighlightMenu = function TextColorHighlightMenu(_ref) {
46
46
  isDisabled: isTextColorDisabled,
47
47
  testId: "text-color-highlight-menu",
48
48
  hasSectionMargin: false
49
- }, /*#__PURE__*/React.createElement(Box, {
49
+ }, expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) ? children : /*#__PURE__*/React.createElement(Box, {
50
50
  xcss: styles.menu
51
- }, children))) : /*#__PURE__*/React.createElement(ToolbarDropdownMenu, {
51
+ }, children)))) : /*#__PURE__*/React.createElement(ToolbarDropdownMenu, {
52
52
  iconBefore: /*#__PURE__*/React.createElement(ToolbarColorSwatch, {
53
- highlightColor: highlightColor || ''
53
+ highlightColor: highlightColorIcon
54
54
  }, /*#__PURE__*/React.createElement(TextColorIcon, {
55
55
  label: formatMessage(messages.textColorTooltip),
56
- iconColor: textColor || "var(--ds-text-accent-magenta, #943D73)",
56
+ iconColor: iconColor,
57
57
  shouldRecommendSmallIcon: true,
58
58
  size: 'small',
59
59
  isDisabled: isTextColorDisabled,
@@ -62,7 +62,7 @@ export var TextColorHighlightMenu = function TextColorHighlightMenu(_ref) {
62
62
  isDisabled: isTextColorDisabled,
63
63
  testId: "text-color-highlight-menu",
64
64
  hasSectionMargin: false
65
- }, /*#__PURE__*/React.createElement(Box, {
65
+ }, expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) ? children : /*#__PURE__*/React.createElement(Box, {
66
66
  xcss: styles.menu
67
67
  }, children));
68
68
  };
package/dist/esm/ui/TextColorMenuItem.js CHANGED
@@ -35,8 +35,8 @@ export function TextColorMenuItem(_ref) {
35
35
  },
36
36
  state = _ref2.state,
37
37
  dispatch = _ref2.dispatch;
38
- var _useToolbarDropdownMe = useToolbarDropdownMenu(),
39
- closeMenu = _useToolbarDropdownMe.closeMenu;
38
+ var context = useToolbarDropdownMenu();
39
+ var closeMenu = context === null || context === void 0 ? void 0 : context.closeMenu;
40
40
  var handleTextColorChange = useCallback(function (color) {
41
41
  var _api$textColor;
42
42
  if (!state || !dispatch) {
@@ -44,7 +44,7 @@ export function TextColorMenuItem(_ref) {
44
44
  }
45
45
  if (api !== null && api !== void 0 && (_api$textColor = api.textColor) !== null && _api$textColor !== void 0 && (_api$textColor = _api$textColor.actions) !== null && _api$textColor !== void 0 && _api$textColor.changeColor) {
46
46
  api.textColor.actions.changeColor(color, getInputMethodFromParentKeys(parents))(state, dispatch);
47
- closeMenu();
47
+ closeMenu === null || closeMenu === void 0 || closeMenu();
48
48
  }
49
49
  }, [api, state, dispatch, closeMenu, parents]);
50
50
  var _useIntl = useIntl(),
package/dist/esm/ui/TextMenuSection.compiled.css ADDED
@@ -0,0 +1,2 @@
1
+ ._18zru2gc{padding-inline:var(--ds-space-100,8px)}
2
+ ._1rjcv77o{padding-block:var(--ds-space-025,2px)}
package/dist/esm/ui/TextMenuSection.js ADDED
@@ -0,0 +1,22 @@
1
+ /* TextMenuSection.tsx generated by @compiled/babel-plugin v0.36.1 */
2
+ import "./TextMenuSection.compiled.css";
3
+ import { ax, ix } from "@compiled/react/runtime";
4
+ import React from 'react';
5
+ import { TEXT_COLLAPSED_MENU } from '@atlaskit/editor-common/toolbar';
6
+ import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
7
+ import { Box } from '@atlaskit/primitives/compiled';
8
+ var styles = {
9
+ menu: "_1rjcv77o _18zru2gc"
10
+ };
11
+ export var TextMenuSection = function TextMenuSection(_ref) {
12
+ var children = _ref.children,
13
+ parents = _ref.parents;
14
+ var hasSeparator = parents.some(function (parent) {
15
+ return parent.key === TEXT_COLLAPSED_MENU.key;
16
+ });
17
+ return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
18
+ hasSeparator: hasSeparator
19
+ }, /*#__PURE__*/React.createElement(Box, {
20
+ xcss: styles.menu
21
+ }, children));
22
+ };
package/dist/esm/ui/toolbar-components.js CHANGED
@@ -1,10 +1,13 @@
1
+ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
1
2
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
3
  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; }
3
4
  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; }
4
5
  import React from 'react';
5
- import { TEXT_SECTION, TEXT_SECTION_RANK, TEXT_COLOR_HIGHLIGHT_GROUP, TEXT_COLOR_HIGHLIGHT_MENU, TEXT_COLOR_HIGHLIGHT_MENU_SECTION, TEXT_COLOR_MENU_ITEM, TEXT_COLOR_HIGHLIGHT_MENU_SECTION_RANK, TEXT_COLOR_HIGHLIGHT_GROUP_RANK, TEXT_COLOR_HIGHLIGHT_MENU_RANK } from '@atlaskit/editor-common/toolbar';
6
+ import { TEXT_SECTION, TEXT_SECTION_RANK, TEXT_COLOR_HIGHLIGHT_GROUP, TEXT_COLOR_HIGHLIGHT_MENU, TEXT_COLOR_HIGHLIGHT_MENU_SECTION, TEXT_COLOR_MENU_ITEM, TEXT_COLOR_HIGHLIGHT_MENU_SECTION_RANK, TEXT_COLOR_HIGHLIGHT_GROUP_RANK, TEXT_COLOR_HIGHLIGHT_MENU_RANK, TEXT_COLLAPSED_MENU_RANK, TEXT_COLLAPSED_MENU } from '@atlaskit/editor-common/toolbar';
7
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
6
8
  import { TextColorHighlightMenu } from './TextColorHighlightMenu';
7
9
  import { TextColorMenuItem } from './TextColorMenuItem';
10
+ import { TextMenuSection } from './TextMenuSection';
8
11
  export var getToolbarComponents = function getToolbarComponents(api) {
9
12
  return [_objectSpread(_objectSpread({}, TEXT_COLOR_HIGHLIGHT_GROUP), {}, {
10
13
  parents: [_objectSpread(_objectSpread({}, TEXT_SECTION), {}, {
@@ -23,7 +26,12 @@ export var getToolbarComponents = function getToolbarComponents(api) {
23
26
  }), _objectSpread(_objectSpread({}, TEXT_COLOR_HIGHLIGHT_MENU_SECTION), {}, {
24
27
  parents: [_objectSpread(_objectSpread({}, TEXT_COLOR_HIGHLIGHT_MENU), {}, {
25
28
  rank: TEXT_COLOR_HIGHLIGHT_MENU_RANK[TEXT_COLOR_HIGHLIGHT_MENU_SECTION.key]
26
- })]
29
+ })].concat(_toConsumableArray(expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) ? [{
30
+ type: TEXT_COLLAPSED_MENU.type,
31
+ key: TEXT_COLLAPSED_MENU.key,
32
+ rank: TEXT_COLLAPSED_MENU_RANK[TEXT_COLOR_HIGHLIGHT_MENU_SECTION.key]
33
+ }] : [])),
34
+ component: expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) ? TextMenuSection : undefined
27
35
  }), _objectSpread(_objectSpread({}, TEXT_COLOR_MENU_ITEM), {}, {
28
36
  parents: [_objectSpread(_objectSpread({}, TEXT_COLOR_HIGHLIGHT_MENU_SECTION), {}, {
29
37
  rank: TEXT_COLOR_HIGHLIGHT_MENU_SECTION_RANK[TEXT_COLOR_MENU_ITEM.key]
package/dist/types/ui/TextMenuSection.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import React from 'react';
2
+ import type { CommonComponentProps } from '@atlaskit/editor-toolbar-model';
3
+ type TextMenuSectionProps = {
4
+ children: React.ReactNode;
5
+ } & CommonComponentProps;
6
+ export declare const TextMenuSection: ({ children, parents }: TextMenuSectionProps) => React.JSX.Element;
7
+ export {};
package/dist/types-ts4.5/ui/TextMenuSection.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import React from 'react';
2
+ import type { CommonComponentProps } from '@atlaskit/editor-toolbar-model';
3
+ type TextMenuSectionProps = {
4
+ children: React.ReactNode;
5
+ } & CommonComponentProps;
6
+ export declare const TextMenuSection: ({ children, parents }: TextMenuSectionProps) => React.JSX.Element;
7
+ export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-text-color",
3
- "version": "3.2.2",
3
+ "version": "3.2.4",
4
4
  "description": "Text color plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -40,19 +40,19 @@
40
40
  "@atlaskit/editor-prosemirror": "7.0.0",
41
41
  "@atlaskit/editor-shared-styles": "^3.6.0",
42
42
  "@atlaskit/editor-tables": "^2.9.0",
43
- "@atlaskit/editor-toolbar": "^0.5.0",
44
- "@atlaskit/editor-toolbar-model": "^0.1.0",
43
+ "@atlaskit/editor-toolbar": "^0.6.0",
44
+ "@atlaskit/editor-toolbar-model": "^0.2.0",
45
45
  "@atlaskit/icon": "^28.1.0",
46
46
  "@atlaskit/platform-feature-flags": "^1.1.0",
47
47
  "@atlaskit/primitives": "^14.12.0",
48
48
  "@atlaskit/theme": "^20.0.0",
49
- "@atlaskit/tmp-editor-statsig": "^11.9.0",
49
+ "@atlaskit/tmp-editor-statsig": "^11.12.0",
50
50
  "@atlaskit/tokens": "^6.1.0",
51
51
  "@babel/runtime": "^7.0.0",
52
52
  "@emotion/react": "^11.7.1"
53
53
  },
54
54
  "peerDependencies": {
55
- "@atlaskit/editor-common": "^107.33.0",
55
+ "@atlaskit/editor-common": "^107.35.0",
56
56
  "react": "^18.2.0",
57
57
  "react-dom": "^18.2.0",
58
58
  "react-intl-next": "npm:react-intl@^5.18.1"