@atlaskit/editor-common 76.25.1 → 76.25.2

package/dist/es2019/ui/DropList/index.js

@@ -1,13 +1,15 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/** @jsx jsx */
+
 import { Component } from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { DN50, DN600, N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
 import { borderRadius } from '@atlaskit/theme/constants';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "76.25.1";
+const packageVersion = "76.25.2";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {
@@ -125,7 +127,7 @@ class DropList extends Component {
       testId,
       id
     } = this.props;
-    let layerContent = isOpen ? /*#__PURE__*/React.createElement("div", {
+    let layerContent = isOpen ? jsx("div", {
       css: theme => this.menuWrapper({
         theme: theme
       }),
@@ -135,14 +137,14 @@ class DropList extends Component {
       id: id,
       role: "presentation"
     }, children) : null;
-    return /*#__PURE__*/React.createElement("div", {
+    return jsx("div", {
       css: this.wrapperStyles
-    }, /*#__PURE__*/React.createElement(Layer, {
+    }, jsx(Layer, {
       content: layerContent,
       offset: dropOffset,
       position: position,
       onPositioned: onPositioned
-    }, /*#__PURE__*/React.createElement("div", {
+    }, jsx("div", {
       css: this.triggerStyles,
       ref: this.handleTriggerRef
     }, trigger)));

package/dist/es2019/ui/Expand/index.js

@@ -1,6 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
+
 import React, { forwardRef } from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { defineMessages } from 'react-intl-next';
 import { akEditorLineHeight, akEditorSwoopCubicBezier, akLayoutGutterOffset, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { B300, DN50, DN600, N200, N200A, N300A, N30A, N40A, N50A, N90 } from '@atlaskit/theme/colors';
@@ -45,7 +47,7 @@ export const ExpandIconWrapper = ({
   children,
   expanded
 }) => {
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     css: props => expanded ? [expandIconWrapperStyle(props), expandIconWrapperExpandedStyle] : expandIconWrapperStyle(props)
   }, children);
 };
@@ -82,7 +84,7 @@ export const ExpandLayoutWrapperWithRef = /*#__PURE__*/forwardRef((props, ref) =
     children,
     ...rest
   } = props;
-  return /*#__PURE__*/React.createElement("div", _extends({
+  return jsx("div", _extends({
     css: expandLayoutWrapperStyle
   }, rest, {
     ref: ref

package/dist/es2019/ui/FloatingToolbar/Separator.js

@@ -1,4 +1,5 @@
-import { css } from '@emotion/react';
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
 import { N30 } from '@atlaskit/theme/colors';
 const separator = css`
   background: ${`var(--ds-border, ${N30})`};
@@ -7,7 +8,7 @@ const separator = css`
   margin: 0 ${"var(--ds-space-050, 4px)"};
   align-self: center;
 `;
-export default (() => /*#__PURE__*/React.createElement("div", {
+export default (() => jsx("div", {
   css: separator,
   className: "separator"
 }));

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

@@ -1,4 +1,5 @@
-import { css } from '@emotion/react';
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
 import EditIcon from '@atlaskit/icon/glyph/edit';
 const editIconStyles = css`
   width: 20px;
@@ -6,9 +7,9 @@ const editIconStyles = css`
 
 /* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
 export const SmallerEditIcon = () => {
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     css: editIconStyles
-  }, /*#__PURE__*/React.createElement(EditIcon, {
+  }, jsx(EditIcon, {
     label: "edit"
   }));
 };

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

@@ -1,4 +1,6 @@
+/** @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';
@@ -69,7 +71,7 @@ export default function MediaSingle({
     }
   }
   const [media, caption] = children;
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     ref: handleMediaSingleRef,
     css: MediaSingleDimensionHelper({
       width,
@@ -87,7 +89,7 @@ export default function MediaSingle({
       'is-loading': isLoading,
       'rich-media-wrapped': layout === 'wrap-left' || layout === 'wrap-right'
     })
-  }, /*#__PURE__*/React.createElement(MediaWrapper, {
+  }, jsx(MediaWrapper, {
     hasFallbackContainer: hasFallbackContainer,
     height: mediaWrapperHeight,
     paddingBottom: paddingBottom

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

@@ -1,5 +1,7 @@
+/** @jsx jsx */
+
 import React from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { akEditorFullPageMaxWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { nonWrappedLayouts } from '../../utils';
 import { calcBreakoutWidth, calcWideWidth } from '../../utils/breakout';
@@ -198,7 +200,7 @@ export const mediaWrapperStyle = props => css`
 export const MediaWrapper = ({
   children,
   ...rest
-}) => /*#__PURE__*/React.createElement("div", {
+}) => jsx("div", {
   css: mediaWrapperStyle(rest)
 }, children);
 MediaWrapper.displayName = 'WrapperMediaSingle';
@@ -213,7 +215,7 @@ MediaWrapper.displayName = 'WrapperMediaSingle';
 export const MediaBorderGapFiller = ({
   borderColor
 }) => {
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     style: {
       position: 'absolute',
       inset: '0px',

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

@@ -1,4 +1,6 @@
-import { css } from '@emotion/react';
+/** @jsx jsx */
+
+import { css, jsx } 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';
@@ -22,31 +24,31 @@ const iconWrapperStyle = css`
 `;
 export const HelperMessage = ({
   children
-}) => /*#__PURE__*/React.createElement("div", {
+}) => jsx("div", {
   css: messageStyle
 }, children);
 export const ErrorMessage = ({
   children
-}) => /*#__PURE__*/React.createElement("div", {
+}) => jsx("div", {
   css: theme => {
     return [messageStyle(theme), errorColor];
   }
-}, /*#__PURE__*/React.createElement("span", {
+}, jsx("span", {
   css: iconWrapperStyle
-}, /*#__PURE__*/React.createElement(ErrorIcon, {
+}, jsx(ErrorIcon, {
   size: "small",
   label: "error",
   "aria-label": "error"
 })), children);
 export const ValidMessage = ({
   children
-}) => /*#__PURE__*/React.createElement("div", {
+}) => jsx("div", {
   css: theme => {
     return [messageStyle(theme), validColor];
   }
-}, /*#__PURE__*/React.createElement("span", {
+}, jsx("span", {
   css: iconWrapperStyle
-}, /*#__PURE__*/React.createElement(SuccessIcon, {
+}, jsx(SuccessIcon, {
   size: "small",
   label: "success"
 })), children);

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

@@ -1,5 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/** @jsx jsx */
+
 import { PureComponent } from 'react';
+import { jsx } from '@emotion/react';
 import { browser } from '../../utils';
 import { panelTextInput, panelTextInputWithCustomWidth } from './styles';
 const KeyZCode = 90;
@@ -103,7 +106,7 @@ export default class PanelTextInput extends PureComponent {
     const {
       value
     } = this.state;
-    return /*#__PURE__*/React.createElement("input", {
+    return jsx("input", {
       css: [panelTextInput, width !== undefined && panelTextInputWithCustomWidth(width)],
       role: role,
       "aria-autocomplete": ariaAutoComplete ? 'list' : undefined,

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

@@ -1,5 +1,6 @@
+/** @jsx jsx */
 import React, { useCallback, useRef } from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import QuestionsIcon from '@atlaskit/icon/glyph/question-circle';
@@ -41,18 +42,18 @@ const UnsupportedBlockNode = ({
   });
   const originalNodeType = node === null || node === void 0 ? void 0 : node.attrs.originalValue.type;
   const tooltipOnShowHandler = useCallback(() => dispatchAnalyticsEvent && trackUnsupportedContentTooltipDisplayedFor(dispatchAnalyticsEvent, ACTION_SUBJECT_ID.ON_UNSUPPORTED_BLOCK, originalNodeType), [dispatchAnalyticsEvent, originalNodeType]);
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     css: blockNodeStyle,
     className: "unsupported"
-  }, message, /*#__PURE__*/React.createElement(Tooltip, {
+  }, message, jsx(Tooltip, {
     content: tooltipContent,
     hideTooltipOnClick: false,
     position: "bottom",
     onShow: tooltipOnShowHandler,
     strategy: "absolute"
-  }, /*#__PURE__*/React.createElement("span", {
+  }, jsx("span", {
     style: style
-  }, /*#__PURE__*/React.createElement(QuestionsIcon, {
+  }, jsx(QuestionsIcon, {
     label: "?",
     size: "small"
   }))));

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

@@ -1,5 +1,6 @@
+/** @jsx jsx */
 import React, { useCallback, useRef } from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import QuestionsIcon from '@atlaskit/icon/glyph/question-circle';
@@ -39,17 +40,17 @@ const UnsupportedInlineNode = ({
   });
   const originalNodeType = node === null || node === void 0 ? void 0 : node.attrs.originalValue.type;
   const tooltipOnShowHandler = useCallback(() => dispatchAnalyticsEvent && trackUnsupportedContentTooltipDisplayedFor(dispatchAnalyticsEvent, ACTION_SUBJECT_ID.ON_UNSUPPORTED_INLINE, originalNodeType), [dispatchAnalyticsEvent, originalNodeType]);
-  return /*#__PURE__*/React.createElement("span", {
+  return jsx("span", {
     css: inlineNodeStyle
-  }, message, /*#__PURE__*/React.createElement(Tooltip, {
+  }, message, jsx(Tooltip, {
     content: tooltipContent,
     hideTooltipOnClick: false,
     position: "bottom",
     onShow: tooltipOnShowHandler,
     strategy: "absolute"
-  }, /*#__PURE__*/React.createElement("span", {
+  }, jsx("span", {
     style: style
-  }, /*#__PURE__*/React.createElement(QuestionsIcon, {
+  }, jsx(QuestionsIcon, {
     label: "?",
     size: "small"
   }))));

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

@@ -1,6 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/** @jsx jsx */
 import React from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import rafSchedule from 'raf-schd';
 import { WidthObserver } from '@atlaskit/width-detector';
 const SCROLLBAR_WIDTH = 30;
@@ -45,16 +46,16 @@ export class WidthProvider extends React.Component {
     }
   }
   render() {
-    return /*#__PURE__*/React.createElement("div", {
+    return jsx("div", {
       css: css`
           position: relative;
           width: 100%;
         `,
       className: this.props.className
-    }, /*#__PURE__*/React.createElement(WidthObserver, {
+    }, jsx(WidthObserver, {
       setWidth: this.setWidth,
       offscreen: true
-    }), /*#__PURE__*/React.createElement(Provider, {
+    }), jsx(Provider, {
       value: createWidthContext(this.state.width)
     }, this.props.children));
   }

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

@@ -1,5 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/** @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';
@@ -39,11 +41,11 @@ class Color extends PureComponent {
       hexToPaletteColor
     } = this.props;
     const colorStyle = hexToPaletteColor ? hexToPaletteColor(value) : value;
-    return /*#__PURE__*/React.createElement(Tooltip, {
+    return jsx(Tooltip, {
       content: label
-    }, /*#__PURE__*/React.createElement("span", {
+    }, jsx("span", {
       css: buttonWrapperStyle
-    }, /*#__PURE__*/React.createElement("button", {
+    }, jsx("button", {
       css: buttonStyle,
       "aria-label": label,
       role: "radio",
@@ -57,7 +59,7 @@ class Color extends PureComponent {
         border: `1px solid ${borderColor}`
       },
       autoFocus: autoFocus
-    }, isSelected && /*#__PURE__*/React.createElement(EditorDoneIcon, {
+    }, isSelected && jsx(EditorDoneIcon, {
       primaryColor: checkMarkColor,
       label: ""
     }))));

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

@@ -1,4 +1,6 @@
+/** @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';
@@ -54,7 +56,7 @@ const ColorPalette = props => {
   const colorsPerRow = React.useMemo(() => {
     return getColorsPerRowFromPalette(palette, cols);
   }, [palette, cols]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, colorsPerRow.map(row => /*#__PURE__*/React.createElement("div", {
+  return jsx(React.Fragment, null, colorsPerRow.map(row => jsx("div", {
     css: colorPaletteWrapper,
     className: className,
     key: `row-first-color-${row[0].value}`,
@@ -73,7 +75,7 @@ const ColorPalette = props => {
         message = getColorMessage(paletteColorTooltipMessages.light, value.toUpperCase());
       }
     }
-    return /*#__PURE__*/React.createElement(Color, {
+    return jsx(Color, {
       key: value,
       value: value,
       borderColor: border,

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

@@ -1,5 +1,6 @@
+/** @jsx jsx */
 import React from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import Button from '@atlaskit/button';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
@@ -112,7 +113,7 @@ const ColorPickerButton = props => {
       selectedRowIndex,
       selectedColumnIndex
     } = getSelectedRowAndColumnFromPalette(props.colorPalette, selectedColor, props.cols);
-    return /*#__PURE__*/React.createElement(Popup, {
+    return jsx(Popup, {
       target: buttonRef.current,
       fitHeight: 350,
       fitWidth: 350,
@@ -126,10 +127,10 @@ const ColorPickerButton = props => {
       zIndex: props.setDisableParentScroll ? 600 : undefined,
       ariaLabel: "Color picker popup",
       onPositionCalculated: onPositionCalculated
-    }, /*#__PURE__*/React.createElement("div", {
+    }, jsx("div", {
       css: colorPickerWrapper,
       "data-test-id": "color-picker-menu"
-    }, /*#__PURE__*/React.createElement(ArrowKeyNavigationProvider, {
+    }, jsx(ArrowKeyNavigationProvider, {
       type: ArrowKeyNavigationType.COLOR,
       selectedRowIndex: selectedRowIndex,
       selectedColumnIndex: selectedColumnIndex,
@@ -137,7 +138,7 @@ const ColorPickerButton = props => {
       handleClose: () => setIsPopupOpen(false),
       isOpenedByKeyboard: isOpenedByKeyboard,
       isPopupPositioned: isPopupPositioned
-    }, /*#__PURE__*/React.createElement(ColorPaletteWithListeners, {
+    }, jsx(ColorPaletteWithListeners, {
       cols: props.cols,
       selectedColor: selectedColor,
       onClick: onColorSelected,
@@ -181,12 +182,12 @@ const ColorPickerButton = props => {
     }
   `;
   };
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     css: colorPickerButtonWrapper
-  }, /*#__PURE__*/React.createElement(Tooltip, {
+  }, jsx(Tooltip, {
     content: title,
     position: "top"
-  }, /*#__PURE__*/React.createElement(Button, {
+  }, jsx(Button, {
     ref: buttonRef,
     "aria-label": title,
     spacing: "compact",
@@ -199,9 +200,9 @@ const ColorPickerButton = props => {
       }
     },
     css: buttonStyle,
-    iconAfter: /*#__PURE__*/React.createElement("span", {
+    iconAfter: jsx("span", {
       css: colorPickerExpandContainer
-    }, /*#__PURE__*/React.createElement(ExpandIcon, {
+    }, jsx(ExpandIcon, {
       label: ""
     }))
   })), renderPopup());

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

@@ -1,5 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
+/** @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';
@@ -14,10 +16,9 @@ export const DropdownContainer = /*#__PURE__*/React.memo(function DropdownContai
     };
   }
   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
-    React.createElement(DropdownComponent, _extends({}, props, {
+    jsx(DropdownComponent, _extends({}, props, {
       arrowKeyNavigationProviderOptions: newArrowKeyNavigationProviderOptions
     }))
   );

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

@@ -1,7 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/** @jsx jsx */
+
 import React, { PureComponent, useContext } from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { CustomItem, MenuGroup, Section } from '@atlaskit/menu';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
@@ -166,7 +168,7 @@ export default class DropdownMenuWrapper extends PureComponent {
         }
       }
     };
-    return /*#__PURE__*/React.createElement(Popup, {
+    return jsx(Popup, {
       target: isOpen ? target : undefined,
       mountTo: mountTo,
       boundariesElement: boundariesElement,
@@ -176,10 +178,10 @@ export default class DropdownMenuWrapper extends PureComponent {
       fitWidth: fitWidth,
       zIndex: zIndex || akEditorFloatingPanelZIndex,
       offset: offset
-    }, /*#__PURE__*/React.createElement(ArrowKeyNavigationProvider, _extends({}, navigationProviderProps, {
+    }, jsx(ArrowKeyNavigationProvider, _extends({}, navigationProviderProps, {
       handleClose: this.handleCloseAndFocus,
       closeOnTab: true
-    }), /*#__PURE__*/React.createElement(DropListWithOutsideListeners, {
+    }), jsx(DropListWithOutsideListeners, {
       isOpen: true,
       appearance: "tall",
       position: popupPlacement.join(' '),
@@ -193,22 +195,22 @@ export default class DropdownMenuWrapper extends PureComponent {
         e.stopPropagation();
       },
       targetRef: this.state.target
-    }, /*#__PURE__*/React.createElement("div", {
+    }, jsx("div", {
       style: {
         height: 0,
         minWidth: fitWidth || 0
       }
-    }), /*#__PURE__*/React.createElement("div", {
+    }), jsx("div", {
       ref: this.popupRef
-    }, getBooleanFF('platform.editor.menu.group-items') && /*#__PURE__*/React.createElement(MenuGroup, {
+    }, getBooleanFF('platform.editor.menu.group-items') && jsx(MenuGroup, {
       role: shouldUseDefaultRole ? 'group' : 'menu'
-    }, items.map((group, index) => /*#__PURE__*/React.createElement(Section, {
+    }, items.map((group, index) => jsx(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(item => {
       var _item$key;
-      return /*#__PURE__*/React.createElement(DropdownMenuItem, {
+      return jsx(DropdownMenuItem, {
         key: (_item$key = item.key) !== null && _item$key !== void 0 ? _item$key : String(item.content),
         item: item,
         onItemActivated: this.props.onItemActivated,
@@ -216,12 +218,12 @@ export default class DropdownMenuWrapper extends PureComponent {
         onMouseEnter: this.props.onMouseEnter,
         onMouseLeave: this.props.onMouseLeave
       });
-    })))), !getBooleanFF('platform.editor.menu.group-items') && items.map((group, index) => /*#__PURE__*/React.createElement(MenuGroup, {
+    })))), !getBooleanFF('platform.editor.menu.group-items') && items.map((group, index) => jsx(MenuGroup, {
       key: index,
       role: shouldUseDefaultRole ? 'group' : 'menu'
     }, group.items.map(item => {
       var _item$key2;
-      return /*#__PURE__*/React.createElement(DropdownMenuItem, {
+      return jsx(DropdownMenuItem, {
         key: (_item$key2 = item.key) !== null && _item$key2 !== void 0 ? _item$key2 : String(item.content),
         item: item,
         onItemActivated: this.props.onItemActivated,
@@ -236,9 +238,9 @@ export default class DropdownMenuWrapper extends PureComponent {
       children,
       isOpen
     } = this.props;
-    return /*#__PURE__*/React.createElement("div", {
+    return jsx("div", {
       css: wrapper
-    }, /*#__PURE__*/React.createElement("div", {
+    }, jsx("div", {
       ref: this.handleRef
     }, children), isOpen ? this.renderDropdownMenu() : null);
   }
@@ -261,7 +263,7 @@ const DropdownMenuItemCustomComponent = /*#__PURE__*/React.forwardRef((props, re
     children,
     ...rest
   } = props;
-  return /*#__PURE__*/React.createElement("span", _extends({
+  return jsx("span", _extends({
     ref: ref
   }, rest, {
     style: {
@@ -288,21 +290,21 @@ function DropdownMenuItem({
   // 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 /*#__PURE__*/React.createElement("span", {
+    return jsx("span", {
       key: String(item.content)
     }, item.content);
   }
   const _handleSubmenuActive = event => {
     setSubmenuActive(!!event.target.closest(`.${DropdownMenuSharedCssClassName.SUBMENU}`));
   };
-  const dropListItem = /*#__PURE__*/React.createElement("div", {
+  const dropListItem = jsx("div", {
     css: theme => buttonStyles(item.isActive, submenuActive)({
       theme
     }),
     tabIndex: -1,
     "aria-disabled": item.isDisabled ? 'true' : 'false',
     onMouseDown: _handleSubmenuActive
-  }, /*#__PURE__*/React.createElement(CustomItem, {
+  }, jsx(CustomItem, {
     item: item,
     key: (_item$key3 = item.key) !== null && _item$key3 !== void 0 ? _item$key3 : String(item.content),
     testId: `dropdown-item__${String(item.content)}`,
@@ -329,7 +331,7 @@ function DropdownMenuItem({
   }, item.content));
   if (item.tooltipDescription) {
     var _item$key4;
-    return /*#__PURE__*/React.createElement(Tooltip, {
+    return jsx(Tooltip, {
       key: (_item$key4 = item.key) !== null && _item$key4 !== void 0 ? _item$key4 : String(item.content),
       content: item.tooltipDescription,
       position: item.tooltipPosition
@@ -343,7 +345,7 @@ export const DropdownMenuWithKeyboardNavigation = /*#__PURE__*/React.memo(({
   const 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 /*#__PURE__*/React.createElement(DropdownMenuWrapper, _extends({
+  return jsx(DropdownMenuWrapper, _extends({
     arrowKeyNavigationProviderOptions: {
       ...props.arrowKeyNavigationProviderOptions,
       keyDownHandlerContext

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

@@ -1,7 +1,8 @@
+/** @jsx jsx */
 /* eslint-disable no-console */
 
 import React, { useCallback, useLayoutEffect, useRef } from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { fullPageMessages as messages } from '../../messages';
 import { EDIT_AREA_ID } from '../../ui';
 /*
@@ -185,14 +186,14 @@ export const ToolbarArrowKeyNavigationProvider = ({
       }
     };
   }, [selectedItemIndex, wrapperRef, editorView, disableArrowKeyNavigation, handleEscape, childComponentSelector, incrementIndex, decrementIndex, isShortcutToFocusToolbar, editorAppearance, useStickyToolbar]);
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("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
-  }, /*#__PURE__*/React.createElement(KeyDownHandlerContext.Provider, {
+  }, jsx(KeyDownHandlerContext.Provider, {
     value: submenuKeydownHandleContext
   }, children));
 };