@atlaskit/editor-toolbar 0.3.0 → 0.3.2

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 (107) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/dist/cjs/index.js +42 -7
  3. package/dist/cjs/ui/ToolbarButton.compiled.css +1 -13
  4. package/dist/cjs/ui/ToolbarButton.js +2 -6
  5. package/dist/cjs/ui/ToolbarButtonGroup.compiled.css +7 -1
  6. package/dist/cjs/ui/ToolbarButtonGroup.js +17 -5
  7. package/dist/cjs/ui/ToolbarDropdownItem.compiled.css +4 -2
  8. package/dist/cjs/ui/ToolbarDropdownItem.js +1 -1
  9. package/dist/cjs/ui/ToolbarDropdownItemSection.js +7 -10
  10. package/dist/cjs/ui/ToolbarDropdownMenu.compiled.css +1 -0
  11. package/dist/cjs/ui/ToolbarDropdownMenu.js +12 -6
  12. package/dist/cjs/ui/icons/EmojiIcon.js +13 -0
  13. package/dist/cjs/ui/icons/ImageIcon.js +13 -0
  14. package/dist/cjs/ui/icons/LayoutIcon.js +13 -0
  15. package/dist/cjs/ui/icons/MentionIcon.js +13 -0
  16. package/dist/cjs/ui/icons/TableIcon.js +13 -0
  17. package/dist/cjs/ui/icons/TaskIcon.js +13 -0
  18. package/dist/es2019/index.js +6 -1
  19. package/dist/es2019/ui/ToolbarButton.compiled.css +1 -13
  20. package/dist/es2019/ui/ToolbarButton.js +2 -6
  21. package/dist/es2019/ui/ToolbarButtonGroup.compiled.css +7 -1
  22. package/dist/es2019/ui/ToolbarButtonGroup.js +14 -3
  23. package/dist/es2019/ui/ToolbarDropdownItem.compiled.css +4 -2
  24. package/dist/es2019/ui/ToolbarDropdownItem.js +1 -1
  25. package/dist/es2019/ui/ToolbarDropdownItemSection.js +7 -10
  26. package/dist/es2019/ui/ToolbarDropdownMenu.compiled.css +1 -0
  27. package/dist/es2019/ui/ToolbarDropdownMenu.js +11 -6
  28. package/dist/es2019/ui/icons/EmojiIcon.js +2 -0
  29. package/dist/es2019/ui/icons/ImageIcon.js +2 -0
  30. package/dist/es2019/ui/icons/LayoutIcon.js +2 -0
  31. package/dist/es2019/ui/icons/MentionIcon.js +2 -0
  32. package/dist/es2019/ui/icons/TableIcon.js +2 -0
  33. package/dist/es2019/ui/icons/TaskIcon.js +2 -0
  34. package/dist/esm/index.js +6 -1
  35. package/dist/esm/ui/ToolbarButton.compiled.css +1 -13
  36. package/dist/esm/ui/ToolbarButton.js +2 -6
  37. package/dist/esm/ui/ToolbarButtonGroup.compiled.css +7 -1
  38. package/dist/esm/ui/ToolbarButtonGroup.js +14 -3
  39. package/dist/esm/ui/ToolbarDropdownItem.compiled.css +4 -2
  40. package/dist/esm/ui/ToolbarDropdownItem.js +1 -1
  41. package/dist/esm/ui/ToolbarDropdownItemSection.js +7 -10
  42. package/dist/esm/ui/ToolbarDropdownMenu.compiled.css +1 -0
  43. package/dist/esm/ui/ToolbarDropdownMenu.js +12 -6
  44. package/dist/esm/ui/icons/EmojiIcon.js +2 -0
  45. package/dist/esm/ui/icons/ImageIcon.js +2 -0
  46. package/dist/esm/ui/icons/LayoutIcon.js +2 -0
  47. package/dist/esm/ui/icons/MentionIcon.js +2 -0
  48. package/dist/esm/ui/icons/TableIcon.js +2 -0
  49. package/dist/esm/ui/icons/TaskIcon.js +2 -0
  50. package/dist/types/index.d.ts +7 -2
  51. package/dist/types/types.d.ts +0 -1
  52. package/dist/types/ui/ToolbarButton.d.ts +0 -2
  53. package/dist/types/ui/ToolbarButtonGroup.d.ts +6 -2
  54. package/dist/types/ui/ToolbarDropdownItemSection.d.ts +3 -1
  55. package/dist/types/ui/ToolbarDropdownMenu.d.ts +9 -6
  56. package/dist/types/ui/ToolbarDropdownMenuContext.d.ts +1 -1
  57. package/dist/types/ui/ToolbarTooltip.d.ts +1 -1
  58. package/dist/types/ui/icons/EmojiIcon.d.ts +1 -0
  59. package/dist/types/ui/icons/ImageIcon.d.ts +1 -0
  60. package/dist/types/ui/icons/LayoutIcon.d.ts +1 -0
  61. package/dist/types/ui/icons/MentionIcon.d.ts +1 -0
  62. package/dist/types/ui/icons/TableIcon.d.ts +1 -0
  63. package/dist/types/ui/icons/TaskIcon.d.ts +1 -0
  64. package/dist/types-ts4.5/index.d.ts +7 -2
  65. package/dist/types-ts4.5/types.d.ts +0 -1
  66. package/dist/types-ts4.5/ui/ToolbarButton.d.ts +0 -2
  67. package/dist/types-ts4.5/ui/ToolbarButtonGroup.d.ts +6 -2
  68. package/dist/types-ts4.5/ui/ToolbarDropdownItemSection.d.ts +3 -1
  69. package/dist/types-ts4.5/ui/ToolbarDropdownMenu.d.ts +9 -6
  70. package/dist/types-ts4.5/ui/ToolbarDropdownMenuContext.d.ts +1 -1
  71. package/dist/types-ts4.5/ui/ToolbarTooltip.d.ts +1 -1
  72. package/dist/types-ts4.5/ui/icons/EmojiIcon.d.ts +1 -0
  73. package/dist/types-ts4.5/ui/icons/ImageIcon.d.ts +1 -0
  74. package/dist/types-ts4.5/ui/icons/LayoutIcon.d.ts +1 -0
  75. package/dist/types-ts4.5/ui/icons/MentionIcon.d.ts +1 -0
  76. package/dist/types-ts4.5/ui/icons/TableIcon.d.ts +1 -0
  77. package/dist/types-ts4.5/ui/icons/TaskIcon.d.ts +1 -0
  78. package/examples/toolbar/examples/ExampleManuallyComposedToolbar.tsx +2 -12
  79. package/package.json +3 -3
  80. package/src/index.ts +7 -2
  81. package/src/types.ts +0 -1
  82. package/src/ui/ColorPalette/Color.tsx +64 -56
  83. package/src/ui/ToolbarButton.tsx +0 -28
  84. package/src/ui/ToolbarButtonGroup.tsx +42 -3
  85. package/src/ui/ToolbarDropdownItem.tsx +4 -2
  86. package/src/ui/ToolbarDropdownItemSection.tsx +13 -11
  87. package/src/ui/ToolbarDropdownMenu.tsx +28 -15
  88. package/src/ui/ToolbarDropdownMenuContext.tsx +4 -4
  89. package/src/ui/ToolbarTooltip.tsx +1 -1
  90. package/src/ui/icons/EmojiIcon.tsx +2 -0
  91. package/src/ui/icons/ImageIcon.tsx +2 -0
  92. package/src/ui/icons/LayoutIcon.tsx +2 -0
  93. package/src/ui/icons/MentionIcon.tsx +2 -0
  94. package/src/ui/icons/TableIcon.tsx +2 -0
  95. package/src/ui/icons/TaskIcon.tsx +2 -0
  96. package/dist/cjs/ui/ToolbarDropdownDivider.compiled.css +0 -3
  97. package/dist/cjs/ui/ToolbarDropdownDivider.js +0 -20
  98. package/dist/cjs/ui/ToolbarDropdownItemSection.compiled.css +0 -2
  99. package/dist/es2019/ui/ToolbarDropdownDivider.compiled.css +0 -3
  100. package/dist/es2019/ui/ToolbarDropdownDivider.js +0 -12
  101. package/dist/es2019/ui/ToolbarDropdownItemSection.compiled.css +0 -2
  102. package/dist/esm/ui/ToolbarDropdownDivider.compiled.css +0 -3
  103. package/dist/esm/ui/ToolbarDropdownDivider.js +0 -12
  104. package/dist/esm/ui/ToolbarDropdownItemSection.compiled.css +0 -2
  105. package/dist/types/ui/ToolbarDropdownDivider.d.ts +0 -1
  106. package/dist/types-ts4.5/ui/ToolbarDropdownDivider.d.ts +0 -1
  107. package/src/ui/ToolbarDropdownDivider.tsx +0 -20
