@atlaskit/editor-plugin-toolbar-lists-indentation 2.0.2 → 3.0.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 (17) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/cjs/ui/Toolbar.js +86 -104
  3. package/dist/cjs/ui/ToolbarDropdown.js +39 -86
  4. package/dist/cjs/ui/index.js +8 -9
  5. package/dist/es2019/ui/Toolbar.js +82 -102
  6. package/dist/es2019/ui/ToolbarDropdown.js +39 -85
  7. package/dist/es2019/ui/index.js +5 -8
  8. package/dist/esm/ui/Toolbar.js +82 -102
  9. package/dist/esm/ui/ToolbarDropdown.js +39 -85
  10. package/dist/esm/ui/index.js +5 -8
  11. package/dist/types/ui/Toolbar.d.ts +2 -2
  12. package/dist/types/ui/ToolbarDropdown.d.ts +2 -2
  13. package/dist/types/ui/index.d.ts +2 -6
  14. package/dist/types-ts4.5/ui/Toolbar.d.ts +2 -2
  15. package/dist/types-ts4.5/ui/ToolbarDropdown.d.ts +2 -2
  16. package/dist/types-ts4.5/ui/index.d.ts +2 -6
  17. package/package.json +12 -8
package/dist/es2019/ui/Toolbar.js CHANGED
@@ -1,21 +1,16 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
1
+ /* Toolbar.tsx generated by @compiled/babel-plugin v0.36.1 */
2
+ import * as React from 'react';
3
+ import { ax, ix } from "@compiled/react/runtime";
5
4
  import { useEffect, useRef } from 'react';
6
-
7
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
8
- import { jsx } from '@emotion/react';
9
5
  import { useIntl } from 'react-intl-next';
10
6
  import { getAriaKeyshortcuts, toggleBulletList as toggleBulletListKeymap, indent as toggleIndentKeymap, toggleOrderedList as toggleOrderedListKeymap, outdent as toggleOutdentKeymap, tooltip, ToolTipContent } from '@atlaskit/editor-common/keymaps';
11
7
  import { indentationMessages, listMessages as messages } from '@atlaskit/editor-common/messages';
