@atlaskit/editor-core 163.0.0 → 164.0.2

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

@@ -9,6 +9,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
@@ -17,7 +21,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react2 = require("@emotion/react");
 
 var _item = _interopRequireWildcard(require("@atlaskit/item"));
 
@@ -43,6 +47,8 @@ var _ElementBrowserLoader = _interopRequireDefault(require("./components/Element
 
 var _constants = require("./constants");
 
+var _excluded = ["children"];
+
 var _templateObject, _templateObject2, _templateObject3;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -107,10 +113,10 @@ var InsertMenu = function InsertMenu(_ref) {
   }, [quickInsertDropdownItems]);
   var render = (0, _react.useCallback)(function (_ref2) {
     var quickInsertState = _ref2.quickInsertState;
-    return /*#__PURE__*/_react.default.createElement(ElementBrowserWrapper, {
+    return (0, _react2.jsx)(ElementBrowserWrapper, {
       handleClickOutside: toggleVisiblity,
       handleEscapeKeydown: toggleVisiblity
-    }, /*#__PURE__*/_react.default.createElement(_ElementBrowserLoader.default, {
+    }, (0, _react2.jsx)(_ElementBrowserLoader.default, {
       mode: "inline",
       getItems: getItems(quickInsertState),
       emptyStateHandler: quickInsertState === null || quickInsertState === void 0 ? void 0 : quickInsertState.emptyStateHandler,
@@ -121,14 +127,16 @@ var InsertMenu = function InsertMenu(_ref) {
       key: quickInsertDropdownItems.length
     }));
   }, [getItems, onInsertItem, quickInsertDropdownItems.length, toggleVisiblity]);
-  return /*#__PURE__*/_react.default.createElement(InsertMenuWrapper, {
-    itemCount: itemCount
-  }, /*#__PURE__*/_react.default.createElement(_WithPluginState.default, {
+  return (0, _react2.jsx)("div", {
+    css: function css(theme) {
+      return insertMenuWrapper(theme, itemCount);
+    }
+  }, (0, _react2.jsx)(_WithPluginState.default, {
     plugins: {
       quickInsertState: _pluginKey.pluginKey
     },
     render: render
-  }), itemCount > 0 && viewMoreItem && /*#__PURE__*/_react.default.createElement(ViewMore, {
+  }), itemCount > 0 && viewMoreItem && (0, _react2.jsx)(ViewMore, {
     item: viewMoreItem
   }));
 };
@@ -145,9 +153,11 @@ var ViewMore = function ViewMore(_ref3) {
       item.action();
     }
   }, [item]);
-  return /*#__PURE__*/_react.default.createElement(_item.default, {
+  return (0, _react2.jsx)(_item.default, {
     onClick: item.action,
-    elemBefore: /*#__PURE__*/_react.default.createElement(ItemBefore, null, item.icon()),
+    elemBefore: (0, _react2.jsx)("div", {
+      css: itemBefore
+    }, item.icon()),
     "aria-describedby": item.title,
     "data-testid": "view-more-elements-item",
     onKeyPress: onKeyPress,
@@ -167,7 +177,7 @@ var getSvgIconForItem = function getSvgIconForItem(_ref4) {
     date: _assets.IconDate,
     status: _assets.IconStatus
   }[name];
-  return Icon ? /*#__PURE__*/_react.default.createElement(Icon, {
+  return Icon ? (0, _react2.jsx)(Icon, {
     label: ""
   }) : undefined;
 };
@@ -184,13 +194,16 @@ var getInsertMenuHeight = function getInsertMenuHeight(_ref5) {
   return 560; // For showing 6 Elements.
 };
 
-var InsertMenuWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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, (0, _components.themed)({
-  light: _colors.N0,
-  dark: _colors.DN50
-})(), (0, _theme.borderRadius)(), _colors.N30A, _colors.N30A, _colors.N60A);
-
-var ItemBefore = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _theme.gridSize)() / 2);
+var insertMenuWrapper = function insertMenuWrapper(theme, itemCount) {
+  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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
+  }), (0, _components.themed)({
+    light: _colors.N0,
+    dark: _colors.DN50
+  })(theme), (0, _theme.borderRadius)(), _colors.N30A, _colors.N30A, _colors.N60A);
+};
 
+var itemBefore = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _theme.gridSize)() / 2);
 var PADDING_LEFT = 14;
 var HEIGHT = 40;
 var viewMoreItemTheme = (0, _defineProperty2.default)({}, _item.itemThemeNamespace, {
@@ -201,8 +214,15 @@ var viewMoreItemTheme = (0, _defineProperty2.default)({}, _item.itemThemeNamespa
   },
   height: HEIGHT
 });
-
-var FlexWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex: 1;\n  box-sizing: border-box;\n  overflow: hidden;\n"])));
+var flexWrapperStyles = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\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 = (0, _objectWithoutProperties2.default)(props, _excluded);
+  return (0, _react2.jsx)("div", (0, _extends2.default)({
+    css: flexWrapperStyles
+  }, divProps), children);
+};
 
 var ElementBrowserWrapper = (0, _withOuterListeners.default)(FlexWrapper);
 var _default = InsertMenu;

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

@@ -19,9 +19,9 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("@emotion/react");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react2 = _interopRequireWildcard(require("react"));
 
 var _colors = require("@atlaskit/theme/colors");
 
@@ -53,13 +53,13 @@ function CategoryList(_ref) {
       categories = _ref$categories === void 0 ? [] : _ref$categories,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
-  var _React$useState = _react.default.useState(null),
+  var _React$useState = _react2.default.useState(null),
       _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
       focusedCategoryIndex = _React$useState2[0],
       setFocusedCategoryIndex = _React$useState2[1];
 
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, categories.map(function (category, index) {
-    return /*#__PURE__*/_react.default.createElement(CategoryListItem, (0, _extends2.default)({
+  return (0, _react.jsx)(_react2.Fragment, null, categories.map(function (category, index) {
+    return (0, _react.jsx)(CategoryListItem, (0, _extends2.default)({
       key: category.title,
       index: index,
       category: category,
@@ -78,7 +78,7 @@ function CategoryListItem(_ref2) {
       setFocusedCategoryIndex = _ref2.setFocusedCategoryIndex,
       createAnalyticsEvent = _ref2.createAnalyticsEvent;
   var ref = (0, _useFocus.default)(focus);
-  var onClick = (0, _react.useCallback)(function () {
+  var onClick = (0, _react2.useCallback)(function () {
     onSelectCategory(category);
     /**
      * When user double clicks on same category, focus on first item.
@@ -99,12 +99,12 @@ function CategoryListItem(_ref2) {
       }
     });
   }, [onSelectCategory, category, index, selectedCategory, setFocusedCategoryIndex, createAnalyticsEvent]);
-  var onFocus = (0, _react.useCallback)(function () {
+  var onFocus = (0, _react2.useCallback)(function () {
     if (!focus) {
       setFocusedCategoryIndex(index);
     }
   }, [focus, index, setFocusedCategoryIndex]);
-  var getTheme = (0, _react.useCallback)(function (currentTheme, themeProps) {
+  var getTheme = (0, _react2.useCallback)(function (currentTheme, themeProps) {
     var _currentTheme = currentTheme(themeProps),
         buttonStyles = _currentTheme.buttonStyles,
         rest = (0, _objectWithoutProperties2.default)(_currentTheme, _excluded2);
@@ -121,7 +121,9 @@ function CategoryListItem(_ref2) {
       })
     }, rest);
   }, [category.name, selectedCategory]);
-  return /*#__PURE__*/_react.default.createElement(ButtonWrapper, null, /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
+  return (0, _react.jsx)("div", {
+    css: buttonWrapper
+  }, (0, _react.jsx)(_customThemeButton.default, {
     appearance: "subtle",
     isSelected: selectedCategory === category.name,
     onClick: onClick,
@@ -132,9 +134,8 @@ function CategoryListItem(_ref2) {
   }, category.title));
 }
 
-var ButtonWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), _constants.GRID_SIZE * 4, _constants.DEVICE_BREAKPOINT_NUMBERS.medium);
-
-var MemoizedCategoryListWithAnalytics = /*#__PURE__*/(0, _react.memo)((0, _analyticsNext.withAnalyticsContext)({
+var buttonWrapper = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), _constants.GRID_SIZE * 4, _constants.DEVICE_BREAKPOINT_NUMBERS.medium);
+var MemoizedCategoryListWithAnalytics = /*#__PURE__*/(0, _react2.memo)((0, _analyticsNext.withAnalyticsContext)({
   component: 'CategoryList'
 })(CategoryList));
 var _default = MemoizedCategoryListWithAnalytics;

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

@@ -11,11 +11,11 @@ exports.default = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = require("@emotion/react");
 
-var _reactLoadable = _interopRequireDefault(require("react-loadable"));
+var _react2 = _interopRequireDefault(require("react"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _reactLoadable = _interopRequireDefault(require("react-loadable"));
 
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 
@@ -25,8 +25,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var SpinnerContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n"])));
-
+var spinnerContainer = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n"])));
 var ElementBrowserLoader = (0, _reactLoadable.default)({
   loader: function loader() {
     return Promise.resolve().then(function () {
@@ -36,7 +35,9 @@ var ElementBrowserLoader = (0, _reactLoadable.default)({
     });
   },
   loading: function loading() {
-    return /*#__PURE__*/_react.default.createElement(SpinnerContainer, null, /*#__PURE__*/_react.default.createElement(_spinner.default, {
+    return (0, _react.jsx)("div", {
+      css: spinnerContainer
+    }, (0, _react.jsx)(_spinner.default, {
       size: "medium"
     }));
   }

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

@@ -289,8 +289,8 @@ var itemStyleOverrides = {
 var ElementBefore = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
   var icon = _ref5.icon,
       title = _ref5.title;
-  return (0, _react2.jsx)(_TypeAheadListItem.ItemIcon, {
-    css: itemIconStyle
+  return (0, _react2.jsx)("div", {
+    css: [_TypeAheadListItem.itemIcon, itemIconStyle]
   }, icon ? icon() : (0, _react2.jsx)(_fallback.default, null));
 });
 var ItemContent = /*#__PURE__*/(0, _react.memo)(function (_ref6) {
@@ -308,7 +308,9 @@ var ItemContent = /*#__PURE__*/(0, _react.memo)(function (_ref6) {
     css: itemTitle
   }, title), (0, _react2.jsx)("div", {
     css: itemAfter
-  }, keyshortcut && (0, _react2.jsx)(_styles.Shortcut, null, keyshortcut))), description && (0, _react2.jsx)("p", {
+  }, keyshortcut && (0, _react2.jsx)("div", {
+    css: _styles.shortcutStyle
+  }, keyshortcut))), description && (0, _react2.jsx)("p", {
     css: itemDescription
   }, description)));
 });

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

@@ -13,7 +13,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react2 = require("@emotion/react");
 
 var _reactIntlNext = require("react-intl-next");
 
@@ -35,7 +35,7 @@ var _types = require("../types");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -59,24 +59,28 @@ function ElementSearch(_ref) {
 
   var onBlur = function onBlur(e) {};
 
-  return /*#__PURE__*/_react.default.createElement(Wrapper, {
-    mode: mode
-  }, /*#__PURE__*/_react.default.createElement(_textfield.default, {
+  return (0, _react2.jsx)("div", {
+    css: [wrapper, mode === _types.Modes.inline && wrapperInline]
+  }, (0, _react2.jsx)(_textfield.default, {
     ref: ref,
     onChange: onChange,
     onClick: onClick,
     onFocus: onFocus,
     onBlur: onBlur,
-    elemBeforeInput: /*#__PURE__*/_react.default.createElement(ElementBeforeInput, {
+    elemBeforeInput: (0, _react2.jsx)("div", {
+      css: elementBeforeInput,
       "data-testid": "element_search__element_before_input"
-    }, /*#__PURE__*/_react.default.createElement(_search.default, {
+    }, (0, _react2.jsx)(_search.default, {
       size: "medium",
       label: "Advanced search",
       primaryColor: "inherit"
     })),
-    elemAfterInput: /*#__PURE__*/_react.default.createElement(ElementAfterInput, {
+    elemAfterInput: (0, _react2.jsx)("div", {
+      css: elementAfterInput,
       "data-testid": "element_search__element_after_input"
-    }, /*#__PURE__*/_react.default.createElement(StyledShortcut, null, "\u23CE ", formatMessage(elementAfterInputMessage))),
+    }, (0, _react2.jsx)("div", {
+      css: styledShortcut
+    }, "\u23CE ", formatMessage(elementAfterInputMessage))),
     placeholder: formatMessage(placeHolderMessage),
     "aria-label": "search",
     value: searchTerm
@@ -93,18 +97,11 @@ var placeHolderMessage = {
   defaultMessage: 'Search',
   description: 'Search field placeholder'
 };
-var StyledShortcut = (0, _styledComponents.default)(_styles.Shortcut)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", "px ", "px;\n  width: ", "px;\n"])), _constants.GRID_SIZE / 2, _constants.GRID_SIZE, _constants.GRID_SIZE * 6);
-
-var Wrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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 === _types.Modes.full ? _constants.GRID_SIZE * 6 : _constants.GRID_SIZE * 5;
-}, _constants.GRID_SIZE, function (props) {
-  return props.mode === _types.Modes.inline ? 'none' : '1 1 100%';
-}, _types.Modes.inline ? 'revert' : 'visible', _types.Modes.inline ? 3 : 2, _types.Modes.inline ? (0, _editorSharedStyles.relativeFontSizeToBase16)(14) : (0, _editorSharedStyles.relativeFontSizeToBase16)(_constants.GRID_SIZE * 2), _constants.GRID_SIZE, _constants.GRID_SIZE);
-
-var ElementBeforeInput = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\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"])), _colors.N200);
-
-var ElementAfterInput = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 8px;\n  height: ", ";\n  text-align: center;\n"])), _constants.SEARCH_ITEM_HEIGHT_WIDTH);
-
+var styledShortcut = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  padding: ", "px ", "px;\n  width: ", "px;\n"])), _styles.shortcutStyle, _constants.GRID_SIZE / 2, _constants.GRID_SIZE, _constants.GRID_SIZE * 6);
+var wrapper = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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"])), _constants.GRID_SIZE * 6, _constants.GRID_SIZE, (0, _editorSharedStyles.relativeFontSizeToBase16)(14), _constants.GRID_SIZE, _constants.GRID_SIZE);
+var wrapperInline = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  & > [data-ds--text-field--container] {\n    height: ", "px;\n    flex: none;\n    overflow: revert;\n  }\n"])), _constants.GRID_SIZE * 5);
+var elementBeforeInput = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\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"])), _colors.N200);
+var elementAfterInput = (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 8px;\n  height: ", ";\n  text-align: center;\n"])), _constants.SEARCH_ITEM_HEIGHT_WIDTH);
 var MemoizedElementSearchWithAnalytics = /*#__PURE__*/(0, _react.memo)((0, _analyticsNext.withAnalyticsContext)({
   component: 'Searchbar'
 })((0, _reactIntlNext.injectIntl)(ElementSearch)));

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

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -37,7 +35,9 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("@emotion/react");
+
+var _react2 = require("react");
 
 var _ui = require("@atlaskit/editor-common/ui");
 
@@ -45,10 +45,6 @@ var _styles = require("./styles");
 
 var _utils = require("./utils");
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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; } }
@@ -67,7 +63,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,
@@ -86,7 +81,7 @@ var FloatingToolbar = /*#__PURE__*/function (_PureComponent) {
         return null;
       }
 
-      return /*#__PURE__*/_react.default.createElement(_ui.Popup, {
+      return (0, _react.jsx)(_ui.Popup, {
         alignX: alignX,
         alignY: alignY,
         target: target,
@@ -97,14 +92,14 @@ var FloatingToolbar = /*#__PURE__*/function (_PureComponent) {
         fitWidth: fitWidth,
         fitHeight: fitHeight,
         onPositionCalculated: onPositionCalculated
-      }, /*#__PURE__*/_react.default.createElement(_styles.Container, {
-        height: fitHeight,
-        className: className,
-        innerRef: containerRef
+      }, (0, _react.jsx)("div", {
+        css: (0, _styles.container)(fitHeight),
+        "data-testid": "popup-container",
+        className: className
       }, children));
     }
   }]);
   return FloatingToolbar;
-}(_react.PureComponent);
+}(_react2.PureComponent);
 
 exports.default = FloatingToolbar;

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

@@ -2,16 +2,14 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Container = void 0;
+exports.container = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _react = require("@emotion/react");
 
 var _constants = require("@atlaskit/theme/constants");
 
@@ -21,13 +19,8 @@ var _styles = require("../styles");
 
 var _templateObject, _templateObject2;
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _constants.borderRadius)(), _styles.dropShadow, _colors.N0, function (_ref) {
-  var height = _ref.height;
-  return height ? (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n          height: ", "px;\n        "])), height) : '';
-});
+var container = function container(height) {
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _constants.borderRadius)(), _styles.dropShadow, _colors.N0, height ? (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        height: ", "px;\n      "])), height) : '');
+};
 
-exports.Container = Container;
+exports.container = container;

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

@@ -2,10 +2,12 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Name = exports.ContainerName = exports.Container = void 0;
+exports.nameStyle = exports.default = exports.containerSelected = exports.containerName = exports.container = void 0;
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
@@ -23,9 +25,9 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react2 = require("@emotion/react");
 
 var _theme = require("@atlaskit/theme");
 
@@ -39,29 +41,26 @@ var _transformTimeStamp = require("./transformTimeStamp");
 
 var _reactIntlNext = require("react-intl-next");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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; } }
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
-var Container = _styledComponents.default.li(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  padding: 8px 12px;\n  cursor: pointer;\n  display: flex;\n  margin-top: 0;\n"])), function (props) {
-  return props.selected ? _colors.N20 : 'transparent';
-});
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-exports.Container = Container;
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var NameWrapper = _styledComponents.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  overflow: hidden;\n"])));
-
-var Name = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  line-height: 20px;\n"])), _colors.N800);
-
-exports.Name = Name;
-
-var ContainerName = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  line-height: 14px;\n  font-size: ", ";\n"])), _colors.N300, (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _theme.fontSizeSmall)()));
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 
-exports.ContainerName = ContainerName;
+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; } }
 
-var Icon = _styledComponents.default.span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  min-width: 16px;\n  margin-top: 3px;\n  margin-right: 12px;\n\n  img {\n    max-width: 16px;\n  }\n"])));
+var container = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: transparent;\n  padding: 8px 12px;\n  cursor: pointer;\n  display: flex;\n  margin-top: 0;\n"])));
+exports.container = container;
+var containerSelected = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n"])), _colors.N20);
+exports.containerSelected = containerSelected;
+var nameWrapper = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  overflow: hidden;\n"])));
+var nameStyle = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  line-height: 20px;\n"])), _colors.N800);
+exports.nameStyle = nameStyle;
+var containerName = (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  line-height: 14px;\n  font-size: ", ";\n"])), _colors.N300, (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _theme.fontSizeSmall)()));
+exports.containerName = containerName;
+var iconStyle = (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\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) {
   (0, _inherits2.default)(LinkSearchListItem, _React$PureComponent);
@@ -117,11 +116,15 @@ var LinkSearchListItem = /*#__PURE__*/function (_React$PureComponent) {
           intl = _this$props5.intl;
 
       if (icon) {
-        return /*#__PURE__*/_react.default.createElement(Icon, null, icon);
+        return (0, _react2.jsx)("span", {
+          css: iconStyle
+        }, icon);
       }
 
       if (iconUrl) {
-        return /*#__PURE__*/_react.default.createElement(Icon, null, /*#__PURE__*/_react.default.createElement("img", {
+        return (0, _react2.jsx)("span", {
+          css: iconStyle
+        }, (0, _react2.jsx)("img", {
           src: iconUrl,
           alt: (0, _listItemAlts.getCorrectAltByIconUrl)(iconUrl, intl)
         }));
@@ -136,7 +139,7 @@ var LinkSearchListItem = /*#__PURE__*/function (_React$PureComponent) {
           item = _this$props6.item,
           intl = _this$props6.intl;
       var date = (0, _transformTimeStamp.transformTimeStamp)(intl, item.lastViewedDate, item.lastUpdatedDate);
-      return date && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "\xA0 \u2022", /*#__PURE__*/_react.default.createElement("span", {
+      return date && (0, _react2.jsx)(_react.Fragment, null, "\xA0 \u2022", (0, _react2.jsx)("span", {
         className: "link-search-timestamp",
         "data-test-id": "link-search-timestamp"
       }, "\xA0 ", date.pageAction, " ", date.dateString, " ", date.timeSince || ''));
@@ -149,17 +152,24 @@ var LinkSearchListItem = /*#__PURE__*/function (_React$PureComponent) {
           selected = _this$props7.selected,
           id = _this$props7.id,
           role = _this$props7.role;
-      return /*#__PURE__*/_react.default.createElement(Container, {
+      return (0, _react2.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.default.createElement(NameWrapper, null, /*#__PURE__*/_react.default.createElement(Name, null, item.name), /*#__PURE__*/_react.default.createElement(ContainerName, null, item.container, this.renderTimeStamp())));
+      }, this.renderIcon(), (0, _react2.jsx)("span", {
+        css: nameWrapper
+      }, (0, _react2.jsx)("div", {
+        css: nameStyle
+      }, item.name), (0, _react2.jsx)("div", {
+        "data-testid": "link-search-list-item-container",
+        css: containerName
+      }, item.container, this.renderTimeStamp())));
     }
   }]);
   return LinkSearchListItem;

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

@@ -2,39 +2,26 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.UrlInputWrapper = exports.RECENT_SEARCH_WIDTH_WITHOUT_ITEMS_IN_PX = exports.RECENT_SEARCH_WIDTH_IN_PX = exports.RECENT_SEARCH_HEIGHT_IN_PX = exports.InputWrapper = exports.Container = void 0;
+exports.inputWrapper = exports.containerWithProvider = exports.container = exports.RECENT_SEARCH_WIDTH_WITHOUT_ITEMS_IN_PX = exports.RECENT_SEARCH_WIDTH_IN_PX = exports.RECENT_SEARCH_HEIGHT_IN_PX = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _react = require("@emotion/react");
 
 var _templateObject, _templateObject2, _templateObject3;
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 var RECENT_SEARCH_WIDTH_IN_PX = 420;
 exports.RECENT_SEARCH_WIDTH_IN_PX = RECENT_SEARCH_WIDTH_IN_PX;
 var RECENT_SEARCH_WIDTH_WITHOUT_ITEMS_IN_PX = 360;
 exports.RECENT_SEARCH_WIDTH_WITHOUT_ITEMS_IN_PX = RECENT_SEARCH_WIDTH_WITHOUT_ITEMS_IN_PX;
 var RECENT_SEARCH_HEIGHT_IN_PX = 360;
 exports.RECENT_SEARCH_HEIGHT_IN_PX = RECENT_SEARCH_HEIGHT_IN_PX;
-var InputWrapper = "\n  display: flex;\n  line-height: 0;\n  padding: 5px 0;\n  align-items: center;\n";
-exports.InputWrapper = InputWrapper;
-
-var UrlInputWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), InputWrapper);
-
-exports.UrlInputWrapper = UrlInputWrapper;
-
-var Container = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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 (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n      width: ", "px;\n    "])), provider ? RECENT_SEARCH_WIDTH_IN_PX : RECENT_SEARCH_WIDTH_WITHOUT_ITEMS_IN_PX);
-});
-
-exports.Container = Container;
+var inputWrapper = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  line-height: 0;\n  padding: 5px 0;\n  align-items: center;\n"])));
+exports.inputWrapper = inputWrapper;
+var container = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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);
+exports.container = container;
+var containerWithProvider = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  width: ", "px;\n"])), RECENT_SEARCH_WIDTH_IN_PX);
+exports.containerWithProvider = containerWithProvider;