@atlaskit/editor-plugin-floating-toolbar 1.1.0 → 1.2.0

package/.eslintrc.js

@@ -0,0 +1,18 @@
+module.exports = {
+  rules: {
+    '@typescript-eslint/no-duplicate-imports': 'error',
+    '@typescript-eslint/no-explicit-any': 'warn',
+    '@atlaskit/design-system/ensure-design-token-usage/preview': [
+      'error',
+      { domains: ['spacing'], shouldEnforceFallbacks: false },
+    ],
+  },
+  overrides: [
+    {
+      files: ['**/__tests__/**/*.{js,ts,tsx}', '**/examples/**/*.{js,ts,tsx}'],
+      rules: {
+        '@typescript-eslint/no-explicit-any': 'off',
+      },
+    },
+  ],
+};

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-floating-toolbar
 
+## 1.2.0
+
+### Minor Changes
+
+- [#70153](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/70153) [`3a34e7545f18`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3a34e7545f18) - ECA11Y-36: Flaoting toolbar group buttons into radiogroup buttons structure
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.1.1
+
+### Patch Changes
+
+- [#73177](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/73177) [`22452599ed8f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/22452599ed8f) - Move styling for certain packages to tokens.
+
 ## 1.1.0
 
 ### Minor Changes

package/dist/cjs/ui/DropdownMenu.js

@@ -11,7 +11,6 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
@@ -21,25 +20,37 @@ var _menu = require("@atlaskit/menu");
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
-var _templateObject, _templateObject2, _templateObject3;
-/** @jsx jsx */
-// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 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); }; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /** @jsx jsx */ // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 var menuItemDimensions = exports.menuItemDimensions = {
   width: 175,
   height: 32
 };
+var spacerStyles = (0, _react2.css)({
+  display: 'flex',
+  flex: 1,
+  padding: "var(--ds-space-100, 8px)"
+});
 
-// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-var spacer = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex: 1;\n  padding: ", ";\n"])), "var(--ds-space-100, 8px)");
-
-// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-var menuContainer = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  min-width: ", "px;\n\n  // temporary solution to retain spacing defined by @atlaskit/Item\n  & button {\n    min-height: ", ";\n    padding: ", " ", " 7px;\n\n    & > [data-item-elem-before] {\n      margin-right: ", ";\n    }\n  }\n"])), menuItemDimensions.width, "var(--ds-space-400, 32px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-050, 4px)");
-
-// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-var label = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  width: 100%;\n"])));
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+var menuContainerStyles = (0, _react2.css)({
+  minWidth: "".concat(menuItemDimensions.width, "px"),
+  // temporary solution to retain spacing defined by @atlaskit/Item
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  '& button': {
+    minHeight: "var(--ds-space-400, 32px)",
+    padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-100, 8px)", " 7px"),
+    // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+    '& > [data-item-elem-before]': {
+      marginRight: "var(--ds-space-050, 4px)"
+    }
+  }
+});
+var labelStyles = (0, _react2.css)({
+  display: 'inline-block',
+  width: '100%'
+});
 
 // TODO: Migrate away from gridSize
 // Recommendation: Replace with 4 as itemSpacing is used in calculations expecting a number