12
- import { buttonGroupStyle, buttonGroupStyleBeforeVisualRefresh, separatorStyles } from '@atlaskit/editor-common/styles';
8
+ import { ToolbarButtonGroup, ToolbarSeparator } from '@atlaskit/editor-common/ui';
13
9
  import { TOOLBAR_BUTTON, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
14
10
  import BulletedListIcon from '@atlaskit/icon/core/migration/list-bulleted--editor-bullet-list';
15
11
  import NumberListIcon from '@atlaskit/icon/core/migration/list-numbered--editor-number-list';
16
12
  import OutdentIcon from '@atlaskit/icon/core/migration/text-indent-left--editor-outdent';
17
13
  import IndentIcon from '@atlaskit/icon/core/migration/text-indent-right--editor-indent';
18
- import { fg } from '@atlaskit/platform-feature-flags';
19
14
  export function Toolbar(props) {
20
15
  const {
21
16
  formatMessage
@@ -56,97 +51,82 @@ export function Toolbar(props) {
56
51
  indentButtonRef.current.focus();
57
52
  }
58
53
  }, [outdentButtonRef, outdentDisabled, isOutdentButtonFocused]);
59
- return (
60
- // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
61
- jsx("span", {
62
- css:
63
- // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-registration, @atlaskit/platform/ensure-feature-flag-prefix
64
- fg('platform-visual-refresh-icons') ?
65
- // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
66
- buttonGroupStyle :
67
- // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
68
- buttonGroupStyleBeforeVisualRefresh
69
- }, jsx("div", {
70
- role: "group",
71
- "aria-label": labelListsFormat
72
- }, jsx(ToolbarButton, {
73
- buttonId: TOOLBAR_BUTTON.BULLET_LIST,
74
- testId: labelUnorderedList,
75
- spacing: isReducedSpacing ? 'none' : 'default',
76
- onClick: handleOnItemActivated('bullet_list'),
77
- selected: bulletListActive,
78
- "aria-pressed": bulletListActive,
79
- "aria-label": tooltip(toggleBulletListKeymap, labelUnorderedList),
80
- "aria-keyshortcuts": getAriaKeyshortcuts(toggleBulletListKeymap),
81
- disabled: bulletListDisabled || disabled,
82
- title: jsx(ToolTipContent, {
83
- description: labelUnorderedList,
84
- keymap: toggleBulletListKeymap
85
- }),
86
- iconBefore: jsx(BulletedListIcon, {
87
- label: "",
88
- color: "currentColor",
89
- spacing: "spacious"
90
- })
91
- }), jsx(ToolbarButton, {
92
- buttonId: TOOLBAR_BUTTON.ORDERED_LIST,
93
- testId: labelOrderedList,
94
- spacing: isReducedSpacing ? 'none' : 'default',
95
- onClick: handleOnItemActivated('ordered_list'),
96
- selected: orderedListActive,
97
- "aria-pressed": orderedListActive,
98
- "aria-label": tooltip(toggleOrderedListKeymap, labelOrderedList),
99
- "aria-keyshortcuts": getAriaKeyshortcuts(toggleOrderedListKeymap),
100
- disabled: orderedListDisabled || disabled,
101
- title: jsx(ToolTipContent, {
102
- description: labelOrderedList,
103
- keymap: toggleOrderedListKeymap
104
- }),
105
- iconBefore: jsx(NumberListIcon, {
106
- color: "currentColor",
107
- spacing: "spacious",
108
- label: ""
109
- })
110
- }), showIndentationButtons && jsx(ToolbarButton, {
111
- buttonId: TOOLBAR_BUTTON.OUTDENT,
112
- testId: TOOLBAR_BUTTON.OUTDENT,
113
- ref: outdentButtonRef,
114
- spacing: isReducedSpacing ? 'none' : 'default',
115
- onClick: handleOnItemActivated('outdent'),
116
- iconBefore: jsx(OutdentIcon, {
117
- color: "currentColor",
118
- spacing: "spacious",
119
- label: ""
120
- }),
121
- disabled: outdentDisabled || disabled,
122
- "aria-label": tooltip(toggleOutdentKeymap, outdentMessage),
123
- "aria-keyshortcuts": getAriaKeyshortcuts(toggleOutdentKeymap),
124
- title: jsx(ToolTipContent, {
125
- description: outdentMessage,
126
- keymap: toggleOutdentKeymap
127
- })
128
- }), showIndentationButtons && jsx(ToolbarButton, {
129
- buttonId: TOOLBAR_BUTTON.INDENT,
130
- testId: TOOLBAR_BUTTON.INDENT,
131
- ref: indentButtonRef,
132
- spacing: isReducedSpacing ? 'none' : 'default',
133
- onClick: handleOnItemActivated('indent'),
134
- iconBefore: jsx(IndentIcon, {
135
- color: "currentColor",
136
- spacing: "spacious",
137
- label: ""
138
- }),
139
- disabled: indentDisabled || disabled,
140
- "aria-label": tooltip(toggleIndentKeymap, indentMessage),
141
- "aria-keyshortcuts": getAriaKeyshortcuts(toggleIndentKeymap),
142
- title: jsx(ToolTipContent, {
143
- description: indentMessage,
144
- keymap: toggleIndentKeymap
145
- })
146
- })), !(pluginInjectionApi !== null && pluginInjectionApi !== void 0 && pluginInjectionApi.primaryToolbar) && /* eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage */
147
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
148
- jsx("span", {
149
- css: separatorStyles
150
- }))
151
- );
54
+ return /*#__PURE__*/React.createElement(ToolbarButtonGroup, null, /*#__PURE__*/React.createElement("div", {
55
+ role: "group",
56
+ "aria-label": labelListsFormat
57
+ }, /*#__PURE__*/React.createElement(ToolbarButton, {
58
+ buttonId: TOOLBAR_BUTTON.BULLET_LIST,
59
+ testId: labelUnorderedList,
60
+ spacing: isReducedSpacing ? 'none' : 'default',
61
+ onClick: handleOnItemActivated('bullet_list'),
62
+ selected: bulletListActive,
63
+ "aria-pressed": bulletListActive,
64
+ "aria-label": tooltip(toggleBulletListKeymap, labelUnorderedList),
65
+ "aria-keyshortcuts": getAriaKeyshortcuts(toggleBulletListKeymap),
66
+ disabled: bulletListDisabled || disabled,
67
+ title: /*#__PURE__*/React.createElement(ToolTipContent, {
68
+ description: labelUnorderedList,
69
+ keymap: toggleBulletListKeymap
70
+ }),
71
+ iconBefore: /*#__PURE__*/React.createElement(BulletedListIcon, {
72
+ label: "",
73
+ color: "currentColor",
74
+ spacing: "spacious"
75
+ })
76
+ }), /*#__PURE__*/React.createElement(ToolbarButton, {
77
+ buttonId: TOOLBAR_BUTTON.ORDERED_LIST,
78
+ testId: labelOrderedList,
79
+ spacing: isReducedSpacing ? 'none' : 'default',
80
+ onClick: handleOnItemActivated('ordered_list'),
81
+ selected: orderedListActive,
82
+ "aria-pressed": orderedListActive,
83
+ "aria-label": tooltip(toggleOrderedListKeymap, labelOrderedList),
84
+ "aria-keyshortcuts": getAriaKeyshortcuts(toggleOrderedListKeymap),
85
+ disabled: orderedListDisabled || disabled,
86
+ title: /*#__PURE__*/React.createElement(ToolTipContent, {
87
+ description: labelOrderedList,
88
+ keymap: toggleOrderedListKeymap
89
+ }),
90
+ iconBefore: /*#__PURE__*/React.createElement(NumberListIcon, {
91
+ color: "currentColor",
92
+ spacing: "spacious",
93
+ label: ""
94
+ })
95
+ }), showIndentationButtons && /*#__PURE__*/React.createElement(ToolbarButton, {
96
+ buttonId: TOOLBAR_BUTTON.OUTDENT,
97
+ testId: TOOLBAR_BUTTON.OUTDENT,
98
+ ref: outdentButtonRef,
99
+ spacing: isReducedSpacing ? 'none' : 'default',
100
+ onClick: handleOnItemActivated('outdent'),
101
+ iconBefore: /*#__PURE__*/React.createElement(OutdentIcon, {
102
+ color: "currentColor",
103
+ spacing: "spacious",
104
+ label: ""
105
+ }),
106
+ disabled: outdentDisabled || disabled,
107
+ "aria-label": tooltip(toggleOutdentKeymap, outdentMessage),
108
+ "aria-keyshortcuts": getAriaKeyshortcuts(toggleOutdentKeymap),
109
+ title: /*#__PURE__*/React.createElement(ToolTipContent, {
110
+ description: outdentMessage,
111
+ keymap: toggleOutdentKeymap
112
+ })
113
+ }), showIndentationButtons && /*#__PURE__*/React.createElement(ToolbarButton, {
114
+ buttonId: TOOLBAR_BUTTON.INDENT,
115
+ testId: TOOLBAR_BUTTON.INDENT,
116
+ ref: indentButtonRef,
117
+ spacing: isReducedSpacing ? 'none' : 'default',
118
+ onClick: handleOnItemActivated('indent'),
119
+ iconBefore: /*#__PURE__*/React.createElement(IndentIcon, {
120
+ color: "currentColor",
121
+ spacing: "spacious",
122
+ label: ""
123
+ }),
124
+ disabled: indentDisabled || disabled,
125
+ "aria-label": tooltip(toggleIndentKeymap, indentMessage),
126
+ "aria-keyshortcuts": getAriaKeyshortcuts(toggleIndentKeymap),
127
+ title: /*#__PURE__*/React.createElement(ToolTipContent, {
128
+ description: indentMessage,
129
+ keymap: toggleIndentKeymap
130
+ })
131
+ })), !(pluginInjectionApi !== null && pluginInjectionApi !== void 0 && pluginInjectionApi.primaryToolbar) && /*#__PURE__*/React.createElement(ToolbarSeparator, null));
152
132
  }
