@atlaskit/editor-toolbar 1.4.0 → 1.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.
Files changed (52) hide show
  1. package/CHANGELOG.md +30 -0
  2. package/dist/cjs/index.js +42 -0
  3. package/dist/cjs/ui/ToolbarDropdownItem.compiled.css +1 -0
  4. package/dist/cjs/ui/ToolbarDropdownItem.js +8 -3
  5. package/dist/cjs/ui/ToolbarNestedDropdownMenu.js +2 -1
  6. package/dist/cjs/ui/icons/ArrowDownIcon.js +13 -0
  7. package/dist/cjs/ui/icons/ArrowUpIcon.js +13 -0
  8. package/dist/cjs/ui/icons/TableColumnAddLeftIcon.js +13 -0
  9. package/dist/cjs/ui/icons/TableColumnAddRightIcon.js +13 -0
  10. package/dist/cjs/ui/icons/TableColumnMoveRightIcon.js +13 -0
  11. package/dist/cjs/ui/icons/TableColumnsDistributeIcon.js +13 -0
  12. package/dist/es2019/index.js +6 -0
  13. package/dist/es2019/ui/ToolbarDropdownItem.compiled.css +1 -0
  14. package/dist/es2019/ui/ToolbarDropdownItem.js +8 -3
  15. package/dist/es2019/ui/ToolbarNestedDropdownMenu.js +2 -1
  16. package/dist/es2019/ui/icons/ArrowDownIcon.js +2 -0
  17. package/dist/es2019/ui/icons/ArrowUpIcon.js +2 -0
  18. package/dist/es2019/ui/icons/TableColumnAddLeftIcon.js +2 -0
  19. package/dist/es2019/ui/icons/TableColumnAddRightIcon.js +2 -0
  20. package/dist/es2019/ui/icons/TableColumnMoveRightIcon.js +2 -0
  21. package/dist/es2019/ui/icons/TableColumnsDistributeIcon.js +2 -0
  22. package/dist/esm/index.js +6 -0
  23. package/dist/esm/ui/ToolbarDropdownItem.compiled.css +1 -0
  24. package/dist/esm/ui/ToolbarDropdownItem.js +9 -4
  25. package/dist/esm/ui/ToolbarNestedDropdownMenu.js +2 -1
  26. package/dist/esm/ui/icons/ArrowDownIcon.js +2 -0
  27. package/dist/esm/ui/icons/ArrowUpIcon.js +2 -0
  28. package/dist/esm/ui/icons/TableColumnAddLeftIcon.js +2 -0
  29. package/dist/esm/ui/icons/TableColumnAddRightIcon.js +2 -0
  30. package/dist/esm/ui/icons/TableColumnMoveRightIcon.js +2 -0
  31. package/dist/esm/ui/icons/TableColumnsDistributeIcon.js +2 -0
  32. package/dist/types/index.d.ts +6 -0
  33. package/dist/types/ui/ToolbarDropdownItem.d.ts +2 -1
  34. package/dist/types/ui/ToolbarMenuContainer.d.ts +1 -1
  35. package/dist/types/ui/ToolbarNestedDropdownMenu.d.ts +2 -1
  36. package/dist/types/ui/icons/ArrowDownIcon.d.ts +1 -0
  37. package/dist/types/ui/icons/ArrowUpIcon.d.ts +1 -0
  38. package/dist/types/ui/icons/TableColumnAddLeftIcon.d.ts +1 -0
  39. package/dist/types/ui/icons/TableColumnAddRightIcon.d.ts +1 -0
  40. package/dist/types/ui/icons/TableColumnMoveRightIcon.d.ts +1 -0
  41. package/dist/types/ui/icons/TableColumnsDistributeIcon.d.ts +1 -0
  42. package/dist/types-ts4.5/index.d.ts +6 -0
  43. package/dist/types-ts4.5/ui/ToolbarDropdownItem.d.ts +2 -1
  44. package/dist/types-ts4.5/ui/ToolbarMenuContainer.d.ts +1 -1
  45. package/dist/types-ts4.5/ui/ToolbarNestedDropdownMenu.d.ts +2 -1
  46. package/dist/types-ts4.5/ui/icons/ArrowDownIcon.d.ts +1 -0
  47. package/dist/types-ts4.5/ui/icons/ArrowUpIcon.d.ts +1 -0
  48. package/dist/types-ts4.5/ui/icons/TableColumnAddLeftIcon.d.ts +1 -0
  49. package/dist/types-ts4.5/ui/icons/TableColumnAddRightIcon.d.ts +1 -0
  50. package/dist/types-ts4.5/ui/icons/TableColumnMoveRightIcon.d.ts +1 -0
  51. package/dist/types-ts4.5/ui/icons/TableColumnsDistributeIcon.d.ts +1 -0
  52. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,35 @@
1
1
  # @atlaskit/editor-toolbar
2
2
 
