@atlaskit/editor-plugin-floating-toolbar 0.7.13 → 0.7.14

package/dist/esm/ui/Toolbar.js

@@ -10,8 +10,9 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
 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, { Component } from 'react';
-import { css } from '@emotion/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';
@@ -53,7 +54,7 @@ var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
     featureFlags = _ref.featureFlags,
     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 /*#__PURE__*/React.createElement(ButtonGroup, null, items.filter(function (item) {
+  return jsx(ButtonGroup, null, items.filter(function (item) {
     return !item.hidden;
   }).map(function (item, idx) {
     var _api$contextPanel, _api$extension;
@@ -70,12 +71,12 @@ var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
             }
           }
         };
-        return /*#__PURE__*/React.createElement(Button, {
+        return jsx(Button, {
           className: item.className,
           key: idx,
           title: item.title,
           href: item.href,
-          icon: item.icon ? /*#__PURE__*/React.createElement(ButtonIcon, {
+          icon: item.icon ? jsx(ButtonIcon, {
             label: item.title
           }) : undefined,
           appearance: item.appearance,
@@ -102,7 +103,7 @@ var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
           tabIndex: item.tabIndex
         }, item.showTitle && item.title);
       case 'input':
-        return /*#__PURE__*/React.createElement(Input, {
+        return jsx(Input, {
           key: idx,
           mountPoint: popupsMountPoint,
           boundariesElement: popupsBoundariesElement,
@@ -121,10 +122,10 @@ var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
         }
       case 'dropdown':
         var DropdownIcon = item.icon;
-        return /*#__PURE__*/React.createElement(Dropdown, {
+        return jsx(Dropdown, {
           key: idx,
           title: item.title,
-          icon: DropdownIcon && /*#__PURE__*/React.createElement(DropdownIcon, {
+          icon: DropdownIcon && jsx(DropdownIcon, {
             label: item.title
           }),
           dispatchCommand: dispatchCommand,
@@ -147,7 +148,7 @@ var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
       case 'select':
         if (item.selectType === 'list') {
           var ariaLabel = item.title || item.placeholder;
-          return /*#__PURE__*/React.createElement(Select, {
+          return jsx(Select, {
             key: idx,
             dispatchCommand: dispatchCommand,
             options: item.options,
@@ -167,7 +168,7 @@ var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
           });
         }
         if (item.selectType === 'color') {
-          return /*#__PURE__*/React.createElement(ColorPickerButton, {
+          return jsx(ColorPickerButton, {
             skipFocusButtonAfterPick: true,
             key: idx,
             title: item.title,
@@ -193,7 +194,7 @@ var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
           });
         }
         if (item.selectType === 'emoji') {
-          return /*#__PURE__*/React.createElement(EmojiPickerButton, {
+          return jsx(EmojiPickerButton, {
             key: idx,
             editorView: editorView,
             title: item.title,
@@ -216,7 +217,7 @@ var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
         if (!extendFloatingToolbar) {
           return null;
         }
-        return /*#__PURE__*/React.createElement(ExtensionsPlaceholder, {
+        return jsx(ExtensionsPlaceholder, {
           key: idx,
           node: node,
           editorView: editorView,
@@ -226,7 +227,7 @@ var ToolbarItems = /*#__PURE__*/React.memo(function (_ref) {
           extensionApi: api === null || api === void 0 || (_api$extension = api.extension) === null || _api$extension === void 0 ? void 0 : _api$extension.actions.api()
         });
       case 'separator':
-        return /*#__PURE__*/React.createElement(Separator, {
+        return jsx(Separator, {
           key: idx
         });
     }
@@ -365,7 +366,8 @@ var Toolbar = /*#__PURE__*/function (_Component) {
         className = _this$props2.className,
         node = _this$props2.node,
         intl = _this$props2.intl,
-        scrollable = _this$props2.scrollable;
+        scrollable = _this$props2.scrollable,
+        mediaAssistiveMessage = _this$props2.mediaAssistiveMessage;
       if (!items || !items.length) {
         return null;
       }
@@ -379,14 +381,14 @@ var Toolbar = /*#__PURE__*/function (_Component) {
         //Alt + F10 to reach first element in this floating toolbar
         return event.altKey && (event.key === 'F10' || event.keyCode === 121);
       };
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ToolbarArrowKeyNavigationProvider, {
+      return jsx(React.Fragment, null, jsx(ToolbarArrowKeyNavigationProvider, {
         editorView: this.props.editorView,
         handleEscape: this.handleEscape,
         disableArrowKeyNavigation: !this.shouldHandleArrowKeys(),
         childComponentSelector: "[data-testid='editor-floating-toolbar']",
         isShortcutToFocusToolbar: isShortcutToFocusToolbar,
         intl: intl
-      }, /*#__PURE__*/React.createElement("div", {
+      }, jsx("div", {
         ref: this.toolbarContainerRef,
         css: function css(theme) {
           return [toolbarContainer({
@@ -397,26 +399,26 @@ var Toolbar = /*#__PURE__*/function (_Component) {
         role: "toolbar",
         "data-testid": "editor-floating-toolbar",
         className: className
-      }, /*#__PURE__*/React.createElement(Announcer, {
-        text: intl.formatMessage(messages.floatingToolbarAnnouncer),
+      }, jsx(Announcer, {
+        text: mediaAssistiveMessage ? "".concat(mediaAssistiveMessage, ", ").concat(intl.formatMessage(messages.floatingToolbarAnnouncer)) : intl.formatMessage(messages.floatingToolbarAnnouncer),
         delay: 250
-      }), /*#__PURE__*/React.createElement("div", {
+      }), jsx("div", {
         "data-testid": "floating-toolbar-items",
         ref: this.scrollContainerRef
         // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
         ,
         css: toolbarOverflow(scrollable, this.state.scrollDisabled, firstElementIsSelect)
-      }, /*#__PURE__*/React.createElement(ToolbarItems, _extends({}, this.props, {
+      }, jsx(ToolbarItems, _extends({}, this.props, {
         setDisableScroll: this.setDisableScroll.bind(this),
         mountRef: this.mountRef,
         mounted: this.state.mounted,
         featureFlags: this.props.featureFlags
-      }))), scrollable && /*#__PURE__*/React.createElement(ScrollButtons, {
+      }))), scrollable && jsx(ScrollButtons, {
         intl: intl,
         scrollContainerRef: this.scrollContainerRef,
         node: node,
         disabled: this.state.scrollDisabled
-      })), /*#__PURE__*/React.createElement("div", {
+      })), jsx("div", {
         ref: this.mountRef
       })));
     }

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

@@ -33,6 +33,7 @@ export interface Props {
         OptionalPlugin<typeof contextPanelPlugin>,
         OptionalPlugin<ExtensionPlugin>
     ]> | undefined;
+    mediaAssistiveMessage?: string;
 }
 export interface State {
     scrollDisabled: boolean;

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

@@ -33,6 +33,7 @@ export interface Props {
         OptionalPlugin<typeof contextPanelPlugin>,
         OptionalPlugin<ExtensionPlugin>
     ]> | undefined;
+    mediaAssistiveMessage?: string;
 }
 export interface State {
     scrollDisabled: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-floating-toolbar",
-  "version": "0.7.13",
+  "version": "0.7.14",
   "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": "^16.17.0",
     "@atlaskit/checkbox": "^13.0.0",
-    "@atlaskit/editor-common": "^76.24.0",
+    "@atlaskit/editor-common": "^76.25.0",
     "@atlaskit/editor-palette": "1.5.2",
     "@atlaskit/editor-plugin-context-panel": "^0.2.0",
     "@atlaskit/editor-plugin-copy-button": "^1.0.0",