@@ -150,7 +161,7 @@ var DropdownMenuItem = function DropdownMenuItem(_ref) {
     onBlur: handleItemOnBlur
   }, (0, _react2.jsx)("span", {
     ref: labelRef,
-    css: label
+    css: labelStyles
   }, item.title));
   if (tooltipContent) {
     return (0, _react2.jsx)(_tooltip.default, {
@@ -179,7 +190,7 @@ var Dropdown = /*#__PURE__*/function (_Component) {
         intl = _this$props.intl,
         editorView = _this$props.editorView;
       return (0, _react2.jsx)("div", {
-        css: menuContainer
+        css: menuContainerStyles
       }, items.filter(function (item) {
         return !item.hidden;
       }).map(function (item, idx) {
@@ -207,7 +218,7 @@ var Dropdown = /*#__PURE__*/function (_Component) {
         });
       }
       return (0, _react2.jsx)("span", {
-        css: spacer
+        css: spacerStyles
       });
     }
   }]);

package/dist/cjs/ui/Select.js

@@ -34,7 +34,9 @@ function Search(props) {
         var controlWrapper = (selectRef === null || selectRef === void 0 || (_selectRef$current = selectRef.current) === null || _selectRef$current === void 0 || (_selectRef$current = _selectRef$current.select) === null || _selectRef$current === void 0 || (_selectRef$current = _selectRef$current.controlRef) === null || _selectRef$current === void 0 ? void 0 : _selectRef$current.parentNode) || (selectRef === null || selectRef === void 0 || (_selectRef$current2 = selectRef.current) === null || _selectRef$current2 === void 0 || (_selectRef$current2 = _selectRef$current2.select) === null || _selectRef$current2 === void 0 || (_selectRef$current2 = _selectRef$current2.select) === null || _selectRef$current2 === void 0 || (_selectRef$current2 = _selectRef$current2.controlRef) === null || _selectRef$current2 === void 0 ? void 0 : _selectRef$current2.parentNode);
         var menuPortalStyles = controlWrapper && props.setDisableParentScroll ? {
           // since the portal is now outside, we need to position it as before
+          // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
           top: controlWrapper.offsetTop,
+          // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
           left: controlWrapper.offsetLeft,
           height: controlWrapper.offsetHeight,
           width: width

package/dist/cjs/ui/Toolbar.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+exports.groupItems = groupItems;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -25,6 +26,7 @@ var _uiColor = require("@atlaskit/editor-common/ui-color");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _editorPalette = require("@atlaskit/editor-palette");
 var _commands = require("@atlaskit/editor-plugin-table/commands");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _forceFocus = require("../pm-plugins/force-focus");
 var _commands2 = require("../pm-plugins/toolbar-data/commands");
 var _Dropdown = _interopRequireDefault(require("./Dropdown"));
@@ -34,12 +36,41 @@ var _Input = _interopRequireDefault(require("./Input"));
 var _ScrollButtons = require("./ScrollButtons");
 var _Select = _interopRequireDefault(require("./Select"));
 var _Separator = _interopRequireDefault(require("./Separator"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
 /** @jsx jsx */
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 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); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function groupItems(items) {
+  var groupItems = items.reduce(function (accumulator, item, i) {
+    var finalOutput = accumulator.finalOutput,
+      buttonGroup = accumulator.buttonGroup;
+    if (item.type === 'button') {
+      var notLastItem = i < items.length - 1;
+      var nextItemIsButton = items[i + 1] && items[i + 1].type === 'button';
+      var wasPreviousButton = items[i - 1] && items[i - 1].type === 'button';
+      var isRadioButton = notLastItem && nextItemIsButton || wasPreviousButton;
+      if (isRadioButton) {
+        item.isRadioButton = true;
+        buttonGroup.push(item);
+        if (!nextItemIsButton && wasPreviousButton) {
+          finalOutput.push(buttonGroup);
+          accumulator.buttonGroup = [];
+        }
+      } else {
+        finalOutput.push(item);
+      }
+    } else {
+      finalOutput.push(item);
+    }
+    return accumulator;
+  }, {
+    buttonGroup: [],
+    finalOutput: []
+  });
+  return groupItems.finalOutput;
+}
 var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
   var items = _ref.items,
     dispatchCommand = _ref.dispatchCommand,
@@ -56,9 +87,7 @@ var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
     mountRef = _ref.mountRef,
     api = _ref.api;
   var emojiAndColourPickerMountPoint = scrollable ? popupsMountPoint || (editorView === null || editorView === void 0 ? void 0 : editorView.dom.closest('.fabric-editor-popup-scroll-parent')) || (editorView === null || editorView === void 0 ? void 0 : editorView.dom.closest('.ak-editor-content-area')) || undefined : popupsMountPoint;
-  return (0, _react2.jsx)(_buttonGroup.default, null, items.filter(function (item) {
-    return !item.hidden;
-  }).map(function (item, idx) {
+  var renderItem = function renderItem(item, idx) {
     var _api$contextPanel, _api$extension;
     switch (item.type) {
       case 'button':
@@ -102,7 +131,8 @@ var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
           testId: item.testId,
           hideTooltipOnClick: item.hideTooltipOnClick,
           ariaHasPopup: item.ariaHasPopup,
-          tabIndex: item.tabIndex
+          tabIndex: item.tabIndex,
+          isRadioButton: item.isRadioButton
         }, item.showTitle && item.title);
       case 'input':
         return (0, _react2.jsx)(_Input.default, {
@@ -229,7 +259,32 @@ var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
           key: idx
         });
     }
-  }));
+  };
+  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-floating-toolbar-markup_vexmo')) {
+    var groupedItems = groupItems(items.filter(function (item) {
+      return !item.hidden;
+    }));
+    return (0, _react2.jsx)(_buttonGroup.default, null, groupedItems.map(function (element, index) {
+      var isGroup = Array.isArray(element);
+      if (isGroup) {
+        return (0, _react2.jsx)("div", {
+          key: index,
+          css: buttonGroupStyles,
+          role: "radiogroup"
+        }, element.map(function (item, idx) {
+          return renderItem(item, idx);
+        }));
+      } else {
+        return renderItem(element, index);
+      }
+    }));
+  } else {
+    return (0, _react2.jsx)(_buttonGroup.default, null, items.filter(function (item) {
+      return !item.hidden;
+    }).map(function (item, index) {
+      return renderItem(item, index);
+    }));
+  }
 }, function (prevProps, nextProps) {
   if (!nextProps.node) {
     return false;
@@ -238,6 +293,10 @@ var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
   // otherwise it causes an issue where multiple popups stays open
   return !(prevProps.node.type !== nextProps.node.type || prevProps.node.attrs.localId !== nextProps.node.attrs.localId || !(0, _floatingToolbar.areSameItems)(prevProps.items, nextProps.items) || !prevProps.mounted !== !nextProps.mounted);
 });
