@atlaskit/editor-plugin-floating-toolbar 1.2.3 → 1.3.1

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 (16) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/cjs/plugin.js +3 -1
  3. package/dist/cjs/ui/Dropdown.js +7 -6
  4. package/dist/cjs/ui/ScrollButtons.js +11 -4
  5. package/dist/cjs/ui/Toolbar.js +44 -7
  6. package/dist/es2019/plugin.js +3 -1
  7. package/dist/es2019/ui/Dropdown.js +6 -6
  8. package/dist/es2019/ui/ScrollButtons.js +9 -9
  9. package/dist/es2019/ui/Toolbar.js +44 -50
  10. package/dist/esm/plugin.js +3 -1
  11. package/dist/esm/ui/Dropdown.js +6 -4
  12. package/dist/esm/ui/ScrollButtons.js +9 -3
  13. package/dist/esm/ui/Toolbar.js +44 -5
  14. package/dist/types/ui/Toolbar.d.ts +1 -0
  15. package/dist/types-ts4.5/ui/Toolbar.d.ts +1 -0
  16. package/package.json +13 -13
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # @atlaskit/editor-plugin-floating-toolbar
2
2
 
3
+ ## 1.3.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#92007](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/92007) [`85525725cb0d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/85525725cb0d) - Migrated to the new button component
8
+
9
+ ## 1.3.0
10
+
11
+ ### Minor Changes
12
+
13
+ - [#91934](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/91934) [`b76a78c6a199`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b76a78c6a199) - bumped editor-prosemirror version to 4.0.0
14
+
15
+ ### Patch Changes
16
+
17
+ - Updated dependencies
18
+
3
19
  ## 1.2.3
4
20
 
5
21
  ### Patch Changes
package/dist/cjs/plugin.js CHANGED
@@ -207,7 +207,8 @@ function ContentComponent(_ref5) {
207
207
  }
208
208
  var config = configWithNodeInfo.config,
209
209
  node = configWithNodeInfo.node;
210
- var items = config.items;
210
+ var items = config.items,
211
+ groupLabel = config.groupLabel;
211
212
  var title = config.title,
212
213
  _config$getDomRef = config.getDomRef,
213
214
  getDomRef = _config$getDomRef === void 0 ? getDomRefFromSelection : _config$getDomRef,
@@ -301,6 +302,7 @@ function ContentComponent(_ref5) {
301
302
  return /*#__PURE__*/_react.default.createElement(_ToolbarLoader.ToolbarLoader, {
302
303
  target: targetRef,
303
304
  items: toolbarItems,
305
+ groupLabel: groupLabel,
304
306
  node: node,
305
307
  dispatchCommand: dispatchCommand,
306
308
  editorView: editorView,
package/dist/cjs/ui/Dropdown.js CHANGED
@@ -13,26 +13,27 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
13
13
  var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
14
14
  var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
15
15
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
16
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
17
16
  var _react = _interopRequireWildcard(require("react"));
18
17
  var _react2 = require("@emotion/react");
19
18
  var _ui = require("@atlaskit/editor-common/ui");
20
19
  var _uiMenu = require("@atlaskit/editor-common/ui-menu");
21
20
  var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
22
21
  var _DropdownMenu = _interopRequireWildcard(require("./DropdownMenu"));
23
- var _templateObject, _templateObject2;
24
- /** @jsx jsx */
25
22
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
26
23
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
27
24
  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; }
28
25
  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
26
  function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
30
- function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
27
+ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /** @jsx jsx */
31
28
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
32
- var dropdownExpandContainer = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n margin: 0px ", ";\n"])), "var(--ds-space-negative-050, -4px)");
29
+ var dropdownExpandContainer = (0, _react2.css)({
30
+ margin: "0px ".concat("var(--ds-space-negative-050, -4px)")
31
+ });
33
32
 
34
33
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
35
- var iconGroup = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n"])));
34
+ var iconGroup = (0, _react2.css)({
35
+ display: 'flex'
36
+ });
36
37
  var CompositeIcon = function CompositeIcon(_ref) {
37
38
  var icon = _ref.icon;
38
39
  return (0, _react2.jsx)("div", {
package/dist/cjs/ui/ScrollButtons.js CHANGED
@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
7
7
  });
8
8
  exports.ScrollButtons = void 0;
9
9
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
10
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
11
10
  var _react = _interopRequireWildcard(require("react"));
12
11
  var _react2 = require("@emotion/react");
13
12
  var _rafSchd = _interopRequireDefault(require("raf-schd"));
@@ -16,12 +15,20 @@ var _ui = require("@atlaskit/editor-common/ui");
16
15
  var _chevronLeftLarge = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-left-large"));
17
16
  var _chevronRightLarge = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-right-large"));
18
17
  var _colors = require("@atlaskit/theme/colors");
19
- var _templateObject;
20
- /** @jsx jsx */
21
18
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
22
19
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
20
+ /** @jsx jsx */
21
+
23
22
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
24
- var toolbarScrollButtons = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: grid;\n grid-template-columns: 1fr 1fr;\n grid-gap: ", ";\n padding: ", " ", ";\n border-left: solid ", " 1px;\n flex-shrink: 0;\n align-items: center;\n"])), "var(--ds-space-050, 4px)", "var(--ds-space-050, 4px)", "var(--ds-space-100, 8px)", "var(--ds-border, ".concat(_colors.N30, ")"));
23
+ var toolbarScrollButtons = (0, _react2.css)({
24
+ display: 'grid',
25
+ gridTemplateColumns: '1fr 1fr',
26
+ gridGap: "var(--ds-space-050, 4px)",
27
+ padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-100, 8px)"),
28
+ borderLeft: "solid ".concat("var(--ds-border, ".concat(_colors.N30, ")"), " 1px"),
29
+ flexShrink: 0,
30
+ alignItems: 'center'
31
+ });
25
32
  var LeftIcon = _chevronLeftLarge.default;
26
33
  var RightIcon = _chevronRightLarge.default;
27
34
  var ScrollButtons = exports.ScrollButtons = function ScrollButtons(_ref) {
package/dist/cjs/ui/Toolbar.js CHANGED
@@ -15,7 +15,6 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
15
15
  var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
16
16
  var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
17
17
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
18
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
19
18
  var _react = _interopRequireWildcard(require("react"));
20
19
  var _react2 = require("@emotion/react");
21
20
  var _reactIntlNext = require("react-intl-next");
@@ -36,12 +35,10 @@ var _Input = _interopRequireDefault(require("./Input"));
36
35
  var _ScrollButtons = require("./ScrollButtons");
37
36
  var _Select = _interopRequireDefault(require("./Select"));
38
37
  var _Separator = _interopRequireDefault(require("./Separator"));
39
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
40
- /** @jsx jsx */
41
38
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
42
39
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
43
40
  function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
44
- function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
41
+ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation */ /** @jsx jsx */
45
42
  function groupItems(items) {
46
43
  var groupItems = items.reduce(function (accumulator, item, i) {
47
44
  var finalOutput = accumulator.finalOutput,
@@ -73,6 +70,7 @@ function groupItems(items) {
73
70
  }
74
71
  var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
75
72
  var items = _ref.items,
73
+ groupLabel = _ref.groupLabel,
76
74
  dispatchCommand = _ref.dispatchCommand,
77
75
  popupsMountPoint = _ref.popupsMountPoint,
78
76
  popupsBoundariesElement = _ref.popupsBoundariesElement,
@@ -270,7 +268,8 @@ var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
270
268
  return (0, _react2.jsx)("div", {
271
269
  key: index,
272
270
  css: buttonGroupStyles,
273
- role: "radiogroup"
271
+ role: "radiogroup",
272
+ "aria-label": groupLabel !== null && groupLabel !== void 0 ? groupLabel : undefined
274
273
  }, element.map(function (item, idx) {
275
274
  return renderItem(item, idx);
276
275
  }));
@@ -300,12 +299,50 @@ var buttonGroupStyles = (0, _react2.css)({
300
299
 
301
300
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
302
301
  var toolbarContainer = function toolbarContainer(scrollable, hasSelect, firstElementIsSelect) {
303
- return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n background-color: ", ";\n border-radius: ", ";\n box-shadow: ", ";\n display: flex;\n line-height: 1;\n box-sizing: border-box;\n\n & > div > div {\n align-items: center;\n }\n ", "\n"])), "var(--ds-surface-overlay, white)", "var(--ds-border-radius, 3px)", "var(--ds-shadow-overlay, ".concat("0 0 1px rgba(9, 30, 66, 0.31), 0 4px 8px -2px rgba(9, 30, 66, 0.25)", ")"), scrollable ? (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n ", "\n overflow: hidden;\n "])), hasSelect ? (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n height: 40px;\n "]))) : (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n height: 32px;\n "])))) : (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n padding: ", " ", ";\n ", "\n "])), "var(--ds-space-050, 4px)", "var(--ds-space-100, 8px)", firstElementIsSelect && (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n padding-left: ", ";\n "])), "var(--ds-space-050, 4px)")));
302
+ return (0, _react2.css)({
303
+ backgroundColor: "var(--ds-surface-overlay, white)",
304
+ borderRadius: "var(--ds-border-radius, 3px)",
305
+ boxShadow: "var(--ds-shadow-overlay, ".concat("0 0 1px rgba(9, 30, 66, 0.31), 0 4px 8px -2px rgba(9, 30, 66, 0.25)", ")"),
306
+ display: 'flex',
307
+ lineHeight: 1,
308
+ boxSizing: 'border-box',
309
+ '& > div > div': {
310
+ alignItems: 'center'
311
+ }
312
+ }, scrollable ? (0, _react2.css)(hasSelect ? (0, _react2.css)({
313
+ height: '40px'
314
+ }) : (0, _react2.css)({
315
+ height: '32px'
316
+ }), {
317
+ overflow: 'hidden'
318
+ }) : (0, _react2.css)({
319
+ padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-100, 8px)")
320
+ }, firstElementIsSelect && (0, _react2.css)({
321
+ paddingLeft: "var(--ds-space-050, 4px)"
322
+ })));
304
323
  };