@@ -1,11 +1,16 @@
1
+ /* ToolbarDropdownMenu.tsx generated by @compiled/babel-plugin v0.36.1 */
2
+ import "./ToolbarDropdownMenu.compiled.css";
3
+ import { ax, ix } from "@compiled/react/runtime";
1
4
  import React, { useCallback } from 'react';
2
5
  import DropdownMenu from '@atlaskit/dropdown-menu';
3
6
  import { useToolbarUI } from '../hooks/ui-context';
4
7
  import { ToolbarButton } from './ToolbarButton';
5
8
  import { ToolbarDropdownMenuProvider, useToolbarDropdownMenu } from './ToolbarDropdownMenuContext';
9
+ const styles = {
10
+ sectionMargin: "_1mou1b66"
11
+ };
6
12
  const ToolbarDropdownMenuContent = ({
7
13
  iconBefore,
8
- groupLocation,
9
14
  children,
10
15
  isDisabled,
11
16
  testId,
@@ -47,7 +52,6 @@ const ToolbarDropdownMenuContent = ({
47
52
  onFocus: triggerProps.onFocus,
48
53
  testId: testId,
49
54
  iconBefore: iconBefore,
50
- groupLocation: groupLocation,
51
55
  isDisabled: isDisabled,
52
56
  label: label
53
57
  }),
@@ -57,17 +61,18 @@ const ToolbarDropdownMenuContent = ({
57
61
  };
58
62
  export const ToolbarDropdownMenu = ({
59
63
  iconBefore,
60
- groupLocation,
61
64
  children,
62
65
  isDisabled,
63
66
  testId,
64
- label
67
+ label,
68
+ hasSectionMargin = true
65
69
  }) => {
66
70
  return /*#__PURE__*/React.createElement(ToolbarDropdownMenuProvider, null, /*#__PURE__*/React.createElement(ToolbarDropdownMenuContent, {
67
71
  iconBefore: iconBefore,
68
- groupLocation: groupLocation,
69
72
  isDisabled: isDisabled,
70
73
  testId: testId,
71
74
  label: label
72
- }, children));
75
+ }, /*#__PURE__*/React.createElement("div", {
76
+ className: ax([hasSectionMargin && styles.sectionMargin])
77
+ }, children)));
73
78
  };
