@atlaskit/editor-common 76.24.3 → 76.24.4

package/dist/esm/ui/FloatingToolbar/SmallerEditIcon.js

@@ -1,15 +1,14 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject;
-/** @jsx jsx */
-import { css, jsx } from '@emotion/react';
+import { css } from '@emotion/react';
 import EditIcon from '@atlaskit/icon/glyph/edit';
 var editIconStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 20px;\n"])));
 
 /* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
 export var SmallerEditIcon = function SmallerEditIcon() {
-  return jsx("div", {
+  return /*#__PURE__*/React.createElement("div", {
     css: editIconStyles
-  }, jsx(EditIcon, {
+  }, /*#__PURE__*/React.createElement(EditIcon, {
     label: "edit"
   }));
 };

package/dist/esm/ui/MediaSingle/index.js

@@ -1,7 +1,5 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-/** @jsx jsx */
 import React from 'react';
-import { jsx } from '@emotion/react';
 import classnames from 'classnames';
 import { akEditorMediaResizeHandlerPaddingWide, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
 import { MEDIA_SINGLE_GUTTER_SIZE } from '../../media-single/constants';
@@ -77,7 +75,7 @@ export default function MediaSingle(_ref) {
   var _children = _slicedToArray(children, 2),
     media = _children[0],
     caption = _children[1];
-  return jsx("div", {
+  return /*#__PURE__*/React.createElement("div", {
     ref: handleMediaSingleRef,
     css: MediaSingleDimensionHelper({
       width: width,
@@ -95,7 +93,7 @@ export default function MediaSingle(_ref) {
       'is-loading': isLoading,
       'rich-media-wrapped': layout === 'wrap-left' || layout === 'wrap-right'
     })
-  }, jsx(MediaWrapper, {
+  }, /*#__PURE__*/React.createElement(MediaWrapper, {
     hasFallbackContainer: hasFallbackContainer,
     height: mediaWrapperHeight,
     paddingBottom: paddingBottom

package/dist/esm/ui/MediaSingle/styled.js

@@ -2,10 +2,8 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _excluded = ["children"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-/** @jsx jsx */
-
 import React from 'react';
-import { css, jsx } from '@emotion/react';
+import { css } from '@emotion/react';
 import { akEditorFullPageMaxWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { nonWrappedLayouts } from '../../utils';
 import { calcBreakoutWidth, calcWideWidth } from '../../utils/breakout';
@@ -132,7 +130,7 @@ export var mediaWrapperStyle = function mediaWrapperStyle(props) {
 export var MediaWrapper = function MediaWrapper(_ref3) {
   var children = _ref3.children,
     rest = _objectWithoutProperties(_ref3, _excluded);
-  return jsx("div", {
+  return /*#__PURE__*/React.createElement("div", {
     css: mediaWrapperStyle(rest)
   }, children);
 };
@@ -147,7 +145,7 @@ MediaWrapper.displayName = 'WrapperMediaSingle';
 
 export var MediaBorderGapFiller = function MediaBorderGapFiller(_ref4) {
   var borderColor = _ref4.borderColor;
-  return jsx("div", {
+  return /*#__PURE__*/React.createElement("div", {
     style: {
       position: 'absolute',
       inset: '0px',

package/dist/esm/ui/Messages/index.js

@@ -1,8 +1,6 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-/** @jsx jsx */
-
-import { css, jsx } from '@emotion/react';
+import { css } from '@emotion/react';
 import SuccessIcon from '@atlaskit/icon/glyph/editor/success';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
 import { G400, N200, R400 } from '@atlaskit/theme/colors';
@@ -15,19 +13,19 @@ var messageStyle = function messageStyle(props) {
 var iconWrapperStyle = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  margin-right: ", ";\n"])), "var(--ds-space-050, 4px)");
 export var HelperMessage = function HelperMessage(_ref) {
   var children = _ref.children;
-  return jsx("div", {
+  return /*#__PURE__*/React.createElement("div", {
     css: messageStyle
   }, children);
 };
 export var ErrorMessage = function ErrorMessage(_ref2) {
   var children = _ref2.children;
-  return jsx("div", {
+  return /*#__PURE__*/React.createElement("div", {
     css: function css(theme) {
       return [messageStyle(theme), errorColor];
     }
-  }, jsx("span", {
+  }, /*#__PURE__*/React.createElement("span", {
     css: iconWrapperStyle
-  }, jsx(ErrorIcon, {
+  }, /*#__PURE__*/React.createElement(ErrorIcon, {
     size: "small",
     label: "error",
     "aria-label": "error"
@@ -35,13 +33,13 @@ export var ErrorMessage = function ErrorMessage(_ref2) {
 };
 export var ValidMessage = function ValidMessage(_ref3) {
   var children = _ref3.children;
-  return jsx("div", {
+  return /*#__PURE__*/React.createElement("div", {
     css: function css(theme) {
       return [messageStyle(theme), validColor];
     }
-  }, jsx("span", {
+  }, /*#__PURE__*/React.createElement("span", {
     css: iconWrapperStyle
-  }, jsx(SuccessIcon, {
+  }, /*#__PURE__*/React.createElement(SuccessIcon, {
     size: "small",
     label: "success"
   })), children);

package/dist/esm/ui/PanelTextInput/index.js

@@ -8,10 +8,7 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 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 { PureComponent } from 'react';
-import { jsx } from '@emotion/react';
 import { browser } from '../../utils';
 import { panelTextInput, panelTextInputWithCustomWidth } from './styles';
 var KeyZCode = 90;
@@ -118,7 +115,7 @@ var PanelTextInput = /*#__PURE__*/function (_PureComponent) {
         role = _this$props2.role,
         inputId = _this$props2.inputId;
       var value = this.state.value;
-      return jsx("input", {
+      return /*#__PURE__*/React.createElement("input", {
         css: [panelTextInput, width !== undefined && panelTextInputWithCustomWidth(width)],
         role: role,
         "aria-autocomplete": ariaAutoComplete ? 'list' : undefined,

package/dist/esm/ui/UnsupportedBlock/index.js

@@ -1,8 +1,7 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject;
-/** @jsx jsx */
 import React, { useCallback, useRef } from 'react';
-import { css, jsx } from '@emotion/react';
+import { css } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import QuestionsIcon from '@atlaskit/icon/glyph/question-circle';
@@ -28,18 +27,18 @@ var UnsupportedBlockNode = function UnsupportedBlockNode(_ref) {
   var tooltipOnShowHandler = useCallback(function () {
     return dispatchAnalyticsEvent && trackUnsupportedContentTooltipDisplayedFor(dispatchAnalyticsEvent, ACTION_SUBJECT_ID.ON_UNSUPPORTED_BLOCK, originalNodeType);
   }, [dispatchAnalyticsEvent, originalNodeType]);
-  return jsx("div", {
+  return /*#__PURE__*/React.createElement("div", {
     css: blockNodeStyle,
     className: "unsupported"
-  }, message, jsx(Tooltip, {
+  }, message, /*#__PURE__*/React.createElement(Tooltip, {
     content: tooltipContent,
     hideTooltipOnClick: false,
     position: "bottom",
     onShow: tooltipOnShowHandler,
     strategy: "absolute"
-  }, jsx("span", {
+  }, /*#__PURE__*/React.createElement("span", {
     style: style
-  }, jsx(QuestionsIcon, {
+  }, /*#__PURE__*/React.createElement(QuestionsIcon, {
     label: "?",
     size: "small"
   }))));

package/dist/esm/ui/UnsupportedInline/index.js

@@ -1,8 +1,7 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject;
-/** @jsx jsx */
 import React, { useCallback, useRef } from 'react';
-import { css, jsx } from '@emotion/react';
+import { css } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import QuestionsIcon from '@atlaskit/icon/glyph/question-circle';
@@ -28,17 +27,17 @@ var UnsupportedInlineNode = function UnsupportedInlineNode(_ref) {
   var tooltipOnShowHandler = useCallback(function () {
     return dispatchAnalyticsEvent && trackUnsupportedContentTooltipDisplayedFor(dispatchAnalyticsEvent, ACTION_SUBJECT_ID.ON_UNSUPPORTED_INLINE, originalNodeType);
   }, [dispatchAnalyticsEvent, originalNodeType]);
-  return jsx("span", {
+  return /*#__PURE__*/React.createElement("span", {
     css: inlineNodeStyle
-  }, message, jsx(Tooltip, {
+  }, message, /*#__PURE__*/React.createElement(Tooltip, {
     content: tooltipContent,
     hideTooltipOnClick: false,
     position: "bottom",
     onShow: tooltipOnShowHandler,
     strategy: "absolute"
-  }, jsx("span", {
+  }, /*#__PURE__*/React.createElement("span", {
     style: style
-  }, jsx(QuestionsIcon, {
+  }, /*#__PURE__*/React.createElement(QuestionsIcon, {
     label: "?",
     size: "small"
   }))));

package/dist/esm/ui/WidthProvider/index.js

@@ -9,9 +9,8 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _templateObject;
 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 { css, jsx } from '@emotion/react';
+import { css } from '@emotion/react';
 import rafSchedule from 'raf-schd';
 import { WidthObserver } from '@atlaskit/width-detector';
 var SCROLLBAR_WIDTH = 30;
@@ -63,13 +62,13 @@ export var WidthProvider = /*#__PURE__*/function (_React$Component) {
   _createClass(WidthProvider, [{
     key: "render",
     value: function render() {
-      return jsx("div", {
+      return /*#__PURE__*/React.createElement("div", {
         css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          position: relative;\n          width: 100%;\n        "]))),
         className: this.props.className
-      }, jsx(WidthObserver, {
+      }, /*#__PURE__*/React.createElement(WidthObserver, {
         setWidth: this.setWidth,
         offscreen: true
-      }), jsx(Provider, {
+      }), /*#__PURE__*/React.createElement(Provider, {
         value: createWidthContext(this.state.width)
       }, this.props.children));
     }

package/dist/esm/ui-color/ColorPalette/Color/index.js

@@ -7,9 +7,7 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 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, { PureComponent } from 'react';
-import { jsx } from '@emotion/react';
 import EditorDoneIcon from '@atlaskit/icon/glyph/editor/done';
 import { N0 } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';
@@ -51,11 +49,11 @@ var Color = /*#__PURE__*/function (_PureComponent) {
         checkMarkColor = _this$props2$checkMar === void 0 ? N0 : _this$props2$checkMar,
         hexToPaletteColor = _this$props2.hexToPaletteColor;
       var colorStyle = hexToPaletteColor ? hexToPaletteColor(value) : value;
-      return jsx(Tooltip, {
+      return /*#__PURE__*/React.createElement(Tooltip, {
         content: label
-      }, jsx("span", {
+      }, /*#__PURE__*/React.createElement("span", {
         css: buttonWrapperStyle
-      }, jsx("button", {
+      }, /*#__PURE__*/React.createElement("button", {
         css: buttonStyle,
         "aria-label": label,
         role: "radio",
@@ -69,7 +67,7 @@ var Color = /*#__PURE__*/function (_PureComponent) {
           border: "1px solid ".concat(borderColor)
         },
         autoFocus: autoFocus
-      }, isSelected && jsx(EditorDoneIcon, {
+      }, isSelected && /*#__PURE__*/React.createElement(EditorDoneIcon, {
         primaryColor: checkMarkColor,
         label: ""
       }))));

package/dist/esm/ui-color/ColorPalette/index.js

@@ -1,6 +1,4 @@
-/** @jsx jsx */
 import React from 'react';
-import { jsx } from '@emotion/react';
 import chromatism from 'chromatism';
 import { injectIntl } from 'react-intl-next';
 import { N0, N500 } from '@atlaskit/theme/colors';
@@ -52,8 +50,8 @@ var ColorPalette = function ColorPalette(props) {
   var colorsPerRow = React.useMemo(function () {
     return getColorsPerRowFromPalette(palette, cols);
   }, [palette, cols]);
-  return jsx(React.Fragment, null, colorsPerRow.map(function (row) {
-    return jsx("div", {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, colorsPerRow.map(function (row) {
+    return /*#__PURE__*/React.createElement("div", {
       css: colorPaletteWrapper,
       className: className,
       key: "row-first-color-".concat(row[0].value),
@@ -71,7 +69,7 @@ var ColorPalette = function ColorPalette(props) {
           message = getColorMessage(paletteColorTooltipMessages.light, value.toUpperCase());
         }
       }
-      return jsx(Color, {
+      return /*#__PURE__*/React.createElement(Color, {
         key: value,
         value: value,
         borderColor: border,

package/dist/esm/ui-menu/ColorPickerButton/index.js

@@ -1,9 +1,8 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-/** @jsx jsx */
 import React from 'react';
-import { css, jsx } from '@emotion/react';
+import { css } from '@emotion/react';
 import { withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import Button from '@atlaskit/button';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
@@ -117,7 +116,7 @@ var ColorPickerButton = function ColorPickerButton(props) {
     var _getSelectedRowAndCol = getSelectedRowAndColumnFromPalette(props.colorPalette, selectedColor, props.cols),
       selectedRowIndex = _getSelectedRowAndCol.selectedRowIndex,
       selectedColumnIndex = _getSelectedRowAndCol.selectedColumnIndex;
-    return jsx(Popup, {
+    return /*#__PURE__*/React.createElement(Popup, {
       target: buttonRef.current,
       fitHeight: 350,
       fitWidth: 350,
@@ -131,10 +130,10 @@ var ColorPickerButton = function ColorPickerButton(props) {
       zIndex: props.setDisableParentScroll ? 600 : undefined,
       ariaLabel: "Color picker popup",
       onPositionCalculated: onPositionCalculated
-    }, jsx("div", {
+    }, /*#__PURE__*/React.createElement("div", {
       css: colorPickerWrapper,
       "data-test-id": "color-picker-menu"
-    }, jsx(ArrowKeyNavigationProvider, {
+    }, /*#__PURE__*/React.createElement(ArrowKeyNavigationProvider, {
       type: ArrowKeyNavigationType.COLOR,
       selectedRowIndex: selectedRowIndex,
       selectedColumnIndex: selectedColumnIndex,
@@ -144,7 +143,7 @@ var ColorPickerButton = function ColorPickerButton(props) {
       },
       isOpenedByKeyboard: isOpenedByKeyboard,
       isPopupPositioned: isPopupPositioned
-    }, jsx(ColorPaletteWithListeners, {
+    }, /*#__PURE__*/React.createElement(ColorPaletteWithListeners, {
       cols: props.cols,
       selectedColor: selectedColor,
       onClick: onColorSelected,
@@ -167,12 +166,12 @@ var ColorPickerButton = function ColorPickerButton(props) {
       dark: "var(--ds-background-neutral-subtle-hovered, ".concat(N30A, ")")
     })(theme));
   };
-  return jsx("div", {
+  return /*#__PURE__*/React.createElement("div", {
     css: colorPickerButtonWrapper
-  }, jsx(Tooltip, {
+  }, /*#__PURE__*/React.createElement(Tooltip, {
     content: title,
     position: "top"
-  }, jsx(Button, {
+  }, /*#__PURE__*/React.createElement(Button, {
     ref: buttonRef,
     "aria-label": title,
     spacing: "compact",
@@ -185,9 +184,9 @@ var ColorPickerButton = function ColorPickerButton(props) {
       }
     },
     css: buttonStyle,
-    iconAfter: jsx("span", {
+    iconAfter: /*#__PURE__*/React.createElement("span", {
       css: colorPickerExpandContainer
-    }, jsx(ExpandIcon, {
+    }, /*#__PURE__*/React.createElement(ExpandIcon, {
       label: ""
     }))
   })), renderPopup());

package/dist/esm/ui-menu/DropdownContainer/index.js

@@ -2,9 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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; }
 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; }
-/** @jsx jsx */
 import React, { useContext } from 'react';
-import { jsx } from '@emotion/react';
 import { ArrowKeyNavigationType } from '../ArrowKeyNavigationProvider/types';
 import DropdownComponent from '../Dropdown';
 import { KeyDownHandlerContext } from '../ToolbarArrowKeyNavigationProvider';
@@ -18,9 +16,10 @@ export var DropdownContainer = /*#__PURE__*/React.memo(function DropdownContaine
     });
   }
   return (
+    /*#__PURE__*/
     //This context is to handle the tab, Arrow Right/Left key events for dropdown.
     //Default context has the void callbacks for above key events
-    jsx(DropdownComponent, _extends({}, props, {
+    React.createElement(DropdownComponent, _extends({}, props, {
       arrowKeyNavigationProviderOptions: newArrowKeyNavigationProviderOptions
     }))
   );

package/dist/esm/ui-menu/DropdownMenu/index.js

@@ -16,10 +16,8 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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; }
 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, { PureComponent, useContext } from 'react';
-import { css, jsx } from '@emotion/react';
+import { css } from '@emotion/react';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { CustomItem, MenuGroup, Section } from '@atlaskit/menu';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
@@ -151,7 +149,7 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
           }
         }
       });
-      return jsx(Popup, {
+      return /*#__PURE__*/React.createElement(Popup, {
         target: isOpen ? target : undefined,
         mountTo: mountTo,
         boundariesElement: boundariesElement,
@@ -161,10 +159,10 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
         fitWidth: fitWidth,
         zIndex: zIndex || akEditorFloatingPanelZIndex,
         offset: offset
-      }, jsx(ArrowKeyNavigationProvider, _extends({}, navigationProviderProps, {
+      }, /*#__PURE__*/React.createElement(ArrowKeyNavigationProvider, _extends({}, navigationProviderProps, {
         handleClose: this.handleCloseAndFocus,
         closeOnTab: true
-      }), jsx(DropListWithOutsideListeners, {
+      }), /*#__PURE__*/React.createElement(DropListWithOutsideListeners, {
         isOpen: true,
         appearance: "tall",
         position: popupPlacement.join(' '),
@@ -178,23 +176,23 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
           e.stopPropagation();
         },
         targetRef: this.state.target
-      }, jsx("div", {
+      }, /*#__PURE__*/React.createElement("div", {
         style: {
           height: 0,
           minWidth: fitWidth || 0
         }
-      }), jsx("div", {
+      }), /*#__PURE__*/React.createElement("div", {
         ref: this.popupRef
-      }, getBooleanFF('platform.editor.menu.group-items') && jsx(MenuGroup, {
+      }, getBooleanFF('platform.editor.menu.group-items') && /*#__PURE__*/React.createElement(MenuGroup, {
         role: shouldUseDefaultRole ? 'group' : 'menu'
       }, items.map(function (group, index) {
-        return jsx(Section, {
+        return /*#__PURE__*/React.createElement(Section, {
           hasSeparator: (section === null || section === void 0 ? void 0 : section.hasSeparator) && index > 0,
           title: section === null || section === void 0 ? void 0 : section.title,
           key: index
         }, group.items.map(function (item) {
           var _item$key;
-          return jsx(DropdownMenuItem, {
+          return /*#__PURE__*/React.createElement(DropdownMenuItem, {
             key: (_item$key = item.key) !== null && _item$key !== void 0 ? _item$key : String(item.content),
             item: item,
             onItemActivated: _this2.props.onItemActivated,
@@ -204,12 +202,12 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
           });
         }));
       })), !getBooleanFF('platform.editor.menu.group-items') && items.map(function (group, index) {
-        return jsx(MenuGroup, {
+        return /*#__PURE__*/React.createElement(MenuGroup, {
           key: index,
           role: shouldUseDefaultRole ? 'group' : 'menu'
         }, group.items.map(function (item) {
           var _item$key2;
-          return jsx(DropdownMenuItem, {
+          return /*#__PURE__*/React.createElement(DropdownMenuItem, {
             key: (_item$key2 = item.key) !== null && _item$key2 !== void 0 ? _item$key2 : String(item.content),
             item: item,
             onItemActivated: _this2.props.onItemActivated,
@@ -226,9 +224,9 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
       var _this$props2 = this.props,
         children = _this$props2.children,
         isOpen = _this$props2.isOpen;
-      return jsx("div", {
+      return /*#__PURE__*/React.createElement("div", {
         css: wrapper
-      }, jsx("div", {
+      }, /*#__PURE__*/React.createElement("div", {
         ref: this.handleRef
       }, children), isOpen ? this.renderDropdownMenu() : null);
     }
@@ -254,7 +252,7 @@ export { DropdownMenuWrapper as default };
 var DropdownMenuItemCustomComponent = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var children = props.children,
     rest = _objectWithoutProperties(props, _excluded);
-  return jsx("span", _extends({
+  return /*#__PURE__*/React.createElement("span", _extends({
     ref: ref
   }, rest, {
     style: {
@@ -283,14 +281,14 @@ function DropdownMenuItem(_ref) {
   // onClick and value.name are the action indicators in the handlers
   // If neither are present, don't wrap in an Item.
   if (!item.onClick && !(item.value && item.value.name)) {
-    return jsx("span", {
+    return /*#__PURE__*/React.createElement("span", {
       key: String(item.content)
     }, item.content);
   }
   var _handleSubmenuActive = function _handleSubmenuActive(event) {
     setSubmenuActive(!!event.target.closest(".".concat(DropdownMenuSharedCssClassName.SUBMENU)));
   };
-  var dropListItem = jsx("div", {
+  var dropListItem = /*#__PURE__*/React.createElement("div", {
     css: function css(theme) {
       return buttonStyles(item.isActive, submenuActive)({
         theme: theme
@@ -299,7 +297,7 @@ function DropdownMenuItem(_ref) {
     tabIndex: -1,
     "aria-disabled": item.isDisabled ? 'true' : 'false',
     onMouseDown: _handleSubmenuActive
-  }, jsx(CustomItem, {
+  }, /*#__PURE__*/React.createElement(CustomItem, {
     item: item,
     key: (_item$key3 = item.key) !== null && _item$key3 !== void 0 ? _item$key3 : String(item.content),
     testId: "dropdown-item__".concat(String(item.content)),
@@ -332,7 +330,7 @@ function DropdownMenuItem(_ref) {
   }, item.content));
   if (item.tooltipDescription) {
     var _item$key4;
-    return jsx(Tooltip, {
+    return /*#__PURE__*/React.createElement(Tooltip, {
       key: (_item$key4 = item.key) !== null && _item$key4 !== void 0 ? _item$key4 : String(item.content),
       content: item.tooltipDescription,
       position: item.tooltipPosition
@@ -345,7 +343,7 @@ export var DropdownMenuWithKeyboardNavigation = /*#__PURE__*/React.memo(function
   var keyDownHandlerContext = useContext(KeyDownHandlerContext);
   // This context is to handle the tab, Arrow Right/Left key events for dropdown.
   // Default context has the void callbacks for above key events
-  return jsx(DropdownMenuWrapper, _extends({
+  return /*#__PURE__*/React.createElement(DropdownMenuWrapper, _extends({
     arrowKeyNavigationProviderOptions: _objectSpread(_objectSpread({}, props.arrowKeyNavigationProviderOptions), {}, {
       keyDownHandlerContext: keyDownHandlerContext
     })

package/dist/esm/ui-menu/ToolbarArrowKeyNavigationProvider/index.js

@@ -1,10 +1,9 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject;
-/** @jsx jsx */
 /* eslint-disable no-console */
 
 import React, { useCallback, useLayoutEffect, useRef } from 'react';
-import { css, jsx } from '@emotion/react';
+import { css } from '@emotion/react';
 import { fullPageMessages as messages } from '../../messages';
 import { EDIT_AREA_ID } from '../../ui';
 /*
@@ -182,14 +181,14 @@ export var ToolbarArrowKeyNavigationProvider = function ToolbarArrowKeyNavigatio
       }
     };
   }, [selectedItemIndex, wrapperRef, editorView, disableArrowKeyNavigation, handleEscape, childComponentSelector, incrementIndex, decrementIndex, isShortcutToFocusToolbar, editorAppearance, useStickyToolbar]);
-  return jsx("div", {
+  return /*#__PURE__*/React.createElement("div", {
     css: editorAppearance === 'comment' && centeredToolbarContainer,
     className: "custom-key-handler-wrapper",
     ref: wrapperRef,
     role: "toolbar",
     "aria-label": intl.formatMessage(messages.toolbarLabel),
     "aria-controls": EDIT_AREA_ID
-  }, jsx(KeyDownHandlerContext.Provider, {
+  }, /*#__PURE__*/React.createElement(KeyDownHandlerContext.Provider, {
     value: submenuKeydownHandleContext
   }, children));
 };

package/dist/esm/ui-menu/ToolbarButton/index.js

@@ -6,9 +6,9 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 // This file is copied to `packages/editor/editor-plugin-ai/src/ui/components/AtlassianIntelligenceToolbarButton/ToolbarButton/index.tsx`
 // If you make any change here, copy it to above file as well
 // and notify about the change in #team-fc-editor-ai-dev channel.
-/** @jsx jsx */
+
 import React, { useCallback } from 'react';
-import { css, jsx } from '@emotion/react';
+import { css } from '@emotion/react';
 import { FabricChannel } from '@atlaskit/analytics-listeners';
 import Tooltip from '@atlaskit/tooltip';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, TOOLBAR_ACTION_SUBJECT_ID } from '../../analytics';
@@ -63,7 +63,7 @@ var ToolbarButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
   }, [disabled, onClick, onItemClick, item, buttonId]);
   var id = buttonId ? "editor-toolbar__".concat(buttonId) : undefined;
-  var button = jsx(Button, {
+  var button = /*#__PURE__*/React.createElement(Button, {
     id: id,
     ref: ref,
     appearance: "subtle",
@@ -89,11 +89,11 @@ var ToolbarButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
     return button;
   }
   var tooltipContent = !hideTooltip ? title : null;
-  return jsx(Tooltip, {
+  return /*#__PURE__*/React.createElement(Tooltip, {
     content: tooltipContent,
     hideTooltipOnClick: true,
     position: titlePosition
-  }, jsx("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     css: buttonWrapper
   }, button));
 });

package/dist/esm/ui-react/with-react-editor-view-outer-listeners.js

@@ -1,3 +1,4 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
@@ -9,7 +10,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["handleClickOutside", "handleEnterKeydown", "handleEscapeKeydown", "closeOnTab"];
 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; } }
-import React, { PureComponent } from 'react';
+import React, { PureComponent, useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
 import ReactEditorViewContext from './ReactEditorViewContext';
 
@@ -101,7 +102,16 @@ export default function withReactEditorViewOuterListeners(Component) {
       handleEscapeKeydown = _ref.handleEscapeKeydown,
       closeOnTab = _ref.closeOnTab,
       props = _objectWithoutProperties(_ref, _excluded);
-    var isActiveComponent = hasIsOpen(props) ? props.isOpen : true;
+    var isActiveProp = hasIsOpen(props) ? props.isOpen : true;
+    var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isActiveComponent = _useState2[0],
+      setActiveComponent = _useState2[1];
+    useEffect(function () {
+      requestAnimationFrame(function () {
+        setActiveComponent(isActiveProp);
+      });
+    }, [isActiveProp]);
     return /*#__PURE__*/React.createElement(ReactEditorViewContext.Consumer, null, function (_ref2) {
       var editorView = _ref2.editorView,
         editorRef = _ref2.editorRef;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-common",
-  "version": "76.24.3",
+  "version": "76.24.4",
   "description": "A package that contains common classes and components for editor and renderer",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"