@atlaskit/editor-core 163.0.0 → 164.0.2

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

@@ -13,8 +13,9 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 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 styled from 'styled-components'; // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
+/** @jsx jsx */
+import { PureComponent } from 'react';
+import { css, jsx } from '@emotion/react'; // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 
 import DropList from '@atlaskit/droplist'; // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 
@@ -23,18 +24,14 @@ import Tooltip from '@atlaskit/tooltip';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import withOuterListeners from '../with-outer-listeners';
-var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /* tooltip in ToolbarButton is display:block */\n  & > div > div {\n    display: flex;\n  }\n"])));
+var wrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  /* tooltip in ToolbarButton is display:block */\n  & > div > div {\n    display: flex;\n  }\n"])));
 var DropListWithOutsideListeners = withOuterListeners(DropList);
 /**
  * Hack for item to imitate old dropdown-menu selected styles
  */
 
-var ItemWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", ";\n"])), function (props) {
-  return props.isSelected ? '&& > span, && > span:hover { background: #6c798f; color: #fff; }' : '';
-});
-var ItemContentWrapper = styled.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", ";\n"])), function (props) {
-  return props.hasElemBefore ? 'margin-left: 8px;' : '';
-});
+var itemWrapper = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  && > span,\n  && > span:hover {\n    background: #6c798f;\n    color: #fff;\n  }\n"])));
+var itemContentWrapper = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-left: 8px;\n"])));
 /**
  * Wrapper around @atlaskit/droplist which uses Popup and Portal to render
  * dropdown-menu outside of "overflow: hidden" containers when needed.
@@ -100,15 +97,15 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
       // 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);
       }
 
-      var dropListItem = /*#__PURE__*/React.createElement(ItemWrapper, {
-        key: item.key || item.content,
-        isSelected: item.isActive
-      }, /*#__PURE__*/React.createElement(Item, {
+      var dropListItem = jsx("div", {
+        css: item.isActive ? itemWrapper : '',
+        key: item.key || item.content
+      }, jsx(Item, {
         role: shouldUseDefaultRole ? 'button' : 'menuitem',
         elemBefore: item.elemBefore,
         elemAfter: item.elemAfter,
@@ -131,12 +128,12 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
         className: item.className,
         "aria-label": item.label || String(item.content),
         "aria-pressed": shouldUseDefaultRole ? item.isActive : undefined
-      }, /*#__PURE__*/React.createElement(ItemContentWrapper, {
-        hasElemBefore: !!item.elemBefore
+      }, jsx("span", {
+        css: !!item.elemBefore ? itemContentWrapper : ''
       }, item.content)));
 
       if (item.tooltipDescription) {
-        return /*#__PURE__*/React.createElement(Tooltip, {
+        return jsx(Tooltip, {
           key: item.key || item.content,
           content: item.tooltipDescription,
           position: item.tooltipPosition
@@ -164,7 +161,7 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
           isOpen = _this$props2.isOpen,
           zIndex = _this$props2.zIndex,
           shouldUseDefaultRole = _this$props2.shouldUseDefaultRole;
-      return /*#__PURE__*/React.createElement(Popup, {
+      return jsx(Popup, {
         target: isOpen ? target : undefined,
         mountTo: mountTo,
         boundariesElement: boundariesElement,
@@ -174,7 +171,7 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
         fitWidth: fitWidth,
         zIndex: zIndex || akEditorFloatingPanelZIndex,
         offset: offset
-      }, /*#__PURE__*/React.createElement(DropListWithOutsideListeners, {
+      }, jsx(DropListWithOutsideListeners, {
         isOpen: true,
         appearance: "tall",
         position: popupPlacement.join(' '),
@@ -183,13 +180,13 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
         isTriggerNotTabbable: true,
         handleClickOutside: this.handleClose,
         handleEscapeKeydown: this.handleClose
-      }, /*#__PURE__*/React.createElement("div", {
+      }, jsx("div", {
         style: {
           height: 0,
           minWidth: fitWidth || 0
         }
       }), items.map(function (group, index) {
-        return /*#__PURE__*/React.createElement(ItemGroup, {
+        return jsx(ItemGroup, {
           key: index,
           role: shouldUseDefaultRole ? 'group' : 'menu'
         }, group.items.map(function (item) {
@@ -203,7 +200,9 @@ var DropdownMenuWrapper = /*#__PURE__*/function (_PureComponent) {
       var _this$props3 = this.props,
           children = _this$props3.children,
           isOpen = _this$props3.isOpen;
-      return /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement("div", {
+      return jsx("div", {
+        css: wrapper
+      }, jsx("div", {
         ref: this.handleRef
       }, children), isOpen ? this.renderDropdownMenu() : null);
     }

package/dist/esm/ui/ElementBrowser/InsertMenu.js

@@ -1,11 +1,15 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+var _excluded = ["children"];
 
 var _templateObject, _templateObject2, _templateObject3;
 
+/** @jsx jsx */
 import React, { useState, useCallback } from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 import Item, { itemThemeNamespace } from '@atlaskit/item'; // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
@@ -80,10 +84,10 @@ var InsertMenu = function InsertMenu(_ref) {
   }, [quickInsertDropdownItems]);
   var render = useCallback(function (_ref2) {
     var quickInsertState = _ref2.quickInsertState;
-    return /*#__PURE__*/React.createElement(ElementBrowserWrapper, {
+    return jsx(ElementBrowserWrapper, {
       handleClickOutside: toggleVisiblity,
       handleEscapeKeydown: toggleVisiblity
-    }, /*#__PURE__*/React.createElement(ElementBrowser, {
+    }, jsx(ElementBrowser, {
       mode: "inline",
       getItems: getItems(quickInsertState),
       emptyStateHandler: quickInsertState === null || quickInsertState === void 0 ? void 0 : quickInsertState.emptyStateHandler,
@@ -94,14 +98,16 @@ var InsertMenu = function InsertMenu(_ref) {
       key: quickInsertDropdownItems.length
     }));
   }, [getItems, onInsertItem, quickInsertDropdownItems.length, toggleVisiblity]);
-  return /*#__PURE__*/React.createElement(InsertMenuWrapper, {
-    itemCount: itemCount
-  }, /*#__PURE__*/React.createElement(WithPluginState, {
+  return jsx("div", {
+    css: function css(theme) {
+      return insertMenuWrapper(theme, itemCount);
+    }
+  }, jsx(WithPluginState, {
     plugins: {
       quickInsertState: pluginKey
     },
     render: render
-  }), itemCount > 0 && viewMoreItem && /*#__PURE__*/React.createElement(ViewMore, {
+  }), itemCount > 0 && viewMoreItem && jsx(ViewMore, {
     item: viewMoreItem
   }));
 };
@@ -118,9 +124,11 @@ var ViewMore = function ViewMore(_ref3) {
       item.action();
     }
   }, [item]);
-  return /*#__PURE__*/React.createElement(Item, {
+  return jsx(Item, {
     onClick: item.action,
-    elemBefore: /*#__PURE__*/React.createElement(ItemBefore, null, item.icon()),
+    elemBefore: jsx("div", {
+      css: itemBefore
+    }, item.icon()),
     "aria-describedby": item.title,
     "data-testid": "view-more-elements-item",
     onKeyPress: onKeyPress,
@@ -140,7 +148,7 @@ var getSvgIconForItem = function getSvgIconForItem(_ref4) {
     date: IconDate,
     status: IconStatus
   }[name];
-  return Icon ? /*#__PURE__*/React.createElement(Icon, {
+  return Icon ? jsx(Icon, {
     label: ""
   }) : undefined;
 };
@@ -157,11 +165,16 @@ var getInsertMenuHeight = function getInsertMenuHeight(_ref5) {
   return 560; // For showing 6 Elements.
 };
 
-var InsertMenuWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  width: 320px;\n  height: ", "px;\n  background-color: ", ";\n  border-radius: ", "px;\n  box-shadow: 0 0 0 1px ", ", 0 2px 1px ", ", 0 0 20px -6px ", ";\n"])), getInsertMenuHeight, themed({
-  light: N0,
-  dark: DN50
-})(), borderRadius(), N30A, N30A, N60A);
-var ItemBefore = styled.div(_templateObject2 || (_templateObject2 = _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: ", "px;\n"])), gridSize() / 2);
+var insertMenuWrapper = function insertMenuWrapper(theme, itemCount) {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  width: 320px;\n  height: ", "px;\n  background-color: ", ";\n  border-radius: ", "px;\n  box-shadow: 0 0 0 1px ", ", 0 2px 1px ", ", 0 0 20px -6px ", ";\n"])), getInsertMenuHeight({
+    itemCount: itemCount
+  }), themed({
+    light: N0,
+    dark: DN50
+  })(theme), borderRadius(), N30A, N30A, N60A);
+};
+
+var itemBefore = css(_templateObject2 || (_templateObject2 = _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: ", "px;\n"])), gridSize() / 2);
 var PADDING_LEFT = 14;
 var HEIGHT = 40;
 
@@ -174,6 +187,16 @@ var viewMoreItemTheme = _defineProperty({}, itemThemeNamespace, {
   height: HEIGHT
 });
 
-var FlexWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex: 1;\n  box-sizing: border-box;\n  overflow: hidden;\n"])));
+var flexWrapperStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex: 1;\n  box-sizing: border-box;\n  overflow: hidden;\n"])));
+
+var FlexWrapper = function FlexWrapper(props) {
+  var children = props.children,
+      divProps = _objectWithoutProperties(props, _excluded);
+
+  return jsx("div", _extends({
+    css: flexWrapperStyles
+  }, divProps), children);
+};
+
 var ElementBrowserWrapper = withOuterListeners(FlexWrapper);
 export default InsertMenu;

package/dist/esm/ui/ElementBrowser/components/CategoryList.js

@@ -13,8 +13,9 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-import React, { memo, useCallback } from 'react';
-import styled from 'styled-components';
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
+import React, { memo, useCallback, Fragment } from 'react';
 import { N800, B400, B50 } from '@atlaskit/theme/colors';
 import Button from '@atlaskit/button/custom-theme-button';
 import { withAnalyticsContext } from '@atlaskit/analytics-next';
@@ -32,8 +33,8 @@ function CategoryList(_ref) {
       focusedCategoryIndex = _React$useState2[0],
       setFocusedCategoryIndex = _React$useState2[1];
 
-  return /*#__PURE__*/React.createElement(React.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,
@@ -95,7 +96,9 @@ function CategoryListItem(_ref2) {
       })
     }, rest);
   }, [category.name, selectedCategory]);
-  return /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(Button, {
+  return jsx("div", {
+    css: buttonWrapper
+  }, jsx(Button, {
     appearance: "subtle",
     isSelected: selectedCategory === category.name,
     onClick: onClick,
@@ -106,7 +109,7 @@ function CategoryListItem(_ref2) {
   }, category.title));
 }
 
-var ButtonWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: ", "px;\n  margin: 4px 4px 4px 0;\n\n  @media (min-width: ", "px) {\n    :not(:last-child) {\n      margin-bottom: 0;\n    }\n  }\n"])), GRID_SIZE * 4, DEVICE_BREAKPOINT_NUMBERS.medium);
+var buttonWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: ", "px;\n  margin: 4px 4px 4px 0;\n\n  @media (min-width: ", "px) {\n    :not(:last-child) {\n      margin-bottom: 0;\n    }\n  }\n"])), GRID_SIZE * 4, DEVICE_BREAKPOINT_NUMBERS.medium);
 var MemoizedCategoryListWithAnalytics = /*#__PURE__*/memo(withAnalyticsContext({
   component: 'CategoryList'
 })(CategoryList));

package/dist/esm/ui/ElementBrowser/components/ElementBrowserLoader.js

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

package/dist/esm/ui/ElementBrowser/components/ElementList/ElementList.js

@@ -25,8 +25,8 @@ import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { withAnalyticsContext } from '@atlaskit/analytics-next';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, fireAnalyticsEvent } from '../../../../plugins/analytics';
 import IconFallback from '../../../../plugins/quick-insert/assets/fallback';
-import { ItemIcon } from '../../../../plugins/type-ahead/ui/TypeAheadListItem';
-import { Shortcut } from '../../../styles';
+import { itemIcon } from '../../../../plugins/type-ahead/ui/TypeAheadListItem';
+import { shortcutStyle } from '../../../styles';
 import { ELEMENT_ITEM_HEIGHT, ELEMENT_LIST_PADDING, GRID_SIZE, SCROLLBAR_THUMB_COLOR, SCROLLBAR_TRACK_COLOR, SCROLLBAR_WIDTH } from '../../constants';
 import useContainerWidth from '../../hooks/use-container-width';
 import useFocus from '../../hooks/use-focus';
@@ -253,8 +253,8 @@ var itemStyleOverrides = {
 var ElementBefore = /*#__PURE__*/memo(function (_ref5) {
   var icon = _ref5.icon,
       title = _ref5.title;
-  return jsx(ItemIcon, {
-    css: itemIconStyle
+  return jsx("div", {
+    css: [itemIcon, itemIconStyle]
   }, icon ? icon() : jsx(IconFallback, null));
 });
 var ItemContent = /*#__PURE__*/memo(function (_ref6) {
@@ -272,7 +272,9 @@ var ItemContent = /*#__PURE__*/memo(function (_ref6) {
     css: itemTitle
   }, title), jsx("div", {
     css: itemAfter
-  }, keyshortcut && jsx(Shortcut, null, keyshortcut))), description && jsx("p", {
+  }, keyshortcut && jsx("div", {
+    css: shortcutStyle
+  }, keyshortcut))), description && jsx("p", {
     css: itemDescription
   }, description)));
 });

package/dist/esm/ui/ElementBrowser/components/ElementSearch.js

@@ -1,15 +1,16 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
+/** @jsx jsx */
 import React, { memo } from 'react';
-import styled from 'styled-components';
+import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import Textfield from '@atlaskit/textfield';
 import SearchIcon from '@atlaskit/icon/glyph/search';
 import { withAnalyticsContext } from '@atlaskit/analytics-next';
 import { N200 } from '@atlaskit/theme/colors';
-import { Shortcut } from '../../styles';
+import { shortcutStyle } from '../../styles';
 import { GRID_SIZE, SEARCH_ITEM_HEIGHT_WIDTH } from '../constants';
 import useFocus from '../hooks/use-focus';
 import { Modes } from '../types';
@@ -33,24 +34,28 @@ function ElementSearch(_ref) {
 
   var onBlur = function onBlur(e) {};
 
-  return /*#__PURE__*/React.createElement(Wrapper, {
-    mode: mode
-  }, /*#__PURE__*/React.createElement(Textfield, {
+  return jsx("div", {
+    css: [wrapper, mode === Modes.inline && wrapperInline]
+  }, jsx(Textfield, {
     ref: ref,
     onChange: onChange,
     onClick: onClick,
     onFocus: onFocus,
     onBlur: onBlur,
-    elemBeforeInput: /*#__PURE__*/React.createElement(ElementBeforeInput, {
+    elemBeforeInput: jsx("div", {
+      css: elementBeforeInput,
       "data-testid": "element_search__element_before_input"
-    }, /*#__PURE__*/React.createElement(SearchIcon, {
+    }, jsx(SearchIcon, {
       size: "medium",
       label: "Advanced search",
       primaryColor: "inherit"
     })),
-    elemAfterInput: /*#__PURE__*/React.createElement(ElementAfterInput, {
+    elemAfterInput: jsx("div", {
+      css: elementAfterInput,
       "data-testid": "element_search__element_after_input"
-    }, /*#__PURE__*/React.createElement(StyledShortcut, null, "\u23CE ", formatMessage(elementAfterInputMessage))),
+    }, jsx("div", {
+      css: styledShortcut
+    }, "\u23CE ", formatMessage(elementAfterInputMessage))),
     placeholder: formatMessage(placeHolderMessage),
     "aria-label": "search",
     value: searchTerm
@@ -67,14 +72,11 @@ var placeHolderMessage = {
   defaultMessage: 'Search',
   description: 'Search field placeholder'
 };
-var StyledShortcut = styled(Shortcut)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: ", "px ", "px;\n  width: ", "px;\n"])), GRID_SIZE / 2, GRID_SIZE, GRID_SIZE * 6);
-var Wrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  & > [data-ds--text-field--container] {\n    height: ", "px;\n    border-radius: ", "px;\n    flex: ", ";\n    overflow: ", ";\n    & > [data-ds--text-field--input] {\n      margin-bottom: ", "px;\n      font-size: ", ";\n      padding: ", "px 6px ", "px 0;\n    }\n  }\n"])), function (props) {
-  return props.mode === Modes.full ? GRID_SIZE * 6 : GRID_SIZE * 5;
-}, GRID_SIZE, function (props) {
-  return props.mode === Modes.inline ? 'none' : '1 1 100%';
-}, Modes.inline ? 'revert' : 'visible', Modes.inline ? 3 : 2, Modes.inline ? relativeFontSizeToBase16(14) : relativeFontSizeToBase16(GRID_SIZE * 2), GRID_SIZE, GRID_SIZE);
-var ElementBeforeInput = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin: 1px 6px 0 8px;\n  color: ", ";\n\n  // Custom SearchIcon style\n  span,\n  svg {\n    height: 20px;\n    width: 20px;\n  }\n"])), N200);
-var ElementAfterInput = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin: 0 8px;\n  height: ", ";\n  text-align: center;\n"])), SEARCH_ITEM_HEIGHT_WIDTH);
+var styledShortcut = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  padding: ", "px ", "px;\n  width: ", "px;\n"])), shortcutStyle, GRID_SIZE / 2, GRID_SIZE, GRID_SIZE * 6);
+var wrapper = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  & > [data-ds--text-field--container] {\n    height: ", "px;\n    border-radius: ", "px;\n    flex: 1 1 100%;\n    overflow: visible;\n    & > [data-ds--text-field--input] {\n      margin-bottom: 3px;\n      font-size: ", ";\n      padding: ", "px 6px ", "px 0;\n    }\n  }\n"])), GRID_SIZE * 6, GRID_SIZE, relativeFontSizeToBase16(14), GRID_SIZE, GRID_SIZE);
+var wrapperInline = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  & > [data-ds--text-field--container] {\n    height: ", "px;\n    flex: none;\n    overflow: revert;\n  }\n"])), GRID_SIZE * 5);
+var elementBeforeInput = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin: 1px 6px 0 8px;\n  color: ", ";\n\n  // Custom SearchIcon style\n  span,\n  svg {\n    height: 20px;\n    width: 20px;\n  }\n"])), N200);
+var elementAfterInput = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin: 0 8px;\n  height: ", ";\n  text-align: center;\n"])), SEARCH_ITEM_HEIGHT_WIDTH);
 var MemoizedElementSearchWithAnalytics = /*#__PURE__*/memo(withAnalyticsContext({
   component: 'Searchbar'
 })(injectIntl(ElementSearch)));

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

@@ -8,10 +8,11 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 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 from 'react';
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { PureComponent } from 'react';
 import { Popup } from '@atlaskit/editor-common/ui';
-import { Container } from './styles';
+import { container } from './styles';
 export { handlePositionCalculatedWith, getOffsetParent, getNearestNonTextNode } from './utils';
 
 var FloatingToolbar = /*#__PURE__*/function (_PureComponent) {
@@ -29,7 +30,6 @@ var FloatingToolbar = /*#__PURE__*/function (_PureComponent) {
     key: "render",
     value: function render() {
       var _this$props = this.props,
-          containerRef = _this$props.containerRef,
           children = _this$props.children,
           target = _this$props.target,
           offset = _this$props.offset,
@@ -48,7 +48,7 @@ var FloatingToolbar = /*#__PURE__*/function (_PureComponent) {
         return null;
       }
 
-      return /*#__PURE__*/React.createElement(Popup, {
+      return jsx(Popup, {
         alignX: alignX,
         alignY: alignY,
         target: target,
@@ -59,10 +59,10 @@ var FloatingToolbar = /*#__PURE__*/function (_PureComponent) {
         fitWidth: fitWidth,
         fitHeight: fitHeight,
         onPositionCalculated: onPositionCalculated
-      }, /*#__PURE__*/React.createElement(Container, {
-        height: fitHeight,
-        className: className,
-        innerRef: containerRef
+      }, jsx("div", {
+        css: container(fitHeight),
+        "data-testid": "popup-container",
+        className: className
       }, children));
     }
   }]);

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

@@ -2,11 +2,10 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2;
 
-import styled, { css } from 'styled-components';
+import { css } from '@emotion/react';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N0 } from '@atlaskit/theme/colors';
 import { dropShadow } from '../styles';
-export var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-radius: ", "px;\n  ", "\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  padding: 4px 8px;\n  background-color: ", ";\n  ", ";\n"])), borderRadius(), dropShadow, N0, function (_ref) {
-  var height = _ref.height;
-  return height ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          height: ", "px;\n        "])), height) : '';
-});
+export var container = function container(height) {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-radius: ", "px;\n  ", "\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  padding: 4px 8px;\n  background-color: ", ";\n  ", ";\n"])), borderRadius(), dropShadow, N0, height ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        height: ", "px;\n      "])), height) : '');
+};

package/dist/esm/ui/LinkSearch/LinkSearchListItem.js

@@ -7,14 +7,15 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
 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 from 'react';
-import styled from 'styled-components'; // AFP-2532 TODO: Fix automatic suppressions below
+/** @jsx jsx */
+import React, { Fragment } from 'react';
+import { css, jsx } from '@emotion/react'; // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
 
 import { fontSizeSmall } from '@atlaskit/theme';
@@ -23,13 +24,12 @@ import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { getCorrectAltByIconUrl } from './listItemAlts';
 import { transformTimeStamp } from './transformTimeStamp';
 import { injectIntl } from 'react-intl-next';
-export var Container = styled.li(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: ", ";\n  padding: 8px 12px;\n  cursor: pointer;\n  display: flex;\n  margin-top: 0;\n"])), function (props) {
-  return props.selected ? N20 : 'transparent';
-});
-var NameWrapper = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  overflow: hidden;\n"])));
-export var Name = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  line-height: 20px;\n"])), N800);
-export var ContainerName = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  color: ", ";\n  line-height: 14px;\n  font-size: ", ";\n"])), N300, relativeFontSizeToBase16(fontSizeSmall()));
-var Icon = styled.span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  min-width: 16px;\n  margin-top: 3px;\n  margin-right: 12px;\n\n  img {\n    max-width: 16px;\n  }\n"])));
+export var container = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: transparent;\n  padding: 8px 12px;\n  cursor: pointer;\n  display: flex;\n  margin-top: 0;\n"])));
+export var containerSelected = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background-color: ", ";\n"])), N20);
+var nameWrapper = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  overflow: hidden;\n"])));
+export var nameStyle = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  color: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  line-height: 20px;\n"])), N800);
+export var containerName = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  color: ", ";\n  line-height: 14px;\n  font-size: ", ";\n"])), N300, relativeFontSizeToBase16(fontSizeSmall()));
+var iconStyle = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  min-width: 16px;\n  margin-top: 3px;\n  margin-right: 12px;\n\n  img {\n    max-width: 16px;\n  }\n"])));
 
 var LinkSearchListItem = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(LinkSearchListItem, _React$PureComponent);
@@ -90,11 +90,15 @@ var LinkSearchListItem = /*#__PURE__*/function (_React$PureComponent) {
           intl = _this$props5.intl;
 
       if (icon) {
-        return /*#__PURE__*/React.createElement(Icon, null, icon);
+        return jsx("span", {
+          css: iconStyle
+        }, icon);
       }
 
       if (iconUrl) {
-        return /*#__PURE__*/React.createElement(Icon, null, /*#__PURE__*/React.createElement("img", {
+        return jsx("span", {
+          css: iconStyle
+        }, jsx("img", {
           src: iconUrl,
           alt: getCorrectAltByIconUrl(iconUrl, intl)
         }));
@@ -109,7 +113,7 @@ var LinkSearchListItem = /*#__PURE__*/function (_React$PureComponent) {
           item = _this$props6.item,
           intl = _this$props6.intl;
       var date = transformTimeStamp(intl, item.lastViewedDate, item.lastUpdatedDate);
-      return date && /*#__PURE__*/React.createElement(React.Fragment, null, "\xA0 \u2022", /*#__PURE__*/React.createElement("span", {
+      return date && jsx(Fragment, null, "\xA0 \u2022", jsx("span", {
         className: "link-search-timestamp",
         "data-test-id": "link-search-timestamp"
       }, "\xA0 ", date.pageAction, " ", date.dateString, " ", date.timeSince || ''));
@@ -122,17 +126,24 @@ var LinkSearchListItem = /*#__PURE__*/function (_React$PureComponent) {
           selected = _this$props7.selected,
           id = _this$props7.id,
           role = _this$props7.role;
-      return /*#__PURE__*/React.createElement(Container, {
+      return jsx("li", {
+        css: [container, selected && containerSelected],
         role: role,
         id: id,
         "aria-selected": selected,
         "data-testid": "link-search-list-item",
-        selected: selected,
         onMouseMove: this.handleMouseMove,
         onMouseEnter: this.handleMouseEnter,
         onMouseLeave: this.handleMouseLeave,
         onClick: this.handleSelect
-      }, this.renderIcon(), /*#__PURE__*/React.createElement(NameWrapper, null, /*#__PURE__*/React.createElement(Name, null, item.name), /*#__PURE__*/React.createElement(ContainerName, null, item.container, this.renderTimeStamp())));
+      }, this.renderIcon(), jsx("span", {
+        css: nameWrapper
+      }, jsx("div", {
+        css: nameStyle
+      }, item.name), jsx("div", {
+        "data-testid": "link-search-list-item-container",
+        css: containerName
+      }, item.container, this.renderTimeStamp())));
     }
   }]);
 

package/dist/esm/ui/LinkSearch/ToolbarComponents.js

@@ -2,13 +2,10 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 
 var _templateObject, _templateObject2, _templateObject3;
 
-import styled, { css } from 'styled-components';
+import { css } from '@emotion/react';
 export var RECENT_SEARCH_WIDTH_IN_PX = 420;
 export var RECENT_SEARCH_WIDTH_WITHOUT_ITEMS_IN_PX = 360;
 export var RECENT_SEARCH_HEIGHT_IN_PX = 360;
-export var InputWrapper = "\n  display: flex;\n  line-height: 0;\n  padding: 5px 0;\n  align-items: center;\n";
-export var UrlInputWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n"])), InputWrapper);
-export var Container = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: ", "px;\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n  padding: 0;\n\n  ", ";\n  line-height: initial;\n"])), RECENT_SEARCH_WIDTH_IN_PX, function (_ref) {
-  var provider = _ref.provider;
-  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      width: ", "px;\n    "])), provider ? RECENT_SEARCH_WIDTH_IN_PX : RECENT_SEARCH_WIDTH_WITHOUT_ITEMS_IN_PX);
-});
+export var inputWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  line-height: 0;\n  padding: 5px 0;\n  align-items: center;\n"])));
+export var container = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  overflow: auto;\n  padding: 0;\n\n  width: ", "px;\n  line-height: initial;\n"])), RECENT_SEARCH_WIDTH_WITHOUT_ITEMS_IN_PX);
+export var containerWithProvider = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: ", "px;\n"])), RECENT_SEARCH_WIDTH_IN_PX);

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

@@ -11,9 +11,10 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 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 from 'react';
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { PureComponent } from 'react';
-import { Input } from './styles';
+import { panelTextInput, panelTextInputWithCustomWidth } from './styles';
 import { browser } from '@atlaskit/editor-common/utils';
 var KeyZCode = 90;
 var KeyYCode = 89;
@@ -137,7 +138,8 @@ var PanelTextInput = /*#__PURE__*/function (_PureComponent) {
           ariaAutoComplete = _this$props2.ariaAutoComplete,
           role = _this$props2.role;
       var value = this.state.value;
-      return /*#__PURE__*/React.createElement(Input, {
+      return jsx("input", {
+        css: [panelTextInput, width !== undefined && panelTextInputWithCustomWidth(width)],
         role: role,
         "aria-autocomplete": ariaAutoComplete ? 'list' : undefined,
         "aria-expanded": ariaExpanded,
@@ -152,8 +154,7 @@ var PanelTextInput = /*#__PURE__*/function (_PureComponent) {
         onKeyDown: this.handleKeydown,
         onMouseDown: this.onMouseDown,
         onBlur: this.onBlur,
-        innerRef: this.handleRef,
-        width: width,
+        ref: this.handleRef,
         maxLength: maxLength,
         "aria-label": ariaLabel
       });