@@ -0,0 +1,2 @@
1
+ /* eslint-disable @atlaskit/editor/no-re-export */
2
+ export { default as EmojiIcon } from '@atlaskit/icon/core/emoji';
@@ -0,0 +1,2 @@
1
+ /* eslint-disable @atlaskit/editor/no-re-export */
2
+ export { default as ImageIcon } from '@atlaskit/icon/core/image';
@@ -0,0 +1,2 @@
1
+ /* eslint-disable @atlaskit/editor/no-re-export */
2
+ export { default as LayoutIcon } from '@atlaskit/icon/core/layout-two-columns';
@@ -0,0 +1,2 @@
1
+ /* eslint-disable @atlaskit/editor/no-re-export */
2
+ export { default as MentionIcon } from '@atlaskit/icon/core/mention';
@@ -0,0 +1,2 @@
1
+ /* eslint-disable @atlaskit/editor/no-re-export */
2
+ export { default as TableIcon } from '@atlaskit/icon/core/grid';
@@ -0,0 +1,2 @@
1
+ /* eslint-disable @atlaskit/editor/no-re-export */
2
+ export { default as TaskIcon } from '@atlaskit/icon/core/task';
package/dist/esm/index.js CHANGED
@@ -9,7 +9,6 @@ export { ToolbarNestedDropdownMenu } from './ui/ToolbarNestedDropdownMenu';
9
9
  export { ToolbarKeyboardShortcutHint } from './ui/ToolbarKeyboardShortcutHint';
10
10
  export { ToolbarSection } from './ui/ToolbarSection';
11
11
  export { ToolbarTooltip } from './ui/ToolbarTooltip';
12
- export { ToolbarDropdownDivider } from './ui/ToolbarDropdownDivider';
13
12
  export { ToolbarColorSwatch } from './ui/ToolbarColorSwatch';
14
13
  export { useToolbarDropdownMenu } from './ui/ToolbarDropdownMenuContext';
15
14
  export { AIAdjustLengthIcon } from './ui/icons/AIAdjustLengthIcon';
@@ -57,5 +56,11 @@ export { AlignTextCenterIcon } from './ui/icons/AlignTextCenterIcon';
57
56
  export { AlignTextRightIcon } from './ui/icons/AlignTextRightIcon';
58
57
  export { IndentIcon } from './ui/icons/IndentIcon';
59
58
  export { OutdentIcon } from './ui/icons/OutdentIcon';
59
+ export { EmojiIcon } from './ui/icons/EmojiIcon';
60
+ export { LayoutIcon } from './ui/icons/LayoutIcon';
61
+ export { ImageIcon } from './ui/icons/ImageIcon';
62
+ export { MentionIcon } from './ui/icons/MentionIcon';
63
+ export { TableIcon } from './ui/icons/TableIcon';
64
+ export { TaskIcon } from './ui/icons/TaskIcon';
60
65
  export { default as ColorPalette } from './ui/ColorPalette';
61
66
  export { useToolbarUI, ToolbarUIProvider } from './hooks/ui-context';
@@ -1,31 +1,19 @@
1
1
 
2
2
  ._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}
3
- ._zulp12x7{gap:var(--ds-space-075,6px)}._13liidpf{border-top-left-radius:0}
4
- ._19bv12x7{padding-left:var(--ds-space-075,6px)}
5
- ._19bv1b66{padding-left:var(--ds-space-050,4px)}
6
- ._19bvu2gc{padding-left:var(--ds-space-100,8px)}
7
- ._19bvv77o{padding-left:var(--ds-space-025,2px)}
3
+ ._zulp12x7{gap:var(--ds-space-075,6px)}._19bvu2gc{padding-left:var(--ds-space-100,8px)}
8
4
  ._1bah1h6o{justify-content:center}
9
- ._1bah1y6m{justify-content:flex-start}
10
- ._1bahesu3{justify-content:flex-end}
11
5
  ._1e0c1txw{display:flex}
12
- ._1o0zidpf{border-bottom-right-radius:0}
13
6
  ._1tke1f4h{min-height:28px}
14
7
  ._4cvr1h6o{align-items:center}
15
8
  ._80om13gf{cursor:not-allowed}