3
+ ## 1.5.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`593f5ee15ac0d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/593f5ee15ac0d) -
8
+ Add experiment-gated column handle menu surface and expose column menu icons through
9
+ editor-toolbar.
10
+
11
+ ### Patch Changes
12
+
13
+ - Updated dependencies
14
+
15
+ ## 1.4.1
16
+
17
+ ### Patch Changes
18
+
19
+ - [`434b508cc2368`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/434b508cc2368) -
20
+ EDITOR-7104: Add `featured-section` placement to block menu selection extension API
21
+ - Add `featured-section` to `BlockMenuPlacement` type which registers a top-level section with a
22
+ separator
23
+ - Add `BLOCK_ACTIONS_TEMPLATE_SECTION` and `BLOCK_ACTIONS_FEATURED_EXTENSION_SECTION_KEYS`
24
+ constants to `editor-common`
25
+ - Render lozenge inline next to label text (not pushed to far right) for dropdown and nested
26
+ dropdown items
27
+ - Move "New" lozenge next to label for synced block dropdown items
28
+ - Block template/menu behaviour gated behind `platform_editor_block_menu_v2_patch_2`; synced-block
29
+ lozenge placement behaviour gated behind `platform_synced_block_patch_12`
30
+
31
+ - Updated dependencies
32
+
3
33
  ## 1.4.0
4
34
 
5
35
  ### Minor Changes
package/dist/cjs/index.js CHANGED
@@ -112,6 +112,18 @@ Object.defineProperty(exports, "AppsIcon", {
112
112
  return _AppsIcon.AppsIcon;
113
113
  }
114
114
  });
115
+ Object.defineProperty(exports, "ArrowDownIcon", {
116
+ enumerable: true,
117
+ get: function get() {
118
+ return _ArrowDownIcon.ArrowDownIcon;
119
+ }
120
+ });
121
+ Object.defineProperty(exports, "ArrowUpIcon", {
122
+ enumerable: true,
123
+ get: function get() {
124
+ return _ArrowUpIcon.ArrowUpIcon;
125
+ }
126
+ });
115
127
  Object.defineProperty(exports, "BoldIcon", {
116
128
  enumerable: true,
117
129
  get: function get() {
@@ -370,6 +382,30 @@ Object.defineProperty(exports, "SyncBlocksIcon", {
370
382
  return _SyncBlocksIcon.SyncBlocksIcon;
371
383
  }
372
384
  });
385
+ Object.defineProperty(exports, "TableColumnAddLeftIcon", {
386
+ enumerable: true,
387
+ get: function get() {
388
+ return _TableColumnAddLeftIcon.TableColumnAddLeftIcon;
389
+ }
390
+ });
391
+ Object.defineProperty(exports, "TableColumnAddRightIcon", {
392
+ enumerable: true,
393
+ get: function get() {
394
+ return _TableColumnAddRightIcon.TableColumnAddRightIcon;
395
+ }
396
+ });
397
+ Object.defineProperty(exports, "TableColumnMoveRightIcon", {
398
+ enumerable: true,
399
+ get: function get() {
400
+ return _TableColumnMoveRightIcon.TableColumnMoveRightIcon;
401
+ }
402
+ });
403
+ Object.defineProperty(exports, "TableColumnsDistributeIcon", {
404
+ enumerable: true,
405
+ get: function get() {
406
+ return _TableColumnsDistributeIcon.TableColumnsDistributeIcon;
407
+ }
408
+ });
373
409
  Object.defineProperty(exports, "TableIcon", {
374
410
  enumerable: true,
375
411
  get: function get() {
@@ -621,7 +657,13 @@ var _EmojiIcon = require("./ui/icons/EmojiIcon");
621
657
  var _LayoutIcon = require("./ui/icons/LayoutIcon");
622
658
  var _ImageIcon = require("./ui/icons/ImageIcon");
623
659
  var _MentionIcon = require("./ui/icons/MentionIcon");
660
+ var _ArrowDownIcon = require("./ui/icons/ArrowDownIcon");
661
+ var _ArrowUpIcon = require("./ui/icons/ArrowUpIcon");
624
662
  var _TableIcon = require("./ui/icons/TableIcon");
663
+ var _TableColumnAddLeftIcon = require("./ui/icons/TableColumnAddLeftIcon");
664
+ var _TableColumnAddRightIcon = require("./ui/icons/TableColumnAddRightIcon");
665
+ var _TableColumnMoveRightIcon = require("./ui/icons/TableColumnMoveRightIcon");
666
+ var _TableColumnsDistributeIcon = require("./ui/icons/TableColumnsDistributeIcon");
625
667
  var _TableRowAddAboveIcon = require("./ui/icons/TableRowAddAboveIcon");
626
668
  var _TableRowAddBelowIcon = require("./ui/icons/TableRowAddBelowIcon");
627
669
  var _TableRowMoveDownIcon = require("./ui/icons/TableRowMoveDownIcon");
@@ -2,6 +2,7 @@
2
2
  ._11c8fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
3
3
  ._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
4
4
  ._1rjc1b66{padding-block:var(--ds-space-050,4px)}
5
+ ._18u012x7{margin-left:var(--ds-space-075,6px)}
5
6
  ._1bsb1osq{width:100%}
6
7
  ._1e0c1txw{display:flex}
7
8
  ._1hmsglyw{text-decoration-line:none}
@@ -20,7 +20,7 @@ var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
20
20
  var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
21
21
  var _ToolbarDropdownMenuContext = require("./ToolbarDropdownMenuContext");
22
22
  var _excluded = ["children", "data-testid", "aria-haspopup", "aria-disabled", "aria-pressed", "aria-keyshortcuts", "onClick", "tabIndex", "href", "target", "rel", "title"],
23
- _excluded2 = ["onClick", "elemBefore", "elemAfter", "isSelected", "children", "isDisabled", "hasNestedDropdownMenu", "triggerRef", "title", "shouldTitleWrap", "testId", "ariaKeyshortcuts", "href", "target", "rel"];
23
+ _excluded2 = ["onClick", "elemBefore", "elemAfter", "elemAfterText", "isSelected", "children", "isDisabled", "hasNestedDropdownMenu", "triggerRef", "title", "shouldTitleWrap", "testId", "ariaKeyshortcuts", "href", "target", "rel"];
24
24
  function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
25
25
  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; }
26
26
  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; }
@@ -29,7 +29,8 @@ var styles = {
29
29
  anchor: "_4bfu1r31 _1hmsglyw _ajmmnqa1 _1053azsu _9oik1r31 _1bnxglyw _jf4cnqa1 _30l3azsu",
30
30
  enabled: "_irr31dpa _1di6fcek",
31
31
  disabled: "_syaz1gmx _80om13gf",
32
- selected: "_bfhk15s3 _syaz6x5g _irr3ufnl _1di6nozp"
32
+ selected: "_bfhk15s3 _syaz6x5g _irr3ufnl _1di6nozp",
33
+ elemAfterText: "_18u012x7"
33
34
  };
34
35
  var CustomDropdownMenuItemButton = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
35
36
  var children = _ref.children,
@@ -99,6 +100,7 @@ var ToolbarDropdownItem = exports.ToolbarDropdownItem = function ToolbarDropdown
99
100
  var _onClick = _ref3.onClick,
100
101
  elemBefore = _ref3.elemBefore,
101
102
  elemAfter = _ref3.elemAfter,
103
+ elemAfterText = _ref3.elemAfterText,
102
104
  isSelected = _ref3.isSelected,
103
105
  children = _ref3.children,
104
106
  isDisabled = _ref3.isDisabled,
@@ -154,5 +156,8 @@ var ToolbarDropdownItem = exports.ToolbarDropdownItem = function ToolbarDropdown
154
156
  title: title,
155
157
  shouldTitleWrap: shouldTitleWrap
156
158
  // eslint-disable-next-line react/jsx-props-no-spreading
157
- }, (0, _expValEquals.expValEquals)('platform_editor_renderer_toolbar_updates', 'isEnabled', true) ? dataAttributes : {}), children);
159
+ }, (0, _expValEquals.expValEquals)('platform_editor_renderer_toolbar_updates', 'isEnabled', true) ? dataAttributes : {}), children, elemAfterText ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
160
+ as: "span",
161
+ xcss: styles.elemAfterText
162
+ }, elemAfterText) : null);
158
163
  };