305
324
 
306
325
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
307
326
  var toolbarOverflow = function toolbarOverflow(scrollable, scrollDisabled, firstElementIsSelect) {
308
- return (0, _react2.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n ", "\n"])), scrollable ? (0, _react2.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n ", "\n -webkit-overflow-scrolling: touch;\n padding: ", " 0 ", ";\n > div {\n > div:first-child {\n ", "\n }\n > div:last-child {\n margin-right: ", ";\n }\n }\n "])), scrollDisabled ? (0, _react2.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n overflow: hidden;\n "]))) : (0, _react2.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n overflow-x: auto;\n overflow-y: hidden;\n "]))), "var(--ds-space-050, 4px)", "var(--ds-space-600, 48px)", firstElementIsSelect ? (0, _react2.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n margin-left: ", ";\n "])), "var(--ds-space-050, 4px)") : (0, _react2.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n margin-left: ", ";\n "])), "var(--ds-space-100, 8px)"), "var(--ds-space-100, 8px)") : (0, _react2.css)({
327
+ return (0, _react2.css)(scrollable ? (0, _react2.css)(scrollDisabled ? (0, _react2.css)({
328
+ overflow: 'hidden'
329
+ }) : (0, _react2.css)({
330
+ overflowX: 'auto',
331
+ overflowY: 'hidden'
332
+ }), {
333
+ WebkitOverflowScrolling: 'touch',
334
+ padding: "var(--ds-space-050, 4px)".concat(" 0 ", "var(--ds-space-600, 48px)"),
335
+ '> div': {
336
+ '> div:first-child': firstElementIsSelect ? (0, _react2.css)({
337
+ marginLeft: "var(--ds-space-050, 4px)"
338
+ }) : (0, _react2.css)({
339
+ marginLeft: "var(--ds-space-100, 8px)"
340
+ }),
341
+ '> div:last-child': {
342
+ marginRight: "var(--ds-space-100, 8px)"
343
+ }
344
+ }
345
+ }) : (0, _react2.css)({
309
346
  display: 'flex'
310
347
  }));
311
348
  };
package/dist/es2019/plugin.js CHANGED
@@ -200,7 +200,8 @@ function ContentComponent({
200
200
  node
201
201
  } = configWithNodeInfo;
202
202
  let {
203
- items
203
+ items,
204
+ groupLabel
204
205
  } = config;
205
206
  const {
206
207
  title,
@@ -288,6 +289,7 @@ function ContentComponent({
288
289
  return /*#__PURE__*/React.createElement(ToolbarLoader, {
289
290
  target: targetRef,
290
291
  items: toolbarItems,
292
+ groupLabel: groupLabel,
291
293
  node: node,
292
294
  dispatchCommand: dispatchCommand,
293
295
  editorView: editorView,
package/dist/es2019/ui/Dropdown.js CHANGED
@@ -9,14 +9,14 @@ import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
9
9
  import DropdownMenu, { itemSpacing, menuItemDimensions } from './DropdownMenu';
10
10
 
11
11
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
12
- const dropdownExpandContainer = css`
13
- margin: 0px ${"var(--ds-space-negative-050, -4px)"};
14
- `;
12
+ const dropdownExpandContainer = css({
13
+ margin: `0px ${"var(--ds-space-negative-050, -4px)"}`
14
+ });
15
15
 
16
16
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
17
- const iconGroup = css`
18
- display: flex;
19
- `;
17
+ const iconGroup = css({
18
+ display: 'flex'
19
+ });
20
20
  const CompositeIcon = ({
21
21
  icon
22
22
  }) => jsx("div", {
package/dist/es2019/ui/ScrollButtons.js CHANGED
@@ -8,15 +8,15 @@ import ChevronLeftLargeIcon from '@atlaskit/icon/glyph/chevron-left-large';
8
8
  import ChevronRightLargeIcon from '@atlaskit/icon/glyph/chevron-right-large';
9
9
  import { N30 } from '@atlaskit/theme/colors';
10
10
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
11
- const toolbarScrollButtons = css`
12
- display: grid;
13
- grid-template-columns: 1fr 1fr;
14
- grid-gap: ${"var(--ds-space-050, 4px)"};
15
- padding: ${"var(--ds-space-050, 4px)"} ${"var(--ds-space-100, 8px)"};
16
- border-left: solid ${`var(--ds-border, ${N30})`} 1px;
17
- flex-shrink: 0;
18
- align-items: center;
19
- `;
11
+ const toolbarScrollButtons = css({
12
+ display: 'grid',
13
+ gridTemplateColumns: '1fr 1fr',
14
+ gridGap: "var(--ds-space-050, 4px)",
15
+ padding: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-100, 8px)"}`,
16
+ borderLeft: `solid ${`var(--ds-border, ${N30})`} 1px`,
17
+ flexShrink: 0,
18
+ alignItems: 'center'
19
+ });
20
20
  const LeftIcon = ChevronLeftLargeIcon;
21
21
  const RightIcon = ChevronRightLargeIcon;
22
22
  export const ScrollButtons = ({
package/dist/es2019/ui/Toolbar.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
3
+ /* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation */
3
4
  /** @jsx jsx */
4
5
  import React, { Component } from 'react';
5
6
  import { css, jsx } from '@emotion/react';
@@ -54,6 +55,7 @@ export function groupItems(items) {
54
55
  }
55
56
  const ToolbarItems = /*#__PURE__*/React.memo(({
56
57
  items,
58
+ groupLabel,
57
59
  dispatchCommand,
58
60
  popupsMountPoint,
59
61
  popupsBoundariesElement,
@@ -234,7 +236,8 @@ const ToolbarItems = /*#__PURE__*/React.memo(({
234
236
  return jsx("div", {
235
237
  key: index,
236
238
  css: buttonGroupStyles,
237
- role: "radiogroup"
239
+ role: "radiogroup",
240
+ "aria-label": groupLabel !== null && groupLabel !== void 0 ? groupLabel : undefined
238
241
  }, element.map((item, idx) => {
239
242
  return renderItem(item, idx);
240
243
  }));
@@ -261,59 +264,50 @@ const buttonGroupStyles = css({
261
264
  });
262
265
 
263
266
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
264
- const toolbarContainer = (scrollable, hasSelect, firstElementIsSelect) => css`
265
- background-color: ${"var(--ds-surface-overlay, white)"};
266
- border-radius: ${"var(--ds-border-radius, 3px)"};
267
- box-shadow: ${`var(--ds-shadow-overlay, ${`0 0 1px rgba(9, 30, 66, 0.31), 0 4px 8px -2px rgba(9, 30, 66, 0.25)`})`};
268
- display: flex;
269
- line-height: 1;
270
- box-sizing: border-box;
271
-
272
- & > div > div {
273
- align-items: center;
267
+ const toolbarContainer = (scrollable, hasSelect, firstElementIsSelect) => css({
268
+ backgroundColor: "var(--ds-surface-overlay, white)",
269
+ borderRadius: "var(--ds-border-radius, 3px)",
270
+ boxShadow: `var(--ds-shadow-overlay, ${`0 0 1px rgba(9, 30, 66, 0.31), 0 4px 8px -2px rgba(9, 30, 66, 0.25)`})`,
271
+ display: 'flex',
272
+ lineHeight: 1,
273
+ boxSizing: 'border-box',
274
+ '& > div > div': {
275
+ alignItems: 'center'
274
276
  }
275
- ${scrollable ? css`
276
- ${hasSelect ? css`
277
- height: 40px;
278
- ` : css`
279
- height: 32px;
280
- `}
281
- overflow: hidden;
282
- ` : css`
283
- padding: ${"var(--ds-space-050, 4px)"} ${"var(--ds-space-100, 8px)"};
284
- ${firstElementIsSelect && css`
285
- padding-left: ${"var(--ds-space-050, 4px)"};
286
- `}
287
- `}
288
- `;
277
+ }, scrollable ? css(hasSelect ? css({
278
+ height: '40px'
279
+ }) : css({
280
+ height: '32px'
281
+ }), {
282
+ overflow: 'hidden'
283
+ }) : css({
284
+ padding: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-100, 8px)"}`
285
+ }, firstElementIsSelect && css({
286
+ paddingLeft: "var(--ds-space-050, 4px)"
287
+ })));
289
288
 
290
289
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
291
- const toolbarOverflow = (scrollable, scrollDisabled, firstElementIsSelect) => css`
292
- ${scrollable ? css`
293
- ${scrollDisabled ? css`
294
- overflow: hidden;
295
- ` : css`
296
- overflow-x: auto;
297
- overflow-y: hidden;
298
- `}
299
- -webkit-overflow-scrolling: touch;
300
- padding: ${"var(--ds-space-050, 4px)"} 0 ${"var(--ds-space-600, 48px)"};
301
- > div {
302
- > div:first-child {
303
- ${firstElementIsSelect ? css`
304
- margin-left: ${"var(--ds-space-050, 4px)"};
305
- ` : css`
306
- margin-left: ${"var(--ds-space-100, 8px)"};
307
- `}
308
- }
309
- > div:last-child {
310
- margin-right: ${"var(--ds-space-100, 8px)"};
311
- }
312
- }
313
- ` : css({
290
+ const toolbarOverflow = (scrollable, scrollDisabled, firstElementIsSelect) => css(scrollable ? css(scrollDisabled ? css({
291
+ overflow: 'hidden'
292
+ }) : css({
293
+ overflowX: 'auto',
294
+ overflowY: 'hidden'
295
+ }), {
296
+ WebkitOverflowScrolling: 'touch',
297
+ padding: `${"var(--ds-space-050, 4px)"} 0 ${"var(--ds-space-600, 48px)"}`,
298
+ '> div': {
299
+ '> div:first-child': firstElementIsSelect ? css({
300
+ marginLeft: "var(--ds-space-050, 4px)"
301
+ }) : css({
302
+ marginLeft: "var(--ds-space-100, 8px)"
303
+ }),
304
+ '> div:last-child': {
305
+ marginRight: "var(--ds-space-100, 8px)"
306
+ }
307
+ }
308
+ }) : css({
314
309
  display: 'flex'
315
- })}
316
- `;
310
+ }));
317
311
  // eslint-disable-next-line @repo/internal/react/no-class-components
318
312
  class Toolbar extends Component {
319
313
  constructor(props) {
package/dist/esm/plugin.js CHANGED
@@ -198,7 +198,8 @@ function ContentComponent(_ref5) {
198
198
  }
199
199
  var config = configWithNodeInfo.config,
200
200
  node = configWithNodeInfo.node;
201
- var items = config.items;
201
+ var items = config.items,
202
+ groupLabel = config.groupLabel;
202
203
  var title = config.title,
203
204
  _config$getDomRef = config.getDomRef,
204
205
  getDomRef = _config$getDomRef === void 0 ? getDomRefFromSelection : _config$getDomRef,
@@ -292,6 +293,7 @@ function ContentComponent(_ref5) {
292
293
  return /*#__PURE__*/React.createElement(ToolbarLoader, {
293
294
  target: targetRef,
294
295
  items: toolbarItems,
296
+ groupLabel: groupLabel,
295
297
  node: node,
296
298
  dispatchCommand: dispatchCommand,
297
299
  editorView: editorView,
package/dist/esm/ui/Dropdown.js CHANGED
@@ -5,8 +5,6 @@ import _inherits from "@babel/runtime/helpers/inherits";
5
5
  import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
6
6
  import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
7
7
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
8
- import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
9
- var _templateObject, _templateObject2;
10
8
  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
9
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
12
10
  function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
@@ -21,10 +19,14 @@ import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
21
19
  import DropdownMenu, { itemSpacing, menuItemDimensions } from './DropdownMenu';
22
20
 
23
21
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
24
- var dropdownExpandContainer = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n margin: 0px ", ";\n"])), "var(--ds-space-negative-050, -4px)");
22
+ var dropdownExpandContainer = css({
23
+ margin: "0px ".concat("var(--ds-space-negative-050, -4px)")
24
+ });
25
25
 
26
26
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
27
- var iconGroup = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n"])));
27
+ var iconGroup = css({
28
+ display: 'flex'
29
+ });
28
30
  var CompositeIcon = function CompositeIcon(_ref) {
29
31
  var icon = _ref.icon;
30
32
  return jsx("div", {
package/dist/esm/ui/ScrollButtons.js CHANGED
@@ -1,6 +1,4 @@
1
1
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
- import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
3
- var _templateObject;
4
2
  /** @jsx jsx */
5
3
  import React, { useEffect, useRef, useState } from 'react';
6
4
  import { css, jsx } from '@emotion/react';
@@ -11,7 +9,15 @@ import ChevronLeftLargeIcon from '@atlaskit/icon/glyph/chevron-left-large';
11
9
  import ChevronRightLargeIcon from '@atlaskit/icon/glyph/chevron-right-large';
12
10
  import { N30 } from '@atlaskit/theme/colors';
13
11
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
14
- var toolbarScrollButtons = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: grid;\n grid-template-columns: 1fr 1fr;\n grid-gap: ", ";\n padding: ", " ", ";\n border-left: solid ", " 1px;\n flex-shrink: 0;\n align-items: center;\n"])), "var(--ds-space-050, 4px)", "var(--ds-space-050, 4px)", "var(--ds-space-100, 8px)", "var(--ds-border, ".concat(N30, ")"));
12
+ var toolbarScrollButtons = css({
13
+ display: 'grid',
14
+ gridTemplateColumns: '1fr 1fr',
15
+ gridGap: "var(--ds-space-050, 4px)",
16
+ padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-100, 8px)"),
17
+ borderLeft: "solid ".concat("var(--ds-border, ".concat(N30, ")"), " 1px"),
18
+ flexShrink: 0,
19
+ alignItems: 'center'
20
+ });
15
21
  var LeftIcon = ChevronLeftLargeIcon;
16
22
  var RightIcon = ChevronRightLargeIcon;
17
23
  export var ScrollButtons = function ScrollButtons(_ref) {
package/dist/esm/ui/Toolbar.js CHANGED
@@ -6,10 +6,9 @@ import _inherits from "@babel/runtime/helpers/inherits";
6
6
  import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
7
7
  import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
8
8
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
9
- import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
10
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
11
9
  function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
12
10
  function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
11
+ /* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation */
13
12
  /** @jsx jsx */
14
13
  import React, { Component } from 'react';
15
14
  import { css, jsx } from '@emotion/react';
@@ -62,6 +61,7 @@ export function groupItems(items) {
62
61
  }
63
62
  var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
64
63
  var items = _ref.items,
64
+ groupLabel = _ref.groupLabel,
65
65
  dispatchCommand = _ref.dispatchCommand,
66
66
  popupsMountPoint = _ref.popupsMountPoint,
67
67
  popupsBoundariesElement = _ref.popupsBoundariesElement,
@@ -259,7 +259,8 @@ var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
259
259
  return jsx("div", {
260
260
  key: index,
261
261
  css: buttonGroupStyles,
262
- role: "radiogroup"
262
+ role: "radiogroup",
263
+ "aria-label": groupLabel !== null && groupLabel !== void 0 ? groupLabel : undefined
263
264
  }, element.map(function (item, idx) {
264
265
  return renderItem(item, idx);
265
266
  }));
@@ -289,12 +290,50 @@ var buttonGroupStyles = css({
289
290
 
290
291
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
291
292
  var toolbarContainer = function toolbarContainer(scrollable, hasSelect, firstElementIsSelect) {
292
- return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background-color: ", ";\n border-radius: ", ";\n box-shadow: ", ";\n display: flex;\n line-height: 1;\n box-sizing: border-box;\n\n & > div > div {\n align-items: center;\n }\n ", "\n"])), "var(--ds-surface-overlay, white)", "var(--ds-border-radius, 3px)", "var(--ds-shadow-overlay, ".concat("0 0 1px rgba(9, 30, 66, 0.31), 0 4px 8px -2px rgba(9, 30, 66, 0.25)", ")"), scrollable ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n ", "\n overflow: hidden;\n "])), hasSelect ? css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n height: 40px;\n "]))) : css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n height: 32px;\n "])))) : css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n padding: ", " ", ";\n ", "\n "])), "var(--ds-space-050, 4px)", "var(--ds-space-100, 8px)", firstElementIsSelect && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n padding-left: ", ";\n "])), "var(--ds-space-050, 4px)")));
293
+ return css({
294
+ backgroundColor: "var(--ds-surface-overlay, white)",
295
+ borderRadius: "var(--ds-border-radius, 3px)",
296
+ boxShadow: "var(--ds-shadow-overlay, ".concat("0 0 1px rgba(9, 30, 66, 0.31), 0 4px 8px -2px rgba(9, 30, 66, 0.25)", ")"),
297
+ display: 'flex',
298
+ lineHeight: 1,
299
+ boxSizing: 'border-box',
300
+ '& > div > div': {
301
+ alignItems: 'center'
302
+ }
303
+ }, scrollable ? css(hasSelect ? css({
304
+ height: '40px'
305
+ }) : css({
306
+ height: '32px'
307
+ }), {
308
+ overflow: 'hidden'
309
+ }) : css({
310
+ padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-100, 8px)")
311
+ }, firstElementIsSelect && css({
312
+ paddingLeft: "var(--ds-space-050, 4px)"
313
+ })));
293
314
  };
294
315
 
295
316
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
296
317
  var toolbarOverflow = function toolbarOverflow(scrollable, scrollDisabled, firstElementIsSelect) {
297
- return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n ", "\n"])), scrollable ? css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n ", "\n -webkit-overflow-scrolling: touch;\n padding: ", " 0 ", ";\n > div {\n > div:first-child {\n ", "\n }\n > div:last-child {\n margin-right: ", ";\n }\n }\n "])), scrollDisabled ? css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n overflow: hidden;\n "]))) : css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n overflow-x: auto;\n overflow-y: hidden;\n "]))), "var(--ds-space-050, 4px)", "var(--ds-space-600, 48px)", firstElementIsSelect ? css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n margin-left: ", ";\n "])), "var(--ds-space-050, 4px)") : css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n margin-left: ", ";\n "])), "var(--ds-space-100, 8px)"), "var(--ds-space-100, 8px)") : css({
318
+ return css(scrollable ? css(scrollDisabled ? css({
319
+ overflow: 'hidden'
320
+ }) : css({
321
+ overflowX: 'auto',
322
+ overflowY: 'hidden'
323
+ }), {
324
+ WebkitOverflowScrolling: 'touch',
325
+ padding: "var(--ds-space-050, 4px)".concat(" 0 ", "var(--ds-space-600, 48px)"),
326
+ '> div': {
327
+ '> div:first-child': firstElementIsSelect ? css({
328
+ marginLeft: "var(--ds-space-050, 4px)"
329
+ }) : css({
330
+ marginLeft: "var(--ds-space-100, 8px)"
331
+ }),
332
+ '> div:last-child': {
333
+ marginRight: "var(--ds-space-100, 8px)"
334
+ }
335
+ }
336
+ }) : css({
298
337
  display: 'flex'
299
338
  }));
300
339
  };
package/dist/types/ui/Toolbar.d.ts CHANGED
@@ -20,6 +20,7 @@ export interface Props {
20
20
  popupsScrollableElement?: HTMLElement;
21
21
  providerFactory?: ProviderFactory;
22
22
  className?: string;
23
+ groupLabel?: string;
23
24
  focusEditor?: () => void;
24
25
  editorView?: EditorView;
25
26
  dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
package/dist/types-ts4.5/ui/Toolbar.d.ts CHANGED
@@ -20,6 +20,7 @@ export interface Props {
20
20
  popupsScrollableElement?: HTMLElement;
21
21
  providerFactory?: ProviderFactory;
22
22
  className?: string;
23
+ groupLabel?: string;
23
24
  focusEditor?: () => void;
24
25
  editorView?: EditorView;
25
26
  dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-floating-toolbar",
3
- "version": "1.2.3",
3
+ "version": "1.3.1",
4
4
  "description": "Floating toolbar plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -25,27 +25,27 @@
25
25
  },
26
26
  "dependencies": {
27
27
  "@atlaskit/adf-utils": "^19.0.0",
28
- "@atlaskit/button": "^17.11.0",
28
+ "@atlaskit/button": "^17.14.0",
29
29
  "@atlaskit/checkbox": "^13.1.0",
30
- "@atlaskit/editor-common": "^78.23.0",
30
+ "@atlaskit/editor-common": "^78.31.0",
31
31
  "@atlaskit/editor-palette": "1.5.3",
32
- "@atlaskit/editor-plugin-context-panel": "^1.0.0",
33
- "@atlaskit/editor-plugin-copy-button": "^1.0.0",
34
- "@atlaskit/editor-plugin-decorations": "^1.0.0",
35
- "@atlaskit/editor-plugin-editor-disabled": "^1.0.0",
36
- "@atlaskit/editor-plugin-editor-viewmode": "^1.0.0",
37
- "@atlaskit/editor-plugin-extension": "^1.1.0",
38
- "@atlaskit/editor-plugin-table": "^7.6.0",
39
- "@atlaskit/editor-prosemirror": "3.0.0",
32
+ "@atlaskit/editor-plugin-context-panel": "^1.1.0",
33
+ "@atlaskit/editor-plugin-copy-button": "^1.1.0",
34
+ "@atlaskit/editor-plugin-decorations": "^1.1.0",
35
+ "@atlaskit/editor-plugin-editor-disabled": "^1.1.0",
36
+ "@atlaskit/editor-plugin-editor-viewmode": "^1.1.0",
37
+ "@atlaskit/editor-plugin-extension": "^1.3.0",
38
+ "@atlaskit/editor-plugin-table": "^7.8.0",
39
+ "@atlaskit/editor-prosemirror": "4.0.0",
40
40
  "@atlaskit/emoji": "^67.6.0",
41
41
  "@atlaskit/icon": "^22.1.0",
42
42
  "@atlaskit/menu": "^2.1.0",
43
- "@atlaskit/modal-dialog": "^12.10.0",
43
+ "@atlaskit/modal-dialog": "^12.11.0",
44
44
  "@atlaskit/platform-feature-flags": "^0.2.5",
45
45
  "@atlaskit/select": "^17.6.0",
46
46
  "@atlaskit/theme": "^12.7.0",
47
47
  "@atlaskit/tokens": "^1.43.0",
48
- "@atlaskit/tooltip": "^18.1.0",
48
+ "@atlaskit/tooltip": "^18.2.0",
49
49
  "@babel/runtime": "^7.0.0",
50
50
  "@emotion/react": "^11.7.1",
51
51
  "lodash": "^4.17.21",