16
9
  ._bfhkfg4m{background-color:var(--ds-background-selected,#e9f2ff)}
17
10
  ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
18
11
  ._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
19
- ._mrkbidpf{border-bottom-left-radius:0}
20
12
  ._o5721q9c{white-space:nowrap}
21
- ._qrwqidpf{border-top-right-radius:0}
22
13
  ._syaz1gjq{color:var(--ds-text-subtle,#44546f)}
23
14
  ._syaz1lh4{color:var(--ds-text-disabled,#091e424f)}
24
15
  ._syazaqb7{color:var(--ds-text-selected,#0c66e4)}
25
- ._u5f312x7{padding-right:var(--ds-space-075,6px)}
26
- ._u5f31b66{padding-right:var(--ds-space-050,4px)}
27
16
  ._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
28
- ._u5f3v77o{padding-right:var(--ds-space-025,2px)}
29
17
  ._1ah3idpf:focus-visible{outline-offset:0}
30
18
  ._g0pbkb7n:focus-visible{z-index:1}
31
19
  ._oh03h2mm:focus-visible{position:relative}
@@ -9,10 +9,7 @@ var styles = {
9
9
  button: "_zulp12x7 _2rkoiti9 _1e0c1txw _bfhksm61 _o5721q9c _4cvr1h6o _1bah1h6o _1tke1f4h _syaz1gjq _k48p1wq8 _19bvu2gc _u5f3u2gc _1ah3idpf _g0pbkb7n _oh03h2mm",
10
10
  enabled: "_irr3166n _1di61dty",
11
11
  disabled: "_syaz1lh4 _80om13gf",
12
- selected: "_bfhkfg4m _syazaqb7 _irr3i1yw _1di619ru",
13
- groupStart: "_qrwqidpf _1o0zidpf _1bahesu3 _19bv12x7 _u5f3v77o",
14
- groupMiddle: "_13liidpf _mrkbidpf _qrwqidpf _1o0zidpf _19bv1b66 _u5f31b66",
15
- groupEnd: "_13liidpf _mrkbidpf _1bah1y6m _19bvv77o _u5f312x7"
12
+ selected: "_bfhkfg4m _syazaqb7 _irr3i1yw _1di619ru"
16
13
  };
17
14
  export var ToolbarButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
18
15
  var iconBefore = _ref.iconBefore,
@@ -26,7 +23,6 @@ export var ToolbarButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
26
23
  onBlur = _ref.onBlur,
27
24
  onFocus = _ref.onFocus,
28
25
  testId = _ref.testId,
29
- groupLocation = _ref.groupLocation,
30
26
  isDisabled = _ref.isDisabled,
31
27
  ariaKeyshortcuts = _ref.ariaKeyshortcuts,
32
28
  label = _ref.label;
@@ -34,7 +30,7 @@ export var ToolbarButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
34
30
  preventDefaultOnMouseDown = _useToolbarUI.preventDefaultOnMouseDown;
35
31
  return /*#__PURE__*/React.createElement(Pressable, {
36
32
  ref: ref,
37
- xcss: cx(styles.button, isDisabled ? styles.disabled : isSelected ? styles.selected : styles.enabled, groupLocation === 'start' && styles.groupStart, groupLocation === 'middle' && styles.groupMiddle, groupLocation === 'end' && styles.groupEnd),
33
+ xcss: cx(styles.button, isDisabled ? styles.disabled : isSelected ? styles.selected : styles.enabled),
38
34
  "aria-pressed": isSelected,
39
35
  "aria-expanded": ariaExpanded,
40
36
  "aria-haspopup": ariaHasPopup,
@@ -1 +1,7 @@
1
- ._1e0c1txw{display:flex}
1
+
2
+ ._fb2512x7 button{padding-inline:var(--ds-space-075,6px)}
3
+ ._fb251b66 button{padding-inline:var(--ds-space-050,4px)}._1e0c1txw{display:flex}
4
+ ._1jiyidpf button{border-bottom-left-radius:0}
5
+ ._t1diidpf button{border-top-right-radius:0}
6
+ ._u6eridpf button{border-bottom-right-radius:0}
7
+ ._xk07idpf button{border-top-left-radius:0}
@@ -1,14 +1,25 @@
1
1
  /* ToolbarButtonGroup.tsx generated by @compiled/babel-plugin v0.36.1 */
2
2
  import "./ToolbarButtonGroup.compiled.css";
3
+ import * as React from 'react';
3
4
  import { ax, ix } from "@compiled/react/runtime";
4
- import React from 'react';
5
+ import { Children, Fragment } from 'react';
5
6
  import { Box } from '@atlaskit/primitives/compiled';
6
7
  var styles = {
7
- container: "_1e0c1txw"
8
+ container: "_1e0c1txw",
9
+ firstChild: "_fb251b66 _t1diidpf _u6eridpf",
10
+ lastChild: "_fb2512x7 _xk07idpf _1jiyidpf"
8
11
  };
9
12
  export var ToolbarButtonGroup = function ToolbarButtonGroup(_ref) {
10
13
  var children = _ref.children;
14
+ var items = Children.toArray(children);
15
+ var FirstChild = items.at(0);
16
+ var LastChild = items.at(-1);
17
+ var middleChildren = items.slice(1, -1);
11
18
  return /*#__PURE__*/React.createElement(Box, {
12
19
  xcss: styles.container
13
- }, children);
20
+ }, items.length <= 1 ? children : /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
21
+ className: ax([styles.firstChild])
22
+ }, FirstChild), middleChildren, /*#__PURE__*/React.createElement("div", {
23
+ className: ax([styles.lastChild])
24
+ }, LastChild)));
14
25
  };
@@ -1,13 +1,15 @@
1
- ._19bvutpp{padding-left:var(--ds-space-150,9pt)}
1
+ ._18zrpxbi{padding-inline:var(--ds-space-200,1pc)}
2
+ ._1rjcu2gc{padding-block:var(--ds-space-100,8px)}
2
3
  ._1bsb1osq{width:100%}
4
+ ._1e0c1txw{display:flex}
3
5
  ._1tke14no{min-height:36px}
6
+ ._1ul9163w{min-width:230px}
4
7
  ._80om13gf{cursor:not-allowed}
5
8
  ._bfhkfg4m{background-color:var(--ds-background-selected,#e9f2ff)}
6
9
  ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
7
10
  ._kqswh2mm{position:relative}
8
11
  ._syaz1lh4{color:var(--ds-text-disabled,#091e424f)}
9
12
  ._syazaqb7{color:var(--ds-text-selected,#0c66e4)}
10
- ._u5f3utpp{padding-right:var(--ds-space-150,9pt)}
11
13
  ._1basglpi:focus-visible{border-radius:var(--ds-border-radius,4px)}
12
14
  ._1ah31i6y:focus-visible{outline-offset:var(--ds-space-negative-025,-2px)}
13
15
  ._irr3166n:hover{background-color:var(--ds-background-neutral-subtle-hovered,#091e420f)}
@@ -6,7 +6,7 @@ import { cx } from '@atlaskit/css';
6
6
  import { DropdownItem } from '@atlaskit/dropdown-menu';
7
7
  import { Pressable } from '@atlaskit/primitives/compiled';
8
8
  var styles = {
9
- toolbarDropdownItem: "_kqswh2mm _bfhksm61 _1bsb1osq _1tke14no _19bvutpp _u5f3utpp _1basglpi _1ah31i6y",
9
+ toolbarDropdownItem: "_18zrpxbi _1rjcu2gc _1e0c1txw _kqswh2mm _bfhksm61 _1bsb1osq _1tke14no _1ul9163w _1basglpi _1ah31i6y",
10
10
  enabled: "_irr3166n _1di61dty",
11
11
  disabled: "_syaz1lh4 _80om13gf",
12
12
  selected: "_bfhkfg4m _syazaqb7 _irr3i1yw _1di619ru"
@@ -1,14 +1,11 @@
1
- /* ToolbarDropdownItemSection.tsx generated by @compiled/babel-plugin v0.36.1 */
2
- import "./ToolbarDropdownItemSection.compiled.css";
3
- import { ax, ix } from "@compiled/react/runtime";
4
1
  import React from 'react';
5
- import { Box } from '@atlaskit/primitives/compiled';
6
- var styles = {
7
- container: "_1e0c1txw _2lx21bp4"
8
- };
2
+ import { DropdownItemGroup } from '@atlaskit/dropdown-menu';
9
3
  export var ToolbarDropdownItemSection = function ToolbarDropdownItemSection(_ref) {
10
- var children = _ref.children;
11
- return /*#__PURE__*/React.createElement(Box, {
12
- xcss: styles.container
4
+ var children = _ref.children,
5
+ hasSeparator = _ref.hasSeparator,
6
+ title = _ref.title;
7
+ return /*#__PURE__*/React.createElement(DropdownItemGroup, {
8
+ hasSeparator: hasSeparator,
9
+ title: title
13
10
  }, children);
14
11
  };
@@ -0,0 +1 @@
1
+ ._1mou1b66{margin-block:var(--ds-space-050,4px)}
@@ -1,11 +1,16 @@
1
+ /* ToolbarDropdownMenu.tsx generated by @compiled/babel-plugin v0.36.1 */
2
+ import "./ToolbarDropdownMenu.compiled.css";
3
+ import { ax, ix } from "@compiled/react/runtime";
1
4
  import React, { useCallback } from 'react';
2
5
  import DropdownMenu from '@atlaskit/dropdown-menu';
3
6
  import { useToolbarUI } from '../hooks/ui-context';
4
7
  import { ToolbarButton } from './ToolbarButton';
5
8
  import { ToolbarDropdownMenuProvider, useToolbarDropdownMenu } from './ToolbarDropdownMenuContext';
9
+ var styles = {
10
+ sectionMargin: "_1mou1b66"
11
+ };
6
12
  var ToolbarDropdownMenuContent = function ToolbarDropdownMenuContent(_ref) {
7
13
  var iconBefore = _ref.iconBefore,
8
- groupLocation = _ref.groupLocation,
9
14
  children = _ref.children,
10
15
  isDisabled = _ref.isDisabled,
11
16
  testId = _ref.testId,
@@ -45,7 +50,6 @@ var ToolbarDropdownMenuContent = function ToolbarDropdownMenuContent(_ref) {
45
50
  onFocus: triggerProps.onFocus,
46
51
  testId: testId,
47
52
  iconBefore: iconBefore,
48
- groupLocation: groupLocation,
49
53
  isDisabled: isDisabled,
50
54
  label: label
51
55
  });
@@ -56,16 +60,18 @@ var ToolbarDropdownMenuContent = function ToolbarDropdownMenuContent(_ref) {
56
60
  };
57
61
  export var ToolbarDropdownMenu = function ToolbarDropdownMenu(_ref2) {
58
62
  var iconBefore = _ref2.iconBefore,
59
- groupLocation = _ref2.groupLocation,
60
63
  children = _ref2.children,
61
64
  isDisabled = _ref2.isDisabled,
62
65
  testId = _ref2.testId,
63
- label = _ref2.label;
66
+ label = _ref2.label,
67
+ _ref2$hasSectionMargi = _ref2.hasSectionMargin,
68
+ hasSectionMargin = _ref2$hasSectionMargi === void 0 ? true : _ref2$hasSectionMargi;
64
69
  return /*#__PURE__*/React.createElement(ToolbarDropdownMenuProvider, null, /*#__PURE__*/React.createElement(ToolbarDropdownMenuContent, {
65
70
  iconBefore: iconBefore,
66
- groupLocation: groupLocation,
67
71
  isDisabled: isDisabled,
68
72
  testId: testId,
69
73
  label: label
70
- }, children));
74
+ }, /*#__PURE__*/React.createElement("div", {
75
+ className: ax([hasSectionMargin && styles.sectionMargin])
76
+ }, children)));
71
77
  };
@@ -0,0 +1,2 @@
1
+ /* eslint-disable @atlaskit/editor/no-re-export */
2
+ export { default as EmojiIcon } from '@atlaskit/icon/core/emoji';
@@ -0,0 +1,2 @@
1
+ /* eslint-disable @atlaskit/editor/no-re-export */
2
+ export { default as ImageIcon } from '@atlaskit/icon/core/image';
@@ -0,0 +1,2 @@
1
+ /* eslint-disable @atlaskit/editor/no-re-export */
2
+ export { default as LayoutIcon } from '@atlaskit/icon/core/layout-two-columns';
@@ -0,0 +1,2 @@
1
+ /* eslint-disable @atlaskit/editor/no-re-export */
2
+ export { default as MentionIcon } from '@atlaskit/icon/core/mention';
@@ -0,0 +1,2 @@
1
+ /* eslint-disable @atlaskit/editor/no-re-export */
2
+ export { default as TableIcon } from '@atlaskit/icon/core/grid';
@@ -0,0 +1,2 @@
1
+ /* eslint-disable @atlaskit/editor/no-re-export */
2
+ export { default as TaskIcon } from '@atlaskit/icon/core/task';
@@ -8,7 +8,6 @@ export { ToolbarNestedDropdownMenu } from './ui/ToolbarNestedDropdownMenu';
8
8
  export { ToolbarKeyboardShortcutHint } from './ui/ToolbarKeyboardShortcutHint';
9
9
  export { ToolbarSection } from './ui/ToolbarSection';
10
10
  export { ToolbarTooltip } from './ui/ToolbarTooltip';
11
- export { ToolbarDropdownDivider } from './ui/ToolbarDropdownDivider';
12
11
  export { ToolbarColorSwatch } from './ui/ToolbarColorSwatch';
13
12
  export { useToolbarDropdownMenu } from './ui/ToolbarDropdownMenuContext';
14
13
  export { AIAdjustLengthIcon } from './ui/icons/AIAdjustLengthIcon';
@@ -56,6 +55,12 @@ export { AlignTextCenterIcon } from './ui/icons/AlignTextCenterIcon';
56
55
  export { AlignTextRightIcon } from './ui/icons/AlignTextRightIcon';
57
56
  export { IndentIcon } from './ui/icons/IndentIcon';
58
57
  export { OutdentIcon } from './ui/icons/OutdentIcon';
58
+ export { EmojiIcon } from './ui/icons/EmojiIcon';
59
+ export { LayoutIcon } from './ui/icons/LayoutIcon';
60
+ export { ImageIcon } from './ui/icons/ImageIcon';
61
+ export { MentionIcon } from './ui/icons/MentionIcon';
62
+ export { TableIcon } from './ui/icons/TableIcon';
63
+ export { TaskIcon } from './ui/icons/TaskIcon';
59
64
  export { default as ColorPalette } from './ui/ColorPalette';
60
- export type { IconComponent, ToolbarButtonGroupLocation } from './types';
65
+ export type { IconComponent } from './types';
61
66
  export { useToolbarUI, ToolbarUIProvider } from './hooks/ui-context';
@@ -1,3 +1,2 @@
1
1
  import { type NewCoreIconProps } from '@atlaskit/icon';
2
- export type ToolbarButtonGroupLocation = 'start' | 'middle' | 'end';
3
2
  export type IconComponent = (props: NewCoreIconProps) => JSX.Element;
@@ -1,6 +1,5 @@
1
1
  import React, { type ReactNode } from 'react';
2
2
  import { type TriggerProps } from '@atlaskit/popup';
3
- import { type ToolbarButtonGroupLocation } from '../types';
4
3
  type ToolbarButtonProps = Partial<TriggerProps> & {
5
4
  children?: ReactNode;
6
5
  isSelected?: boolean;
@@ -9,7 +8,6 @@ type ToolbarButtonProps = Partial<TriggerProps> & {
9
8
  onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
10
9
  testId?: string;
11
10
  iconBefore: React.ReactNode;
12
- groupLocation?: ToolbarButtonGroupLocation;
13
11
  isDisabled?: boolean;
14
12
  ariaKeyshortcuts?: string;
15
13
  label?: string;
@@ -1,6 +1,10 @@
1
- import React, { type ReactNode } from 'react';
1
+ /**
2
+ * @jsxRuntime classic
3
+ * @jsx jsx
4
+ */
5
+ import { type ReactNode } from 'react';
2
6
  type ToolbarButtonGroupProps = {
3
7
  children?: ReactNode;
4
8
  };
5
- export declare const ToolbarButtonGroup: ({ children }: ToolbarButtonGroupProps) => React.JSX.Element;
9
+ export declare const ToolbarButtonGroup: ({ children }: ToolbarButtonGroupProps) => JSX.Element;
6
10
  export {};
@@ -1,6 +1,8 @@
1
1
  import React, { type ReactNode } from 'react';
2
2
  type ToolbarDropdownItemSectionProps = {
3
3
  children?: ReactNode;
4
+ hasSeparator?: boolean;
5
+ title?: string;
4
6
  };
5
- export declare const ToolbarDropdownItemSection: ({ children }: ToolbarDropdownItemSectionProps) => React.JSX.Element;
7
+ export declare const ToolbarDropdownItemSection: ({ children, hasSeparator, title, }: ToolbarDropdownItemSectionProps) => React.JSX.Element;
6
8
  export {};
@@ -1,15 +1,18 @@
1
+ /**
2
+ * @jsxRuntime classic
3
+ * @jsx jsx
4
+ */
1
5
  import React, { type ReactNode } from 'react';
2
- import { type OnOpenChangeArgs } from '@atlaskit/dropdown-menu';
3
- import { type ToolbarButtonGroupLocation } from '../types';
4
6
  type ToolbarDropdownMenuProps = {
5
7
  iconBefore: React.ReactNode;
6
8
  children?: ReactNode;
7
- groupLocation?: ToolbarButtonGroupLocation;
8
9
  isDisabled?: boolean;
9
10
  testId?: string;
10
11
  label?: string;
11
- isOpen?: boolean;
12
- onOpenChange?: (args: OnOpenChangeArgs) => void;
12
+ /**
13
+ * Whether to add margin around sections to align with 4px block padding existing in current editor dropdown
14
+ */
15
+ hasSectionMargin?: boolean;
13
16
  };
14
- export declare const ToolbarDropdownMenu: ({ iconBefore, groupLocation, children, isDisabled, testId, label, }: ToolbarDropdownMenuProps) => React.JSX.Element;
17
+ export declare const ToolbarDropdownMenu: ({ iconBefore, children, isDisabled, testId, label, hasSectionMargin, }: ToolbarDropdownMenuProps) => JSX.Element;
15
18
  export {};
@@ -8,5 +8,5 @@ export declare const useToolbarDropdownMenu: () => ToolbarDropdownMenuContextVal
8
8
  interface ToolbarDropdownMenuProviderProps {
9
9
  children: React.ReactNode;
10
10
  }
11
- export declare const ToolbarDropdownMenuProvider: ({ children, }: ToolbarDropdownMenuProviderProps) => React.JSX.Element;
11
+ export declare const ToolbarDropdownMenuProvider: ({ children }: ToolbarDropdownMenuProviderProps) => React.JSX.Element;
12
12
  export {};
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
  import type { PositionType } from '@atlaskit/tooltip';
3
3
  type ToolbarTooltipProps = {
4
- content: string;
4
+ content: React.ReactNode;
5
5
  children: React.ReactNode;
6
6
  position?: PositionType;
7
7
  };
@@ -0,0 +1 @@
1
+ export { default as EmojiIcon } from '@atlaskit/icon/core/emoji';
@@ -0,0 +1 @@
1
+ export { default as ImageIcon } from '@atlaskit/icon/core/image';
@@ -0,0 +1 @@
1
+ export { default as LayoutIcon } from '@atlaskit/icon/core/layout-two-columns';
@@ -0,0 +1 @@
1
+ export { default as MentionIcon } from '@atlaskit/icon/core/mention';
@@ -0,0 +1 @@
1
+ export { default as TableIcon } from '@atlaskit/icon/core/grid';
@@ -0,0 +1 @@
1
+ export { default as TaskIcon } from '@atlaskit/icon/core/task';
@@ -8,7 +8,6 @@ export { ToolbarNestedDropdownMenu } from './ui/ToolbarNestedDropdownMenu';
8
8
  export { ToolbarKeyboardShortcutHint } from './ui/ToolbarKeyboardShortcutHint';
9
9
  export { ToolbarSection } from './ui/ToolbarSection';
10
10
  export { ToolbarTooltip } from './ui/ToolbarTooltip';
11
- export { ToolbarDropdownDivider } from './ui/ToolbarDropdownDivider';
12
11
  export { ToolbarColorSwatch } from './ui/ToolbarColorSwatch';
13
12
  export { useToolbarDropdownMenu } from './ui/ToolbarDropdownMenuContext';
14
13
  export { AIAdjustLengthIcon } from './ui/icons/AIAdjustLengthIcon';
@@ -56,6 +55,12 @@ export { AlignTextCenterIcon } from './ui/icons/AlignTextCenterIcon';
56
55
  export { AlignTextRightIcon } from './ui/icons/AlignTextRightIcon';
57
56
  export { IndentIcon } from './ui/icons/IndentIcon';
58
57
  export { OutdentIcon } from './ui/icons/OutdentIcon';
58
+ export { EmojiIcon } from './ui/icons/EmojiIcon';
59
+ export { LayoutIcon } from './ui/icons/LayoutIcon';
60
+ export { ImageIcon } from './ui/icons/ImageIcon';
61
+ export { MentionIcon } from './ui/icons/MentionIcon';
62
+ export { TableIcon } from './ui/icons/TableIcon';
63
+ export { TaskIcon } from './ui/icons/TaskIcon';
59
64
  export { default as ColorPalette } from './ui/ColorPalette';
60
- export type { IconComponent, ToolbarButtonGroupLocation } from './types';
65
+ export type { IconComponent } from './types';
61
66
  export { useToolbarUI, ToolbarUIProvider } from './hooks/ui-context';
@@ -1,3 +1,2 @@
1
1
  import { type NewCoreIconProps } from '@atlaskit/icon';
2
- export type ToolbarButtonGroupLocation = 'start' | 'middle' | 'end';
3
2
  export type IconComponent = (props: NewCoreIconProps) => JSX.Element;
@@ -1,6 +1,5 @@
1
1
  import React, { type ReactNode } from 'react';
2
2
  import { type TriggerProps } from '@atlaskit/popup';
3
- import { type ToolbarButtonGroupLocation } from '../types';
4
3
  type ToolbarButtonProps = Partial<TriggerProps> & {
5
4
  children?: ReactNode;
6
5
  isSelected?: boolean;
@@ -9,7 +8,6 @@ type ToolbarButtonProps = Partial<TriggerProps> & {
9
8
  onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
10
9
  testId?: string;
11
10
  iconBefore: React.ReactNode;
12
- groupLocation?: ToolbarButtonGroupLocation;
13
11
  isDisabled?: boolean;
14
12
  ariaKeyshortcuts?: string;
15
13
  label?: string;
@@ -1,6 +1,10 @@
1
- import React, { type ReactNode } from 'react';
1
+ /**
2
+ * @jsxRuntime classic
3
+ * @jsx jsx
4
+ */
5
+ import { type ReactNode } from 'react';
2
6
  type ToolbarButtonGroupProps = {
3
7
  children?: ReactNode;
4
8
  };
5
- export declare const ToolbarButtonGroup: ({ children }: ToolbarButtonGroupProps) => React.JSX.Element;
9
+ export declare const ToolbarButtonGroup: ({ children }: ToolbarButtonGroupProps) => JSX.Element;
6
10
  export {};
@@ -1,6 +1,8 @@
1
1
  import React, { type ReactNode } from 'react';
2
2
  type ToolbarDropdownItemSectionProps = {
3
3
  children?: ReactNode;
4
+ hasSeparator?: boolean;
5
+ title?: string;
4
6
  };
5
- export declare const ToolbarDropdownItemSection: ({ children }: ToolbarDropdownItemSectionProps) => React.JSX.Element;
7
+ export declare const ToolbarDropdownItemSection: ({ children, hasSeparator, title, }: ToolbarDropdownItemSectionProps) => React.JSX.Element;
6
8
  export {};
@@ -1,15 +1,18 @@
1
+ /**
2
+ * @jsxRuntime classic
3
+ * @jsx jsx
4
+ */
1
5
  import React, { type ReactNode } from 'react';
2
- import { type OnOpenChangeArgs } from '@atlaskit/dropdown-menu';
3
- import { type ToolbarButtonGroupLocation } from '../types';
4
6
  type ToolbarDropdownMenuProps = {
5
7
  iconBefore: React.ReactNode;
6
8
  children?: ReactNode;
7
- groupLocation?: ToolbarButtonGroupLocation;
8
9
  isDisabled?: boolean;
9
10
  testId?: string;
10
11
  label?: string;
11
- isOpen?: boolean;
12
- onOpenChange?: (args: OnOpenChangeArgs) => void;
12
+ /**
13
+ * Whether to add margin around sections to align with 4px block padding existing in current editor dropdown
14
+ */
15
+ hasSectionMargin?: boolean;
13
16
  };
14
- export declare const ToolbarDropdownMenu: ({ iconBefore, groupLocation, children, isDisabled, testId, label, }: ToolbarDropdownMenuProps) => React.JSX.Element;
17
+ export declare const ToolbarDropdownMenu: ({ iconBefore, children, isDisabled, testId, label, hasSectionMargin, }: ToolbarDropdownMenuProps) => JSX.Element;
15
18
  export {};
@@ -8,5 +8,5 @@ export declare const useToolbarDropdownMenu: () => ToolbarDropdownMenuContextVal
8
8
  interface ToolbarDropdownMenuProviderProps {
9
9
  children: React.ReactNode;
10
10
  }
11
- export declare const ToolbarDropdownMenuProvider: ({ children, }: ToolbarDropdownMenuProviderProps) => React.JSX.Element;
11
+ export declare const ToolbarDropdownMenuProvider: ({ children }: ToolbarDropdownMenuProviderProps) => React.JSX.Element;
12
12
  export {};
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
  import type { PositionType } from '@atlaskit/tooltip';
3
3
  type ToolbarTooltipProps = {
4
- content: string;
4
+ content: React.ReactNode;
5
5
  children: React.ReactNode;
6
6
  position?: PositionType;
7
7
  };
@@ -0,0 +1 @@
1
+ export { default as EmojiIcon } from '@atlaskit/icon/core/emoji';
@@ -0,0 +1 @@
1
+ export { default as ImageIcon } from '@atlaskit/icon/core/image';
@@ -0,0 +1 @@
1
+ export { default as LayoutIcon } from '@atlaskit/icon/core/layout-two-columns';
@@ -0,0 +1 @@
1
+ export { default as MentionIcon } from '@atlaskit/icon/core/mention';
@@ -0,0 +1 @@
1
+ export { default as TableIcon } from '@atlaskit/icon/core/grid';
@@ -0,0 +1 @@
1
+ export { default as TaskIcon } from '@atlaskit/icon/core/task';