@atlaskit/editor-common 76.25.0 → 76.25.2

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));
 };

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

@@ -1,9 +1,9 @@
 // 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 } from '@emotion/react';
+import { css, jsx } 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';
@@ -60,7 +60,7 @@ const ToolbarButton = /*#__PURE__*/React.forwardRef((props, ref) => {
     }
   }, [disabled, onClick, onItemClick, item, buttonId]);
   const id = buttonId ? `editor-toolbar__${buttonId}` : undefined;
-  const button = /*#__PURE__*/React.createElement(Button, {
+  const button = jsx(Button, {
     id: id,
     ref: ref,
     appearance: "subtle",
@@ -86,11 +86,11 @@ const ToolbarButton = /*#__PURE__*/React.forwardRef((props, ref) => {
     return button;
   }
   const tooltipContent = !hideTooltip ? title : null;
-  return /*#__PURE__*/React.createElement(Tooltip, {
+  return jsx(Tooltip, {
     content: tooltipContent,
     hideTooltipOnClick: true,
     position: titlePosition
-  }, /*#__PURE__*/React.createElement("div", {
+  }, jsx("div", {
     css: buttonWrapper
   }, button));
 });

package/dist/esm/card/LinkToolbarButtonGroup.js

@@ -2,8 +2,9 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _excluded = ["disabled"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+/** @jsx jsx */
 import React from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { ButtonGroup } from '@atlaskit/button';
 import { FloatingToolbarButton as Button } from '../ui';
 
@@ -15,7 +16,7 @@ var buttonStyleNoneEvent = css(_templateObject2 || (_templateObject2 = _taggedTe
 var DisallowedWrapper = function DisallowedWrapper(_ref) {
   var disabled = _ref.disabled,
     props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement("div", props);
+  return jsx("div", props);
 };
 
 /**
@@ -26,7 +27,7 @@ var defaultWrapperStyle = css(_templateObject3 || (_templateObject3 = _taggedTem
 var disallowedWrapperStyle = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  cursor: not-allowed;\n"])));
 export var LinkToolbarButtonGroup = function LinkToolbarButtonGroup(_ref2) {
   var options = _ref2.options;
-  return /*#__PURE__*/React.createElement(ButtonGroup, null, options.map(function (_ref3) {
+  return jsx(ButtonGroup, null, options.map(function (_ref3) {
     var onClick = _ref3.onClick,
       selected = _ref3.selected,
       disabled = _ref3.disabled,
@@ -34,14 +35,14 @@ export var LinkToolbarButtonGroup = function LinkToolbarButtonGroup(_ref2) {
       tooltipContent = _ref3.tooltipContent,
       title = _ref3.title,
       Icon = _ref3.icon;
-    return /*#__PURE__*/React.createElement(DisallowedWrapper, {
+    return jsx(DisallowedWrapper, {
       css: disabled ? disallowedWrapperStyle : defaultWrapperStyle,
       key: testId,
       disabled: disabled
-    }, /*#__PURE__*/React.createElement(Button, {
+    }, jsx(Button, {
       css: disabled ? buttonStyleNoneEvent : buttonStyle,
       title: title,
-      icon: /*#__PURE__*/React.createElement(Icon, {
+      icon: jsx(Icon, {
         size: "medium",
         label: title
       }),

package/dist/esm/element-browser/ViewMore.js

@@ -1,7 +1,8 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2;
+/** @jsx jsx */
 import { useEffect, useRef } from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { ButtonItem, Section } from '@atlaskit/menu';
 var itemBefore = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 40px;\n  height: 40px;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin-right: ", ";\n"])), "var(--ds-space-050, 4px)");
 export var ViewMore = function ViewMore(_ref) {
@@ -13,11 +14,11 @@ export var ViewMore = function ViewMore(_ref) {
       ref.current.focus();
     }
   }, [focus]);
-  return /*#__PURE__*/React.createElement(Section, {
+  return jsx(Section, {
     hasSeparator: true
-  }, /*#__PURE__*/React.createElement(ButtonItem, {
+  }, jsx(ButtonItem, {
     onClick: item.action,
-    iconBefore: /*#__PURE__*/React.createElement("div", {
+    iconBefore: jsx("div", {
       css: itemBefore
     }, item.icon()),
     "aria-describedby": item.title,

package/dist/esm/element-browser/components/CategoryList.js

@@ -8,8 +8,10 @@ var _excluded = ["categories"],
   _excluded2 = ["buttonStyles"];
 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, { Fragment, memo, useCallback } from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { withAnalyticsContext } from '@atlaskit/analytics-next';
 import Button from '@atlaskit/button/custom-theme-button';
 import { B400, B50, N800 } from '@atlaskit/theme/colors';
@@ -24,8 +26,8 @@ function CategoryList(_ref) {
     _React$useState2 = _slicedToArray(_React$useState, 2),
     focusedCategoryIndex = _React$useState2[0],
     setFocusedCategoryIndex = _React$useState2[1];
-  return /*#__PURE__*/React.createElement(Fragment, null, categories.map(function (category, index) {
-    return /*#__PURE__*/React.createElement(CategoryListItem, _extends({
+  return jsx(Fragment, null, categories.map(function (category, index) {
+    return jsx(CategoryListItem, _extends({
       key: category.title,
       index: index,
       category: category,
@@ -84,9 +86,9 @@ function CategoryListItem(_ref2) {
       })
     }, rest);
   }, [category.name, selectedCategory]);
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     css: buttonWrapper
-  }, /*#__PURE__*/React.createElement(Button, {
+  }, jsx(Button, {
     appearance: "subtle",
     isSelected: selectedCategory === category.name,
     onClick: onClick,

package/dist/esm/element-browser/components/ElementBrowserLoader.js

@@ -1,7 +1,8 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject;
+/** @jsx jsx */
 import React from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import Loadable from 'react-loadable';
 import Spinner from '@atlaskit/spinner';
 var spinnerContainer = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n"])));
@@ -12,9 +13,9 @@ var ElementBrowserLoader = Loadable({
     });
   },
   loading: function loading() {
-    return /*#__PURE__*/React.createElement("div", {
+    return jsx("div", {
       css: spinnerContainer
-    }, /*#__PURE__*/React.createElement(Spinner, {
+    }, jsx(Spinner, {
       size: "medium"
     }));
   }

package/dist/esm/element-browser/components/ElementList/ElementList.js

@@ -4,8 +4,9 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _excluded = ["items", "mode", "selectedItemIndex", "focusedItemIndex", "setColumnCount", "createAnalyticsEvent", "emptyStateHandler", "selectedCategory", "searchTerm"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+/** @jsx jsx */
 import React, { Fragment, memo, useCallback, useEffect, useMemo, useState } from 'react';
-import { css } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { AutoSizer } from 'react-virtualized/dist/commonjs/AutoSizer';
 import { Collection } from 'react-virtualized/dist/commonjs/Collection';
 import { withAnalyticsContext } from '@atlaskit/analytics-next';
@@ -76,12 +77,12 @@ function ElementList(_ref) {
       if (items[index] == null) {
         return;
       }
-      return /*#__PURE__*/React.createElement("div", {
+      return jsx("div", {
         style: style,
         key: key,
         className: "element-item-wrapper",
         css: elementItemWrapper
-      }, /*#__PURE__*/React.createElement(MemoizedElementItem, _extends({
+      }, jsx(MemoizedElementItem, _extends({
         inlineMode: !fullMode,
         index: index,
         item: items[index],
@@ -90,20 +91,20 @@ function ElementList(_ref) {
       }, props)));
     };
   }, [items, fullMode, selectedItemIndex, focusedItemIndex, props]);
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(ContainerWidthMonitor, null), !items.length ? emptyStateHandler ? emptyStateHandler({
+  return jsx(Fragment, null, jsx(ContainerWidthMonitor, null), !items.length ? emptyStateHandler ? emptyStateHandler({
     mode: mode,
     selectedCategory: selectedCategory,
     searchTerm: searchTerm
-  }) : /*#__PURE__*/React.createElement(EmptyState, {
+  }) : jsx(EmptyState, {
     onExternalLinkClick: onExternalLinkClick
-  }) : /*#__PURE__*/React.createElement("div", {
+  }) : jsx("div", {
     css: elementItemsWrapper,
     "data-testid": "element-items"
-  }, /*#__PURE__*/React.createElement(Fragment, null, containerWidth > 0 && /*#__PURE__*/React.createElement(AutoSizer, {
+  }, jsx(Fragment, null, containerWidth > 0 && jsx(AutoSizer, {
     disableWidth: true
   }, function (_ref3) {
     var height = _ref3.height;
-    return /*#__PURE__*/React.createElement(Collection, {
+    return jsx(Collection, {
       cellCount: items.length,
       cellRenderer: cellRenderer,
       cellSizeAndPositionGetter: cellSizeAndPositionGetter(containerWidth - ELEMENT_LIST_PADDING * 2, scrollbarWidth),
@@ -163,12 +164,12 @@ export function ElementItem(_ref4) {
     title = item.title,
     description = item.description,
     keyshortcut = item.keyshortcut;
-  return /*#__PURE__*/React.createElement(Tooltip, {
+  return jsx(Tooltip, {
     content: description,
     testId: "element-item-tooltip-".concat(index)
-  }, /*#__PURE__*/React.createElement(ButtonItem, {
+  }, jsx(ButtonItem, {
     onClick: onClick,
-    iconBefore: /*#__PURE__*/React.createElement(ElementBefore, {
+    iconBefore: jsx(ElementBefore, {
       icon: icon,
       title: title
     }),
@@ -176,7 +177,7 @@ export function ElementItem(_ref4) {
     "aria-describedby": title,
     ref: ref,
     testId: "element-item-".concat(index)
-  }, /*#__PURE__*/React.createElement(ItemContent, {
+  }, jsx(ItemContent, {
     style: inlineMode ? null : itemStyleOverrides,
     tabIndex: 0,
     title: title,
@@ -194,28 +195,28 @@ var itemStyleOverrides = {
 var ElementBefore = /*#__PURE__*/memo(function (_ref5) {
   var icon = _ref5.icon,
     title = _ref5.title;
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     css: [itemIcon, itemIconStyle]
-  }, icon ? icon() : /*#__PURE__*/React.createElement(IconFallback, null));
+  }, icon ? icon() : jsx(IconFallback, null));
 });
 var ItemContent = /*#__PURE__*/memo(function (_ref6) {
   var title = _ref6.title,
     description = _ref6.description,
     keyshortcut = _ref6.keyshortcut;
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     css: itemBody,
     className: "item-body"
-  }, /*#__PURE__*/React.createElement("div", {
+  }, jsx("div", {
     css: itemText
-  }, /*#__PURE__*/React.createElement("div", {
+  }, jsx("div", {
     css: itemTitleWrapper
-  }, /*#__PURE__*/React.createElement("p", {
+  }, jsx("p", {
     css: itemTitle
-  }, title), /*#__PURE__*/React.createElement("div", {
+  }, title), jsx("div", {
     css: itemAfter
-  }, keyshortcut && /*#__PURE__*/React.createElement("div", {
+  }, keyshortcut && jsx("div", {
     css: shortcutStyle
-  }, keyshortcut))), description && /*#__PURE__*/React.createElement("p", {
+  }, keyshortcut))), description && jsx("p", {
     css: itemDescription
   }, description)));
 });

package/dist/esm/element-browser/components/ElementList/EmptyState.js

@@ -1,33 +1,34 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-import { css } from '@emotion/react';
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import Button from '@atlaskit/button';
 import NotFoundIllustration from './NotFoundIllustration';
 export default function EmptyState(_ref) {
   var onExternalLinkClick = _ref.onExternalLinkClick;
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     css: emptyStateWrapper
-  }, /*#__PURE__*/React.createElement(NotFoundIllustration, null), /*#__PURE__*/React.createElement("div", {
+  }, jsx(NotFoundIllustration, null), jsx("div", {
     css: emptyStateHeading
-  }, /*#__PURE__*/React.createElement(FormattedMessage, {
+  }, jsx(FormattedMessage, {
     id: "fabric.editor.elementbrowser.search.empty-state.heading",
     defaultMessage: "Nothing matches your search",
     description: "Empty state heading"
-  })), /*#__PURE__*/React.createElement("div", {
+  })), jsx("div", {
     css: emptyStateSubHeading
-  }, /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(FormattedMessage, {
+  }, jsx("p", null, jsx(FormattedMessage, {
     id: "fabric.editor.elementbrowser.search.empty-state.sub-heading",
     defaultMessage: "Try searching with a different term or discover new apps for Atlassian products.",
     description: "Empty state sub-heading"
-  })), /*#__PURE__*/React.createElement("div", {
+  })), jsx("div", {
     css: externalLinkWrapper
-  }, /*#__PURE__*/React.createElement(Button, {
+  }, jsx(Button, {
     appearance: "primary",
     target: "_blank",
     href: "https://marketplace.atlassian.com/search?category=Macros&hosting=cloud&product=confluence",
     onClick: onExternalLinkClick
-  }, /*#__PURE__*/React.createElement(FormattedMessage, {
+  }, jsx(FormattedMessage, {
     id: "fabric.editor.elementbrowser.search.empty-state.sub-heading.link",
     defaultMessage: "Explore Atlassian Marketplace",
     description: "Empty state sub-heading external link"