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

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @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

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"));
@@ -40,6 +42,35 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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) {

package/dist/es2019/ui/Toolbar.js

@@ -11,6 +11,7 @@ import { backgroundPaletteTooltipMessages } from '@atlaskit/editor-common/ui-col
 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';
@@ -20,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,
@@ -37,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':
@@ -73,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, {
@@ -192,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;
@@ -201,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`

package/dist/esm/ui/Toolbar.js

@@ -21,6 +21,7 @@ import { backgroundPaletteTooltipMessages } from '@atlaskit/editor-common/ui-col
 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';
@@ -30,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,
@@ -46,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':
@@ -92,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, {
@@ -219,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;
@@ -228,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) {

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/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.1",
+  "version": "1.2.0",
   "description": "Floating toolbar plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -27,7 +27,7 @@
     "@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",
@@ -38,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",
@@ -106,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"
+    }
+  }
 }