package/dist/es2019/ui/ToolbarDropdown.js CHANGED
@@ -1,20 +1,12 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
1
+ /* ToolbarDropdown.tsx generated by @compiled/babel-plugin v0.36.1 */
2
+ import { ax, ix } from "@compiled/react/runtime";
5
3
  import React from 'react';
6
-
7
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
8
- import { jsx } from '@emotion/react';
9
4
  import { useIntl } from 'react-intl-next';
10
5
  import { toggleBulletList as toggleBulletListKeymap, indent as toggleIndentKeymap, toggleOrderedList as toggleOrderedListKeymap, outdent as toggleOutdentKeymap, tooltip } from '@atlaskit/editor-common/keymaps';
11
6
  import { indentationMessages, listMessages } from '@atlaskit/editor-common/messages';
12
- import { expandIconContainerStyle, separatorStyles, wrapperStyle } from '@atlaskit/editor-common/styles';
7
+ import { Shortcut, ToolbarDropdownTriggerWrapper, ToolbarDropdownWrapper, ToolbarExpandIcon, ToolbarSeparator } from '@atlaskit/editor-common/ui';
13
8
  import { DropdownMenuWithKeyboardNavigation as DropdownMenu, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
14
- import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
15
9
  import BulletListIcon from '@atlaskit/icon/core/migration/list-bulleted--editor-bullet-list';
16
- import ExpandIcon from '@atlaskit/icon/utility/migration/chevron-down';
17
- import { fg } from '@atlaskit/platform-feature-flags';
18
10
  import { ToolbarType } from '../types';
19
11
  export function ToolbarDropdown(props) {
20
12
  const {
@@ -64,62 +56,39 @@ export function ToolbarDropdown(props) {
64
56
  });
65
57
  };
66
58
  const reducedSpacing = props.toolbarType === ToolbarType.FLOATING ? 'compact' : 'none';
67
- return (
68
- // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
69
- jsx("span", {
70
- css: wrapperStyle
71
- }, jsx(DropdownMenu, {
72
- items: items,
73
- onItemActivated: handleOnItemActivated,
74
- mountTo: popupsMountPoint,
75
- boundariesElement: popupsBoundariesElement,
76
- scrollableElement: popupsScrollableElement,
77
- isOpen: isDropdownOpen,
78
- onOpenChange: onOpenChange,
79
- fitHeight: 188,
80
- fitWidth: 175,
81
- shouldUseDefaultRole: true,
82
- shouldFocusFirstItem: () => {
83
- if (isOpenedByKeyboard) {
84
- setOpenedByKeyboard(false);
85
- }
86
- return isOpenedByKeyboard;
59
+ return /*#__PURE__*/React.createElement(ToolbarDropdownWrapper, null, /*#__PURE__*/React.createElement(DropdownMenu, {
60
+ items: items,
61
+ onItemActivated: handleOnItemActivated,
62
+ mountTo: popupsMountPoint,
63
+ boundariesElement: popupsBoundariesElement,
64
+ scrollableElement: popupsScrollableElement,
65
+ isOpen: isDropdownOpen,
66
+ onOpenChange: onOpenChange,
67
+ fitHeight: 188,
68
+ fitWidth: 175,
69
+ shouldUseDefaultRole: true,
70
+ shouldFocusFirstItem: () => {
71
+ if (isOpenedByKeyboard) {
72
+ setOpenedByKeyboard(false);
87
73
  }
88
- }, jsx(ToolbarButton, {
89
- spacing: isReducedSpacing ? reducedSpacing : 'default',
90
- selected: bulletListActive || orderedListActive || isDropdownOpen,
91
- "aria-expanded": isDropdownOpen,
92
- "aria-haspopup": true,
93
- "aria-label": labelLists,
94
- disabled: disabled,
95
- onClick: handleTriggerClick,
96
- onKeyDown: handleOnKeyDown,
97
- title: labelLists,
98
- iconBefore:
99
- // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
100
- jsx("span", {
101
- css: wrapperStyle
102
- }, jsx(BulletListIcon, {
103
- color: "currentColor",
104
- spacing: "spacious",
105
- label: labelLists
106
- }), jsx("span", {
107
- css: [
108
- // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-registration
109
- fg('platform-visual-refresh-icons') &&
110
- //eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
111
- expandIconContainerStyle]
112
- }, jsx(ExpandIcon, {
113
- color: "currentColor",
114
- label: "",
115
- LEGACY_margin: "0 0 0 -8px"
116
- })))
117
- })), !(pluginInjectionApi !== null && pluginInjectionApi !== void 0 && pluginInjectionApi.primaryToolbar) && /* eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage */
118
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
119
- jsx("span", {
120
- css: separatorStyles
121
- }))
122
- );
74
+ return isOpenedByKeyboard;
75
+ }
76
+ }, /*#__PURE__*/React.createElement(ToolbarButton, {
77
+ spacing: isReducedSpacing ? reducedSpacing : 'default',
78
+ selected: bulletListActive || orderedListActive || isDropdownOpen,
79
+ "aria-expanded": isDropdownOpen,
80
+ "aria-haspopup": true,
81
+ "aria-label": labelLists,
82
+ disabled: disabled,
83
+ onClick: handleTriggerClick,
84
+ onKeyDown: handleOnKeyDown,
85
+ title: labelLists,
86
+ iconBefore: /*#__PURE__*/React.createElement(ToolbarDropdownTriggerWrapper, null, /*#__PURE__*/React.createElement(BulletListIcon, {
87
+ color: "currentColor",
88
+ spacing: "spacious",
89
+ label: labelLists
90
+ }), /*#__PURE__*/React.createElement(ToolbarExpandIcon, null))
91
+ })), !(pluginInjectionApi !== null && pluginInjectionApi !== void 0 && pluginInjectionApi.primaryToolbar) && /*#__PURE__*/React.createElement(ToolbarSeparator, null));
123
92
  }
124
93
  function useItems(props) {
125
94
  const {
@@ -135,11 +104,7 @@ function useItems(props) {
135
104
  },
136
105
  isDisabled: props.bulletListDisabled,
137
106
  isActive: Boolean(props.bulletListActive),
138
- elemAfter:
139
- // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
140
- jsx("div", {
141
- css: shortcutStyle
142
- }, tooltip(toggleBulletListKeymap))
107
+ elemAfter: /*#__PURE__*/React.createElement(Shortcut, null, tooltip(toggleBulletListKeymap))
143
108
  }, {
144
109
  key: 'orderedList',
145
110
  content: labelOrderedList,
@@ -148,11 +113,7 @@ function useItems(props) {
148
113
  },
149
114
  isDisabled: props.orderedListDisabled,
150
115
  isActive: Boolean(props.orderedListActive),
151
- elemAfter:
152
- // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
153
- jsx("div", {
154
- css: shortcutStyle
155
- }, tooltip(toggleOrderedListKeymap))
116
+ elemAfter: /*#__PURE__*/React.createElement(Shortcut, null, tooltip(toggleOrderedListKeymap))
156
117
  }];
157
118
  if (props.showIndentationButtons) {
158
119
  const labelIndent = formatMessage(indentationMessages.indent);
@@ -165,11 +126,7 @@ function useItems(props) {
165
126
  },
166
127
  isDisabled: props.outdentDisabled,
167
128
  isActive: false,
168
- elemAfter:
169
- // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
170
- jsx("div", {
171
- css: shortcutStyle
172
- }, tooltip(toggleOutdentKeymap))
129
+ elemAfter: /*#__PURE__*/React.createElement(Shortcut, null, tooltip(toggleOutdentKeymap))
173
130
  }, {
174
131
  key: 'indent',
175
132
  content: labelIndent,
@@ -178,10 +135,7 @@ function useItems(props) {
178
135
  },
179
136
  isDisabled: props.indentDisabled,
180
137
  isActive: false,
181
- // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
182
- elemAfter: jsx("div", {
183
- css: shortcutStyle
184
- }, tooltip(toggleIndentKeymap))
138
+ elemAfter: /*#__PURE__*/React.createElement(Shortcut, null, tooltip(toggleIndentKeymap))
185
139
  });