+var buttonGroupStyles = (0, _react2.css)({
+  display: 'flex',
+  gap: "var(--ds-space-050, 4px)"
+});
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 var toolbarContainer = function toolbarContainer(scrollable, hasSelect, firstElementIsSelect) {
@@ -246,7 +305,9 @@ var toolbarContainer = function toolbarContainer(scrollable, hasSelect, firstEle
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 var toolbarOverflow = function toolbarOverflow(scrollable, scrollDisabled, firstElementIsSelect) {
-  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 50px;\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)", 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)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n        display: flex;\n      "]))));
+  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)({
+    display: 'flex'
+  }));
 };
 // eslint-disable-next-line @repo/internal/react/no-class-components
 var Toolbar = /*#__PURE__*/function (_Component) {

package/dist/es2019/ui/DropdownMenu.js

@@ -1,6 +1,5 @@
 /** @jsx jsx */
-import { createRef, useCallback, useEffect, useState } from 'react';
-import { Component } from 'react';
+import { Component, createRef, useCallback, useEffect, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 
@@ -16,34 +15,30 @@ export const menuItemDimensions = {
   width: 175,
   height: 32
 };
+const spacerStyles = css({
+  display: 'flex',
+  flex: 1,
+  padding: "var(--ds-space-100, 8px)"
+});
 
-// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-const spacer = css`
-  display: flex;
-  flex: 1;
-  padding: ${"var(--ds-space-100, 8px)"};
-`;
-
-// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-const menuContainer = css`
-  min-width: ${menuItemDimensions.width}px;
-
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+const menuContainerStyles = css({
+  minWidth: `${menuItemDimensions.width}px`,
   // temporary solution to retain spacing defined by @atlaskit/Item
-  & button {
-    min-height: ${"var(--ds-space-400, 32px)"};
-    padding: ${"var(--ds-space-100, 8px)"} ${"var(--ds-space-100, 8px)"} 7px;
-
-    & > [data-item-elem-before] {
-      margin-right: ${"var(--ds-space-050, 4px)"};
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  '& button': {
+    minHeight: "var(--ds-space-400, 32px)",
+    padding: `${"var(--ds-space-100, 8px)"} ${"var(--ds-space-100, 8px)"} 7px`,
+    // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+    '& > [data-item-elem-before]': {
+      marginRight: "var(--ds-space-050, 4px)"
     }
   }
-`;
-
-// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-const label = css`
-  display: inline-block;
-  width: 100%;
-`;
+});
+const labelStyles = css({
+  display: 'inline-block',
+  width: '100%'
+});
 
 // TODO: Migrate away from gridSize
 // Recommendation: Replace with 4 as itemSpacing is used in calculations expecting a number
@@ -152,7 +147,7 @@ const DropdownMenuItem = ({
     onBlur: handleItemOnBlur
   }, jsx("span", {
     ref: labelRef,
-    css: label
+    css: labelStyles
   }, item.title));
   if (tooltipContent) {
     return jsx(Tooltip, {
@@ -173,7 +168,7 @@ class Dropdown extends Component {
       editorView
     } = this.props;
     return jsx("div", {
-      css: menuContainer
+      css: menuContainerStyles
     }, items.filter(item => !item.hidden).map((item, idx) => jsx(DropdownMenuItem, {
       key: idx,
       item: item,
@@ -198,7 +193,7 @@ class Dropdown extends Component {
       });
     }
     return jsx("span", {
-      css: spacer
+      css: spacerStyles
     });
   }
 }

package/dist/es2019/ui/Input.js

@@ -1,7 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
-import React from 'react';
-import { Component } from 'react';
+import React, { Component } from 'react';
 import { jsx } from '@emotion/react';
 import { panelTextInput } from '@atlaskit/editor-common/ui';
 // eslint-disable-next-line @repo/internal/react/no-class-components

package/dist/es2019/ui/Select.js

@@ -20,7 +20,9 @@ export default function Search(props) {
       const controlWrapper = (selectRef === null || selectRef === void 0 ? void 0 : (_selectRef$current = selectRef.current) === null || _selectRef$current === void 0 ? void 0 : (_selectRef$current$se = _selectRef$current.select) === null || _selectRef$current$se === void 0 ? void 0 : (_selectRef$current$se2 = _selectRef$current$se.controlRef) === null || _selectRef$current$se2 === void 0 ? void 0 : _selectRef$current$se2.parentNode) || (selectRef === null || selectRef === void 0 ? void 0 : (_selectRef$current2 = selectRef.current) === null || _selectRef$current2 === void 0 ? void 0 : (_selectRef$current2$s = _selectRef$current2.select) === null || _selectRef$current2$s === void 0 ? void 0 : (_selectRef$current2$s2 = _selectRef$current2$s.select) === null || _selectRef$current2$s2 === void 0 ? void 0 : (_selectRef$current2$s3 = _selectRef$current2$s2.controlRef) === null || _selectRef$current2$s3 === void 0 ? void 0 : _selectRef$current2$s3.parentNode);
       const menuPortalStyles = controlWrapper && props.setDisableParentScroll ? {
         // since the portal is now outside, we need to position it as before
+        // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
         top: controlWrapper.offsetTop,
+        // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
         left: controlWrapper.offsetLeft,
         height: controlWrapper.offsetHeight,
         width

package/dist/es2019/ui/Toolbar.js

@@ -5,14 +5,13 @@ import React, { Component } from 'react';
 import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import ButtonGroup from '@atlaskit/button/button-group';
-import { areSameItems } from '@atlaskit/editor-common/floating-toolbar';
-import { messages } from '@atlaskit/editor-common/floating-toolbar';
+import { areSameItems, messages } from '@atlaskit/editor-common/floating-toolbar';
 import { Announcer, FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
 import { backgroundPaletteTooltipMessages } from '@atlaskit/editor-common/ui-color';
-import { ToolbarArrowKeyNavigationProvider } from '@atlaskit/editor-common/ui-menu';
-import { ColorPickerButton } from '@atlaskit/editor-common/ui-menu';
+import { ColorPickerButton, ToolbarArrowKeyNavigationProvider } from '@atlaskit/editor-common/ui-menu';
 import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
 import { clearHoverSelection } from '@atlaskit/editor-plugin-table/commands';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { checkShouldForceFocusAndApply, forceFocusSelector } from '../pm-plugins/force-focus';
 import { showConfirmDialog } from '../pm-plugins/toolbar-data/commands';
 import Dropdown from './Dropdown';
@@ -22,6 +21,37 @@ import Input from './Input';
 import { ScrollButtons } from './ScrollButtons';
 import Select from './Select';
 import Separator from './Separator';
+export function groupItems(items) {
+  const groupItems = items.reduce((accumulator, item, i) => {
+    let {
+      finalOutput,
+      buttonGroup
+    } = accumulator;
+    if (item.type === 'button') {
+      const notLastItem = i < items.length - 1;
+      const nextItemIsButton = items[i + 1] && items[i + 1].type === 'button';
+      const wasPreviousButton = items[i - 1] && items[i - 1].type === 'button';
+      const isRadioButton = notLastItem && nextItemIsButton || wasPreviousButton;
+      if (isRadioButton) {
+        item.isRadioButton = true;
+        buttonGroup.push(item);
+        if (!nextItemIsButton && wasPreviousButton) {
+          finalOutput.push(buttonGroup);
+          accumulator.buttonGroup = [];
+        }
+      } else {
+        finalOutput.push(item);
+      }
+    } else {
+      finalOutput.push(item);
+    }
+    return accumulator;
+  }, {
+    buttonGroup: [],
+    finalOutput: []
+  });
+  return groupItems.finalOutput;
+}
 const ToolbarItems = /*#__PURE__*/React.memo(({
   items,
   dispatchCommand,
@@ -39,7 +69,7 @@ const ToolbarItems = /*#__PURE__*/React.memo(({
   api
 }) => {
   const emojiAndColourPickerMountPoint = scrollable ? popupsMountPoint || (editorView === null || editorView === void 0 ? void 0 : editorView.dom.closest('.fabric-editor-popup-scroll-parent')) || (editorView === null || editorView === void 0 ? void 0 : editorView.dom.closest('.ak-editor-content-area')) || undefined : popupsMountPoint;
-  return jsx(ButtonGroup, null, items.filter(item => !item.hidden).map((item, idx) => {
+  const renderItem = (item, idx) => {
     var _api$contextPanel, _api$extension;
     switch (item.type) {
       case 'button':
@@ -75,7 +105,8 @@ const ToolbarItems = /*#__PURE__*/React.memo(({
           testId: item.testId,
           hideTooltipOnClick: item.hideTooltipOnClick,
           ariaHasPopup: item.ariaHasPopup,
-          tabIndex: item.tabIndex
+          tabIndex: item.tabIndex,
+          isRadioButton: item.isRadioButton
         }, item.showTitle && item.title);
       case 'input':
         return jsx(Input, {
@@ -194,7 +225,28 @@ const ToolbarItems = /*#__PURE__*/React.memo(({
           key: idx
         });
     }
-  }));
+  };
+  if (getBooleanFF('platform.editor.a11y-floating-toolbar-markup_vexmo')) {
+    const groupedItems = groupItems(items.filter(item => !item.hidden));
+    return jsx(ButtonGroup, null, groupedItems.map((element, index) => {
+      const isGroup = Array.isArray(element);
+      if (isGroup) {
+        return jsx("div", {
+          key: index,
+          css: buttonGroupStyles,
+          role: "radiogroup"
+        }, element.map((item, idx) => {
+          return renderItem(item, idx);
+        }));
+      } else {
+        return renderItem(element, index);
+      }
+    }));
+  } else {
+    return jsx(ButtonGroup, null, items.filter(item => !item.hidden).map((item, index) => {
+      return renderItem(item, index);
+    }));
+  }
 }, (prevProps, nextProps) => {
   if (!nextProps.node) {
     return false;
@@ -203,6 +255,10 @@ const ToolbarItems = /*#__PURE__*/React.memo(({
   // otherwise it causes an issue where multiple popups stays open
   return !(prevProps.node.type !== nextProps.node.type || prevProps.node.attrs.localId !== nextProps.node.attrs.localId || !areSameItems(prevProps.items, nextProps.items) || !prevProps.mounted !== !nextProps.mounted);
 });
+const buttonGroupStyles = css({
+  display: 'flex',
+  gap: "var(--ds-space-050, 4px)"
+});
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 const toolbarContainer = (scrollable, hasSelect, firstElementIsSelect) => css`
@@ -241,7 +297,7 @@ const toolbarOverflow = (scrollable, scrollDisabled, firstElementIsSelect) => cs
               overflow-y: hidden;
             `}
         -webkit-overflow-scrolling: touch;
-        padding: ${"var(--ds-space-050, 4px)"} 0 50px;
+        padding: ${"var(--ds-space-050, 4px)"} 0 ${"var(--ds-space-600, 48px)"};
         > div {
           > div:first-child {
             ${firstElementIsSelect ? css`
@@ -254,9 +310,9 @@ const toolbarOverflow = (scrollable, scrollDisabled, firstElementIsSelect) => cs
             margin-right: ${"var(--ds-space-100, 8px)"};
           }
         }
-      ` : css`
-        display: flex;
-      `}
+      ` : css({
+  display: 'flex'
+})}
 `;
 // eslint-disable-next-line @repo/internal/react/no-class-components
 class Toolbar extends Component {

package/dist/esm/ui/DropdownMenu.js

@@ -4,13 +4,10 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3;
 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); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 /** @jsx jsx */
-import { createRef, useCallback, useEffect, useState } from 'react';
-import { Component } from 'react';
+import { Component, createRef, useCallback, useEffect, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 
@@ -26,15 +23,30 @@ export var menuItemDimensions = {
   width: 175,
   height: 32
 };
+var spacerStyles = css({
+  display: 'flex',
+  flex: 1,
+  padding: "var(--ds-space-100, 8px)"
+});
 
-// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-var spacer = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex: 1;\n  padding: ", ";\n"])), "var(--ds-space-100, 8px)");
-
-// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-var menuContainer = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  min-width: ", "px;\n\n  // temporary solution to retain spacing defined by @atlaskit/Item\n  & button {\n    min-height: ", ";\n    padding: ", " ", " 7px;\n\n    & > [data-item-elem-before] {\n      margin-right: ", ";\n    }\n  }\n"])), menuItemDimensions.width, "var(--ds-space-400, 32px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-050, 4px)");
-
-// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-var label = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: inline-block;\n  width: 100%;\n"])));
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+var menuContainerStyles = css({
+  minWidth: "".concat(menuItemDimensions.width, "px"),
+  // temporary solution to retain spacing defined by @atlaskit/Item
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  '& button': {
+    minHeight: "var(--ds-space-400, 32px)",
+    padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-100, 8px)", " 7px"),
+    // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+    '& > [data-item-elem-before]': {
+      marginRight: "var(--ds-space-050, 4px)"
+    }
+  }
+});
+var labelStyles = css({
+  display: 'inline-block',
+  width: '100%'
+});
 
 // TODO: Migrate away from gridSize
 // Recommendation: Replace with 4 as itemSpacing is used in calculations expecting a number
@@ -145,7 +157,7 @@ var DropdownMenuItem = function DropdownMenuItem(_ref) {
     onBlur: handleItemOnBlur
   }, jsx("span", {
     ref: labelRef,
-    css: label
+    css: labelStyles
   }, item.title));
   if (tooltipContent) {
     return jsx(Tooltip, {
@@ -174,7 +186,7 @@ var Dropdown = /*#__PURE__*/function (_Component) {
         intl = _this$props.intl,
         editorView = _this$props.editorView;
       return jsx("div", {
-        css: menuContainer
+        css: menuContainerStyles
       }, items.filter(function (item) {
         return !item.hidden;
       }).map(function (item, idx) {
@@ -202,7 +214,7 @@ var Dropdown = /*#__PURE__*/function (_Component) {
         });
       }
       return jsx("span", {
-        css: spacer
+        css: spacerStyles
       });
     }
   }]);

package/dist/esm/ui/Input.js

@@ -8,8 +8,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 /** @jsx jsx */
-import React from 'react';
-import { Component } from 'react';
+import React, { Component } from 'react';
 import { jsx } from '@emotion/react';
 import { panelTextInput } from '@atlaskit/editor-common/ui';
 // eslint-disable-next-line @repo/internal/react/no-class-components

package/dist/esm/ui/Select.js

@@ -24,7 +24,9 @@ export default function Search(props) {
         var controlWrapper = (selectRef === null || selectRef === void 0 || (_selectRef$current = selectRef.current) === null || _selectRef$current === void 0 || (_selectRef$current = _selectRef$current.select) === null || _selectRef$current === void 0 || (_selectRef$current = _selectRef$current.controlRef) === null || _selectRef$current === void 0 ? void 0 : _selectRef$current.parentNode) || (selectRef === null || selectRef === void 0 || (_selectRef$current2 = selectRef.current) === null || _selectRef$current2 === void 0 || (_selectRef$current2 = _selectRef$current2.select) === null || _selectRef$current2 === void 0 || (_selectRef$current2 = _selectRef$current2.select) === null || _selectRef$current2 === void 0 || (_selectRef$current2 = _selectRef$current2.controlRef) === null || _selectRef$current2 === void 0 ? void 0 : _selectRef$current2.parentNode);
         var menuPortalStyles = controlWrapper && props.setDisableParentScroll ? {
           // since the portal is now outside, we need to position it as before
+          // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
           top: controlWrapper.offsetTop,
+          // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
           left: controlWrapper.offsetLeft,
           height: controlWrapper.offsetHeight,
           width: width

package/dist/esm/ui/Toolbar.js

@@ -7,7 +7,7 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
 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); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 /** @jsx jsx */
@@ -15,14 +15,13 @@ import React, { Component } from 'react';
 import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import ButtonGroup from '@atlaskit/button/button-group';
-import { areSameItems } from '@atlaskit/editor-common/floating-toolbar';
-import { messages } from '@atlaskit/editor-common/floating-toolbar';
+import { areSameItems, messages } from '@atlaskit/editor-common/floating-toolbar';
 import { Announcer, FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
 import { backgroundPaletteTooltipMessages } from '@atlaskit/editor-common/ui-color';
-import { ToolbarArrowKeyNavigationProvider } from '@atlaskit/editor-common/ui-menu';
-import { ColorPickerButton } from '@atlaskit/editor-common/ui-menu';
+import { ColorPickerButton, ToolbarArrowKeyNavigationProvider } from '@atlaskit/editor-common/ui-menu';
 import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
 import { clearHoverSelection } from '@atlaskit/editor-plugin-table/commands';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { checkShouldForceFocusAndApply, forceFocusSelector } from '../pm-plugins/force-focus';
 import { showConfirmDialog } from '../pm-plugins/toolbar-data/commands';
 import Dropdown from './Dropdown';
@@ -32,6 +31,35 @@ import Input from './Input';
 import { ScrollButtons } from './ScrollButtons';
 import Select from './Select';
 import Separator from './Separator';
+export function groupItems(items) {
+  var groupItems = items.reduce(function (accumulator, item, i) {
+    var finalOutput = accumulator.finalOutput,
+      buttonGroup = accumulator.buttonGroup;
+    if (item.type === 'button') {
+      var notLastItem = i < items.length - 1;
+      var nextItemIsButton = items[i + 1] && items[i + 1].type === 'button';
+      var wasPreviousButton = items[i - 1] && items[i - 1].type === 'button';
+      var isRadioButton = notLastItem && nextItemIsButton || wasPreviousButton;
+      if (isRadioButton) {
+        item.isRadioButton = true;
+        buttonGroup.push(item);
+        if (!nextItemIsButton && wasPreviousButton) {
+          finalOutput.push(buttonGroup);
+          accumulator.buttonGroup = [];
+        }
+      } else {
+        finalOutput.push(item);
+      }
+    } else {
+      finalOutput.push(item);
+    }
+    return accumulator;
+  }, {
+    buttonGroup: [],
+    finalOutput: []
+  });
+  return groupItems.finalOutput;
+}
 var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
   var items = _ref.items,
     dispatchCommand = _ref.dispatchCommand,
@@ -48,9 +76,7 @@ var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
     mountRef = _ref.mountRef,
     api = _ref.api;
   var emojiAndColourPickerMountPoint = scrollable ? popupsMountPoint || (editorView === null || editorView === void 0 ? void 0 : editorView.dom.closest('.fabric-editor-popup-scroll-parent')) || (editorView === null || editorView === void 0 ? void 0 : editorView.dom.closest('.ak-editor-content-area')) || undefined : popupsMountPoint;
-  return jsx(ButtonGroup, null, items.filter(function (item) {
-    return !item.hidden;
-  }).map(function (item, idx) {
+  var renderItem = function renderItem(item, idx) {
     var _api$contextPanel, _api$extension;
     switch (item.type) {
       case 'button':
@@ -94,7 +120,8 @@ var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
           testId: item.testId,
           hideTooltipOnClick: item.hideTooltipOnClick,
           ariaHasPopup: item.ariaHasPopup,
-          tabIndex: item.tabIndex
+          tabIndex: item.tabIndex,
+          isRadioButton: item.isRadioButton
         }, item.showTitle && item.title);
       case 'input':
         return jsx(Input, {
@@ -221,7 +248,32 @@ var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
           key: idx
         });
     }
-  }));
+  };
+  if (getBooleanFF('platform.editor.a11y-floating-toolbar-markup_vexmo')) {
+    var groupedItems = groupItems(items.filter(function (item) {
+      return !item.hidden;
+    }));
+    return jsx(ButtonGroup, null, groupedItems.map(function (element, index) {
+      var isGroup = Array.isArray(element);
+      if (isGroup) {
+        return jsx("div", {
+          key: index,
+          css: buttonGroupStyles,
+          role: "radiogroup"
+        }, element.map(function (item, idx) {
+          return renderItem(item, idx);
+        }));
+      } else {
+        return renderItem(element, index);
+      }
+    }));
+  } else {
+    return jsx(ButtonGroup, null, items.filter(function (item) {
+      return !item.hidden;
+    }).map(function (item, index) {
+      return renderItem(item, index);
+    }));
+  }
 }, function (prevProps, nextProps) {
   if (!nextProps.node) {
     return false;
@@ -230,6 +282,10 @@ var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
   // otherwise it causes an issue where multiple popups stays open
   return !(prevProps.node.type !== nextProps.node.type || prevProps.node.attrs.localId !== nextProps.node.attrs.localId || !areSameItems(prevProps.items, nextProps.items) || !prevProps.mounted !== !nextProps.mounted);
 });
+var buttonGroupStyles = css({
+  display: 'flex',
+  gap: "var(--ds-space-050, 4px)"
+});
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 var toolbarContainer = function toolbarContainer(scrollable, hasSelect, firstElementIsSelect) {
@@ -238,7 +294,9 @@ var toolbarContainer = function toolbarContainer(scrollable, hasSelect, firstEle
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
 var toolbarOverflow = function toolbarOverflow(scrollable, scrollDisabled, firstElementIsSelect) {
-  return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  ", "\n"])), scrollable ? css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        ", "\n        -webkit-overflow-scrolling: touch;\n        padding: ", " 0 50px;\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)", 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(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n        display: flex;\n      "]))));
+  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({
+    display: 'flex'
+  }));
 };
 // eslint-disable-next-line @repo/internal/react/no-class-components
 var Toolbar = /*#__PURE__*/function (_Component) {

package/dist/types/ui/ExtensionsPlaceholder.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
-import type { ExtensionProvider } from '@atlaskit/editor-common/extensions';
-import type { ExtensionAPI } from '@atlaskit/editor-common/extensions';
+import type { ExtensionAPI, ExtensionProvider } from '@atlaskit/editor-common/extensions';
 import type { ApplyChangeHandler } from '@atlaskit/editor-plugin-context-panel';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';

package/dist/types/ui/Input.d.ts

@@ -1,6 +1,5 @@
 /** @jsx jsx */
-import React from 'react';
-import { Component } from 'react';
+import React, { Component } from 'react';
 import { jsx } from '@emotion/react';
 export interface Props {
     mountPoint?: HTMLElement;

package/dist/types/ui/Toolbar.d.ts

@@ -34,6 +34,8 @@ export interface Props {
     ]> | undefined;
     mediaAssistiveMessage?: string;
 }
+type GroupedItems = (Item | Item[])[];
+export declare function groupItems(items: Item[]): GroupedItems;
 export interface State {
     scrollDisabled: boolean;
     mounted: boolean;

package/dist/types-ts4.5/ui/ExtensionsPlaceholder.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
-import type { ExtensionProvider } from '@atlaskit/editor-common/extensions';
-import type { ExtensionAPI } from '@atlaskit/editor-common/extensions';
+import type { ExtensionAPI, ExtensionProvider } from '@atlaskit/editor-common/extensions';
 import type { ApplyChangeHandler } from '@atlaskit/editor-plugin-context-panel';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';

package/dist/types-ts4.5/ui/Input.d.ts

@@ -1,6 +1,5 @@
 /** @jsx jsx */
-import React from 'react';
-import { Component } from 'react';
+import React, { Component } from 'react';
 import { jsx } from '@emotion/react';
 export interface Props {
     mountPoint?: HTMLElement;

package/dist/types-ts4.5/ui/Toolbar.d.ts

@@ -34,6 +34,8 @@ export interface Props {
     ]> | undefined;
     mediaAssistiveMessage?: string;
 }
+type GroupedItems = (Item | Item[])[];
+export declare function groupItems(items: Item[]): GroupedItems;
 export interface State {
     scrollDisabled: boolean;
     mounted: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-floating-toolbar",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Floating toolbar plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -24,11 +24,10 @@
     ".": "./src/index.ts"
   },
   "dependencies": {
-    "@atlaskit/adf-schema": "^35.5.1",
     "@atlaskit/adf-utils": "^19.0.0",
     "@atlaskit/button": "^17.4.0",
     "@atlaskit/checkbox": "^13.0.0",
-    "@atlaskit/editor-common": "^78.0.0",
+    "@atlaskit/editor-common": "^78.4.0",
     "@atlaskit/editor-palette": "1.5.2",
     "@atlaskit/editor-plugin-context-panel": "^1.0.0",
     "@atlaskit/editor-plugin-copy-button": "^1.0.0",
@@ -39,12 +38,13 @@
     "@atlaskit/editor-plugin-table": "^7.3.0",
     "@atlaskit/editor-prosemirror": "3.0.0",
     "@atlaskit/emoji": "^67.6.0",
-    "@atlaskit/icon": "^22.0.0",
+    "@atlaskit/icon": "^22.1.0",
     "@atlaskit/menu": "^2.1.0",
     "@atlaskit/modal-dialog": "^12.10.0",
+    "@atlaskit/platform-feature-flags": "^0.2.5",
     "@atlaskit/select": "^17.1.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.37.0",
+    "@atlaskit/tokens": "^1.38.0",
     "@atlaskit/tooltip": "^18.1.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
@@ -107,5 +107,10 @@
       ]
     }
   },
-  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0"
+  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0",
+  "platform-feature-flags": {
+    "platform.editor.a11y-floating-toolbar-markup_vexmo": {
+      "type": "boolean"
+    }
+  }
 }

package/dist/cjs/ui/styles.js

@@ -1,77 +0,0 @@
-"use strict";
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.iconOnlySpacing = exports.getButtonStyles = void 0;
-var _adfSchema = require("@atlaskit/adf-schema");
-var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-var background = {
-  danger: {
-    default: {
-      light: 'inherit',
-      dark: 'inherit'
-    },
-    hover: {
-      light: "var(--ds-background-neutral-subtle-hovered, ".concat(colors.N30A, ")"),
-      dark: "var(--ds-background-neutral-subtle-hovered, ".concat(colors.N30A, ")")
-    },
-    active: {
-      light: "var(--ds-background-neutral-pressed, ".concat("".concat((0, _adfSchema.hexToRgba)(colors.B75, 0.6)), ")"),
-      dark: "var(--ds-background-neutral-pressed, ".concat("".concat((0, _adfSchema.hexToRgba)(colors.B75, 0.6)), ")")
-    }
-  }
-};
-var color = {
-  danger: {
-    default: {
-      light: "var(--ds-icon, ".concat(colors.N400, ")"),
-      dark: "var(--ds-icon, ".concat(colors.DN400, ")")
-    },
-    hover: {
-      light: "var(--ds-icon-danger, ".concat(colors.R400, ")"),
-      dark: "var(--ds-icon-danger, ".concat(colors.R400, ")")
-    },
-    active: {
-      light: "var(--ds-icon-danger, ".concat(colors.R400, ")"),
-      dark: "var(--ds-icon-danger, ".concat(colors.R400, ")")
-    }
-  }
-};
-var getStyles = function getStyles(property, _ref) {
-  var _ref$appearance = _ref.appearance,
-    appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
-    _ref$state = _ref.state,
-    state = _ref$state === void 0 ? 'default' : _ref$state,
-    _ref$mode = _ref.mode,
-    mode = _ref$mode === void 0 ? 'light' : _ref$mode;
-  if (!property[appearance] || !property[appearance][state]) {
-    return 'initial';
-  }
-  return property[appearance][state][mode];
-};
-var iconOnlySpacing = exports.iconOnlySpacing = {
-  '&&': {
-    padding: '0px',
-    /**
-      Increased specificity here because css for .hyperlink-open-link defined in
-      packages/editor/editor-core/src/ui/ContentStyles/index.tsx file
-      overrides padding left-right 2px with 4px.
-    */
-    '&&[href]': {
-      padding: '0 2px'
-    }
-  },
-  '& > span': {
-    margin: '0px'
-  }
-};
-var getButtonStyles = exports.getButtonStyles = function getButtonStyles(props) {
-  return {
-    background: getStyles(background, props),
-    color: getStyles(color, props)
-  };
-};

package/dist/es2019/ui/styles.js

@@ -1,64 +0,0 @@
-import { hexToRgba } from '@atlaskit/adf-schema';
-import * as colors from '@atlaskit/theme/colors';
-const background = {
-  danger: {
-    default: {
-      light: 'inherit',
-      dark: 'inherit'
-    },
-    hover: {
-      light: `var(--ds-background-neutral-subtle-hovered, ${colors.N30A})`,
-      dark: `var(--ds-background-neutral-subtle-hovered, ${colors.N30A})`
-    },
-    active: {
-      light: `var(--ds-background-neutral-pressed, ${`${hexToRgba(colors.B75, 0.6)}`})`,
-      dark: `var(--ds-background-neutral-pressed, ${`${hexToRgba(colors.B75, 0.6)}`})`
-    }
-  }
-};
-const color = {
-  danger: {
-    default: {
-      light: `var(--ds-icon, ${colors.N400})`,
-      dark: `var(--ds-icon, ${colors.DN400})`
-    },
-    hover: {
-      light: `var(--ds-icon-danger, ${colors.R400})`,
-      dark: `var(--ds-icon-danger, ${colors.R400})`
-    },
-    active: {
-      light: `var(--ds-icon-danger, ${colors.R400})`,
-      dark: `var(--ds-icon-danger, ${colors.R400})`
-    }
-  }
-};
-const getStyles = (property, {
-  appearance = 'default',
-  state = 'default',
-  mode = 'light'
-}) => {
-  if (!property[appearance] || !property[appearance][state]) {
-    return 'initial';
-  }
-  return property[appearance][state][mode];
-};
-export const iconOnlySpacing = {
-  '&&': {
-    padding: '0px',
-    /**
-      Increased specificity here because css for .hyperlink-open-link defined in
-      packages/editor/editor-core/src/ui/ContentStyles/index.tsx file
-      overrides padding left-right 2px with 4px.
-    */
-    '&&[href]': {
-      padding: '0 2px'
-    }
-  },
-  '& > span': {
-    margin: '0px'
-  }
-};
-export const getButtonStyles = props => ({
-  background: getStyles(background, props),
-  color: getStyles(color, props)
-});

package/dist/esm/ui/styles.js

@@ -1,68 +0,0 @@
-import { hexToRgba } from '@atlaskit/adf-schema';
-import * as colors from '@atlaskit/theme/colors';
-var background = {
-  danger: {
-    default: {
-      light: 'inherit',
-      dark: 'inherit'
-    },
-    hover: {
-      light: "var(--ds-background-neutral-subtle-hovered, ".concat(colors.N30A, ")"),
-      dark: "var(--ds-background-neutral-subtle-hovered, ".concat(colors.N30A, ")")
-    },
-    active: {
-      light: "var(--ds-background-neutral-pressed, ".concat("".concat(hexToRgba(colors.B75, 0.6)), ")"),
-      dark: "var(--ds-background-neutral-pressed, ".concat("".concat(hexToRgba(colors.B75, 0.6)), ")")
-    }
-  }
-};
-var color = {
-  danger: {
-    default: {
-      light: "var(--ds-icon, ".concat(colors.N400, ")"),
-      dark: "var(--ds-icon, ".concat(colors.DN400, ")")
-    },
-    hover: {
-      light: "var(--ds-icon-danger, ".concat(colors.R400, ")"),
-      dark: "var(--ds-icon-danger, ".concat(colors.R400, ")")
-    },
-    active: {
-      light: "var(--ds-icon-danger, ".concat(colors.R400, ")"),
-      dark: "var(--ds-icon-danger, ".concat(colors.R400, ")")
-    }
-  }
-};
-var getStyles = function getStyles(property, _ref) {
-  var _ref$appearance = _ref.appearance,
-    appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
-    _ref$state = _ref.state,
-    state = _ref$state === void 0 ? 'default' : _ref$state,
-    _ref$mode = _ref.mode,
-    mode = _ref$mode === void 0 ? 'light' : _ref$mode;
-  if (!property[appearance] || !property[appearance][state]) {
-    return 'initial';
-  }
-  return property[appearance][state][mode];
-};
-export var iconOnlySpacing = {
-  '&&': {
-    padding: '0px',
-    /**
-      Increased specificity here because css for .hyperlink-open-link defined in
-      packages/editor/editor-core/src/ui/ContentStyles/index.tsx file
-      overrides padding left-right 2px with 4px.
-    */
-    '&&[href]': {
-      padding: '0 2px'
-    }
-  },
-  '& > span': {
-    margin: '0px'
-  }
-};
-export var getButtonStyles = function getButtonStyles(props) {
-  return {
-    background: getStyles(background, props),
-    color: getStyles(color, props)
-  };
-};

package/dist/types/ui/styles.d.ts

@@ -1,20 +0,0 @@
-export declare const iconOnlySpacing: {
-    '&&': {
-        padding: string;
-        /**
-          Increased specificity here because css for .hyperlink-open-link defined in
-          packages/editor/editor-core/src/ui/ContentStyles/index.tsx file
-          overrides padding left-right 2px with 4px.
-        */
-        '&&[href]': {
-            padding: string;
-        };
-    };
-    '& > span': {
-        margin: string;
-    };
-};
-export declare const getButtonStyles: (props: any) => {
-    background: any;
-    color: any;
-};

package/dist/types-ts4.5/ui/styles.d.ts

@@ -1,20 +0,0 @@
-export declare const iconOnlySpacing: {
-    '&&': {
-        padding: string;
-        /**
-          Increased specificity here because css for .hyperlink-open-link defined in
-          packages/editor/editor-core/src/ui/ContentStyles/index.tsx file
-          overrides padding left-right 2px with 4px.
-        */
-        '&&[href]': {
-            padding: string;
-        };
-    };
-    '& > span': {
-        margin: string;
-    };
-};
-export declare const getButtonStyles: (props: any) => {
-    background: any;
-    color: any;
-};