@@ -23,6 +23,7 @@ var styles = {
23
23
  var ToolbarNestedDropdownMenu = exports.ToolbarNestedDropdownMenu = function ToolbarNestedDropdownMenu(_ref) {
24
24
  var elemBefore = _ref.elemBefore,
25
25
  text = _ref.text,
26
+ elemAfterText = _ref.elemAfterText,
26
27
  elemAfter = _ref.elemAfter,
27
28
  children = _ref.children,
28
29
  isDisabled = _ref.isDisabled,
@@ -57,7 +58,7 @@ var ToolbarNestedDropdownMenu = exports.ToolbarNestedDropdownMenu = function Too
57
58
  hasNestedDropdownMenu: true,
58
59
  isDisabled: isDisabled,
59
60
  shouldTitleWrap: shouldTitleWrap
60
- }, text);
61
+ }, text, elemAfterText);
61
62
  if (tooltipContent) {
62
63
  return /*#__PURE__*/React.createElement(_ToolbarTooltip.ToolbarTooltip, {
63
64
  content: tooltipContent,
@@ -0,0 +1,13 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ Object.defineProperty(exports, "ArrowDownIcon", {
8
+ enumerable: true,
9
+ get: function get() {
10
+ return _arrowDown.default;
11
+ }
12
+ });
13
+ var _arrowDown = _interopRequireDefault(require("@atlaskit/icon/core/arrow-down"));
@@ -0,0 +1,13 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ Object.defineProperty(exports, "ArrowUpIcon", {
8
+ enumerable: true,
9
+ get: function get() {
10
+ return _arrowUp.default;
11
+ }
12
+ });
13
+ var _arrowUp = _interopRequireDefault(require("@atlaskit/icon/core/arrow-up"));
@@ -0,0 +1,13 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ Object.defineProperty(exports, "TableColumnAddLeftIcon", {
8
+ enumerable: true,
9
+ get: function get() {
10
+ return _tableColumnAddLeft.default;
11
+ }
12
+ });
13
+ var _tableColumnAddLeft = _interopRequireDefault(require("@atlaskit/icon/core/table-column-add-left"));
@@ -0,0 +1,13 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ Object.defineProperty(exports, "TableColumnAddRightIcon", {
8
+ enumerable: true,
9
+ get: function get() {
10
+ return _tableColumnAddRight.default;
11
+ }
12
+ });
13
+ var _tableColumnAddRight = _interopRequireDefault(require("@atlaskit/icon/core/table-column-add-right"));
@@ -0,0 +1,13 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ Object.defineProperty(exports, "TableColumnMoveRightIcon", {
8
+ enumerable: true,
9
+ get: function get() {
10
+ return _tableColumnMoveRight.default;
11
+ }
12
+ });
13
+ var _tableColumnMoveRight = _interopRequireDefault(require("@atlaskit/icon/core/table-column-move-right"));
@@ -0,0 +1,13 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ Object.defineProperty(exports, "TableColumnsDistributeIcon", {
8
+ enumerable: true,
9
+ get: function get() {
10
+ return _tableColumnsDistribute.default;
11
+ }
12
+ });
13
+ var _tableColumnsDistribute = _interopRequireDefault(require("@atlaskit/icon/core/table-columns-distribute"));
@@ -70,7 +70,13 @@ export { EmojiIcon } from './ui/icons/EmojiIcon';
70
70
  export { LayoutIcon } from './ui/icons/LayoutIcon';
71
71
  export { ImageIcon } from './ui/icons/ImageIcon';
72
72
  export { MentionIcon } from './ui/icons/MentionIcon';
73
+ export { ArrowDownIcon } from './ui/icons/ArrowDownIcon';
74
+ export { ArrowUpIcon } from './ui/icons/ArrowUpIcon';
73
75
  export { TableIcon } from './ui/icons/TableIcon';
76
+ export { TableColumnAddLeftIcon } from './ui/icons/TableColumnAddLeftIcon';
77
+ export { TableColumnAddRightIcon } from './ui/icons/TableColumnAddRightIcon';
78
+ export { TableColumnMoveRightIcon } from './ui/icons/TableColumnMoveRightIcon';
79
+ export { TableColumnsDistributeIcon } from './ui/icons/TableColumnsDistributeIcon';
74
80
  export { TableRowAddAboveIcon } from './ui/icons/TableRowAddAboveIcon';
75
81
  export { TableRowAddBelowIcon } from './ui/icons/TableRowAddBelowIcon';
76
82
  export { TableRowMoveDownIcon } from './ui/icons/TableRowMoveDownIcon';
@@ -2,6 +2,7 @@
2
2
  ._11c8fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
3
3
  ._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
4
4
  ._1rjc1b66{padding-block:var(--ds-space-050,4px)}
5
+ ._18u012x7{margin-left:var(--ds-space-075,6px)}
5
6
  ._1bsb1osq{width:100%}
6
7
  ._1e0c1txw{display:flex}
7
8
  ._1hmsglyw{text-decoration-line:none}
@@ -5,7 +5,7 @@ import { ax, ix } from "@compiled/react/runtime";
5
5
  import React, { forwardRef, isValidElement, cloneElement } from 'react';
6
6
  import { cx } from '@atlaskit/css';
7
7
  import { DropdownItem } from '@atlaskit/dropdown-menu';
8
- import { Anchor, Pressable } from '@atlaskit/primitives/compiled';
8
+ import { Anchor, Box, Pressable } from '@atlaskit/primitives/compiled';
9
9
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
10
10
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
11
11
  import { useToolbarDropdownMenu } from './ToolbarDropdownMenuContext';
@@ -14,7 +14,8 @@ const styles = {
14
14
  anchor: "_4bfu1r31 _1hmsglyw _ajmmnqa1 _1053azsu _9oik1r31 _1bnxglyw _jf4cnqa1 _30l3azsu",
15
15
  enabled: "_irr31dpa _1di6fcek",
16
16
  disabled: "_syaz1gmx _80om13gf",
17
- selected: "_bfhk15s3 _syaz6x5g _irr3ufnl _1di6nozp"
17
+ selected: "_bfhk15s3 _syaz6x5g _irr3ufnl _1di6nozp",
18
+ elemAfterText: "_18u012x7"
18
19
  };
19
20
  const CustomDropdownMenuItemButton = /*#__PURE__*/forwardRef(({
20
21
  children,
@@ -82,6 +83,7 @@ export const ToolbarDropdownItem = ({
82
83
  onClick,
83
84
  elemBefore,
84
85
  elemAfter,
86
+ elemAfterText,
85
87
  isSelected,
86
88
  children,
87
89
  isDisabled,
@@ -138,5 +140,8 @@ export const ToolbarDropdownItem = ({
138
140
  title: title,
139
141
  shouldTitleWrap: shouldTitleWrap
140
142
  // eslint-disable-next-line react/jsx-props-no-spreading
141
- }, expValEquals('platform_editor_renderer_toolbar_updates', 'isEnabled', true) ? dataAttributes : {}), children);
143
+ }, expValEquals('platform_editor_renderer_toolbar_updates', 'isEnabled', true) ? dataAttributes : {}), children, elemAfterText ? /*#__PURE__*/React.createElement(Box, {
144
+ as: "span",
145
+ xcss: styles.elemAfterText
146
+ }, elemAfterText) : null);
142
147
  };
@@ -14,6 +14,7 @@ const styles = {
14
14
  export const ToolbarNestedDropdownMenu = ({
15
15
  elemBefore,
16
16
  text,
17
+ elemAfterText,
17
18
  elemAfter,
18
19
  children,
19
20
  isDisabled,
@@ -47,7 +48,7 @@ export const ToolbarNestedDropdownMenu = ({
47
48
  hasNestedDropdownMenu: true,
48
49
  isDisabled: isDisabled,
49
50
  shouldTitleWrap: shouldTitleWrap
50
- }, text);
51
+ }, text, elemAfterText);
51
52
  if (tooltipContent) {
52
53
  return /*#__PURE__*/React.createElement(ToolbarTooltip, {
53
54
  content: tooltipContent,
@@ -0,0 +1,2 @@
1
+ /* eslint-disable @atlaskit/editor/no-re-export */
2
+ export { default as ArrowDownIcon } from '@atlaskit/icon/core/arrow-down';
@@ -0,0 +1,2 @@
1
+ /* eslint-disable @atlaskit/editor/no-re-export */
2
+ export { default as ArrowUpIcon } from '@atlaskit/icon/core/arrow-up';
@@ -0,0 +1,2 @@
1
+ /* eslint-disable @atlaskit/editor/no-re-export */
2
+ export { default as TableColumnAddLeftIcon } from '@atlaskit/icon/core/table-column-add-left';
@@ -0,0 +1,2 @@
1
+ /* eslint-disable @atlaskit/editor/no-re-export */
2
+ export { default as TableColumnAddRightIcon } from '@atlaskit/icon/core/table-column-add-right';
@@ -0,0 +1,2 @@
1
+ /* eslint-disable @atlaskit/editor/no-re-export */
2
+ export { default as TableColumnMoveRightIcon } from '@atlaskit/icon/core/table-column-move-right';
@@ -0,0 +1,2 @@
1
+ /* eslint-disable @atlaskit/editor/no-re-export */
2
+ export { default as TableColumnsDistributeIcon } from '@atlaskit/icon/core/table-columns-distribute';
package/dist/esm/index.js CHANGED
@@ -70,7 +70,13 @@ export { EmojiIcon } from './ui/icons/EmojiIcon';
70
70
  export { LayoutIcon } from './ui/icons/LayoutIcon';
71
71
  export { ImageIcon } from './ui/icons/ImageIcon';
72
72
  export { MentionIcon } from './ui/icons/MentionIcon';
73
+ export { ArrowDownIcon } from './ui/icons/ArrowDownIcon';
74
+ export { ArrowUpIcon } from './ui/icons/ArrowUpIcon';
73
75
  export { TableIcon } from './ui/icons/TableIcon';
76
+ export { TableColumnAddLeftIcon } from './ui/icons/TableColumnAddLeftIcon';
77
+ export { TableColumnAddRightIcon } from './ui/icons/TableColumnAddRightIcon';
78
+ export { TableColumnMoveRightIcon } from './ui/icons/TableColumnMoveRightIcon';
79
+ export { TableColumnsDistributeIcon } from './ui/icons/TableColumnsDistributeIcon';
74
80
  export { TableRowAddAboveIcon } from './ui/icons/TableRowAddAboveIcon';
75
81
  export { TableRowAddBelowIcon } from './ui/icons/TableRowAddBelowIcon';
76
82
  export { TableRowMoveDownIcon } from './ui/icons/TableRowMoveDownIcon';
@@ -2,6 +2,7 @@
2
2
  ._11c8fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
3
3
  ._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
4
4
  ._1rjc1b66{padding-block:var(--ds-space-050,4px)}
5
+ ._18u012x7{margin-left:var(--ds-space-075,6px)}
5
6
  ._1bsb1osq{width:100%}
6
7
  ._1e0c1txw{display:flex}
7
8
  ._1hmsglyw{text-decoration-line:none}
@@ -3,7 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
3
3
  import _extends from "@babel/runtime/helpers/extends";
4
4
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
5
5
  var _excluded = ["children", "data-testid", "aria-haspopup", "aria-disabled", "aria-pressed", "aria-keyshortcuts", "onClick", "tabIndex", "href", "target", "rel", "title"],
6
- _excluded2 = ["onClick", "elemBefore", "elemAfter", "isSelected", "children", "isDisabled", "hasNestedDropdownMenu", "triggerRef", "title", "shouldTitleWrap", "testId", "ariaKeyshortcuts", "href", "target", "rel"];
6
+ _excluded2 = ["onClick", "elemBefore", "elemAfter", "elemAfterText", "isSelected", "children", "isDisabled", "hasNestedDropdownMenu", "triggerRef", "title", "shouldTitleWrap", "testId", "ariaKeyshortcuts", "href", "target", "rel"];
7
7
  import "./ToolbarDropdownItem.compiled.css";
8
8
  import { ax, ix } from "@compiled/react/runtime";
9
9
  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; }
@@ -11,7 +11,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
11
11
  import React, { forwardRef, isValidElement, cloneElement } from 'react';
12
12
  import { cx } from '@atlaskit/css';
13
13
  import { DropdownItem } from '@atlaskit/dropdown-menu';
14
- import { Anchor, Pressable } from '@atlaskit/primitives/compiled';
14
+ import { Anchor, Box, Pressable } from '@atlaskit/primitives/compiled';
15
15
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
16
16
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
17
17
  import { useToolbarDropdownMenu } from './ToolbarDropdownMenuContext';
@@ -20,7 +20,8 @@ var styles = {
20
20
  anchor: "_4bfu1r31 _1hmsglyw _ajmmnqa1 _1053azsu _9oik1r31 _1bnxglyw _jf4cnqa1 _30l3azsu",
21
21
  enabled: "_irr31dpa _1di6fcek",
22
22
  disabled: "_syaz1gmx _80om13gf",
23
- selected: "_bfhk15s3 _syaz6x5g _irr3ufnl _1di6nozp"
23
+ selected: "_bfhk15s3 _syaz6x5g _irr3ufnl _1di6nozp",
24
+ elemAfterText: "_18u012x7"
24
25
  };
25
26
  var CustomDropdownMenuItemButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
26
27
  var children = _ref.children,
@@ -90,6 +91,7 @@ export var ToolbarDropdownItem = function ToolbarDropdownItem(_ref3) {
90
91
  var _onClick = _ref3.onClick,
91
92
  elemBefore = _ref3.elemBefore,
92
93
  elemAfter = _ref3.elemAfter,
94
+ elemAfterText = _ref3.elemAfterText,
93
95
  isSelected = _ref3.isSelected,
94
96
  children = _ref3.children,
95
97
  isDisabled = _ref3.isDisabled,
@@ -145,5 +147,8 @@ export var ToolbarDropdownItem = function ToolbarDropdownItem(_ref3) {
145
147
  title: title,
146
148
  shouldTitleWrap: shouldTitleWrap
147
149
  // eslint-disable-next-line react/jsx-props-no-spreading
148
- }, expValEquals('platform_editor_renderer_toolbar_updates', 'isEnabled', true) ? dataAttributes : {}), children);
150
+ }, expValEquals('platform_editor_renderer_toolbar_updates', 'isEnabled', true) ? dataAttributes : {}), children, elemAfterText ? /*#__PURE__*/React.createElement(Box, {
151
+ as: "span",
152
+ xcss: styles.elemAfterText
153
+ }, elemAfterText) : null);
149
154
  };
@@ -14,6 +14,7 @@ var styles = {
14
14
  export var ToolbarNestedDropdownMenu = function ToolbarNestedDropdownMenu(_ref) {
15
15
  var elemBefore = _ref.elemBefore,
16
16
  text = _ref.text,
17
+ elemAfterText = _ref.elemAfterText,
17
18
  elemAfter = _ref.elemAfter,
18
19
  children = _ref.children,
19
20
  isDisabled = _ref.isDisabled,
@@ -48,7 +49,7 @@ export var ToolbarNestedDropdownMenu = function ToolbarNestedDropdownMenu(_ref)
48
49
  hasNestedDropdownMenu: true,
49
50
  isDisabled: isDisabled,
50
51
  shouldTitleWrap: shouldTitleWrap
51
- }, text);
52
+ }, text, elemAfterText);
52
53
  if (tooltipContent) {
53
54
  return /*#__PURE__*/React.createElement(ToolbarTooltip, {
54
55
  content: tooltipContent,
@@ -0,0 +1,2 @@
1
+ /* eslint-disable @atlaskit/editor/no-re-export */
2
+ export { default as ArrowDownIcon } from '@atlaskit/icon/core/arrow-down';
@@ -0,0 +1,2 @@
1
+ /* eslint-disable @atlaskit/editor/no-re-export */
2
+ export { default as ArrowUpIcon } from '@atlaskit/icon/core/arrow-up';
@@ -0,0 +1,2 @@
1
+ /* eslint-disable @atlaskit/editor/no-re-export */
2
+ export { default as TableColumnAddLeftIcon } from '@atlaskit/icon/core/table-column-add-left';
@@ -0,0 +1,2 @@
1
+ /* eslint-disable @atlaskit/editor/no-re-export */
2
+ export { default as TableColumnAddRightIcon } from '@atlaskit/icon/core/table-column-add-right';
@@ -0,0 +1,2 @@
1
+ /* eslint-disable @atlaskit/editor/no-re-export */
2
+ export { default as TableColumnMoveRightIcon } from '@atlaskit/icon/core/table-column-move-right';
@@ -0,0 +1,2 @@
1
+ /* eslint-disable @atlaskit/editor/no-re-export */
2
+ export { default as TableColumnsDistributeIcon } from '@atlaskit/icon/core/table-columns-distribute';
@@ -69,7 +69,13 @@ export { EmojiIcon } from './ui/icons/EmojiIcon';
69
69
  export { LayoutIcon } from './ui/icons/LayoutIcon';
70
70
  export { ImageIcon } from './ui/icons/ImageIcon';
71
71
  export { MentionIcon } from './ui/icons/MentionIcon';
72
+ export { ArrowDownIcon } from './ui/icons/ArrowDownIcon';
73
+ export { ArrowUpIcon } from './ui/icons/ArrowUpIcon';
72
74
  export { TableIcon } from './ui/icons/TableIcon';
75
+ export { TableColumnAddLeftIcon } from './ui/icons/TableColumnAddLeftIcon';
76
+ export { TableColumnAddRightIcon } from './ui/icons/TableColumnAddRightIcon';
77
+ export { TableColumnMoveRightIcon } from './ui/icons/TableColumnMoveRightIcon';
78
+ export { TableColumnsDistributeIcon } from './ui/icons/TableColumnsDistributeIcon';
73
79
  export { TableRowAddAboveIcon } from './ui/icons/TableRowAddAboveIcon';
74
80
  export { TableRowAddBelowIcon } from './ui/icons/TableRowAddBelowIcon';
75
81
  export { TableRowMoveDownIcon } from './ui/icons/TableRowMoveDownIcon';
@@ -14,6 +14,7 @@ type ToolbarDropdownItemProps = {
14
14
  ariaKeyshortcuts?: string;
15
15
  children?: React.ReactNode;
16
16
  elemAfter?: ReactNode;
17
+ elemAfterText?: ReactNode;
17
18
  elemBefore?: ReactNode;
18
19
  hasNestedDropdownMenu?: boolean;
19
20
  href?: string;
@@ -28,5 +29,5 @@ type ToolbarDropdownItemProps = {
28
29
  title?: string;
29
30
  triggerRef?: Ref<HTMLButtonElement>;
30
31
  } & DataAttributes;
31
- export declare const ToolbarDropdownItem: ({ onClick, elemBefore, elemAfter, isSelected, children, isDisabled, hasNestedDropdownMenu, triggerRef, title, shouldTitleWrap, testId, ariaKeyshortcuts, href, target, rel, ...dataAttributes }: ToolbarDropdownItemProps) => React.JSX.Element;
32
+ export declare const ToolbarDropdownItem: ({ onClick, elemBefore, elemAfter, elemAfterText, isSelected, children, isDisabled, hasNestedDropdownMenu, triggerRef, title, shouldTitleWrap, testId, ariaKeyshortcuts, href, target, rel, ...dataAttributes }: ToolbarDropdownItemProps) => React.JSX.Element;
32
33
  export {};
@@ -12,5 +12,5 @@ type ToolbarMenuContainerProps = {
12
12
  *
13
13
  * This intentionally does not provide a trigger or popup positioning; callers own those concerns.
14
14
  */
15
- export declare const ToolbarMenuContainer: ({ children }: ToolbarMenuContainerProps) => React.JSX.Element;
15
+ export declare const ToolbarMenuContainer: ({ children, }: ToolbarMenuContainerProps) => React.JSX.Element;
16
16
  export {};
@@ -7,6 +7,7 @@ type ToolbarNestedDropdownMenuProps = {
7
7
  children?: ReactNode;
8
8
  dropdownTestId?: string;
9
9
  elemAfter: ReactNode;
10
+ elemAfterText?: ReactNode;
10
11
  elemBefore: ReactNode;
11
12
  /**
12
13
  * Enforeces a max height of 320px for menus - when menu is larger a scroll is introduced
@@ -20,5 +21,5 @@ type ToolbarNestedDropdownMenuProps = {
20
21
  text?: string;
21
22
  tooltipContent?: ReactNode;
22
23
  };
23
- export declare const ToolbarNestedDropdownMenu: ({ elemBefore, text, elemAfter, children, isDisabled, testId, dropdownTestId, enableMaxHeight, onClick, shouldFitContainer, shouldTitleWrap, tooltipContent, }: ToolbarNestedDropdownMenuProps) => JSX.Element;
24
+ export declare const ToolbarNestedDropdownMenu: ({ elemBefore, text, elemAfterText, elemAfter, children, isDisabled, testId, dropdownTestId, enableMaxHeight, onClick, shouldFitContainer, shouldTitleWrap, tooltipContent, }: ToolbarNestedDropdownMenuProps) => JSX.Element;
24
25
  export {};
@@ -0,0 +1 @@
1
+ export { default as ArrowDownIcon } from '@atlaskit/icon/core/arrow-down';
@@ -0,0 +1 @@
1
+ export { default as ArrowUpIcon } from '@atlaskit/icon/core/arrow-up';
@@ -0,0 +1 @@
1
+ export { default as TableColumnAddLeftIcon } from '@atlaskit/icon/core/table-column-add-left';
@@ -0,0 +1 @@
1
+ export { default as TableColumnAddRightIcon } from '@atlaskit/icon/core/table-column-add-right';
@@ -0,0 +1 @@
1
+ export { default as TableColumnMoveRightIcon } from '@atlaskit/icon/core/table-column-move-right';
@@ -0,0 +1 @@
1
+ export { default as TableColumnsDistributeIcon } from '@atlaskit/icon/core/table-columns-distribute';
@@ -69,7 +69,13 @@ export { EmojiIcon } from './ui/icons/EmojiIcon';
69
69
  export { LayoutIcon } from './ui/icons/LayoutIcon';
70
70
  export { ImageIcon } from './ui/icons/ImageIcon';
71
71
  export { MentionIcon } from './ui/icons/MentionIcon';
72
+ export { ArrowDownIcon } from './ui/icons/ArrowDownIcon';
73
+ export { ArrowUpIcon } from './ui/icons/ArrowUpIcon';
72
74
  export { TableIcon } from './ui/icons/TableIcon';
75
+ export { TableColumnAddLeftIcon } from './ui/icons/TableColumnAddLeftIcon';
76
+ export { TableColumnAddRightIcon } from './ui/icons/TableColumnAddRightIcon';
77
+ export { TableColumnMoveRightIcon } from './ui/icons/TableColumnMoveRightIcon';
78
+ export { TableColumnsDistributeIcon } from './ui/icons/TableColumnsDistributeIcon';
73
79
  export { TableRowAddAboveIcon } from './ui/icons/TableRowAddAboveIcon';
74
80
  export { TableRowAddBelowIcon } from './ui/icons/TableRowAddBelowIcon';
75
81
  export { TableRowMoveDownIcon } from './ui/icons/TableRowMoveDownIcon';
@@ -14,6 +14,7 @@ type ToolbarDropdownItemProps = {
14
14
  ariaKeyshortcuts?: string;
15
15
  children?: React.ReactNode;
16
16
  elemAfter?: ReactNode;
17
+ elemAfterText?: ReactNode;
17
18
  elemBefore?: ReactNode;
18
19
  hasNestedDropdownMenu?: boolean;
19
20
  href?: string;
@@ -28,5 +29,5 @@ type ToolbarDropdownItemProps = {
28
29
  title?: string;
29
30
  triggerRef?: Ref<HTMLButtonElement>;
30
31
  } & DataAttributes;
31
- export declare const ToolbarDropdownItem: ({ onClick, elemBefore, elemAfter, isSelected, children, isDisabled, hasNestedDropdownMenu, triggerRef, title, shouldTitleWrap, testId, ariaKeyshortcuts, href, target, rel, ...dataAttributes }: ToolbarDropdownItemProps) => React.JSX.Element;
32
+ export declare const ToolbarDropdownItem: ({ onClick, elemBefore, elemAfter, elemAfterText, isSelected, children, isDisabled, hasNestedDropdownMenu, triggerRef, title, shouldTitleWrap, testId, ariaKeyshortcuts, href, target, rel, ...dataAttributes }: ToolbarDropdownItemProps) => React.JSX.Element;
32
33
  export {};
@@ -12,5 +12,5 @@ type ToolbarMenuContainerProps = {
12
12
  *
13
13
  * This intentionally does not provide a trigger or popup positioning; callers own those concerns.
14
14
  */
15
- export declare const ToolbarMenuContainer: ({ children }: ToolbarMenuContainerProps) => React.JSX.Element;
15
+ export declare const ToolbarMenuContainer: ({ children, }: ToolbarMenuContainerProps) => React.JSX.Element;
16
16
  export {};
@@ -7,6 +7,7 @@ type ToolbarNestedDropdownMenuProps = {
7
7
  children?: ReactNode;
8
8
  dropdownTestId?: string;
9
9
  elemAfter: ReactNode;
10
+ elemAfterText?: ReactNode;
10
11
  elemBefore: ReactNode;
11
12
  /**
12
13
  * Enforeces a max height of 320px for menus - when menu is larger a scroll is introduced
@@ -20,5 +21,5 @@ type ToolbarNestedDropdownMenuProps = {
20
21
  text?: string;
21
22
  tooltipContent?: ReactNode;
22
23
  };
23
- export declare const ToolbarNestedDropdownMenu: ({ elemBefore, text, elemAfter, children, isDisabled, testId, dropdownTestId, enableMaxHeight, onClick, shouldFitContainer, shouldTitleWrap, tooltipContent, }: ToolbarNestedDropdownMenuProps) => JSX.Element;
24
+ export declare const ToolbarNestedDropdownMenu: ({ elemBefore, text, elemAfterText, elemAfter, children, isDisabled, testId, dropdownTestId, enableMaxHeight, onClick, shouldFitContainer, shouldTitleWrap, tooltipContent, }: ToolbarNestedDropdownMenuProps) => JSX.Element;
24
25
  export {};
@@ -0,0 +1 @@
1
+ export { default as ArrowDownIcon } from '@atlaskit/icon/core/arrow-down';
@@ -0,0 +1 @@
1
+ export { default as ArrowUpIcon } from '@atlaskit/icon/core/arrow-up';
@@ -0,0 +1 @@
1
+ export { default as TableColumnAddLeftIcon } from '@atlaskit/icon/core/table-column-add-left';
@@ -0,0 +1 @@
1
+ export { default as TableColumnAddRightIcon } from '@atlaskit/icon/core/table-column-add-right';
@@ -0,0 +1 @@
1
+ export { default as TableColumnMoveRightIcon } from '@atlaskit/icon/core/table-column-move-right';
@@ -0,0 +1 @@
1
+ export { default as TableColumnsDistributeIcon } from '@atlaskit/icon/core/table-columns-distribute';
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "publishConfig": {
4
4
  "registry": "https://registry.npmjs.org/"
5
5
  },
6
- "version": "1.4.0",
6
+ "version": "1.5.0",
7
7
  "description": "Common UI for Toolbars across the platform",
8
8
  "atlassian": {
9
9
  "react-compiler": {
@@ -37,7 +37,7 @@
37
37
  "@atlaskit/platform-feature-flags": "^1.1.0",
38
38
  "@atlaskit/popup": "^4.19.0",
39
39
  "@atlaskit/primitives": "^19.0.0",
40
- "@atlaskit/tmp-editor-statsig": "^80.2.0",
40
+ "@atlaskit/tmp-editor-statsig": "^81.0.0",
41
41
  "@atlaskit/tokens": "^13.0.0",
42
42
  "@atlaskit/tooltip": "^22.2.0",
43
43
  "@babel/runtime": "^7.0.0",