186
140
  }
187
141
  return [{
package/dist/es2019/ui/index.js CHANGED
@@ -1,9 +1,6 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
6
- import { jsx } from '@emotion/react';
1
+ /* index.tsx generated by @compiled/babel-plugin v0.36.1 */
2
+ import * as React from 'react';
3
+ import { ax, ix } from "@compiled/react/runtime";
7
4
  import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
8
5
  import { fg } from '@atlaskit/platform-feature-flags';
9
6
  import { ToolbarType } from '../types';
@@ -40,7 +37,7 @@ export default function ToolbarListsIndentation(props) {
40
37
  } else {
41
38
  isDisabled = disabled;
42
39
  }
43
- return jsx(ToolbarDropdown, {
40
+ return /*#__PURE__*/React.createElement(ToolbarDropdown, {
44
41
  editorView: props.editorView,
45
42
  isReducedSpacing: isReducedSpacing,
46
43
  popupsMountPoint: popupsMountPoint,
@@ -60,7 +57,7 @@ export default function ToolbarListsIndentation(props) {
60
57
  toolbarType: toolbarType
61
58
  });
62
59
  }
63
- return jsx(Toolbar, {
60
+ return /*#__PURE__*/React.createElement(Toolbar, {
64
61
  editorView: props.editorView,
65
62
  isReducedSpacing: isReducedSpacing,
66
63
  bulletListActive: bulletListActive,
package/dist/esm/ui/Toolbar.js CHANGED
@@ -1,21 +1,16 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
1
+ /* Toolbar.tsx generated by @compiled/babel-plugin v0.36.1 */
2
+ import * as React from 'react';
3
+ import { ax, ix } from "@compiled/react/runtime";
5
4
  import { useEffect, useRef } from 'react';
6
-
7
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
8
- import { jsx } from '@emotion/react';
9
5
  import { useIntl } from 'react-intl-next';
10
6
  import { getAriaKeyshortcuts, toggleBulletList as toggleBulletListKeymap, indent as toggleIndentKeymap, toggleOrderedList as toggleOrderedListKeymap, outdent as toggleOutdentKeymap, tooltip, ToolTipContent } from '@atlaskit/editor-common/keymaps';
11
7
  import { indentationMessages, listMessages as messages } from '@atlaskit/editor-common/messages';
12
- import { buttonGroupStyle, buttonGroupStyleBeforeVisualRefresh, separatorStyles } from '@atlaskit/editor-common/styles';
8
+ import { ToolbarButtonGroup, ToolbarSeparator } from '@atlaskit/editor-common/ui';
13
9
  import { TOOLBAR_BUTTON, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
14
10
  import BulletedListIcon from '@atlaskit/icon/core/migration/list-bulleted--editor-bullet-list';
15
11
  import NumberListIcon from '@atlaskit/icon/core/migration/list-numbered--editor-number-list';
16
12
  import OutdentIcon from '@atlaskit/icon/core/migration/text-indent-left--editor-outdent';
17
13
  import IndentIcon from '@atlaskit/icon/core/migration/text-indent-right--editor-indent';
18
- import { fg } from '@atlaskit/platform-feature-flags';
19
14
  export function Toolbar(props) {
20
15
  var _useIntl = useIntl(),
21
16
  formatMessage = _useIntl.formatMessage;
@@ -57,97 +52,82 @@ export function Toolbar(props) {
57
52
  indentButtonRef.current.focus();
58
53
  }
59
54
  }, [outdentButtonRef, outdentDisabled, isOutdentButtonFocused]);
60
- return (
61
- // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
62
- jsx("span", {
63
- css:
64
- // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-registration, @atlaskit/platform/ensure-feature-flag-prefix
65
- fg('platform-visual-refresh-icons') ?
66
- // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
67
- buttonGroupStyle :
68
- // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
69
- buttonGroupStyleBeforeVisualRefresh
70
- }, jsx("div", {
71
- role: "group",
72
- "aria-label": labelListsFormat
73
- }, jsx(ToolbarButton, {
74
- buttonId: TOOLBAR_BUTTON.BULLET_LIST,
75
- testId: labelUnorderedList,
76
- spacing: isReducedSpacing ? 'none' : 'default',
77
- onClick: handleOnItemActivated('bullet_list'),
78
- selected: bulletListActive,
79
- "aria-pressed": bulletListActive,
80
- "aria-label": tooltip(toggleBulletListKeymap, labelUnorderedList),
81
- "aria-keyshortcuts": getAriaKeyshortcuts(toggleBulletListKeymap),
82
- disabled: bulletListDisabled || disabled,
83
- title: jsx(ToolTipContent, {
84
- description: labelUnorderedList,
85
- keymap: toggleBulletListKeymap
86
- }),
87
- iconBefore: jsx(BulletedListIcon, {
88
- label: "",
89
- color: "currentColor",
90
- spacing: "spacious"
91
- })
92
- }), jsx(ToolbarButton, {
93
- buttonId: TOOLBAR_BUTTON.ORDERED_LIST,
94
- testId: labelOrderedList,
95
- spacing: isReducedSpacing ? 'none' : 'default',
96
- onClick: handleOnItemActivated('ordered_list'),
97
- selected: orderedListActive,
98
- "aria-pressed": orderedListActive,
99
- "aria-label": tooltip(toggleOrderedListKeymap, labelOrderedList),
100
- "aria-keyshortcuts": getAriaKeyshortcuts(toggleOrderedListKeymap),
101
- disabled: orderedListDisabled || disabled,
102
- title: jsx(ToolTipContent, {
103
- description: labelOrderedList,
104
- keymap: toggleOrderedListKeymap
105
- }),
106
- iconBefore: jsx(NumberListIcon, {
107
- color: "currentColor",
108
- spacing: "spacious",
109
- label: ""
110
- })
111
- }), showIndentationButtons && jsx(ToolbarButton, {
112
- buttonId: TOOLBAR_BUTTON.OUTDENT,
113
- testId: TOOLBAR_BUTTON.OUTDENT,
114
- ref: outdentButtonRef,
115
- spacing: isReducedSpacing ? 'none' : 'default',
116
- onClick: handleOnItemActivated('outdent'),
117
- iconBefore: jsx(OutdentIcon, {
118
- color: "currentColor",
119
- spacing: "spacious",
120
- label: ""
121
- }),
122
- disabled: outdentDisabled || disabled,
123
- "aria-label": tooltip(toggleOutdentKeymap, outdentMessage),
124
- "aria-keyshortcuts": getAriaKeyshortcuts(toggleOutdentKeymap),
125
- title: jsx(ToolTipContent, {
126
- description: outdentMessage,
127
- keymap: toggleOutdentKeymap
128
- })
129
- }), showIndentationButtons && jsx(ToolbarButton, {
130
- buttonId: TOOLBAR_BUTTON.INDENT,
131
- testId: TOOLBAR_BUTTON.INDENT,
132
- ref: indentButtonRef,
133
- spacing: isReducedSpacing ? 'none' : 'default',
134
- onClick: handleOnItemActivated('indent'),
135
- iconBefore: jsx(IndentIcon, {
136
- color: "currentColor",
137
- spacing: "spacious",
138
- label: ""
139
- }),
140
- disabled: indentDisabled || disabled,
141
- "aria-label": tooltip(toggleIndentKeymap, indentMessage),
142
- "aria-keyshortcuts": getAriaKeyshortcuts(toggleIndentKeymap),
143
- title: jsx(ToolTipContent, {
144
- description: indentMessage,
145
- keymap: toggleIndentKeymap
146
- })
147
- })), !(pluginInjectionApi !== null && pluginInjectionApi !== void 0 && pluginInjectionApi.primaryToolbar) && /* eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage */
148
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
149
- jsx("span", {
150
- css: separatorStyles
151
- }))
152
- );
55
+ return /*#__PURE__*/React.createElement(ToolbarButtonGroup, null, /*#__PURE__*/React.createElement("div", {
56
+ role: "group",
57
+ "aria-label": labelListsFormat
58
+ }, /*#__PURE__*/React.createElement(ToolbarButton, {
59
+ buttonId: TOOLBAR_BUTTON.BULLET_LIST,
60
+ testId: labelUnorderedList,
61
+ spacing: isReducedSpacing ? 'none' : 'default',
62
+ onClick: handleOnItemActivated('bullet_list'),
63
+ selected: bulletListActive,
64
+ "aria-pressed": bulletListActive,
65
+ "aria-label": tooltip(toggleBulletListKeymap, labelUnorderedList),
66
+ "aria-keyshortcuts": getAriaKeyshortcuts(toggleBulletListKeymap),
67
+ disabled: bulletListDisabled || disabled,
68
+ title: /*#__PURE__*/React.createElement(ToolTipContent, {
69
+ description: labelUnorderedList,
70
+ keymap: toggleBulletListKeymap
71
+ }),
72
+ iconBefore: /*#__PURE__*/React.createElement(BulletedListIcon, {
73
+ label: "",
74
+ color: "currentColor",
75
+ spacing: "spacious"
76
+ })
77
+ }), /*#__PURE__*/React.createElement(ToolbarButton, {
78
+ buttonId: TOOLBAR_BUTTON.ORDERED_LIST,
79
+ testId: labelOrderedList,
80
+ spacing: isReducedSpacing ? 'none' : 'default',
81
+ onClick: handleOnItemActivated('ordered_list'),
82
+ selected: orderedListActive,
83
+ "aria-pressed": orderedListActive,
84
+ "aria-label": tooltip(toggleOrderedListKeymap, labelOrderedList),
85
+ "aria-keyshortcuts": getAriaKeyshortcuts(toggleOrderedListKeymap),
86
+ disabled: orderedListDisabled || disabled,
87
+ title: /*#__PURE__*/React.createElement(ToolTipContent, {
88
+ description: labelOrderedList,
89
+ keymap: toggleOrderedListKeymap
90
+ }),
91
+ iconBefore: /*#__PURE__*/React.createElement(NumberListIcon, {
92
+ color: "currentColor",
93
+ spacing: "spacious",
94
+ label: ""
95
+ })
96
+ }), showIndentationButtons && /*#__PURE__*/React.createElement(ToolbarButton, {
97
+ buttonId: TOOLBAR_BUTTON.OUTDENT,
98
+ testId: TOOLBAR_BUTTON.OUTDENT,
99
+ ref: outdentButtonRef,
100
+ spacing: isReducedSpacing ? 'none' : 'default',
101
+ onClick: handleOnItemActivated('outdent'),
102
+ iconBefore: /*#__PURE__*/React.createElement(OutdentIcon, {
103
+ color: "currentColor",
104
+ spacing: "spacious",
105
+ label: ""
106
+ }),
107
+ disabled: outdentDisabled || disabled,
108
+ "aria-label": tooltip(toggleOutdentKeymap, outdentMessage),
109
+ "aria-keyshortcuts": getAriaKeyshortcuts(toggleOutdentKeymap),
110
+ title: /*#__PURE__*/React.createElement(ToolTipContent, {
111
+ description: outdentMessage,
112
+ keymap: toggleOutdentKeymap
113
+ })
114
+ }), showIndentationButtons && /*#__PURE__*/React.createElement(ToolbarButton, {
115
+ buttonId: TOOLBAR_BUTTON.INDENT,
116
+ testId: TOOLBAR_BUTTON.INDENT,
117
+ ref: indentButtonRef,
118
+ spacing: isReducedSpacing ? 'none' : 'default',
119
+ onClick: handleOnItemActivated('indent'),
120
+ iconBefore: /*#__PURE__*/React.createElement(IndentIcon, {
121
+ color: "currentColor",
122
+ spacing: "spacious",
123
+ label: ""
124
+ }),
125
+ disabled: indentDisabled || disabled,
126
+ "aria-label": tooltip(toggleIndentKeymap, indentMessage),
127
+ "aria-keyshortcuts": getAriaKeyshortcuts(toggleIndentKeymap),
128
+ title: /*#__PURE__*/React.createElement(ToolTipContent, {
129
+ description: indentMessage,
130
+ keymap: toggleIndentKeymap
131
+ })
132
+ })), !(pluginInjectionApi !== null && pluginInjectionApi !== void 0 && pluginInjectionApi.primaryToolbar) && /*#__PURE__*/React.createElement(ToolbarSeparator, null));
153
133
  }